/* ============================================================
   SevaKri — design system
   ============================================================ */
:root {
    --saffron: #e8701a;
    --saffron-600: #d5620f;
    --saffron-050: #fff2e6;
    --maroon: #4a1420;
    --maroon-800: #611a2a;
    --gold: #c9a24b;
    --ink: #241a17;
    --ink-soft: #6b5d56;
    --line: #ecdfcc;
    --paper: #fbf5ec;
    --cream: #f4e8d5;
    --card: #ffffff;

    --radius: 18px;
    --radius-sm: 12px;
    --shadow-sm: 0 1px 2px rgba(74, 20, 32, .06), 0 2px 8px rgba(74, 20, 32, .05);
    --shadow-md: 0 6px 20px rgba(74, 20, 32, .09), 0 2px 6px rgba(74, 20, 32, .06);
    --shadow-lg: 0 24px 60px -18px rgba(74, 20, 32, .28);

    --container: 1200px;
    --nav-h: 68px;
    --bottomnav-h: 62px;

    --ease: cubic-bezier(.22, .68, 0, 1);
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;

    color-scheme: light;
    scroll-behavior: smooth;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--paper);
    letter-spacing: -0.01em;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display-5, .display-6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--maroon);
}

a { color: var(--saffron-600); text-decoration: none; transition: color .2s; }
a:hover { color: var(--maroon); text-decoration: none; }

.container { max-width: var(--container); }

.text-saffron { color: var(--saffron) !important; }
.text-maroon { color: var(--maroon) !important; }
.bg-saffron { background: var(--saffron) !important; color: #fff; }
.bg-cream { background: var(--cream) !important; }

.section { padding: clamp(2rem, 3.2vw, 3rem) 0; position: relative; }
.section.bg-cream { background: var(--cream); border-block: 1px solid var(--line); }
.section-tight { padding: clamp(1.5rem, 2.6vw, 2.25rem) 0; }

.section-title {
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    margin-bottom: .25rem;
    line-height: 1.15;
}
.section-kicker {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--saffron);
    margin-bottom: .5rem;
}
.section-lead { color: var(--ink-soft); max-width: 46ch; }

/* ---------- buttons ---------- */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: -0.01em; padding: .62rem 1.4rem; transition: transform .18s var(--ease), box-shadow .2s, background .2s; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-lg { padding: .85rem 1.8rem; }
.btn-sm { padding: .4rem .95rem; }

