/**
 * SeekMake Dashboard - Vanilla CSS (WordPress-hardened)
 * All critical properties use !important to override WP admin styles
 * Version: 1.2.2
 */

/* ===== CSS Variables ===== */
.sm-dashboard {
    --sm-blue: #3b82f6;
    --sm-blue-dark: #2563eb;
    --sm-gradient-end: #7c3aed;
    --sm-green: #16a34a;
    --sm-green-whatsapp: #22c55e;
    --sm-purple: #8b5cf6;
    --sm-teal: #14b8a6;
    --sm-slate: #526078;
    --sm-red: #ef4444;
    --sm-bg: #f8f9fb;
    --sm-card: #ffffff;
    --sm-border: #e2e8f0;
    --sm-text: #0f172a;
    --sm-text-muted: #64748b;
    --sm-radius: 0.75rem;
    --sm-radius-lg: 1rem;
}

/* ===== Hard Reset for WP Admin ===== */
.sm-dashboard,
.sm-dashboard *,
.sm-dashboard *::before,
.sm-dashboard *::after {
    box-sizing: border-box !important;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-transform: none !important;
    font-style: normal !important;
    outline: none;
    text-indent: 0 !important;
}

.sm-dashboard {
    color: var(--sm-text) !important;
    background: var(--sm-bg) !important;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
}

/* Reset ALL heading styles that WP admin forces */
.sm-dashboard h1,
.sm-dashboard h2,
.sm-dashboard h3,
.sm-dashboard h4,
.sm-dashboard h5,
.sm-dashboard h6 {
    font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--sm-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    text-rendering: optimizeLegibility !important;
    background: none !important;
    border: none !important;
}

/* Reset ALL paragraph styles */
.sm-dashboard p {
    font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--sm-text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Reset ALL link styles */
.sm-dashboard a {
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: none !important;
    border: none !important;
    transition: all 0.15s ease !important;
}
.sm-dashboard a:hover,
.sm-dashboard a:focus,
.sm-dashboard a:active,
.sm-dashboard a:visited {
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Reset ALL list styles */
.sm-dashboard ul,
.sm-dashboard ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sm-dashboard li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Reset images */
.sm-dashboard img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
}

/* Reset SVG */
.sm-dashboard svg {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    fill: currentColor;
}

/* Reset strong/b */
.sm-dashboard strong,
.sm-dashboard b {
    font-weight: 600 !important;
    color: var(--sm-text) !important;
}

/* ===== Header ===== */
.sm-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    border-bottom: 1px solid var(--sm-border) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sm-header-inner {
    max-width: 72rem !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.75rem 1.5rem !important;
}

.sm-logo-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
}

.sm-logo-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 0.5rem !important;
    background: linear-gradient(135deg, var(--sm-blue), var(--sm-gradient-end)) !important;
    color: white !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.sm-logo-text {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--sm-text) !important;
}

