/* ================================================================
   TILZ SPA BY TILDA — Global Brand Stylesheet
   Loaded on every page (guest + admin + auth layouts)
   ================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ── CSS Custom Properties ────────────────────────────────────── */
:root {
    --spa-primary:  #C9897A;
    --spa-dark:     #7A4F45;
    --spa-light:    #F5EDE8;
    --spa-bg:       #FAF8F6;
    --spa-text:     #3D2B26;
    --spa-gold:     #B8967E;
    --spa-border:   #E8D5CC;
    --spa-white:    #FFFFFF;

    /* rgba helpers */
    --spa-primary-10: rgba(201,137,122,.10);
    --spa-primary-20: rgba(201,137,122,.20);
    --spa-primary-30: rgba(201,137,122,.30);
    --spa-primary-40: rgba(201,137,122,.40);
    --spa-primary-50: rgba(201,137,122,.50);

    /* Legacy aliases (used by old inline styles) */
    --primary-color: var(--spa-primary);
    --dark-color:    var(--spa-dark);
    --light-bg:      var(--spa-light);
    --cream:         var(--spa-bg);
    --brown:         var(--spa-text);
    --muted-gold:    var(--spa-gold);
}

/* ── Base Typography ──────────────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
    color: var(--spa-text);
    background-color: var(--spa-bg);
}

h1, h2, h3, h4, h5, h6,
.font-serif {
    font-family: 'Cormorant Garamond', serif;
}

/* ── Bootstrap Primary Color Overrides ───────────────────────── */
.btn-primary {
    background-color: var(--spa-primary) !important;
    border-color:     var(--spa-primary) !important;
    color:            var(--spa-white)   !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--spa-dark) !important;
    border-color:     var(--spa-dark) !important;
}
.btn-outline-primary {
    border-color: var(--spa-primary) !important;
    color:        var(--spa-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--spa-primary) !important;
    color:            var(--spa-white)   !important;
}
.text-primary  { color:            var(--spa-primary) !important; }
.bg-primary    { background-color: var(--spa-primary) !important; }
.border-primary { border-color:   var(--spa-primary) !important; }

a        { color: var(--spa-primary); }
a:hover  { color: var(--spa-dark);   }

.pagination .page-item.active .page-link {
    background-color: var(--spa-primary) !important;
    border-color:     var(--spa-primary) !important;
}
.pagination .page-link { color: var(--spa-primary); }

.form-control:focus,
.form-select:focus {
    border-color: var(--spa-primary);
    box-shadow:   0 0 0 .2rem var(--spa-primary-20);
}

/* ── Andora Frontend Template Overrides ──────────────────────── */
.default-btn {
    background-color: var(--spa-primary) !important;
    border-color:     var(--spa-primary) !important;
    color:            var(--spa-white)   !important;
    font-family:      'Cormorant Garamond', serif;
    letter-spacing:   0.08em;
    transition:       background-color .25s, border-color .25s;
}
.default-btn:hover {
    background-color: var(--spa-dark) !important;
    border-color:     var(--spa-dark) !important;
}
.default-btn-outline {
    border-color: var(--spa-primary) !important;
    color:        var(--spa-primary) !important;
}
.default-btn-outline:hover {
    background-color: var(--spa-primary) !important;
    color:            var(--spa-white)   !important;
}
.tag-btn {
    background-color: var(--spa-light)  !important;
    border-color:     var(--spa-light)  !important;
    color:            var(--spa-dark)   !important;
}