.btn-saffron {
    background: linear-gradient(180deg, var(--saffron), var(--saffron-600));
    border: none; color: #fff;
    box-shadow: 0 8px 20px -8px rgba(232, 112, 26, .6);
}
.btn-saffron:hover, .btn-saffron:focus { background: linear-gradient(180deg, var(--saffron-600), #b8540c); color: #fff; box-shadow: 0 12px 26px -8px rgba(232, 112, 26, .7); }

.btn-outline-dark, .btn-outline-secondary { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline-dark:hover, .btn-outline-secondary:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; }

.btn-light { background: #fff; border: none; color: var(--maroon); }
.btn-outline-light { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--maroon); }

/* ---------- header ---------- */
header .topbar { background: var(--maroon); color: #fff; font-size: .8rem; }
header .topbar a { color: #fff; opacity: .85; }
header .topbar a:hover { opacity: 1; }

.navbar {
    min-height: var(--nav-h);
    background: rgba(253, 249, 243, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s, border-color .3s, background .3s;
}
header.scrolled .navbar { box-shadow: var(--shadow-md); border-color: var(--line); background: rgba(253, 249, 243, .95); }

.navbar-brand { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--maroon) !important; }
.navbar-brand i { color: var(--saffron); }
.navbar .nav-link { font-weight: 500; color: var(--ink) !important; border-radius: 999px; padding: .45rem .9rem !important; transition: background .2s, color .2s; }
.navbar .nav-link:hover, .navbar .nav-link.show { background: var(--saffron-050); color: var(--saffron-600) !important; }
.dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: .4rem; }
.dropdown-item { border-radius: 8px; font-size: .92rem; padding: .5rem .7rem; }
.dropdown-item:hover { background: var(--saffron-050); color: var(--saffron-600); }

/* ---------- hero ---------- */
.hero {
    position: relative;
    color: #fff;
    background:
        linear-gradient(100deg, #3d0f1a 0%, #4a1420 46%, rgba(74, 20, 32, .35) 100%),
        url("/img/art/hero.svg") right center / auto 118% no-repeat,
        radial-gradient(720px 420px at 92% 8%, rgba(232, 112, 26, .30), transparent 60%),
        linear-gradient(160deg, var(--maroon), #2e0c15 70%);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(340px, 50vh, 440px);
    padding: clamp(2.25rem, 5vw, 3.5rem) 0;
}
.hero::after {
    content: "";
    position: absolute; inset: -40% -10% auto -10%; height: 130%;
    background: conic-gradient(from 180deg at 50% 50%, rgba(232, 112, 26, .18), transparent 25%, rgba(201, 162, 75, .16) 55%, transparent 78%);
    animation: heroSpin 26s linear infinite;
    z-index: -1;
    filter: blur(10px);
}
@keyframes heroSpin { to { transform: rotate(1turn); } }
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.1; }
.hero .lead { color: rgba(255, 255, 255, .85); font-size: clamp(.98rem, 1.6vw, 1.1rem); max-width: 44ch; }
.hero .pill-row span { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); padding: .4rem .8rem; border-radius: 999px; font-size: .8rem; }

/* ---------- cards ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }

.puja-card, .product-card { height: 100%; }
.puja-card:hover, .product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.puja-card .card-img-top, .product-card .card-img-top {
    aspect-ratio: 16 / 10; object-fit: cover; object-position: center;
    width: 100%; max-height: 196px; background: var(--cream);
    border-bottom: 1px solid var(--line);
    transition: transform .5s var(--ease);
}
.product-card .card-img-top { aspect-ratio: 4 / 3; max-height: 172px; }
.puja-card:hover .card-img-top, .product-card:hover .card-img-top { transform: scale(1.04); }
.card-body { padding: 1rem 1.05rem 1.1rem; }
.card-title { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.22; margin-bottom: .35rem; }
.card-text.small { font-size: .84rem; line-height: 1.45; }
.stretched-link-title { color: var(--maroon); }
.stretched-link-title:hover { color: var(--saffron-600); }
.badge.bg-danger { background: var(--saffron) !important; }
.badge.bg-saffron { background: var(--saffron) !important; }

.category-tile {
    background: #fff; color: var(--ink); border: 1px solid var(--line);
    border-radius: var(--radius); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.category-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold); color: var(--ink); }
.category-tile i {
    color: var(--saffron); display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%; background: var(--saffron-050);
    border: 1px solid #f4d9bf; margin-bottom: .25rem;
}

.steps-row > [class*="col-"] { position: relative; }
.steps-row > [class*="col-"]::after { content: ""; position: absolute; top: 22%; right: 0; height: 56%; width: 1px; background: var(--line); }
.steps-row > [class*="col-"]:last-child::after { display: none; }
@media (max-width: 767.98px) {
    .steps-row > [class*="col-"]:nth-child(2)::after { display: none; }
    .steps-row > [class*="col-"]:nth-child(1)::before,
    .steps-row > [class*="col-"]:nth-child(2)::before { content: ""; position: absolute; left: 15%; right: 15%; bottom: 0; height: 1px; background: var(--line); }
}

.content-html { line-height: 1.75; color: #3b2f2a; }
.content-html img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.content-html h2, .content-html h3 { margin-top: 1.6em; }

/* trust strip */
.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.trust-strip .item { display: flex; gap: .7rem; align-items: center; }
.trust-strip i { font-size: 1.5rem; color: var(--saffron); }

/* forms */
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--line); padding: .62rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--saffron); box-shadow: 0 0 0 .2rem rgba(232, 112, 26, .16); }
.form-control:user-invalid { border-color: #d64545; }
.list-group-item { border-color: var(--line); }

/* ---------- footer ---------- */
.footer { background: #1c0a11; color: rgba(255, 255, 255, .72); }
.footer h5, .footer h6 { color: #fff; }
.footer a { color: rgba(255, 255, 255, .72); }
.footer a:hover { color: #fff; }
.footer .brand { font-family: var(--font-display); font-size: 1.3rem; color: #fff; }

/* ---------- floating whatsapp ---------- */
.whatsapp-fab {
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
    box-shadow: var(--shadow-lg); z-index: 1040; transition: transform .2s;
}
.whatsapp-fab:hover { color: #fff; transform: scale(1.06); }

/* ============================================================
   Scroll reveal animations
   ============================================================ */
/* content is always visible if JS is off/slow; the animation only engages under html.js */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); will-change: opacity, transform; }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal-scale { opacity: 0; transform: scale(.95); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
html.js .reveal-scale.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
    .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero::after { animation: none; }
    .puja-card:hover, .product-card:hover { transform: none; }
}

/* ============================================================
   App-like mobile shell
   ============================================================ */
.app-bottom-nav { display: none; }

@media (max-width: 991.98px) {
    body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }

    .app-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
        display: flex; justify-content: space-around; align-items: stretch;
        height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(255, 255, 255, .92);
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid var(--line);
    }
    .app-bottom-nav a {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; font-size: .66rem; font-weight: 600; color: var(--ink-soft);
        letter-spacing: .01em; position: relative;
    }
    .app-bottom-nav a i { font-size: 1.28rem; transition: transform .2s var(--ease); }
    .app-bottom-nav a.active { color: var(--saffron-600); }
    .app-bottom-nav a.active i { transform: translateY(-2px); }
    .app-bottom-nav a .dot {
        position: absolute; top: 6px; right: 50%; transform: translateX(16px);
        min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
        background: var(--saffron); color: #fff; font-size: .6rem; display: flex; align-items: center; justify-content: center;
    }

    .topbar { display: none !important; }
    .hero { text-align: center; }
    .section { padding: 2.6rem 0; }

    /* sticky action bar for detail pages */
    .mobile-cta {
        position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
        z-index: 1030; background: #fff; border-top: 1px solid var(--line);
        padding: .7rem 1rem calc(.7rem); box-shadow: 0 -8px 24px -12px rgba(74, 20, 32, .25);
        display: flex; gap: .8rem; align-items: center;
    }
    .mobile-cta .price { font-family: var(--font-display); font-weight: 600; color: var(--maroon); }
    .has-mobile-cta { padding-bottom: 84px; }
}

@media (min-width: 992px) { .d-lg-none-cta { display: none; } }

/* main spacing: hero-led pages sit flush under the nav; content-led pages get breathing room */
main { padding-bottom: clamp(2.5rem, 5vw, 4rem); animation: pageIn .4s var(--ease) both; }
main > .container:first-child:not(:only-child) { margin-top: 0; }
main > .container:first-child { padding-top: 1.1rem; }        /* the flash-message zone */
main:has(> .hero) > .container:first-child { padding-top: 0; } /* home: no gap before the hero */
main > .hero:first-of-type { margin-top: 0; }

@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main { animation: none; } }

/* alerts */
.alert { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.alert-success { background: #edf7ee; border-color: #cfe8d2; color: #1f5127; }
.alert-danger { background: #fdeceb; border-color: #f3c9c6; color: #8a2b26; }

/* admin (kept minimal) */
.admin-sidebar { background: #1f1a18; min-height: 100vh; color: #cbbfb8; }
.admin-sidebar a { color: #cbbfb8; display: block; padding: .55rem 1rem; border-radius: 10px; font-size: .93rem; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-sidebar .nav-section { text-transform: uppercase; font-size: .68rem; letter-spacing: .12em; color: #7a6c64; padding: 1rem 1rem .25rem; }
.stat-card { border-left: 4px solid var(--saffron); }