.sm-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* ===== Buttons ===== */
.sm-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    border: none !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.sm-btn-outline {
    background: var(--sm-card) !important;
    color: var(--sm-text) !important;
    border: 1px solid var(--sm-border) !important;
}
.sm-btn-outline:hover { background: #f1f5f9 !important; }

.sm-btn-danger {
    background: var(--sm-red) !important;
    color: white !important;
}
.sm-btn-danger:hover { background: #dc2626 !important; }

.sm-btn-primary {
    background: var(--sm-blue) !important;
    color: white !important;
}
.sm-btn-primary:hover { opacity: 0.9 !important; }

.sm-btn-primary-gradient {
    background: linear-gradient(to right, var(--sm-blue), var(--sm-gradient-end)) !important;
    color: white !important;
}
.sm-btn-primary-gradient:hover { opacity: 0.9 !important; }

.sm-btn-white {
    background: white !important;
    color: var(--sm-blue) !important;
    font-weight: 600 !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
}
.sm-btn-white:hover { background: rgba(255, 255, 255, 0.9) !important; }

.sm-btn-secondary {
    background: transparent !important;
    color: var(--sm-blue) !important;
    border: 1px solid var(--sm-blue) !important;
}
.sm-btn-secondary:hover { background: rgba(59, 130, 246, 0.1) !important; }

.sm-btn-lg {
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

.sm-btn-full {
    width: 100% !important;
    justify-content: center !important;
}

/* High-specificity button overrides for WP admin anchors */
.sm-dashboard a.sm-btn-primary,
.sm-dashboard a.sm-btn-primary:visited,
.sm-dashboard a.sm-btn-primary:hover,
.sm-dashboard a.sm-btn-primary:active,
.sm-dashboard a.sm-btn-primary:focus {
    background: var(--sm-blue) !important;
    color: white !important;
    text-decoration: none !important;
}

.sm-dashboard a.sm-btn-primary-gradient,
.sm-dashboard a.sm-btn-primary-gradient:visited,
.sm-dashboard a.sm-btn-primary-gradient:hover,
.sm-dashboard a.sm-btn-primary-gradient:active,
.sm-dashboard a.sm-btn-primary-gradient:focus {
    background: linear-gradient(to right, var(--sm-blue), var(--sm-gradient-end)) !important;
    color: white !important;
    text-decoration: none !important;
}

.sm-dashboard a.sm-btn-danger,
.sm-dashboard a.sm-btn-danger:visited,
.sm-dashboard a.sm-btn-danger:hover,
.sm-dashboard a.sm-btn-danger:active,
.sm-dashboard a.sm-btn-danger:focus {
    background: var(--sm-red) !important;
    color: white !important;
    text-decoration: none !important;
}

.sm-dashboard a.sm-btn-outline,
.sm-dashboard a.sm-btn-outline:visited,
.sm-dashboard a.sm-btn-outline:hover,
.sm-dashboard a.sm-btn-outline:active,
.sm-dashboard a.sm-btn-outline:focus {
    background: var(--sm-card) !important;
    color: var(--sm-text) !important;
    border: 1px solid var(--sm-border) !important;
    text-decoration: none !important;
}

.sm-dashboard a.sm-btn-secondary,
.sm-dashboard a.sm-btn-secondary:visited,
.sm-dashboard a.sm-btn-secondary:active,
.sm-dashboard a.sm-btn-secondary:focus {
    background: transparent !important;
    color: var(--sm-blue) !important;
    border: 1px solid var(--sm-blue) !important;
    text-decoration: none !important;
}
.sm-dashboard a.sm-btn-secondary:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--sm-blue) !important;
}

.sm-dashboard a.sm-btn-white,
.sm-dashboard a.sm-btn-white:visited,
.sm-dashboard a.sm-btn-white:hover,
.sm-dashboard a.sm-btn-white:active,
.sm-dashboard a.sm-btn-white:focus {
    background: white !important;
    color: var(--sm-blue) !important;
    text-decoration: none !important;
}
.sm-main {
    max-width: 72rem !important;
    margin: 0 auto !important;
    padding: 2.5rem 1.5rem !important;
}

/* ===== Hero Section ===== */
.sm-hero {
    text-align: center !important;
    margin-bottom: 3rem !important;
}

.sm-hero-checkmark-outer {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
}

.sm-hero-checkmark-ring {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 5rem !important;
    height: 5rem !important;
    border-radius: 50% !important;
    background: rgba(34, 197, 94, 0.12) !important;
}

.sm-hero-checkmark-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    background: var(--sm-green) !important;
}

.sm-hero-checkmark-circle svg {
    color: white !important;
    stroke: white !important;
}

.sm-badge-success {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.375rem 1rem !important;
    border-radius: 9999px !important;
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: var(--sm-green) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    margin-bottom: 1rem !important;
}

.sm-pulse-dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
    border-radius: 50% !important;
    background: var(--sm-green) !important;
    animation: sm-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    display: inline-block !important;
}

@keyframes sm-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.sm-hero-title {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--sm-text) !important;
    margin-bottom: 1rem !important;
    line-height: 1.1 !important;
}

.sm-hero-title .sm-text-blue {
    color: var(--sm-blue) !important;
}

.sm-hero-subtitle,
.sm-dashboard .sm-hero-subtitle,
.sm-dashboard .sm-hero p,
.sm-hero .sm-hero-subtitle {
    max-width: 36rem !important;
    margin: 0 auto 2rem !important;
    font-size: 1rem !important;
    color: var(--sm-text-muted) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    text-align: center !important;
}

