/* ============================================================
   SACRED SANCTUARY — Geeta.cc Design System
   Hindu Spiritual Theme: Krishna · Flute · Peacock
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Cinzel:wght@400;600;700&family=Jost:wght@300;400;500;600&family=Hind+Siliguri:wght@300;400;500;600&display=swap');

/* ── Variables ──────────────────────────────────────────── */
:root {
    /* Depth */
    --void:        #02030c;
    --deep:        #060818;
    --surface:     #0a0d1f;
    --surface-2:   #0f1228;
    --overlay:     rgba(8, 10, 26, 0.62);

    /* Sacred Gold */
    --gold:        #c59219;
    --gold-bright: #e0ab3c;
    --gold-pale:   #f0cc78;
    --gold-dim:    rgba(197, 146, 25, 0.14);
    --gold-glow:   rgba(197, 146, 25, 0.28);

    /* Peacock Teal */
    --teal:        #187a80;
    --teal-bright: #28afb8;
    --teal-dim:    rgba(24, 122, 128, 0.18);

    /* Saffron */
    --saffron:     #c4560c;
    --saffron-b:   #e06820;

    /* Borders */
    --border:       rgba(197, 146, 25, 0.13);
    --border-hover: rgba(197, 146, 25, 0.35);
    --border-teal:  rgba(40, 175, 184, 0.22);

    /* Text */
    --text:        rgba(238, 230, 208, 0.92);
    --text-muted:  rgba(185, 170, 135, 0.62);
    --text-faint:  rgba(140, 128, 96, 0.4);

    /* Fonts */
    --ff-display: 'Cormorant Garamond', 'Hind Siliguri', Georgia, serif;
    --ff-ui:      'Cinzel', 'Hind Siliguri', Georgia, serif;
    --ff-body:    'Jost', 'Hind Siliguri', system-ui, sans-serif;
    --ff-bengali: 'Hind Siliguri', system-ui, sans-serif;

    /* Radius */
    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  22px;
    --r-xl:  28px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--void);
    color: var(--text);
    font-family: var(--ff-body);
    font-weight: 400;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--ff-body); }
input, textarea, select { font-family: var(--ff-body); }

/* ── Cosmic Background ──────────────────────────────────── */
.bg-sanctuary {
    position: fixed; inset: 0; z-index: -3;
    background:
        radial-gradient(ellipse 90% 55% at 50% -5%,  rgba(24,122,128,0.09) 0%, transparent 65%),
        radial-gradient(ellipse 60% 45% at 85% 90%,  rgba(197,146,25,0.06) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 10% 70%,  rgba(90,40,160,0.05) 0%,  transparent 55%),
        var(--void);
}