.section-title h2,
.section-title .title {
    font-family: 'Cormorant Garamond', serif;
    color:        var(--spa-text);
}
.section-title .sub-title,
.section-title span.sub-title,
.sub-title {
    color: var(--spa-primary) !important;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Andora navbar */
.navbar-area,
.navbar-area.navbar-two {
    background-color: var(--spa-white) !important;
    box-shadow:       0 2px 20px rgba(61,43,38,.07);
}
.navbar-area .navbar-brand,
.navbar-brand {
    font-family:  'Cormorant Garamond', serif;
    color:        var(--spa-primary) !important;
    letter-spacing: 0.08em;
}
.navbar-area .nav-link {
    font-family: 'Cormorant Garamond', serif;
    font-size:   1.05rem;
}
.navbar-area .nav-link:hover,
.navbar-area .nav-link.active {
    color: var(--spa-primary) !important;
}

/* Andora top header */
.top-header-area {
    background-color: var(--spa-text) !important;
}
.top-header-area a,
.top-header-area span { color: rgba(232,213,204,.85); }
.top-header-area a:hover { color: var(--spa-primary); }

/* Andora footer */
.footer-area {
    background-color: var(--spa-text) !important;
}
.footer-area h3,
.footer-area .widget-title {
    font-family: 'Cormorant Garamond', serif;
    color:        var(--spa-primary) !important;
    letter-spacing: 0.06em;
}
.footer-area a { color: rgba(200,176,168,.85); }
.footer-area a:hover { color: var(--spa-primary); }
.footer-bottom {
    background-color: #2e1a14 !important;
}

/* ── Griya Admin Template Overrides ──────────────────────────── */

/* CSS variables forwarded to Griya's default palette */
:root {
    --primary:        var(--spa-primary);
    --primary-dark:   var(--spa-dark);
    --primary-light:  var(--spa-light);
    --rgba-primary-1: var(--spa-primary-10);
    --rgba-primary-2: var(--spa-primary-20);
    --rgba-primary-3: var(--spa-primary-30);
    --rgba-primary-4: var(--spa-primary-40);
    --rgba-primary-5: var(--spa-primary-50);
}

/* Nav header (sidebar top) */
.nav-header {
    background:    var(--spa-white) !important;
    border-bottom: 1px solid var(--spa-border);
}
.brand-title {
    font-family:    'Cormorant Garamond', serif !important;
    color:          var(--spa-primary) !important;
    letter-spacing: 0.08em;
}
.brand-title span {
    color:     var(--spa-gold) !important;
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}
.hamburger .line { background-color: var(--spa-primary) !important; }

/* Sidebar deznav */
.deznav { background: var(--spa-white) !important; border-right: 1px solid var(--spa-border); }
.deznav .metismenu > li.mm-active > a,
.deznav .metismenu > li:hover > a {
    color:      var(--spa-primary)  !important;
    background: var(--spa-light)    !important;
}
.deznav .metismenu > li.mm-active > a i,
.deznav .metismenu > li:hover > a i { color: var(--spa-primary) !important; }
.deznav .metismenu ul li.mm-active > a,
.deznav .metismenu ul li:hover > a  { color: var(--spa-primary) !important; }
.deznav .metismenu li a             { color: var(--spa-text);   }

/* Header bar */
.header { background: var(--spa-white) !important; border-bottom: 1px solid #f5ede9; }
.header-right .notification_dropdown .nav-link { color: var(--spa-text)    !important; }
.header-right .notification_dropdown .nav-link:hover { color: var(--spa-primary) !important; }

/* Content body background */
.content-body { background: var(--spa-bg); }

/* Cards */
.card { border: 1px solid var(--spa-border); border-radius: 8px; }
.card-header { border-bottom: 1px solid var(--spa-border); }

/* Badges */
.badge.bg-primary { background-color: var(--spa-primary) !important; }

/* Page titles */
.page-titles h4 {
    font-family: 'Cormorant Garamond', serif;
    color:        var(--spa-text);
    font-weight:  600;
}

/* Footer */
.footer {
    background:    var(--spa-white);
    border-top:    1px solid var(--spa-border);
    font-family:   'Inter', sans-serif;
    font-size:     0.82rem;
    color:         #999;
}

/* ── Utility Classes ─────────────────────────────────────────── */

/* Gradients */
.spa-gradient {
    background: linear-gradient(135deg, var(--spa-text) 0%, var(--spa-dark) 50%, var(--spa-primary) 100%);
}
.spa-gradient-soft {
    background: linear-gradient(135deg, var(--spa-light) 0%, var(--spa-bg) 100%);
}

/* Spa card */
.spa-card {
    background:    var(--spa-white);
    border:        1px solid var(--spa-border);
    border-radius: 12px;
    padding:       24px;
    transition:    box-shadow .3s, transform .3s;
}
.spa-card:hover {
    box-shadow: 0 8px 32px var(--spa-primary-20);
    transform:  translateY(-3px);
}

/* Status badges */
.spa-badge-confirmed  { background: rgba(76,175,80,.12);  color: #2e7d32;  padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.spa-badge-pending    { background: rgba(255,167,38,.12); color: #e65100;  padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.spa-badge-cancelled  { background: rgba(239,83,80,.12);  color: #c62828;  padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.spa-badge-completed  { background: rgba(201,137,122,.12); color: var(--spa-dark); padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }

/* Selected booking card */
.selected-card {
    border:     2px solid var(--spa-primary) !important;
    box-shadow: 0 0 0 4px var(--spa-primary-10) !important;
}

/* WhatsApp float */
.whatsapp-float {
    position:         fixed;
    bottom:           30px;
    right:            30px;
    width:            56px;
    height:           56px;
    background-color: #25D366;
    color:            var(--spa-white) !important;
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.85rem;
    z-index:          9999;
    box-shadow:       0 4px 16px rgba(37,211,102,.45);
    text-decoration:  none;
    transition:       transform .25s, background-color .25s;
}
.whatsapp-float:hover {
    background-color: #128C7E;
    transform:        scale(1.08);
}

/* Chatbot toggle */
.chatbot-toggle {
    position:         fixed;
    bottom:           96px;
    right:            30px;
    width:            52px;
    height:           52px;
    background-color: var(--spa-primary);
    color:            var(--spa-white);
    border:           none;
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.3rem;
    z-index:          9998;
    cursor:           pointer;
    box-shadow:       0 4px 18px var(--spa-primary-40);
    transition:       transform .2s, background-color .2s;
}
.chatbot-toggle:hover {
    background-color: var(--spa-dark);
    transform:        scale(1.08);
}

/* Book Now button (used globally) */
.btn-book-now {
    background-color: var(--spa-primary);
    color:            var(--spa-white) !important;
    border:           none;
    padding:          9px 24px;
    font-family:      'Cormorant Garamond', serif;
    font-size:        1rem;
    font-weight:      600;
    letter-spacing:   0.1em;
    border-radius:    2px;
    transition:       background-color .25s;
    text-decoration:  none;
    display:          inline-block;
}
.btn-book-now:hover { background-color: var(--spa-dark); color: var(--spa-white) !important; }

/* ── Mobile Responsive ───────────────────────────────────────── */
@media (max-width: 767px) {
    .whatsapp-float  { bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 1.5rem; }
    .chatbot-toggle  { bottom: 80px; right: 20px; }
}