.sm-hero-preview {
    max-width: 48rem !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: var(--sm-radius) !important;
    border: 1px solid var(--sm-border) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.sm-hero-preview img {
    width: 100% !important;
    display: block !important;
}

/* ===== WhatsApp Banner ===== */
.sm-whatsapp-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 1.5rem !important;
    border-radius: 1rem !important;
    background: #22c55e !important;
    margin-bottom: 3rem !important;
}

.sm-whatsapp-content {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.sm-whatsapp-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0 !important;
}

.sm-whatsapp-text h3 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: white !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.sm-whatsapp-text p {
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
}

/* Chat Now button in WhatsApp banner stays green */
.sm-whatsapp-banner .sm-btn-white,
.sm-dashboard .sm-whatsapp-banner a.sm-btn-white,
.sm-dashboard .sm-whatsapp-banner a.sm-btn-white:visited,
.sm-dashboard .sm-whatsapp-banner a.sm-btn-white:hover,
.sm-dashboard .sm-whatsapp-banner a.sm-btn-white:active {
    color: var(--sm-green-whatsapp) !important;
}

/* ===== Section Styles ===== */
.sm-section {
    margin-bottom: 3rem !important;
}

.sm-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 1.5rem !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

.sm-section-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--sm-text) !important;
    line-height: 1.2 !important;
}

.sm-section-subtitle {
    font-size: 0.875rem !important;
    color: var(--sm-text-muted) !important;
    margin-top: 0.25rem !important;
}

.sm-badge-active {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: var(--sm-green) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.sm-badge-active-dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
    border-radius: 50% !important;
    background: var(--sm-green) !important;
    display: inline-block !important;
}

/* ===== Widget Cards Grid ===== */
.sm-widgets-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
}

.sm-widget-card {
    background: var(--sm-card) !important;
    border: 1px solid var(--sm-border) !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.sm-widget-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 1rem !important;
}

.sm-widget-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    border-radius: var(--sm-radius) !important;
}

.sm-widget-icon-blue {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--sm-blue) !important;
}

.sm-widget-icon-purple {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--sm-purple) !important;
}

.sm-widget-icon-teal {
    background: rgba(20, 184, 166, 0.1) !important;
    color: var(--sm-teal) !important;
}

.sm-badge-active-sm {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.125rem 0.625rem !important;
    border-radius: 9999px !important;
    background: rgba(34, 197, 94, 0.1) !important;
    color: var(--sm-green) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.sm-widget-card h3 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.375rem !important;
    color: var(--sm-text) !important;
    line-height: 1.3 !important;
}

.sm-widget-card > p,
.sm-widget-desc {
    font-size: 0.875rem !important;
    color: var(--sm-text-muted) !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
    font-weight: 400 !important;
}

.sm-checklist {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.sm-checklist li {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
    color: var(--sm-text-muted) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.sm-check-icon {
    flex-shrink: 0 !important;
    color: #16a34a !important;
    stroke: #16a34a !important;
    width: 0.875rem !important;
    height: 0.875rem !important;
}

.sm-astra-features .sm-check-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    color: #10b981 !important;
    stroke: #10b981 !important;
}

/* ===== Astra AI Section ===== */
.sm-astra-section {
    border: 1px solid rgba(20, 184, 166, 0.3) !important;
    border-radius: var(--sm-radius-lg) !important;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.05), rgba(20, 184, 166, 0.02)) !important;
    overflow: hidden !important;
    margin-bottom: 3rem !important;
}

.sm-astra-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 2rem !important;
}

.sm-astra-content {
    flex: 1 !important;
}

.sm-astra-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 0.25rem !important;
}

.sm-astra-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3rem !important;
    height: 3rem !important;
    border-radius: var(--sm-radius) !important;
    background: var(--sm-teal) !important;
}

.sm-astra-icon svg {
    color: white !important;
    stroke: white !important;
}

.sm-whatsapp-icon svg {
    color: white !important;
    stroke: white !important;
    fill: white !important;
}

