/* ============================================================
   SanatanSansaar Design System — CSS Custom Properties
   ============================================================
   Mapped 1:1 from tailwind.config.js in the React project.
   This is the SINGLE SOURCE OF TRUTH for the Laravel side.
   Every page-specific CSS must use these variables — never
   hardcode hex values.

   DOMAIN COLOR MAP (Astrologer = Divya/Jyotish domain):
     Accent:    gold-700 (#D4AF37) + orange-primary (#FF6B35)
     See tailwind.config.js comments for other domains.
   ============================================================ */

:root {
    /* ── Font ── */
    --ss-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif;
    --ss-font-display:  'Playfair Display', serif;

    /* ── SURFACES (backgrounds) — from theme.colors.surface ── */
    --ss-surface:         #000000;    /* page bg, app shell */
    --ss-surface-raised:  #111111;    /* card surfaces */
    --ss-surface-overlay: #1F1F1F;    /* inputs, forms, modals */
    --ss-surface-hover:   #374151;    /* hover states, skeleton */
    --ss-surface-inset:   #0A0A0A;    /* recessed areas */

    /* ── CONTENT (text) — from theme.colors.content ── */
    --ss-content:           #FFFFFF;    /* primary headings */
    --ss-content-body:      #E5E7EB;    /* primary body text */
    --ss-content-secondary: #D1D5DB;    /* descriptions */
    --ss-content-tertiary:  #9CA3AF;    /* labels, breadcrumbs, icons */
    --ss-content-caption:   #6B7280;    /* captions, very muted */
    --ss-content-disabled:  #4B5563;    /* disabled elements */
    --ss-content-inverse:   #000000;    /* text on gold/light bg */

    /* ── EDGES (borders) — from theme.colors.edge ── */
    --ss-edge-subtle:  #1F2937;    /* inner dividers */
    --ss-edge:         #374151;    /* standard borders */
    --ss-edge-strong:  #4B5563;    /* interactive borders */

    /* ── HINTS (placeholders) — from theme.colors.hint ── */
    --ss-hint:       #6B7280;    /* standard input placeholder */
    --ss-hint-muted: #4B5563;    /* muted placeholder on dark bg */

    /* ── GOLD SCALE — from theme.colors.gold ── */
    --ss-gold-50:  #FFFEF7;
    --ss-gold-100: #FFF9E6;
    --ss-gold-200: #FFF0C2;
    --ss-gold-300: #FFE79D;
    --ss-gold-400: #FFDE78;
    --ss-gold-500: #FFD700;
    --ss-gold-600: #E8B923;
    --ss-gold-700: #D4AF37;
    --ss-gold-800: #B8941F;
    --ss-gold-900: #8B6914;

    /* ── PRIMARY ACCENT (Bazaar, Account, Auth, Orders, Home) ── */
    --ss-accent:      #FFD65C;
    --ss-accent-warm: #FF8C00;

    /* ── ORANGE (Pooja, Temples domain secondary) ── */
    --ss-orange:       #FF6B35;
    --ss-orange-light: #FFB400;
    --ss-orange-dark:  #E8751A;

    /* ── SAFFRON SCALE ── */
    --ss-saffron-500: #FF9100;
    --ss-saffron-600: #FF6F00;

    /* ── DOMAIN ACCENTS ── */
    --ss-purple-accent: #9333EA;
    --ss-teal-accent:   #14B8A6;

    /* ── DECORATIVE ── */
    --ss-black-soft: #0A0A0A;
    --ss-black-warm: #1A0E00;

    /* ── STATUS — from theme.colors.status ── */
    --ss-status-success: #10B981;
    --ss-status-warning: #F59E0B;
    --ss-status-error:   #EF4444;
    --ss-status-info:    #3B82F6;

    /* ── LEGACY COMPATIBILITY (used in existing card markup) ── */
    --ss-card-bg:     rgba(26,26,26,0.6);
    --ss-card-border: rgba(255,255,255,0.1);
    --ss-card-hover:  rgba(255,255,255,0.05);

    /* ── ASTROLOGER DOMAIN: derived tokens ──
       Astro pages use gold-700 + orange-primary per domain map.
       These aliases keep page CSS readable. */
    --ss-astro-accent:     var(--ss-gold-700);
    --ss-astro-secondary:  var(--ss-orange);
    --ss-astro-gradient:       linear-gradient(135deg, var(--ss-gold-700), var(--ss-orange));
    --ss-astro-gradient-hover: linear-gradient(135deg, var(--ss-gold-500), var(--ss-accent-warm));
    --ss-astro-gradient-text:  linear-gradient(135deg, var(--ss-gold-500) 0%, var(--ss-gold-600) 50%, var(--ss-gold-700) 100%);
    --ss-astro-gradient-hero:  linear-gradient(135deg, var(--ss-surface) 0%, var(--ss-black-warm) 50%, var(--ss-surface) 100%);

    /* ── SHADOWS & GLOWS — from theme.boxShadow ── */
    --ss-shadow-card:       0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2);
    --ss-shadow-card-hover: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3);
    --ss-glow-gold:         0 0 20px rgba(212,175,55,0.4);
    --ss-glow-gold-sm:      0 0 10px rgba(212,175,55,0.3);
    --ss-glow-gold-lg:      0 0 30px rgba(212,175,55,0.5);
    --ss-glow-accent:       0 0 20px rgba(255,214,92,0.3);
    --ss-glow-accent-sm:    0 0 10px rgba(255,214,92,0.2);
    --ss-glow-accent-lg:    0 0 30px rgba(255,214,92,0.5);
    --ss-glow-orange:       0 0 20px rgba(255,107,53,0.4);
    --ss-glow-orange-sm:    0 0 10px rgba(255,107,53,0.3);
    --ss-glow-diya:         0 0 15px rgba(255,191,0,0.6);

    /* ── Online/Offline badge tokens (astrologer-specific) ── */
    --ss-online-bg:     rgba(16,185,129,0.12);
    --ss-online-color:  var(--ss-status-success);
    --ss-online-border: rgba(16,185,129,0.25);
    --ss-online-glow:   0 0 12px rgba(16,185,129,0.30);
    --ss-offline-bg:    rgba(255,255,255,0.05);
    --ss-offline-color: var(--ss-content-disabled);
    --ss-offline-border: var(--ss-card-border);
    --ss-busy-color:    var(--ss-saffron-500);
    --ss-busy-border:   rgba(255,145,0,0.45);

    /* ── RADII ── */
    --ss-radius-sm:   6px;
    --ss-radius:      8px;
    --ss-radius-md:   10px;
    --ss-radius-lg:   12px;
    --ss-radius-xl:   16px;
    --ss-radius-pill:  9999px;

    /* ── TRANSITIONS ── */
    --ss-transition:      all 0.3s ease;
    --ss-transition-fast: all 0.2s ease;

    /* ── FOCUS RING ── */
    --ss-focus-ring: 0 0 0 3px rgba(212,175,55,0.15);
}