/* Sacred geometry grain */
.bg-grain {
    position: fixed; inset: 0; z-index: -2;
    opacity: 0.016; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c59219' stroke-width='0.3' opacity='1'%3E%3Ccircle cx='40' cy='40' r='38'/%3E%3Ccircle cx='40' cy='40' r='26'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Cline x1='40' y1='2' x2='40' y2='78'/%3E%3Cline x1='2' y1='40' x2='78' y2='40'/%3E%3Cline x1='13' y1='13' x2='67' y2='67'/%3E%3Cline x1='67' y1='13' x2='13' y2='67'/%3E%3Cpath d='M40 2 L67 13 L78 40 L67 67 L40 78 L13 67 L2 40 L13 13 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* ── Falling Petals (CSS shapes, no emoji) ──────────────── */
.petals {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}
.petal {
    position: absolute; top: -5%;
    border-radius: 80% 0 80% 0;
    animation: petal-fall linear infinite;
    opacity: 0;
}
.petal--rose   { background: rgba(200, 80, 80, 0.35); }
.petal--gold   { background: rgba(197, 146, 25, 0.3); border-radius: 50% 0 50% 0; }
.petal--teal   { background: rgba(24, 122, 128, 0.25); border-radius: 60% 0 60% 0; }

.petal:nth-child(1)  { left:8%;  width:12px; height:14px; animation-duration:14s; animation-delay:0s;   }
.petal:nth-child(2)  { left:22%; width:9px;  height:11px; animation-duration:18s; animation-delay:3s;   }
.petal:nth-child(3)  { left:38%; width:11px; height:13px; animation-duration:16s; animation-delay:1.5s; }
.petal:nth-child(4)  { left:55%; width:8px;  height:10px; animation-duration:20s; animation-delay:5s;   }
.petal:nth-child(5)  { left:72%; width:13px; height:15px; animation-duration:13s; animation-delay:2s;   }
.petal:nth-child(6)  { left:88%; width:10px; height:12px; animation-duration:17s; animation-delay:7s;   }

@keyframes petal-fall {
    0%   { transform: translateY(0) rotate(0deg)    translateX(0);   opacity: 0; }
    8%   { opacity: 1; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(105vh) rotate(540deg) translateX(30px); opacity: 0; }
}

/* ── Glass Panels ───────────────────────────────────────── */
.panel {
    background: rgba(7, 9, 22, 0.58);
    border: 1px solid var(--border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: var(--r-lg);
    padding: 28px;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.panel:hover {
    border-color: var(--border-hover);
    box-shadow: 0 0 0 1px rgba(197,146,25,0.06) inset;
}
.panel--gold {
    border-color: rgba(197, 146, 25, 0.28);
    background: linear-gradient(145deg, rgba(12,15,34,0.72) 0%, rgba(7,9,22,0.82) 100%);
}
.panel--teal {
    border-color: var(--border-teal);
    background: rgba(6, 18, 22, 0.6);
}
.panel--danger {
    border-color: rgba(180, 40, 40, 0.3);
    background: rgba(20, 5, 5, 0.5);
}

/* ── Forms ──────────────────────────────────────────────── */
.field {
    width: 100%;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(197, 146, 25, 0.2);
    border-radius: var(--r-sm);
    padding: 11px 15px;
    color: var(--gold-pale);
    font-size: 0.88rem;
    font-family: var(--ff-body);
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    appearance: none;
}
.field:focus {
    border-color: var(--gold);
    background: rgba(0, 0, 0, 0.52);
    box-shadow: 0 0 0 3px var(--gold-dim);
}
.field::placeholder { color: rgba(180, 150, 80, 0.3); font-style: italic; }
textarea.field { resize: vertical; min-height: 90px; line-height: 1.6; }
select.field {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c59219'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 36px;
}

.field-label {
    display: block;
    font-family: var(--ff-ui);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 7px;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 26px;
    font-family: var(--ff-ui);
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    border: none; border-radius: 8px;
    cursor: pointer; transition: all 0.25s ease;
    text-decoration: none; white-space: nowrap;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

.btn-gold {
    background: linear-gradient(135deg, #9a6e0e 0%, #c59219 45%, #9a6e0e 100%);
    background-size: 200% 100%; background-position: left center;
    color: #000; font-weight: 700;
    box-shadow: 0 4px 22px rgba(197,146,25,0.24);
}
.btn-gold:hover {
    background-position: right center;
    box-shadow: 0 8px 32px rgba(197,146,25,0.42);
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-hover);
    color: var(--gold-bright);
}
.btn-ghost:hover {
    background: var(--gold-dim);
    border-color: var(--gold);
    transform: translateY(-1px);
}

.btn-teal {
    background: linear-gradient(135deg, #0e575c, #187a80);
    color: rgba(220, 240, 242, 0.95);
    box-shadow: 0 4px 18px rgba(24,122,128,0.22);
}
.btn-teal:hover {
    box-shadow: 0 8px 28px rgba(24,122,128,0.38);
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, #8b1a1a, #b72020);
    color: rgba(255,220,220,0.95);
}
.btn-danger:hover { box-shadow: 0 6px 24px rgba(180,30,30,0.35); transform: translateY(-1px); }

.btn-full { width: 100%; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 100px;
    font-family: var(--ff-ui); font-size: 0.58rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    border: 1px solid;
}
.badge-gold    { border-color: rgba(197,146,25,0.4);  background: rgba(197,146,25,0.1);  color: var(--gold-bright); }
.badge-teal    { border-color: rgba(40,175,184,0.35); background: rgba(24,122,128,0.12); color: var(--teal-bright); }
.badge-saffron { border-color: rgba(196,86,12,0.4);  background: rgba(196,86,12,0.1);   color: var(--saffron-b); }
.badge-dim     { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--text-muted); }

.badge .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
    animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.7); }
}

/* ── Stat Cards ─────────────────────────────────────────── */
.stat-card {
    position: relative; overflow: hidden;
    background: rgba(7, 9, 22, 0.58);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 26px;
    transition: border-color 0.4s, transform 0.3s;
}
.stat-card:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.stat-card__watermark {
    position: absolute; right: -10px; bottom: -10px;
    width: 70px; height: 70px; opacity: 0.06;
    pointer-events: none;
}
.stat-card__label {
    font-family: var(--ff-ui); font-size: 0.6rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 10px;
}
.stat-card__value {
    font-family: var(--ff-display); font-size: 2.6rem;
    font-weight: 700; line-height: 1; color: var(--text);
}
.stat-card__sub {
    font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; font-weight: 300;
}

/* Progress Bar */
.progress-bar {
    width: 100%; height: 3px; border-radius: 100px;
    background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 14px;
}
.progress-bar__fill {
    height: 100%; border-radius: 100px;
    background: linear-gradient(90deg, var(--gold), var(--gold-bright));
    transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 0 8px var(--gold-glow);
}

/* ── Sacred Dividers ─────────────────────────────────────── */

/* Flute divider (SVG inline) */
.divider {
    display: flex; align-items: center;
    gap: 18px; margin: 28px 0;
    color: var(--gold-dim);
}
.divider::before, .divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.divider svg { flex-shrink: 0; width: 120px; opacity: 0.5; }

/* Section divider line */
.divider-line {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border-hover) 30%, var(--border-hover) 70%, transparent 100%);
    margin: 24px 0;
}