.sm-whatsapp-icon svg path {
    fill: white !important;
}
.sm-astra-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--sm-text) !important;
    line-height: 1.2 !important;
}

.sm-astra-label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--sm-blue) !important;
}

.sm-astra-desc {
    font-size: 0.875rem !important;
    color: var(--sm-text-muted) !important;
    line-height: 1.7 !important;
    margin: 1rem 0 1.5rem !important;
    font-weight: 400 !important;
}

.sm-astra-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
}

.sm-astra-features li {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    font-size: 0.9375rem !important;
    color: var(--sm-text) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.sm-astra-features .sm-check-icon {
    color: var(--sm-teal) !important;
    stroke: var(--sm-teal) !important;
}

.sm-astra-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    margin-top: 0.5rem !important;
}

/* Astra AI Chat Preview */
.sm-chat-preview {
    width: 100% !important;
    flex-shrink: 0 !important;
}

.sm-chat-widget {
    border-radius: var(--sm-radius) !important;
    border: 1px solid var(--sm-border) !important;
    background: var(--sm-card) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}

.sm-chat-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.625rem 1rem !important;
    background: var(--sm-blue) !important;
    border-radius: var(--sm-radius) var(--sm-radius) 0 0 !important;
}

.sm-chat-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.sm-chat-header-left svg {
    color: white !important;
    stroke: white !important;
}

.sm-chat-header-title {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: white !important;
}

.sm-chat-live-badge {
    padding: 0.125rem 0.5rem !important;
    border-radius: 0.25rem !important;
    background: rgba(255, 255, 255, 0.2) !important;
    font-size: 0.625rem !important;
    font-weight: 500 !important;
    color: white !important;
}

.sm-chat-quote-info {
    padding: 1rem !important;
    border-bottom: 1px solid var(--sm-border) !important;
}

.sm-chat-quote-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0.5rem !important;
}

.sm-chat-quote-row:last-child {
    margin-bottom: 0 !important;
}

.sm-chat-quote-label {
    font-size: 0.625rem !important;
    color: var(--sm-text-muted) !important;
}

.sm-chat-quote-value {
    font-size: 0.625rem !important;
    font-weight: 500 !important;
    color: var(--sm-text) !important;
}

.sm-chat-quote-price {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--sm-blue) !important;
}

.sm-chat-messages {
    padding: 1rem !important;
}

.sm-chat-ai-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.sm-chat-ai-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: 50% !important;
    background: var(--sm-teal) !important;
}

.sm-chat-ai-avatar svg {
    color: white !important;
    stroke: white !important;
}

.sm-chat-ai-name {
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    color: var(--sm-text) !important;
}

.sm-chat-ai-label {
    font-size: 0.5625rem !important;
    color: var(--sm-teal) !important;
}

.sm-chat-bubble {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.625rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 0.375rem !important;
    line-height: 1.4 !important;
}

.sm-chat-bubble-ai {
    background: #f1f5f9 !important;
    color: var(--sm-text-muted) !important;
    border-top-left-radius: 0 !important;
}

.sm-chat-bubble-user {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--sm-text) !important;
    border-top-right-radius: 0 !important;
    margin-left: auto !important;
    max-width: 85% !important;
    text-align: right !important;
}

.sm-chat-bubble .sm-text-blue {
    font-weight: 500 !important;
    color: var(--sm-blue) !important;
}

.sm-chat-bubble .sm-text-bold {
    font-weight: 500 !important;
    color: var(--sm-text) !important;
}

.sm-chat-actions {
    display: flex !important;
    gap: 0.375rem !important;
    margin-top: 0.5rem !important;
}

.sm-chat-action-btn {
    padding: 0.125rem 0.5rem !important;
    font-size: 0.5625rem !important;
    font-weight: 500 !important;
    border-radius: 0.25rem !important;
    display: inline-block !important;
}

.sm-chat-action-primary {
    background: rgba(20, 184, 166, 0.08) !important;
    border: 1px solid rgba(20, 184, 166, 0.3) !important;
    color: var(--sm-teal) !important;
}

.sm-chat-action-default {
    background: transparent !important;
    border: 1px solid var(--sm-border) !important;
    color: var(--sm-text-muted) !important;
}