/* ── Global resets using tokens ── */
body {
    background-color: var(--ss-surface) !important;
    color: var(--ss-content);
    font-family: var(--ss-font);
}

/* ── Legacy container override — .inpage used across many pages ── */
.inpage {
    background: var(--ss-surface-raised) !important;
    border-color: var(--ss-edge-subtle) !important;
    color: var(--ss-content) !important;
}

/* ── Utility: gold gradient text ── */
.ss-gold-text {
    background: var(--ss-astro-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ss-surface-inset); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.45); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.75); }

/* ── Common keyframes ── */
@keyframes ss-fade-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ss-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.60); }
    50%       { box-shadow: 0 0 0 5px rgba(16,185,129,0.00); }
}

/* ============================================================
   SHARED COMPONENTS
   Defined once here — do NOT redefine in page-specific CSS.
   ============================================================ */

/* ── Status badges ── */
.status-badge-txt.specific-Clr-Online span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ss-online-bg) !important;
    color: var(--ss-online-color) !important;
    border: 1px solid var(--ss-online-border) !important;
    border-radius: var(--ss-radius-pill);
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 500;
}
.status-badge-txt.specific-Clr-Online span::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--ss-online-color);
    border-radius: 50%;
    flex-shrink: 0;
    animation: ss-pulse-dot 2s ease-in-out infinite;
}
.status-badge-txt.specific-Clr-Offline span,
.status-badge-txt.specific-Clr-Busy span {
    background: var(--ss-offline-bg) !important;
    color: var(--ss-offline-color) !important;
    border: 1px solid var(--ss-offline-border) !important;
    border-radius: var(--ss-radius-pill);
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ── Star ratings ── */
.filled-star { color: var(--ss-gold-500) !important; fill: var(--ss-gold-500) !important; }
.empty-star  { color: rgba(212,175,55,0.20) !important; }

/* ── Modal dark theme ── */
.modal-content {
    background: var(--ss-surface-overlay) !important;
    border: 1px solid var(--ss-edge-subtle) !important;
    color: var(--ss-content) !important;
}
.modal-header {
    border-bottom: 1px solid var(--ss-edge-subtle) !important;
}
.modal-header .modal-title { color: var(--ss-content) !important; }
.modal-header .close { color: var(--ss-content-tertiary) !important; }
.modal-header .close:hover { color: var(--ss-gold-700) !important; }
.modal label { color: var(--ss-content-secondary) !important; }
.modal .form-control {
    background: var(--ss-surface-overlay) !important;
    border: 1px solid var(--ss-edge) !important;
    color: var(--ss-content) !important;
    border-radius: var(--ss-radius) !important;
}
.modal .form-control::placeholder { color: var(--ss-hint) !important; }
.modal .form-control:focus {
    border-color: var(--ss-gold-700) !important;
    box-shadow: var(--ss-focus-ring) !important;
}
.modal .btn-chat {
    background: var(--ss-astro-gradient) !important;
    color: var(--ss-content-inverse) !important;
    border: none !important;
    border-radius: var(--ss-radius-md) !important;
    font-weight: 600 !important;
}
.modal .btn-chat:hover {
    background: var(--ss-astro-gradient-hover) !important;
    box-shadow: var(--ss-glow-gold-lg) !important;
}

/* ── Modal toggle buttons (duration pills, call mode) ── */
.modal .btn-group-toggle .btn,
.modal .btn-group-toggle .btn.btn-info,
.modal .btn-group-toggle .btn.btn-light {
    background: var(--ss-surface-raised) !important;
    color: var(--ss-content-secondary) !important;
    border: 1px solid var(--ss-edge) !important;
    border-radius: var(--ss-radius) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}
.modal .btn-group-toggle .btn:hover {
    background: var(--ss-surface-hover) !important;
    color: var(--ss-content) !important;
    border-color: var(--ss-gold-700) !important;
}
.modal .btn-group-toggle .btn.active,
.modal .btn-group-toggle .btn:active,
.modal .btn-group-toggle .btn.focus {
    background: var(--ss-astro-gradient) !important;
    color: var(--ss-content-inverse) !important;
    border-color: transparent !important;
    box-shadow: var(--ss-glow-gold-sm) !important;
    font-weight: 600 !important;
}

/* ── Breadcrumb bar ── */
.moonastro-breadcrumb {
    background: var(--ss-surface-raised) !important;
    border-bottom: 1px solid var(--ss-edge-subtle);
}
.breadcrumbs,
.breadcrumbs a,
.breadcrumbtext {
    color: var(--ss-content-tertiary) !important;
}
.breadcrumbs a:hover { color: var(--ss-gold-700) !important; }
.breadcrumbs .fa-home,
.breadcrumbs .fa-chevron-right { color: var(--ss-gold-700) !important; }

/* ── Form controls ── */
.expert-search-form .form-control {
    background: var(--ss-surface-overlay) !important;
    border: 1px solid var(--ss-edge) !important;
    color: var(--ss-content) !important;
    border-radius: var(--ss-radius) !important;
}
.expert-search-form .form-control::placeholder {
    color: var(--ss-hint) !important;
}
.expert-search-form .form-control:focus {
    border-color: var(--ss-gold-700) !important;
    box-shadow: var(--ss-focus-ring) !important;
}

/* ── Load more button ── */
.btn-load-more {
    background: var(--ss-astro-gradient) !important;
    color: var(--ss-content-inverse) !important;
    border: none !important;
    border-radius: var(--ss-radius-md) !important;
    font-weight: 600 !important;
    transition: var(--ss-transition) !important;
}
.btn-load-more:hover {
    background: var(--ss-astro-gradient-hover) !important;
    box-shadow: var(--ss-glow-gold-lg) !important;
}

/* ============================================================
   GLOBAL RESPONSIVE FOUNDATIONS
   Standard breakpoints: 576px, 768px, 992px, 1200px
   ============================================================ */

/* ── Responsive images ── */
img { max-width: 100%; height: auto; }

/* ── Touch-friendly minimum sizes ── */
@media (max-width: 768px) {
    button, .btn, [role="button"],
    input[type="submit"], a.btn {
        min-height: 44px;
    }
}

/* ── Responsive typography (clamp) ── */
@media (max-width: 576px) {
    :root {
        --ss-radius-lg: 10px;
        --ss-radius-xl: 12px;
    }
}