/* ── Typography ─────────────────────────────────────────── */
.text-display {
    font-family: var(--ff-display); font-weight: 600;
    line-height: 1.18; letter-spacing: 0.01em;
}
.text-ui {
    font-family: var(--ff-ui); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.text-gold   { color: var(--gold-bright); }
.text-teal   { color: var(--teal-bright); }
.text-muted  { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }

/* ── Alert boxes ─────────────────────────────────────────── */
.alert {
    padding: 13px 16px; border-radius: var(--r-sm);
    font-size: 0.84rem; font-weight: 400;
    border: 1px solid; margin-bottom: 16px;
}
.alert-success { background: rgba(16,80,30,0.25); border-color: rgba(40,160,80,0.3); color: #6ee09a; }
.alert-error   { background: rgba(80,10,10,0.3);  border-color: rgba(180,40,40,0.3); color: #f08080; }
.alert-warn    { background: rgba(80,55,0,0.3);   border-color: rgba(200,146,25,0.3); color: var(--gold-pale); }

/* ── Section Headers ─────────────────────────────────────── */
.section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
}
.section-header h2 {
    font-family: var(--ff-display); font-size: 1.4rem; font-weight: 600;
    color: var(--text);
}

/* ── Peacock SVG watermark (used in panel corners) ────────── */
/* Reusable: <svg class="peacock-eye-deco" ...> */
.peacock-eye-deco {
    position: absolute; pointer-events: none;
    transition: opacity 0.4s;
}

/* ── Table ──────────────────────────────────────────────── */
.sacred-table { width: 100%; border-collapse: collapse; }
.sacred-table th {
    font-family: var(--ff-ui); font-size: 0.6rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gold); padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left; font-weight: 600;
}
.sacred-table td {
    padding: 13px 14px; font-size: 0.84rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-muted); vertical-align: middle;
}
.sacred-table tr:hover td {
    background: rgba(197,146,25,0.04);
    color: var(--text);
}
.sacred-table td:first-child { color: var(--text); font-weight: 500; }

/* ── Utility ─────────────────────────────────────────────── */
.hidden    { display: none !important; }
.sr-only   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.relative  { position: relative; }
.flex      { display: flex; }
.flex-col  { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4    { gap: 16px; }
.gap-6    { gap: 24px; }
.text-center { text-align: center; }
.w-full   { width: 100%; }
.mt-auto  { margin-top: auto; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .panel { padding: 20px 18px; }
    .stat-card { padding: 18px 20px; }
    .stat-card__value { font-size: 2rem; }
}

/* ── Bengali Script Support ─────────────────────────────── */
/* Ensures Bengali unicode range always renders with Hind Siliguri
   regardless of which font-family is active on the element.     */
@font-face {
    font-family: 'Cormorant Garamond';
    src: local('Hind Siliguri');
    unicode-range: U+0980-09FF; /* Bengali block */
}
@font-face {
    font-family: 'Cinzel';
    src: local('Hind Siliguri');
    unicode-range: U+0980-09FF;
}
@font-face {
    font-family: 'Jost';
    src: local('Hind Siliguri');
    unicode-range: U+0980-09FF;
}

/* Chat reply text — explicit Bengali fallback */
.chat-reply,
.chat-message,
.ai-message,
.bot-message,
.message-text,
.reply-text,
[class*="chat"] p,
[class*="message"] p {
    font-family: 'Jost', 'Hind Siliguri', system-ui, sans-serif;
    line-height: 1.75;
}