/* ===== Two Column Layout ===== */
.sm-two-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    margin-bottom: 3rem !important;
}

.sm-panel {
    background: var(--sm-card) !important;
    border: 1px solid var(--sm-border) !important;
    border-radius: var(--sm-radius-lg) !important;
    padding: 1.5rem !important;
}

.sm-panel-header {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.sm-panel-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3rem !important;
    height: 3rem !important;
    border-radius: var(--sm-radius) !important;
    flex-shrink: 0 !important;
}

.sm-panel-icon-blue {
    background: linear-gradient(135deg, var(--sm-blue), var(--sm-gradient-end)) !important;
}

.sm-panel-icon-slate {
    background: var(--sm-slate) !important;
}

.sm-panel-icon svg {
    color: white !important;
    stroke: white !important;
}

.sm-panel-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--sm-text) !important;
    line-height: 1.2 !important;
}

.sm-panel-subtitle {
    font-size: 0.875rem !important;
    color: var(--sm-text-muted) !important;
    font-weight: 400 !important;
}

/* Info box */
.sm-info-box {
    display: flex !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    border-radius: var(--sm-radius) !important;
    background: rgba(59, 130, 246, 0.05) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    margin-bottom: 1.5rem !important;
}

.sm-info-box svg {
    flex-shrink: 0 !important;
    color: var(--sm-blue) !important;
    stroke: var(--sm-blue) !important;
    margin-top: 0.125rem !important;
}

.sm-info-box p {
    font-size: 0.875rem !important;
    color: var(--sm-text-muted) !important;
    line-height: 1.5 !important;
}

.sm-info-box strong {
    color: var(--sm-text) !important;
}

/* Management links */
.sm-mgmt-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.sm-mgmt-item {
    display: flex !important;
    gap: 0.75rem !important;
}

.sm-mgmt-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 0.5rem !important;
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--sm-blue) !important;
    flex-shrink: 0 !important;
}

.sm-mgmt-icon svg {
    stroke: var(--sm-blue) !important;
    color: var(--sm-blue) !important;
}

.sm-mgmt-item h4 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.125rem !important;
    color: var(--sm-text) !important;
    line-height: 1.3 !important;
}

.sm-mgmt-item p {
    font-size: 0.8125rem !important;
    color: var(--sm-text-muted) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* Steps guide */
.sm-steps {
    margin-bottom: 1.5rem !important;
}

.sm-step {
    display: flex !important;
    gap: 1rem !important;
}

.sm-step-indicator {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.sm-step-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    background: var(--sm-blue) !important;
    color: white !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.sm-step-line {
    width: 1px !important;
    flex: 1 !important;
    background: var(--sm-border) !important;
    margin: 0.25rem 0 !important;
}

.sm-step-content {
    padding-bottom: 1.25rem !important;
}

.sm-step-content h4 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.125rem !important;
    color: var(--sm-text) !important;
    line-height: 1.3 !important;
}

.sm-step-content p {
    font-size: 0.8125rem !important;
    color: var(--sm-text-muted) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* ===== Widget Preview Mockup ===== */
.sm-widget-preview {
    border: 1px solid var(--sm-border) !important;
    border-radius: var(--sm-radius) !important;
    padding: 0.75rem !important;
    margin-bottom: 1.5rem !important;
    background: var(--sm-card) !important;
}

.sm-widget-preview-search {
    padding: 0.5rem 0.75rem !important;
    border: 1px solid var(--sm-border) !important;
    border-radius: 0.375rem !important;
    font-size: 0.8125rem !important;
    color: var(--sm-text-muted) !important;
    background: var(--sm-bg) !important;
    margin-bottom: 0.75rem !important;
}

.sm-widget-preview-items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
}

.sm-widget-preview-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.375rem !important;
    padding: 0.75rem 0.5rem !important;
    border: 1px solid var(--sm-border) !important;
    border-radius: 0.5rem !important;
    cursor: default !important;
}

.sm-widget-preview-item span {
    font-size: 0.6875rem !important;
    color: var(--sm-text) !important;
    font-weight: 500 !important;
}

.sm-widget-preview-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 0.375rem !important;
}

.sm-widget-preview-icon svg {
    width: 1rem !important;
    height: 1rem !important;
}

/* ===== Feature Highlights ===== */
.sm-features-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
    margin-bottom: 3rem !important;
}

.sm-feature-card {
    background: var(--sm-card) !important;
    border: 1px solid var(--sm-border) !important;
    border-radius: var(--sm-radius) !important;
    padding: 1.25rem !important;
    text-align: center !important;
}

.sm-feature-icon-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 50% !important;
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--sm-blue) !important;
    margin: 0 auto 0.75rem !important;
}

.sm-feature-icon-circle svg {
    stroke: var(--sm-blue) !important;
    color: var(--sm-blue) !important;
}

.sm-feature-card h4 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
    color: var(--sm-text) !important;
    line-height: 1.3 !important;
}

.sm-feature-card p {
    font-size: 0.75rem !important;
    color: var(--sm-text-muted) !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

/* ===== CTA Banner ===== */
.sm-cta-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 2rem !important;
    border-radius: var(--sm-radius-lg) !important;
    background: linear-gradient(to right, var(--sm-blue), var(--sm-gradient-end)) !important;
    margin-bottom: 3rem !important;
}

.sm-cta-content {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.sm-cta-content svg {
    color: rgba(255, 255, 255, 0.8) !important;
    stroke: rgba(255, 255, 255, 0.8) !important;
}

.sm-cta-content h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: white !important;
    line-height: 1.2 !important;
}

.sm-cta-content p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.875rem !important;
}

/* ===== Help Section ===== */
.sm-help-title {
    text-align: center !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
    color: var(--sm-text) !important;
    line-height: 1.2 !important;
}

.sm-help-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
    margin-bottom: 3rem !important;
}

.sm-help-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.25rem !important;
    border: 1px solid var(--sm-border) !important;
    border-radius: var(--sm-radius) !important;
    background: var(--sm-card) !important;
    transition: background 0.15s ease !important;
}

.sm-help-card:hover {
    background: #f1f5f9 !important;
}

/* Help card chevron arrow */
.sm-help-card::after {
    content: '\203A' !important;
    font-size: 1.25rem !important;
    color: var(--sm-text-muted) !important;
    flex-shrink: 0 !important;
    margin-left: 0.5rem !important;
}

/* WP admin anchor overrides for help cards */
.sm-dashboard a.sm-help-card,
.sm-dashboard a.sm-help-card:visited,
.sm-dashboard a.sm-help-card:hover,
.sm-dashboard a.sm-help-card:active,
.sm-dashboard a.sm-help-card:focus {
    color: var(--sm-text) !important;
    text-decoration: none !important;
}

.sm-help-card-content {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.sm-help-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 0.5rem !important;
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--sm-blue) !important;
    flex-shrink: 0 !important;
}

.sm-help-icon svg {
    stroke: var(--sm-blue) !important;
    color: var(--sm-blue) !important;
}

.sm-help-card h4 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--sm-text) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.sm-help-card p {
    font-size: 0.75rem !important;
    color: var(--sm-text-muted) !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* ===== Responsive ===== */
@media (min-width: 768px) {
    .sm-hero-title {
        font-size: 3rem !important;
    }
    .sm-astra-inner {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    .sm-chat-preview {
        width: 20rem !important;
    }
    .sm-astra-buttons {
        flex-direction: row !important;
    }
}

@media (max-width: 1024px) {
    .sm-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .sm-hero-title {
        font-size: 2rem !important;
    }
    .sm-widgets-grid {
        grid-template-columns: 1fr !important;
    }
    .sm-two-col {
        grid-template-columns: 1fr !important;
    }
    .sm-help-grid {
        grid-template-columns: 1fr !important;
    }
    .sm-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .sm-cta-banner {
        flex-direction: column !important;
        text-align: center !important;
    }
    .sm-cta-content {
        flex-direction: column !important;
    }
    .sm-whatsapp-banner {
        flex-direction: column !important;
        text-align: center !important;
    }
    .sm-whatsapp-content {
        flex-direction: column !important;
    }
    .sm-header-inner {
        padding: 0.75rem 1rem !important;
    }
    .sm-main {
        padding: 1.5rem 1rem !important;
    }
}