/* ===== Raja Bali Dham Stylesheet =====
   Page-wise map:
   1) Shared Base + Header/Nav
   2) home.html
   3) about.html
   4) services.html
   5) gallery.html
   6) contact.html
   7) payment.html
   8) Shared auth/modals/lightbox
   9) Responsive overrides
*/

/* ===== Shared: Base Reset + Theme Tokens ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #f7e7cf;
    --card: #fff2dd;
    --primary: #8a1708;
    /* deep maroon */
    --secondary: #d84a00;
    /* saffron orange */
    --accent: #f3b43a;
    /* gold */
    --muted: #c57a1d;
    --text: #3e2618;
    --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --max-width: 1400px;
    --radius: 8px;
    --transition: 0.3s;
}


body {
    font-family: var(--font);
    line-height: 1.6;
    color: var(--text);
}

/* ===== Shared: Header & Navigation (Base) ===== */
header {
    background: linear-gradient(135deg, #c53b00 0%, #e56a0b 100%);
    color: white;
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
}

/* When header has this class it becomes transparent (applied on scroll) */
.header--transparent {
    /* light warm tint to keep header readable while still translucent */
    background: linear-gradient(rgba(197, 59, 0, 0.22), rgba(229, 106, 11, 0.22)) !important;
    box-shadow: none;
    backdrop-filter: blur(6px);
    padding: 12px 0;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Ensure desktop navigation stays visible and above content */
@media (min-width: 769px) {
    header nav {
        position: relative;
        z-index: 1000;
    }

    nav ul {
        display: flex;
        position: static;
        background: transparent;
        gap: 30px;
    }

    .hamburger {
        display: none;
    }
}

.logo {
    font-size: 28px;
    font-weight: bold;
}

/* Logo image + text helper styles */
.logo .site-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.logo .site-title {
    vertical-align: middle;
    font-weight: 800;
    color: inherit;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav a {
    color: #290a01;
    text-decoration: none;
    transition: 0.3s;

}

nav a:hover {
    color: #f3b43a;
}

/* ===== home.html: Hero Section ===== */
.hero {
    position: relative;
    background: url("image/v1.png");
    background-size: cover;
    background-position: center top;
    color: white;
    text-align: right;
    padding: 120px 40px 140px 20px;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Dark cinematic overlay */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Gradient from transparent left to dark right so image looks clear */
    background: linear-gradient(to right, transparent 0%, rgba(36, 12, 4, 0.3) 40%, rgba(62, 10, 5, 0.85) 100%);
    z-index: 1;
}

/* Bottom fade into the background color */
.hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, var(--bg), transparent);
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    /* narrowed to fit right side */
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.hero-content h1 {
    color: #ffffff;
    font-size: clamp(36px, 5vw, 56px);
    margin-bottom: 20px;
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.95);
    /* Stronger shadow without box */
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.5px;
}

.hero-content p {
    font-size: clamp(18px, 2.5vw, 24px);
    margin-bottom: 35px;
    color: #ffeebf;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.95);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.btn {
    display: inline-block;
    background: linear-gradient(135deg, #a32110, #d94c08);
    color: #ffe9c4;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
    border: 1px solid #f3b43a;
    cursor: pointer;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* right-align buttons */
}

/* Premium specifically for hero button */
.hero-content .btn {
    background: linear-gradient(135deg, #ffb347 0%, #ff8a1e 100%);
    color: #311100;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(255, 138, 30, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-content .btn:hover {
    background: linear-gradient(135deg, #ffc46a 0%, #ff9e2e 100%);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(255, 138, 30, 0.5);
    color: #290a01;
}

.hero-content .btn-secondary {
    background: rgba(36, 12, 4, 0.4);
    color: #ffb347;
    border: 2px solid #ffb347;
    box-shadow: none;
    backdrop-filter: blur(4px);
}

.hero-content .btn-secondary:hover {
    background: rgba(255, 179, 71, 0.15);
    color: #ffe2b6;
    border-color: #ffc46a;
    box-shadow: 0 10px 25px rgba(255, 179, 71, 0.2);
}



/* ===== home.html: Information Notice ===== */
.info-notice {
    background: linear-gradient(135deg, #3e0a05 0%, #8a1708 100%);
    position: relative;
    border: 1px solid rgba(255, 213, 138, 0.3);
    border-radius: 18px;
    padding: 24px 32px;
    margin: -50px auto 40px auto;
    /* Overlap with hero slightly for connected premium look */
    max-width: 1100px;
    width: 92%;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 2px 10px rgba(255, 255, 255, 0.1);
    z-index: 10;
    overflow: hidden;
}

/* Elegant gold shine effect */
.info-notice::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 213, 138, 0.12), transparent);
    transform: skewX(-20deg);
    animation: goldShine 6s infinite;
}

@keyframes goldShine {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

.info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.info-content {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1;
}

.info-icon {
    font-size: 30px;
    min-width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 213, 138, 0.25), rgba(255, 213, 138, 0.05));
    border: 1px solid rgba(255, 213, 138, 0.5);
    border-radius: 50%;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.info-notice.notice-clickable {
    cursor: pointer;
}

.info-image {
    max-height: 140px;
    max-width: 220px;
    width: auto;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(255, 213, 138, 0.35);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.preview-notice-image {
    display: block;
    max-width: 100%;
    max-height: 180px;
    width: auto;
    margin-top: 12px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #e7d2a0;
}

.info-text h3 {
    color: #ffdeb3;
    margin: 0 0 6px 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.info-text p {
    color: #ffffff;
    margin: 0;
    font-size: 16px;
    opacity: 0.95;
    line-height: 1.5;
    letter-spacing: 0.3px;
}

.info-link {
    display: inline-flex;
    margin-top: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background 0.2s ease, transform 0.2s ease;
}

.info-link:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

/* ===== Special Rules (styled like the important notice) ===== */
/* Scoped to only affect the block placed immediately after #info-section */
#info-section + .special-rules {
    background: linear-gradient(135deg, #3e0a05 0%, #7a1306 100%);
    position: relative;
    border: 1px solid rgba(255, 213, 138, 0.22);
    border-radius: 16px;
    padding: 20px 28px;
    margin: 18px auto 28px auto;
    max-width: 1100px;
    width: 92%;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    text-align: center;
    z-index: 5;
}

#info-section + .special-rules h3 {
    color: #ffdeb3;
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

#info-section + .special-rules ul {
    list-style: none;
    padding-left: 0;
    display: inline-block;
    text-align: left;
    max-width: 880px;
    margin: 0 auto;
}

#info-section + .special-rules ul li {
    padding: 8px 0;
    color: #ffeedd;
    font-size: 15px;
    line-height: 1.6;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}

@media (max-width: 600px) {
    #info-section + .special-rules { padding: 16px; width: 96%; }
    #info-section + .special-rules h3 { font-size: 18px; }
    #info-section + .special-rules ul li { font-size: 14px; }
}


/* ===== home.html: Admin Notice Controls ===== */
#admin-panel-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 998;
}

.admin-toggle-btn {
    background: linear-gradient(135deg, #a32110, #d94c08);
    color: white;
    border: 1px solid #f3b43a;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

.admin-toggle-btn:hover {
    background-color: #8B4513;
    transform: scale(1.1);
}

/* Admin Control Panel */
.admin-panel {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: white;
    border: 2px solid #D2691E;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 998;
    min-width: 300px;
    max-width: 400px;
}

.admin-panel-content h3 {
    color: #8B4513;
    margin-top: 0;
    margin-bottom: 15px;
}

.admin-panel-content label {
    display: block;
    color: #333;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 13px;
}

.admin-panel-content input,
.admin-panel-content textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #D2691E;
    border-radius: 4px;
    font-family: var(--font);
    font-size: 13px;
}

.admin-panel-content button {
    background-color: #D2691E;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
    margin-right: 10px;
    transition: 0.3s;
    font-weight: bold;
}

.admin-panel-content button:hover {
    background-color: #8B4513;
}

.admin-panel-content .close-btn {
    background-color: #999;
}

.admin-panel-content .close-btn:hover {
    background-color: #666;
}

/* ===== Shared: Section Wrapper ===== */
section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 40px 16px;
}

section h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    color: #8f140a;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid #8f140a;
    padding-bottom: 15px;
}

/* ===== about.html + home.html: About Section ===== */
#about {
    background: #f7e7cf;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* About options grid (cards linking to detailed pages) */
.about-options {
    padding: 40px 16px 60px;
}
.about-options-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 36px 24px;
    background: linear-gradient(135deg, #ffffff 0%, #fffdf9 100%);
    border: 1px solid rgba(143, 20, 10, 0.12);
    border-radius: 20px;
    text-decoration: none;
    color: #5a4031;
    text-align: center;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.04);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}
.option-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(143, 20, 10, 0.12);
    border-color: rgba(243, 180, 58, 0.8);
    background: linear-gradient(135deg, #ffffff 0%, #fffcf5 100%);
}
.option-icon-box {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #fff2dd, #fce1b4);
    border: 1px solid rgba(243, 180, 58, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8), 0 4px 10px rgba(143, 20, 10, 0.05);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.option-icon-box svg {
    width: 32px;
    height: 32px;
    fill: #8f2d13;
    transition: transform 0.35s ease;
}
.option-card:hover .option-icon-box {
    transform: scale(1.1);
    background: linear-gradient(135deg, #fce1b4, #ffd57a);
    box-shadow: 0 8px 20px rgba(243, 180, 58, 0.3);
    border-color: rgba(243, 180, 58, 0.8);
}
.option-card:hover .option-icon-box svg {
    transform: rotate(5deg) scale(1.05);
}
.option-card h3 {
    font-size: 1.35rem;
    color: #7a1208;
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: 700;
    transition: color 0.3s ease;
}
.option-card:hover h3 {
    color: #a32110;
}
.option-card p {
    font-size: 0.95rem;
    color: #6d5241;
    line-height: 1.6;
    margin: 0 0 20px 0;
    flex-grow: 1;
}
.option-card .option-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: #d94c08;
    font-weight: 700;
    transition: color 0.3s ease;
}
.option-card .option-btn .arrow {
    transition: transform 0.3s ease;
}
.option-card:hover .option-btn {
    color: #a32110;
}
.option-card:hover .option-btn .arrow {
    transform: translateX(4px);
}

@media (max-width: 900px) { .about-options-grid { grid-template-columns: repeat(2,1fr); gap: 20px; } }
@media (max-width: 600px) { .about-options-grid { grid-template-columns: 1fr; gap: 16px; } }

.maharaj-intro-line {
    margin: 26px 0 14px;
    text-align: center;
    font-weight: 700;
    color: #7a1208;
}

.maharaj-row {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 24px;
    align-items: center;
    background: #fff7e8;
    border: 1px solid #8f140a;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.maharaj-image img {
    width: 100%;
    max-height: 260px;
    object-fit: fill;
    background: #fff;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid #8f140a;
    display: block;
}

.maharaj-content h3 {
    color: #8f140a;
    margin-bottom: 8px;
}

.maharaj-content p {
    color: #4a2d16;
    line-height: 1.7;
}

.about-text p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.8;
}

/* ===== services.html + home.html: Services Section ===== */
#services {
    background: linear-gradient(90deg, #8f140a, #c83a0f 55%, #e36b11);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    background: #fff2dd;
    border: 1px solid #e7b977;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.service-card h3 {
    color: #4b2103;
    margin-bottom: 15px;
    font-size: 20px;
}

#services h2 {
    color: #fff2dd;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ===== contact.html + gallery.html: Hero Banners ===== */
.contact-hero {
    background: linear-gradient(180deg, rgba(36, 12, 4, 0.45), rgba(36, 12, 4, 0.78)), url("image/contect.png");
    background-size: cover;
    background-position: center;
    color: #fff8dc;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 16px;
}

.contact-hero-overlay h1 {
    font-size: 42px;
    margin-bottom: 10px;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.contact-hero-overlay p {
    font-size: 18px;
    color: #ffe2b6;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.gallery-hero {
    background: linear-gradient(180deg, rgba(36, 12, 4, 0.45), rgba(36, 12, 4, 0.75)), url("image/gallery.png");
    background-size: cover;
    background-position: center;
    color: #fff8dc;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 16px;
}

.gallery-hero-overlay h1 {
    font-size: 42px;
    margin-bottom: 10px;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.gallery-hero-overlay p {
    font-size: 18px;
    color: #ffe2b6;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* ===== gallery.html: Toggle Buttons + Grid ===== */
.gallery-type-selector {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 24px 0 34px;
    flex-wrap: wrap;
}

.gallery-btn {
    background: linear-gradient(90deg, #a5152d 0%, #ec4e63 100%);
    color: #fff7e8;
    border: 2px solid #8B4513;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-shadow: 0 6px 14px rgba(138, 23, 8, 0.18);
}

.gallery-btn:hover {
    background: linear-gradient(135deg, #b54c14, #e67c18);
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(138, 23, 8, 0.25);
}

.gallery-btn.active {
    background: linear-gradient(135deg, #ffd27a, #ffb347);
    color: #6f2d00;
    border-color: #8B4513;
    box-shadow: 0 10px 20px rgba(139, 69, 19, 0.25);
}

/* Toggle sections */
.gallery-section {
    display: none;
}

.gallery-section.active {
    display: block;
}

/* Grid cards */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.gallery-item {
    background: #fff2dd;
    border: 1px solid #e7b977;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    background: #f7e7cf;
}

.gallery-item p {
    margin: 8px 0 12px;
    color: #8B4513;
    font-weight: 600;
}

@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .contact-hero {
        min-height: 240px;
    }

    .contact-hero-overlay h1 {
        font-size: 28px;
    }

    .contact-hero-overlay p {
        font-size: 14px;
    }

    .gallery-hero {
        min-height: 240px;
    }

    .gallery-hero-overlay h1 {
        font-size: 28px;
    }

    .gallery-hero-overlay p {
        font-size: 14px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item img,
    .gallery-item video {
        height: 200px;
    }
}

/* ===== home.html: Gallery CTA Button ===== */
.gallery-btn-link {

    margin-left: 12px;
    background: linear-gradient(135deg, #ffb347, #ff7b00);
    color: #4a1c00;
    border: 1px solid #ffcf7a;
    box-shadow: 0 6px 14px rgba(255, 123, 0, 0.25);
}

.gallery-btn-link:hover {
    background: linear-gradient(135deg, #ffc46a, #ff8a1e);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 123, 0, 0.35);
}

.gallery-btn-link:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(255, 123, 0, 0.2);
}

.gallery-cta {
    margin-top: 16px;
    text-align: center;
}

/* Mobile spacing */
@media (max-width: 600px) {
    .gallery-btn-link {
        margin-left: 0;
        margin-top: 10px;
        display: inline-block;
    }
}



.media-card {
    background: #fff2dd;
    border: 1px solid #e7b977;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.media-card img,
.media-card video {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    background: #f7e7cf;
}

.media-card figcaption {
    padding: 10px 12px;
    text-align: center;
    color: #8B4513;
    font-weight: 600;
    background: #fff7e8;
}

@media (max-width: 600px) {

    .media-card img,
    .media-card video {
        height: 200px;
    }
}


/* ===== gallery.html: Legacy/Fallback Overrides ===== */
.gallery-type-selector {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.gallery-btn {
    background-color: #D2691E;
    color: white;
    border: 2px solid #8B4513;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.3s;
}

.gallery-btn:hover {
    background-color: #8B4513;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.gallery-btn.active {
    background-color: #FFD700;
    color: #8B4513;
    border-color: #8B4513;
}

/* Gallery Sections */
.gallery-section {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.gallery-section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gallery-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
}

.gallery-item p {
    margin-top: 10px;
    color: #8B4513;
    font-weight: bold;
    text-align: center;
}

.video-item {
    background: white;
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ===== Shared: Generic Modal (used by home/payment flows) ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease-in;
}

.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 30px;
    border: 2px solid #D2691E;
    border-radius: 8px;
    width: 90%;
    max-width: 900px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.modal-content h2 {
    color: #8B4513;
    margin-top: 0;
    margin-bottom: 20px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
}

.close:hover {
    color: #8B4513;
}

.login-message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    font-weight: bold;
    display: none;
}

.login-message.success {
    background-color: #d4edda;
    color: #155724;
    display: block;
}

.login-message.error {
    background-color: #f8d7da;
    color: #721c24;
    display: block;
}

/* ===== home.html: Admin Panel Feedback ===== */
.admin-panel {
    background: linear-gradient(135deg, #FFF8DC, #FFE4B5);
    border: 2px solid #D2691E;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-in;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message {
    margin: 10px 0;
    padding: 10px;
    border-radius: 4px;
    font-weight: bold;
    display: none;
}

.message.success {
    background: linear-gradient(135deg, #7a1208, #a6200f);
    color: #155724;
    display: block;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    display: block;
}

/* ===== contact.html + home.html: Contact Section ===== */
#contact {
    background-color: #f7e7cf;
}

/* Scoped styles for the 'विशेष नियम' block inside #info-section */
#info-section .special-rules {
    background: linear-gradient(180deg, #fffdf8, #fff6ea);
    border: 1px solid rgba(141,39,15,0.08);
    padding: 20px 22px;
    border-radius: 12px;
    margin: 18px auto 0;
    max-width: 820px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    text-align: center;
}
#info-section .special-rules h3 {
    margin: 0 0 10px 0;
    color: var(--primary);
    font-size: 22px;
    font-weight: 800;
}
/* small decorative underline */
#info-section .special-rules h3::after{
    content: "";
    display:block;
    width:64px;
    height:4px;
    background:var(--accent);
    margin:8px auto 0;
    border-radius:2px;
}
#info-section .special-rules ul {
    list-style: disc;
    padding-left: 20px;
    margin: 14px auto 0;
    display: inline-block;
    text-align: left;
}
#info-section .special-rules li {
    color: #4a2d16;
    margin-bottom: 10px;
    line-height: 1.8;
    font-weight: 700;
    font-size: 16px;
}

@media (max-width: 700px) {
    #info-section .special-rules { padding: 14px; }
    #info-section .special-rules h3 { font-size: 18px; }
    #info-section .special-rules li { font-size: 15px; }
    #info-section .special-rules ul { padding-left: 18px; }
}

/* ===== contact: Route chart styles ===== */
.route-chart {
    margin-top: 18px;
    background: linear-gradient(180deg,#fffaf3,#fff6ec);
    padding: 16px;
    border-radius: 10px;
    #info-section .special-rules {
        background: linear-gradient(180deg, #fffdf8, #fff6ea);
        border: 1px solid rgba(141,39,15,0.08);
        padding: 20px 22px;
        border-radius: 12px;
        margin: 18px auto 0;
        max-width: 820px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.06);
        text-align: center;
    }
    #info-section .special-rules h3 {
        margin: 0 0 10px 0;
        color: var(--primary);
        font-size: 22px;
        font-weight: 800;
    }
    /* small decorative underline */
    #info-section .special-rules h3::after{
        content: "";
        display:block;
        width:64px;
        height:4px;
        background:var(--accent);
        margin:8px auto 0;
        border-radius:2px;
    }
    #info-section .special-rules ul {
        list-style: disc;
        padding-left: 20px;
        margin: 14px auto 0;
        display: inline-block;
        text-align: left;
    }
    #info-section .special-rules li {
        color: #4a2d16;
        margin-bottom: 10px;
        line-height: 1.8;
        font-weight: 700;
        font-size: 16px;
    }

    @media (max-width: 700px) {
        #info-section .special-rules { padding: 14px; }
        #info-section .special-rules h3 { font-size: 18px; }
        #info-section .special-rules li { font-size: 15px; }
        #info-section .special-rules ul { padding-left: 18px; }
    }
    font-size: 1rem;
}
.flow {
    color: #4a2d16;
    font-weight: 700;
    white-space: nowrap;
    overflow: auto;
}

@media (max-width: 700px) {
    .routes { flex-direction: column; }
}

/* Node-style route chart visuals */
.routes-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.route-graph {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
}
.route-graph::-webkit-scrollbar { height: 8px; }
.node {
    background: #fff2dd;
    border: 1px solid rgba(243,180,58,0.18);
    color: #4a2d16;
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
    box-shadow: 0 6px 14px rgba(99,41,10,0.04);
}
.node.primary {
    background: linear-gradient(135deg,var(--primary),#c83a0f);
    color: #fff8e6;
    border-color: rgba(0,0,0,0.06);
}
.arrow {
    color: #8f140a;
    font-weight: 800;
    flex: 0 0 auto;
}

@media (max-width: 700px) {
    .route-graph { padding-bottom: 6px; }
}

/* Table styles for route listing */
.route-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    background: #fffaf7;
    border: 1px solid rgba(141,39,15,0.06);
}
.route-table th,
.route-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(141,39,15,0.04);
    text-align: center;
    vertical-align: middle;
}
.route-table {
    margin: 12px auto;
    max-width: 920px;
    border: 2px solid var(--primary);
}
.route-table td {
    border-right: 1px solid rgba(141,39,15,0.06);
}
.route-table td:last-child { border-right: none; }
.route-table thead th {
    background: linear-gradient(90deg,#fff2dd,#fff7e8);
    color: #7a1208;
    font-weight: 800;
    border-bottom: 2px solid rgba(141,39,15,0.08);
}
.route-table tbody tr:nth-child(odd) { background: #fffefb; }
.route-table td { color: #4a2d16; font-weight: 700; }

@media (max-width: 600px) {
    .route-table th, .route-table td { padding: 10px 8px; font-size: 14px; }
}

/* ===== experiences.html: Page-specific styles ===== */
.experiences-page .hero {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 28px;
    align-items: start;
    padding: 80px 40px;
    min-height: 480px;
}

.experiences-page .hero-panel {
    position: relative;
    color: rgba(255, 245, 230, 0.95);
    padding: 36px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(141,39,15,0.85), rgba(216,106,20,0.6));
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.experiences-page .form-card {
    position: relative;
    z-index: 12;
    background: #fffdf9;
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 20px 40px rgba(99,41,10,0.12);
    border: 1px solid rgba(141,39,15,0.06);
}

/* .experiences-page .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
} */

.experiences-page .field { display:flex; flex-direction: column; gap:6px; }
.experiences-page label { color: #8d270f; font-weight:700; text-align: left; }
.experiences-page input{width: 100%; height: 38px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(141,39,15,0.12); font: inherit; color: #3f2415; background: #fff;}
.experiences-page textarea {
    border: 1px solid rgba(141,39,15,0.12);
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    font: inherit;
    color: #3f2415;
    background: #fff;
}
.experiences-page textarea { min-height:108px; resize:vertical; }

.experiences-page .form-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:12px; }
.experiences-page .btn { padding:10px 18px; border-radius:12px; }
.experiences-page .btn-primary { background: linear-gradient(135deg,#8d270f,#d86a14); color:#fff; border:0; }
.experiences-page .btn-secondary { background: transparent; border:1px solid rgba(141,39,15,0.08); color:#8d270f; }

.experiences-page .feed-card { padding:20px; border-radius:16px; background: linear-gradient(180deg,#fffaf7,#fff6f0); box-shadow:0 12px 28px rgba(99,41,10,0.06); }

.experiences-page .experience-list { display:grid; gap:14px; }
.experiences-page .experience-card { padding:16px; border-radius:14px; background:#fff; border:1px solid rgba(141,39,15,0.06); box-shadow:0 8px 20px rgba(99,41,10,0.04); }
.experiences-page .experience-card .experience-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.experiences-page .top-badge { position: static; display:inline-block; margin-bottom:8px; background:linear-gradient(135deg,#f4be53,#e38d16); color:#fff; padding:6px 10px; border-radius:999px; font-weight:800; }

.experiences-page .card-actions { display:flex; gap:8px; margin-top:8px; }
.experiences-page .card-btn { padding:8px 12px; border-radius:999px; border:1px solid transparent; font-weight:700; cursor:pointer; }
.experiences-page .like-btn { background: rgba(242,181,68,0.12); color:#8d270f; }
.experiences-page .edit-btn { background: rgba(47,143,78,0.08); color:#2f8f4e; }
.experiences-page .delete-btn { background: rgba(191,47,47,0.08); color:#bf2f2f; }

@media (max-width: 900px) {
    .experiences-page .hero { grid-template-columns: 1fr; padding:40px 18px; }
    .experiences-page .form-grid { grid-template-columns: 1fr; }
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.contact-info {
    background: linear-gradient(0deg, #8f140a, #c83a0f 55%, #e36b11);
    padding: 30px;
    color: white;
    border-radius: 8px;
}

.contact-info h3 {
    color: #fad9c5;
    margin-bottom: 20px;
}

.contact-info p {
    margin-bottom: 15px;
    display: inline;
    align-items: center;
    gap: 10px;
}

/* ===== about.html + home.html: About Image Marquee ===== */
.about-marquee-box {
    height: 300px;
    /* box height */
    border-radius: 8px;
    overflow: hidden;
    /* बाहर की images छुपें */
    border: 1px solid #e7b977;
    background: #fff2dd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* Marquee track (vertical stack) */
.about-marquee-track {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    animation: aboutScrollUp 20s linear infinite;
    /* upward loop */
}

/* Each image style */
.about-marquee-img {
    width: 100%;
    /* height: 130px; */
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* Upward marquee animation */
@keyframes aboutScrollUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
        /* duplicate set तक scroll */
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .about-marquee-box {
        height: 260px;
    }

    /* .about-marquee-img {
        height: 110px;
    } */
}


.form-group {
    margin-bottom: 20px;
}

/* ===== contact.html + payment.html: Shared Form Controls ===== */
.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #8B4513;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #D2691E;
    border-radius: 4px;
    font-family: inherit;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}






/* ===== Shared: Footer ===== */
.supporters-section {
    background: linear-gradient(180deg, rgba(255,250,240,0.8), rgba(247,231,207,0.9));
    padding: 36px 16px;
}

.supporters-section h2 {
    text-align: center;
    color: #8f140a;
    margin-bottom: 18px;
    font-size: 28px;
}

.supporters-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: stretch;
}

.supporter-card {
    background: #fffaf2;
    border: 1px solid rgba(141,39,15,0.06);
    padding: 18px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(138, 23, 8, 0.06);
}

.supporter-card img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff2dd;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin: 0 auto 12px;
    display: block;
    background: #fff;
}

.supporter-card h3 {
    color: #6f2d00;
    margin: 8px 0 6px;
    font-size: 18px;
}

.supporter-card p {
    color: #4a2d16;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .supporters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .supporters-grid {
        grid-template-columns: 1fr;
    }
    .supporter-card img {
        width: 96px;
        height: 96px;
    }
}

.site-footer {
    position: relative;
    background: linear-gradient(140deg, #9f1208 0%, #7f0d07 38%, #670b06 100%);
    color: #fff3df;
    padding: 52px 20px 0;
    border-top: 1px solid rgba(255, 196, 114, 0.45);


}

.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 22px;
    background: linear-gradient(deg, #9f1208 0%, #8d1610 38%, #670b06 100%);

    border-top-left-radius: 50% 90%;
    border-top-right-radius: 50% 90%;
    border-top-right-radius: 50% 90%;
    /* box-shadow: 0 2px 0 rgba(255, 208, 138, 0.65); */
    pointer-events: none;
}

.site-footer .footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    padding: 8px 0 20px;
}

.site-footer .footer-inner>*+* {
    border-left: 1px solid rgba(255, 196, 114, 0.28);
    padding-left: 22px;
}

.site-footer .logo {
    font-size: 22px;
    color: #ffd27a;
    margin-bottom: 8px;
}

.site-footer .social {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.site-footer .social-link {
    width: 80px;
    height: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #ffb24f 0%, #ff8a2a 100%);
    color: #6b140a;
    font-weight: 700;
    padding: 0;
    border-radius: 10%;
    border: 1px solid rgba(255, 230, 184, 0.7);
    text-decoration: none;
    font-size: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-footer .social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.site-footer .social-link::before {
    margin-right: 0;
    font-size: 16px;
    line-height: 1;
}

.site-footer .social-link.social-facebook::before {
    content: "facebook";
}

.site-footer .social-link.social-twitter::before {
    content: "twitter";
}

.site-footer .social-link.social-instagram::before {
    content: "instagram";
}

.site-footer .social-link.social-youtube::before {
    content: "youtube";
}

.site-footer .footer-links h4 {
    margin-bottom: 10px;
    color: #ffd27a;
    font-size: 30px;
    line-height: 1;
    border-bottom: 1px solid rgba(255, 196, 114, 0.65);
    padding-bottom: 8px;
}

.site-footer .footer-bottom {
    max-width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    color: #ffe4b8;
    background: linear-gradient(180deg, #5e0905 0%, #4c0704 100%);
    border-top: 1px solid rgba(255, 196, 114, 0.35);
}

.back-to-top {
    background: rgba(255, 196, 114, 0.2);
    color: #ffe4b8;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.footer-links ul li {
    margin: 6px 0;
    position: relative;
    padding-left: 14px;
}

.footer-links ul li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #ffb95a;
    font-size: 12px;
}

.footer-links ul li a {
    color: #f7e7ce;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links ul li a:hover {
    color: #ffd27a;
    text-decoration: underline;
}


/* ===== Shared Responsive: Footer ===== */
@media (max-width: 900px) {
    .site-footer .footer-inner {
        grid-template-columns: 1fr;
    }

    .site-footer .footer-inner>*+* {
        border-left: none;
        border-top: 1px solid rgba(255, 196, 114, 0.28);
        padding-left: 0;
        padding-top: 14px;
    }

    .site-footer .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .site-footer::before {
        top: -14px;
        height: 16px;
    }
}

/* ===== Shared Responsive: Core Layout ===== */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        gap: 10px;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .about-content,
    .contact-container {
        grid-template-columns: 1fr;
    }

    .maharaj-row {
        grid-template-columns: 1fr;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Shared Responsive: Small Phones ===== */
@media (max-width: 480px) {
    .hero {
        padding: 60px 15px;
        min-height: 360px;
    }

    .hero-content h1 {
        font-size: 26px;
    }

    .hero-content p {
        font-size: 16px;
        margin-bottom: 20px;
    }

}

/* ===== contact.html: Embedded Map ===== */
.map-embed {
    margin-top: 20px;
}

.map-embed iframe {
    width: 100%;
    height: 320px;
    border: 0;
    border-radius: var(--radius);
    display: block;
}

/* Ensure contact content sits below the hero */
main>#contact {
    margin-top: 0;
}

/* ===== Shared Header Override (applies after map/contact block) ===== */
header {
    background: linear-gradient(135deg, rgba(197, 59, 0, 0.92) 0%, rgba(229, 106, 11, 0.92) 100%);
}



@media (max-width: 768px) {
    .map-embed iframe {
        height: 220px;
    }
}

.logo {
    font-size: 22px;
}

nav ul {
    gap: 30px;
}

.btn {
    padding: 10px 18px;
    font-size: 14px;
}



.gallery-item {
    height: 260px;
    font-size: 14px;
}

section {
    padding: 40px 12px;
}

section h2 {
    font-size: 28px;
    padding-bottom: 10px;
}

footer {
    padding: 20px 10px;
}

/* ===== Shared: Mobile Nav Trigger ===== */
.hamburger {
    display: none;
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 6px;
    box-sizing: border-box;
    z-index: 1200;
}

.hamburger span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

/* ===== Shared Responsive: Mobile Nav ===== */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    nav {
        position: relative;
    }

    nav ul {
        display: none;
        position: absolute;
        top: 64px;
        right: 20px;
        background: #FFF8DC;
        padding: 12px;
        border-radius: 8px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        flex-direction: column;
        gap: 8px;
        min-width: 160px;
        z-index: 1050;
    }

    nav ul li a {
        color: #8B4513;
        padding: 8px 6px;
        display: block;
    }

    nav.nav-open ul {
        display: flex;
    }
}

/* ===== Shared: Final Navbar Theme (primary active navbar style) ===== */
header {
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 0;
    background: linear-gradient(90deg, #be3500 0%, #e15a00 50%, #c74100 100%);
    box-shadow: 0 3px 12px rgba(54, 17, 0, 0.18);
    border-bottom: 1px solid #c27b2c;
}

header::before {
    content: "।। श्री राजा बलि धाम ।।";
    display: block;
    height: 34px;
    line-height: 34px;
    color: #fff4cf;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header nav {
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    background: #f8e6c4;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top: 1px solid rgba(255, 240, 212, 0.7);
}

header .logo {
    color: #b84a00;
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
}

header nav ul {
    align-items: center;
    gap: 0;
}

header nav ul li {
    position: relative;
    list-style: none;
}

header nav ul li+li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 18px;
    background: #d9b36f;
    transform: translateY(-50%);
}

header nav a {
    display: block;
    padding: 10px 18px;
    color: #6f2d00;
    font-weight: 700;
    text-decoration: none;
}

header nav a:hover {
    color: #be3500;
}



.header--transparent {
    background: linear-gradient(90deg, rgba(190, 53, 0, 0.95) 0%, rgba(225, 90, 0, 0.95) 50%, rgba(199, 65, 0, 0.95) 100%) !important;
    box-shadow: 0 3px 10px rgba(54, 17, 0, 0.14);
    padding: 0;
}

@media (min-width: 769px) {
    header .hamburger {
        display: none;
    }

    header nav ul {
        display: flex;
        position: static;
        background: transparent;
    }
}

@media (max-width: 768px) {
    header::before {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }

    header nav {
        border-radius: 0;
        padding: 8px 14px;
    }

    header .logo {
        font-size: 24px;
    }

    header nav ul {
        right: 12px;
        top: 58px;
        background: #fff2d8;
        border: 1px solid #d9b36f;
    }

    header nav ul li+li::before {
        display: none;
    }

    header nav a {
        padding: 9px 8px;
    }

}

/* ===== payment.html: Payment Methods ===== */
.payment-methods {
    background: linear-gradient(0deg, #8f140a, #c83a0f 55%, #e36b11);
    color: white;
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.payment-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.payment-card .qr img {
    width: 180px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: white;
}

.payment-details p {
    margin-bottom: 10px;
    color: white;
}

.payment-details .small {
    font-size: 13px;
    color: #f3ede8;
}

.copy-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    margin-left: 8px;
}

.copy-btn:hover {
    background: var(--secondary);
}

@media (max-width: 768px) {
    .payment-card {
        flex-direction: column;
        align-items: center;
    }

    .payment-card .qr img {
        width: 140px;
        height: 160px;
    }

    .payment-methods {
        padding: 16px;
    }
}

/* ===== payment.html: QR Modal ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-content {
    position: relative;
    background: white;
    padding: 20px;
    border-radius: var(--radius);
    max-width: 90vw;
    max-height: 90vh;
}

.modal-content img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    border-radius: var(--radius);
}

/* ===== payment.html: QR Modal Responsive ===== */
#qr-modal .modal-content {
    width: min(92vw, 440px);
    padding: 14px;
    background: #fff;
    border-radius: 10px;
}

#qr-modal #qr-modal-img {
    display: block;
    width: 100%;
    max-width: 420px;
    max-height: 82vh;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* Tablet */
@media (max-width: 768px) {
    #qr-modal .modal-content {
        width: 90vw;
        padding: 12px;
    }

    #qr-modal #qr-modal-img {
        max-width: 320px;
        max-height: 75vh;
    }
}

/* Mobile */
@media (max-width: 480px) {
    #qr-modal .modal-content {
        width: 94vw;
        padding: 10px;
    }

    #qr-modal #qr-modal-img {
        max-width: 260px;
        max-height: 50vh;
    }
}

/* ===== Shared Auth: Login/Register Modals ===== */
#loginModal,
#registerModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2001;
    align-items: center;
    justify-content: center;
}

#loginModal .modal-content,
#registerModal .modal-content {
    position: relative;
    background: linear-gradient(135deg, #fff8dc 0%, #fffacd 100%);
    border: 2px solid #D2691E;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#loginModal h2,
#registerModal h2 {
    color: #8B4513;
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
}

#loginModal form,
#registerModal form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#loginModal input,
#registerModal input {
    padding: 12px;
    border: 1px solid #D2691E;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    color: var(--text);
    transition: border-color 0.3s;
}

#loginModal input:focus,
#registerModal input:focus {
    outline: none;
    border-color: #8B4513;
    box-shadow: 0 0 8px rgba(139, 69, 19, 0.3);
}

#loginModal button[type="submit"],
#registerModal button[type="submit"] {
    padding: 12px;
    background: linear-gradient(135deg, #8B4513 0%, #D2691E 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

#loginModal button[type="submit"]:hover,
#registerModal button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 69, 19, 0.4);
}

#loginModal button[type="submit"]:active,
#registerModal button[type="submit"]:active {
    transform: translateY(0);
}

#loginModal p,
#registerModal p {
    color: #D2691E;
    text-align: center;
    font-size: 13px;
    min-height: 16px;
    margin-top: 8px;
}

#loginModal p.error,
#registerModal p.error {
    color: #c41e3a;
}

#loginModal p.success,
#registerModal p.success {
    color: #28a745;
}

/* ===== Shared Auth: Switch Links ===== */
#switchToRegister,
#switchToLogin {
    padding: 0;
    background: none;
    border: none;
    color: #8B4513;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
    transition: color 0.3s;
}

#switchToRegister:hover,
#switchToLogin:hover {
    color: #D2691E;
}

.close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 28px;
    font-weight: bold;
    color: #8B4513;
    cursor: pointer;
    transition: color 0.3s;
}

.close:hover {
    color: #D2691E;
}

#authLinks {
    display: flex;
    gap: 10px;
    list-style: none;
}

#authLinks .btn {
    background: linear-gradient(135deg, #a32110, #d94c08);
    color: #f7f3f0;
    /* border: none; */
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    border: 1px solid #f3b43a;

}

#authLinks .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.25);
}

#authLinks .btn-logout {
    background: linear-gradient(135deg, #c41e3a 0%, #a01729 100%);
    color: white;
}

#authLinks .btn-logout:hover {
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.35);
}

/* ===== home.html + gallery.html: Image Card Polish ===== */
.home-gallery-item,
#imagesGrid .gallery-item {
    background: #fff;
    height: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

.home-gallery-item img,
#imagesGrid .gallery-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: top center;
    border-radius: 6px;
    transition: transform 0.35s ease, filter 0.35s ease;
    cursor: zoom-in;
}

.home-gallery-item:hover img,
#imagesGrid .gallery-item:hover img {
    transform: scale(1.08);
    filter: brightness(1.06);
}

.home-gallery-item p,
#imagesGrid .gallery-item p {
    margin: 10px 6px 4px;
    color: #8B4513;
}

/* ===== Shared: Universal Image Lightbox ===== */
#imageLightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

#imageLightbox.open {
    display: flex;
}

#imageLightbox .lightbox-content {
    position: relative;
    width: min(92vw, 920px);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#imageLightbox img {
    width: auto;
    max-width: 100%;
    max-height: 85vh;
    border-radius: 10px;
    background: #fff;
}

.lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 28px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
}

.lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.lightbox-prev {
    left: -54px;
}

.lightbox-next {
    right: -54px;
}

.lightbox-close {
    position: absolute;
    top: -46px;
    right: 0;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

@media (max-width: 768px) {
    .lightbox-prev {
        left: 6px;
    }

    .lightbox-next {
        right: 6px;
    }

    .lightbox-close {
        top: 8px;
        right: 8px;
    }
}

/* ===== about.html: Reference-style Devotional Layout ===== */
.about-page {
    background:
        radial-gradient(circle at top left, #ffd57a56, transparent 26%),
        linear-gradient(180deg, #f4dfbf 0%, #f8ecd6 40%, #f1dcc1 100%);
}

.about-page main {
    padding-bottom: 0;
}

.about-page section {
    max-width: 100%;
    padding: 0;
}

.about-page .about-hero {
    min-height: 560px;
    background:
        linear-gradient(90deg, rgba(70, 22, 6, 0.55) 0%, rgba(70, 22, 6, 0.2) 35%, rgba(70, 22, 6, 0.45) 100%),
        url("image/about.png") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    position: relative;
}

.about-page .about-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 110px;
    background: linear-gradient(to top, #f6ead6, transparent);
}

.about-page .about-hero-overlay {
    position: relative;
    z-index: 1;
    color: #fff2dd;
    max-width: 820px;
}

.about-page .about-hero-mantra {
    letter-spacing: 0.08em;
    color: #ffd48d;
    font-weight: 700;
    margin-bottom: 14px;
}

.about-page .about-hero-overlay h1 {
    font-size: clamp(2.3rem, 5vw, 4.2rem);
    color: #fff5e8;
    margin-bottom: 10px;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

.about-page .about-hero-overlay h2 {
    font-size: clamp(1.4rem, 3vw, 2.3rem);
    color: #ffe0af;
    margin-bottom: 16px;
}

.about-page .about-hero-subtitle {
    font-size: 1.15rem;
    color: #fff0d0;
}

.about-page .about-story {
    max-width: var(--max-width);
    margin: -90px auto 0;
    padding: 0 16px 40px;
    position: relative;
    z-index: 2;
}

.about-page .about-story-shell {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    padding: 34px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 250, 241, 0.96), rgba(247, 232, 207, 0.96));
    border: 1px solid rgba(173, 104, 34, 0.24);
    box-shadow: 0 30px 60px rgba(82, 41, 14, 0.18);
}

.about-page .about-leader-card {
    background:
        radial-gradient(circle at top, rgba(255, 198, 108, 0.28), transparent 30%),
        linear-gradient(180deg, #7d160e 0%, #55110b 100%);
    color: #fff3df;
    border-radius: 30px;
    padding: 24px 22px;
    border: 2px solid rgba(243, 180, 58, 0.55);
    box-shadow: 0 24px 40px rgba(103, 21, 13, 0.26);
    text-align: center;
}

.about-page .about-leader-frame {
    width: min(100%, 250px);
    margin: 0 auto 18px;
    padding: 10px;
    border-radius: 26px;
    background: linear-gradient(180deg, #a83c1d, #5d120c);
    border: 1px solid rgba(255, 213, 137, 0.8);
}

.about-page .about-leader-frame img {
    width: 100%;
    display: block;
    border-radius: 20px;
    background: #fff7eb;
}

.about-page .about-leader-content h3 {
    font-size: 1.8rem;
    color: #ffd88a;
    margin-bottom: 10px;
}

.about-page .about-leader-content p {
    font-size: 1rem;
    color: #ffe4b8;
    margin-bottom: 8px;
}

.about-page .about-leader-content span {
    display: block;
    color: #f2d0b0;
    font-size: 0.95rem;
}

.about-page .about-story-content {
    padding: 10px 4px;
}

.about-page .about-kicker {
    color: #a45d10;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.about-page .about-story-content h2 {
    text-align: left;
    border: 0;
    margin-bottom: 18px;
    padding: 0;
    text-shadow: none;
    color: #6f170d;
    font-size: clamp(2rem, 4vw, 3rem);
}

.about-page .about-story-content p {
    font-size: 1.06rem;
    line-height: 1.9;
    color: #53311d;
    margin-bottom: 14px;
}

.about-page .about-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.about-page .about-stat-card {
    text-align: center;
    padding: 22px 14px;
    border-radius: 18px;
    background: rgba(255, 249, 238, 0.88);
    border: 1px solid rgba(188, 130, 56, 0.28);
}

.about-page .about-stat-card strong {
    display: block;
    font-size: 2rem;
    color: #7c170c;
    margin-bottom: 8px;
}

.about-page .about-stat-card span {
    color: #75431f;
    font-weight: 600;
}

.about-page .about-highlights {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px 16px 44px;
}

.about-page .about-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.about-page .about-highlight-card {
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 248, 235, 0.92);
    border: 1px solid rgba(179, 111, 38, 0.25);
    box-shadow: 0 16px 30px rgba(87, 49, 20, 0.1);
}

.about-page .about-highlight-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.about-page .about-highlight-card div {
    padding: 22px;
}

.about-page .about-highlight-card h3 {
    color: #7d160e;
    margin-bottom: 10px;
    font-size: 1.35rem;
}

.about-page .about-highlight-card p {
    color: #5c3922;
    line-height: 1.8;
}

.about-page .about-values-strip {
    background:
        linear-gradient(180deg, rgba(68, 14, 8, 0), rgba(91, 21, 13, 0.96)),
        url("image/contect.png") center/cover no-repeat;
    padding: 54px 16px 60px;
    color: #fff3dc;
}

.about-page .about-values-header {
    text-align: center;
    margin-bottom: 32px;
}

.about-page .about-values-header p {
    color: #ffc869;
    margin-bottom: 8px;
    font-weight: 700;
}

.about-page .about-values-header h2 {
    color: #fff1d4;
    text-shadow: none;
    border: 0;
    margin: 0;
    padding: 0;
}

.about-page .about-values-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.about-page .about-value-item {
    text-align: center;
    padding: 28px 18px;
    border-radius: 22px;
    background: rgba(255, 245, 222, 0.08);
    border: 1px solid rgba(255, 208, 121, 0.22);
    backdrop-filter: blur(3px);
}

.about-page .about-value-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
    background: rgba(255, 208, 121, 0.14);
    color: #ffd57c;
    font-weight: 700;
}

.about-page .about-value-item h3 {
    color: #fff0d2;
    margin-bottom: 8px;
}

.about-page .about-value-item p {
    color: #f5d3aa;
}

@media (max-width: 900px) {

    .about-page .about-story-shell,
    .about-page .about-highlight-grid,
    .about-page .about-values-grid,
    .about-page .about-stats {
        grid-template-columns: 1fr;
    }

    .about-page .about-story {
        margin-top: -60px;
    }
}

@media (max-width: 600px) {
    .about-page .about-hero {
        min-height: 420px;
        padding: 60px 16px;
    }

    .about-page .about-story-shell {
        padding: 20px;
        border-radius: 22px;
    }

    .about-page .about-leader-content h3 {
        font-size: 1.45rem;
    }

    .about-page .about-highlight-card img {
        height: 180px;
    }
}

/* =========================================
   PREMIUM ABOUT SECTION (HOME PAGE) 
========================================= */

.premium-about-section {
    position: relative;
    padding: 80px 20px;
    background: linear-gradient(180deg, #fdf6e9 0%, #fffbf2 100%);
    overflow: hidden;
}

/* Background ornament */
.premium-about-section::before {
    content: "";
    position: absolute;
    top: -50px;
    left: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(239, 145, 53, 0.15) 0%, rgba(253, 246, 233, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.premium-about-header {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 50px;
}

.premium-subtitle {
    display: inline-block;
    color: #cb5d0e;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    position: relative;
}

.premium-about-header h2 {
    font-size: 42px;
    color: #611306;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(97, 19, 6, 0.1);
    border-bottom: none;
    padding-bottom: 0;
}

.title-separator {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #cb5d0e, #f3b43a);
    margin: 15px auto 0;
    border-radius: 2px;
}

.premium-about-content {
    align-items: center;
    position: relative;
    z-index: 1;
}

.premium-main-heading {
    font-size: 28px;
    color: #8f140a;
    line-height: 1.4;
    margin-bottom: 30px;
    font-weight: 800;
}

.premium-feature-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.premium-feature-card {
    display: flex;
    gap: 16px;
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(143, 20, 10, 0.05);
    border: 1px solid rgba(243, 180, 58, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.premium-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(143, 20, 10, 0.12);
    border-color: rgba(243, 180, 58, 0.6);
}

.feature-icon-box {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #fff2dd, #fce1b4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.05);
}

.feature-text-content h4 {
    color: #7a1208;
    font-size: 18px;
    margin-bottom: 6px;
    font-weight: 700;
}

.feature-text-content p {
    color: #5a4031;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.premium-btn-container {
    margin-top: 20px;
}

.premium-btn-elegant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #a32110 0%, #d94c08 100%);
    color: white;
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 15px rgba(217, 76, 8, 0.3);
    transition: all 0.3s ease;
    border: none;
}

.premium-btn-elegant .arrow {
    transition: transform 0.3s ease;
}

.premium-btn-elegant:hover {
    background: linear-gradient(135deg, #bd2813 0%, #ef5c11 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(217, 76, 8, 0.4);
    color: #fff9f0;
}

.premium-btn-elegant:hover .arrow {
    transform: translateX(4px);
}

.premium-marquee-wrapper {
    position: relative;
    border-radius: 16px;
}

.premium-marquee-frame {
    position: relative;
    border-radius: 20px;
    padding: 12px;
    background: linear-gradient(135deg, #ffe0aa, #ffbb54);
    box-shadow: 0 15px 35px rgba(138, 23, 8, 0.15);
}

.premium-marquee-frame .about-marquee-box {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.premium-frame-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

.premium-maharaj-section {
    margin-top: 80px;
    position: relative;
    z-index: 1;
}

.premium-maharaj-intro {
    font-size: 24px;
    color: #611306;
}

.premium-maharaj-card {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(143, 20, 10, 0.08);
    position: relative;
    overflow: hidden;
}

.premium-maharaj-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(243, 180, 58, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.premium-maharaj-img-container {
    padding: 0;
}

.premium-img-border {
    position: relative;
    padding: 6px;
    background: linear-gradient(135deg, #e36b11, #f3b43a);
    border-radius: 12px;
}

.premium-img-border img {
    border: none;
    border-radius: 8px;
    display: block;
    width: 100%;
}

.maharaj-badge {
    display: inline-block;
    background: rgba(243, 180, 58, 0.2);
    color: #b56c00;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.premium-maharaj-info h4 {
    font-size: 26px;
    color: #7a1208;
    margin-bottom: 12px;
}

.premium-maharaj-info p {
    color: #5a4031;
    font-size: 16px;
    line-height: 1.8;
}

@media (max-width: 900px) {
    .premium-about-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .premium-maharaj-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .premium-maharaj-img-container {
        max-width: 300px;
        margin: 0 auto;
    }

    .premium-about-header h2 {
        font-size: 34px;
    }
}

/* =========================================
   SERVICES PAGE STYLE DEVELOPMENTS
========================================= */

.services-page {
    background:
        radial-gradient(circle at top left, #ffd57a56, transparent 26%),
        linear-gradient(180deg, #f4dfbf 0%, #f8ecd6 40%, #f1dcc1 100%);
}

.services-page main {
    padding-bottom: 0;
}

.services-page section {
    max-width: 100%;
    padding: 0;
}

/* Services Hero Banner */
.services-page .services-hero {
    min-height: 560px;
    background:
        linear-gradient(90deg, rgba(70, 22, 6, 0.55) 0%, rgba(70, 22, 6, 0.2) 35%, rgba(70, 22, 6, 0.45) 100%),
        url("image/contect.png") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    position: relative;
}

.services-page .services-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 110px;
    background: linear-gradient(to top, #f6ead6, transparent);
}

.services-page .services-hero-overlay {
    position: relative;
    z-index: 1;
    color: #fff2dd;
    max-width: 820px;
}

.services-page .services-hero-mantra {
    letter-spacing: 0.08em;
    color: #ffd48d;
    font-weight: 700;
    margin-bottom: 14px;
}

.services-page .services-hero-overlay h1 {
    font-size: clamp(2.3rem, 5vw, 4.2rem);
    color: #fff5e8;
    margin-bottom: 10px;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

.services-page .services-hero-overlay h2 {
    font-size: clamp(1.4rem, 3vw, 2.3rem);
    color: #ffe0af;
    margin-bottom: 16px;
    font-weight: 500;
}

/* Services Page Card Grid */
.services-page #services {
    background: transparent;
    padding: 40px 16px 60px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.services-page .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 20px;
}

.services-page .service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 36px 24px;
    background: linear-gradient(135deg, #ffffff 0%, #fffdf9 100%);
    border: 1px solid rgba(143, 20, 10, 0.12);
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.04);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: #5a4031;
}

.services-page .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(143, 20, 10, 0.12);
    border-color: rgba(243, 180, 58, 0.8);
    background: linear-gradient(135deg, #ffffff 0%, #fffcf5 100%);
}

.services-page .service-icon-box {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #fff2dd, #fce1b4);
    border: 1px solid rgba(243, 180, 58, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8), 0 4px 10px rgba(143, 20, 10, 0.05);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.services-page .service-icon-box svg {
    width: 32px;
    height: 32px;
    fill: #8f2d13;
    transition: transform 0.35s ease;
}

.services-page .service-card:hover .service-icon-box {
    transform: scale(1.1);
    background: linear-gradient(135deg, #fce1b4, #ffd57a);
    box-shadow: 0 8px 20px rgba(243, 180, 58, 0.3);
    border-color: rgba(243, 180, 58, 0.8);
}

.services-page .service-card:hover .service-icon-box svg {
    transform: rotate(5deg) scale(1.05);
}

.services-page .service-card h3 {
    font-size: 1.35rem;
    color: #7a1208;
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.services-page .service-card:hover h3 {
    color: #a32110;
}

.services-page .service-card p {
    font-size: 0.95rem;
    color: #6d5241;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .services-page .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .services-page .services-hero {
        min-height: 420px;
        padding: 60px 16px;
    }
}

@media (max-width: 600px) {
    .services-page .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ==========================================================================
   10) Admin Dashboard & Login Premium Styles
   ========================================================================== */
.dashboard-page-bg {
    background: radial-gradient(circle at 10% 20%, #f7e7cf 0%, #fff7e8 90%);
    min-height: 100vh;
    font-family: var(--font);
}

/* Active Navigation Highlight */
header nav ul li a.active-nav {
    color: var(--accent) !important;
    font-weight: bold;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 4px;
}

/* Main Container Layout */
.dashboard-main-container {
    max-width: var(--max-width);
    margin: 40px auto;
    padding: 0 20px;
    min-height: 75vh;
    position: relative;
}

/* Loading Overlay */
.dashboard-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(247, 231, 207, 0.85);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius);
}

.dashboard-loading .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(138, 23, 8, 0.1);
    border-top: 5px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Glassmorphism Auth / Login Card */
.auth-section-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 20px;
}

.auth-card-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 40px 30px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 15px 35px rgba(138, 23, 8, 0.12), 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition);
}

.auth-card-glass:hover {
    transform: translateY(-2px);
}

.auth-brand {
    text-align: center;
    margin-bottom: 30px;
}

.auth-brand img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.auth-brand h2 {
    color: var(--primary);
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 6px;
    border: none;
    padding: 0;
    text-align: center;
}

.auth-brand p {
    color: #666;
    font-size: 14px;
}

/* Form Styles */
.form-group-modern {
    margin-bottom: 22px;
    text-align: left;
}

.form-group-modern label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.form-group-modern input,
.form-group-modern textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid rgba(138, 23, 8, 0.15);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 15px;
    color: var(--text);
    transition: all var(--transition);
    outline: none;
}

.form-group-modern input:focus,
.form-group-modern textarea:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(216, 74, 0, 0.15);
    background: #fff;
}

.btn-modern-login {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(138, 23, 8, 0.25);
    transition: all var(--transition);
}

.btn-modern-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(138, 23, 8, 0.35);
}

.auth-error-msg {
    color: #cc0000;
    font-size: 13.5px;
    margin-top: 15px;
    text-align: center;
    font-weight: bold;
}

/* ==========================================
   Dashboard Workspace Grid Layout
   ========================================== */
.dashboard-workspace-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

/* Sidebar Styling */
.dash-sidebar {
    background: linear-gradient(180deg, #500e05 0%, #8a1708 100%);
    color: white;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-profile-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 25px;
}

.admin-profile-box .avatar {
    font-size: 32px;
    background: rgba(255, 255, 255, 0.15);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.admin-details h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #ffe8cc;
}

.admin-details .role {
    font-size: 12px;
    color: #e0d0c0;
    opacity: 0.8;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-tab-btn {
    background: transparent;
    color: #f7e7cf;
    border: none;
    padding: 14px 18px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    width: 100%;
    transition: all var(--transition);
}

.sidebar-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    transform: translateX(4px);
}

.sidebar-tab-btn.active {
    background: var(--accent);
    color: #3e2618;
    box-shadow: 0 4px 15px rgba(243, 180, 58, 0.35);
}

.sidebar-tab-btn.active:hover {
    background: var(--accent);
    color: #3e2618;
    transform: none;
}

.logout-btn-sidebar {
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    color: #ff9999;
}

.logout-btn-sidebar:hover {
    background: rgba(255, 100, 100, 0.15);
    color: #ffcccc;
}

/* Content Area Layout */
.dash-content-area {
    padding: 30px 40px 40px 30px;
    min-height: 650px;
}

.dash-tab-content {
    display: none;
    animation: fadeInTab 0.35s ease;
}

.dash-tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-header {
    margin-bottom: 30px;
}

.tab-header h2 {
    color: var(--primary);
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 5px;
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
}

.tab-header p {
    color: #666;
    font-size: 14px;
}

/* Stats Cards Grid */
.stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 35px;
}

.stat-card-premium {
    position: relative;
    border-radius: 16px;
    padding: 24px 20px;
    overflow: hidden;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.02);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stat-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(139, 69, 19, 0.08);
}

.stat-card-premium .card-glow {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
}

.stat-card-premium.color-donations .card-glow { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.stat-card-premium.color-reviews .card-glow { background: linear-gradient(135deg, #2980b9, #3498db); }
.stat-card-premium.color-notice .card-glow { background: linear-gradient(135deg, #e67e22, #f1c40f); }
.stat-card-premium.color-status .card-glow { background: linear-gradient(135deg, #16a085, #1abc9c); }

.stat-card-premium .card-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.stat-card-premium .stat-icon {
    font-size: 28px;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.stat-card-premium.color-donations .stat-icon { background: #e8f8f0; color: #27ae60; }
.stat-card-premium.color-reviews .stat-icon { background: #eef5fc; color: #2980b9; }
.stat-card-premium.color-notice .stat-icon { background: #fdf5e6; color: #d84a00; }
.stat-card-premium.color-status .stat-icon { background: #eafcf8; color: #16a085; }

.stat-info h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}

.stat-info p {
    margin: 0;
    font-size: 12.5px;
    color: #777;
    font-weight: 600;
}

/* Dashboard Panels Layout */
.overview-details-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.dashboard-panel-card {
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(138, 23, 8, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.dashboard-panel-card.full-width-panel {
    grid-column: 1 / -1;
}

.dashboard-panel-card .panel-header {
    padding: 20px 24px;
    border-bottom: 1px solid #f2e6d6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fffdf9;
}

.dashboard-panel-card .panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

.btn-panel-action {
    background: transparent;
    color: var(--secondary);
    border: 1.5px solid var(--secondary);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s;
}

.btn-panel-action:hover {
    background: var(--secondary);
    color: white;
}

.dashboard-panel-card .panel-body {
    padding: 24px;
}

/* Responsive Tables */
.responsive-table-wrapper {
    overflow-x: auto;
}

.dash-data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.dash-data-table th {
    padding: 12px 16px;
    background: #f7efe4;
    color: var(--text);
    font-weight: 700;
    font-size: 13.5px;
    border-bottom: 2px solid #e7d8c4;
}

.dash-data-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f4eae0;
    font-size: 14px;
    color: #4a3c31;
}

.dash-data-table tr:last-child td {
    border-bottom: none;
}

.dash-data-table tr:hover td {
    background: #fffcf8;
}

.dash-data-table td code {
    font-family: monospace;
    background: #f0ede8;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12.5px;
    color: #333;
}

.dash-data-table .amount-col {
    font-weight: 700;
    color: #27ae60;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.status-badge.status-success {
    background: #d4edda;
    color: #155724;
}

.status-badge.status-pending {
    background: #fff3cd;
    color: #856404;
}

/* Recent Reviews (Overview) */
.recent-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recent-review-item {
    padding-bottom: 14px;
    border-bottom: 1px dashed #f2e3d3;
}

.recent-review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.recent-review-item .author-meta {
    font-size: 13.5px;
    color: var(--text);
    margin-bottom: 4px;
}

.recent-review-item p {
    margin: 0;
    font-size: 13.5px;
    color: #665246;
    font-style: italic;
    line-height: 1.5;
}

/* Notice Tab Layout */
.notice-editor-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 25px;
}

.btn-update-notice {
    background: linear-gradient(135deg, var(--secondary) 0%, #ff6f00 100%);
    color: white;
    font-weight: bold;
    border: none;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(216, 74, 0, 0.25);
    transition: all 0.3s;
}

.btn-update-notice:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(216, 74, 0, 0.35);
}

.preview-notice-body {
    background: #fffcf8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px;
}

.live-notice-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #3e0a05 0%, #8a1708 100%);
    color: white;
    border: 1px solid rgba(255, 213, 138, 0.3);
    border-radius: 12px;
    padding: 18px 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.live-notice-banner .preview-icon {
    font-size: 24px;
    background: rgba(255, 213, 138, 0.2);
    border: 1px solid rgba(255, 213, 138, 0.4);
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.live-notice-banner .preview-text h4 {
    margin: 0 0 4px 0;
    color: #ffdeb3;
    font-size: 16px;
    font-weight: 700;
}

.live-notice-banner .preview-text p {
    margin: 0;
    font-size: 13.5px;
    opacity: 0.9;
    line-height: 1.4;
}

/* Devotee Feedback Moderation Tab */
.experiences-mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.mod-experience-card {
    background: #fffdf9;
    border: 1px solid #ecdac3;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--transition);
}

.mod-experience-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(139, 69, 19, 0.05);
}

.mod-experience-card .exp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.mod-experience-card .exp-header h4 {
    margin: 0 0 2px 0;
    font-size: 15px;
    color: var(--text);
    font-weight: 700;
}

.mod-experience-card .exp-header .loc {
    font-size: 12px;
    color: #888;
    font-weight: 600;
}

.btn-delete-exp {
    background: #fee;
    color: #c00;
    border: 1px solid #fcc;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s;
}

.btn-delete-exp:hover {
    background: #c00;
    color: white;
    border-color: #c00;
}

.mod-experience-card .exp-msg {
    margin: 0 0 16px 0;
    font-size: 13.5px;
    color: #555;
    line-height: 1.6;
    font-style: italic;
}

.mod-experience-card .exp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #f2e3d3;
    padding-top: 12px;
    font-size: 12.5px;
    color: #666;
    font-weight: 600;
}

/* Responsive Layout Overrides */
@media (max-width: 991px) {
    .dashboard-workspace-grid {
        grid-template-columns: 1fr;
    }
    
    .dash-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 25px;
    }
    
    .admin-profile-box {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    
    .sidebar-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .sidebar-tab-btn {
        padding: 10px 14px;
        font-size: 13.5px;
    }
    
    .logout-btn-sidebar {
        margin-top: 0;
        border-top: none;
        padding-top: 0;
    }
    
    .dash-content-area {
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .dashboard-main-container {
        margin: 15px auto;
        padding: 0 8px;
    }
    
    .dash-content-area {
        padding: 12px;
    }

    .overview-details-row {
        grid-template-columns: 1fr;
    }
    
    .notice-editor-grid {
        grid-template-columns: 1fr;
    }

    /* Homepage Notice Mobile Styles */
    .info-notice {
        padding: 16px 20px;
        margin: -30px auto 30px auto;
    }
    
    .info-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .info-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        width: 100%;
    }
    
    .info-icon {
        min-width: 48px;
        height: 48px;
        font-size: 24px;
    }
    
    .info-image {
        max-width: 100%;
        max-height: 180px;
        width: auto;
        margin: 0 auto;
    }
    
    .info-link {
        display: inline-flex;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ===== Devotee Management Styles ===== */
.devotees-workspace-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.devotees-nav-tabs {
    position: sticky;
    top: 102px;
    z-index: 990;
    background: rgba(255, 247, 232, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding-top: 10px;
    display: flex;
    gap: 12px;
    border-bottom: 2px solid rgba(138, 23, 8, 0.15);
    padding-bottom: 10px;
    margin-bottom: 15px;
    overflow-x: auto;
}

.devotee-subtab-btn {
    background: rgba(255, 242, 221, 0.6);
    border: 1px solid rgba(138, 23, 8, 0.2);
    padding: 10px 18px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.devotee-subtab-btn:hover {
    background: rgba(216, 74, 0, 0.1);
    color: var(--secondary);
}

.devotee-subtab-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff2dd;
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(138, 23, 8, 0.15);
}

.devotee-subtab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.devotee-subtab-content.active {
    display: block;
}

/* Form Styles */
.form-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group-counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    background: rgba(255, 242, 221, 0.5);
    padding: 15px;
    border-radius: var(--radius);
    border: 1px dashed rgba(197, 59, 0, 0.2);
}

/* Camera Capture Styles */
.camera-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background: #22120b;
    padding: 20px;
    border-radius: var(--radius);
    border: 2px solid var(--primary);
    position: relative;
    overflow: hidden;
}

.camera-preview-window {
    width: 100%;
    max-width: 320px;
    height: 240px;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.camera-preview-window video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-preview-window canvas {
    display: none;
}

.captured-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: #000;
}

.camera-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Checkout Search Styles */
.checkout-search-card {
    background: var(--card);
    border: 1px solid rgba(138, 23, 8, 0.15);
    border-radius: var(--radius);
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.search-input-wrapper {
    display: flex;
    gap: 15px;
    max-width: 600px;
}

.search-input-wrapper input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(138, 23, 8, 0.3);
    border-radius: var(--radius);
    font-size: 16px;
    background: #fff;
    color: var(--text);
}

.checkout-details-box {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 25px;
    background: rgba(255, 242, 221, 0.5);
    padding: 25px;
    border-radius: var(--radius);
    border: 1px solid rgba(138, 23, 8, 0.15);
    margin-top: 20px;
    animation: slideDown 0.3s ease;
}

.checkout-devotee-photo {
    width: 180px;
    height: 180px;
    border-radius: var(--radius);
    object-fit: cover;
    border: 3px solid var(--primary);
    background: #fff2dd;
}

.checkout-devotee-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-row-item {
    display: flex;
    border-bottom: 1px solid rgba(138, 23, 8, 0.1);
    padding-bottom: 6px;
}

.info-row-item strong {
    width: 160px;
    color: var(--primary);
}

/* Calendar Filter & Stats Layout */
.calendar-picker-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--card);
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid rgba(138, 23, 8, 0.15);
    margin-bottom: 25px;
}

.calendar-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-input-group input[type="date"] {
    padding: 10px 15px;
    border: 1px solid rgba(138, 23, 8, 0.3);
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    background: #fff;
    cursor: pointer;
}

.action-buttons-group {
    display: flex;
    gap: 12px;
}

.stats-grid-devotees {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.stat-box-small {
    background: #fff;
    border-radius: var(--radius);
    padding: 15px;
    border: 1px solid rgba(138, 23, 8, 0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform var(--transition);
}

.stat-box-small:hover {
    transform: translateY(-2px);
}

.stat-box-small .icon-wrapper {
    font-size: 24px;
    background: rgba(216, 74, 0, 0.1);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--secondary);
}

.stat-box-small .val-group h4 {
    font-size: 20px;
    color: var(--text);
    font-weight: 800;
}

.stat-box-small .val-group p {
    font-size: 12.5px;
    color: #777;
    font-weight: 500;
}

/* Devotee Table Badges */
.devotee-status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
}

.devotee-status-badge.new {
    background-color: rgba(216, 74, 0, 0.15);
    color: var(--secondary);
    border: 1px solid rgba(216, 74, 0, 0.3);
}

.devotee-status-badge.old {
    background-color: rgba(138, 23, 8, 0.15);
    color: var(--primary);
    border: 1px solid rgba(138, 23, 8, 0.3);
}

.gender-tags-container {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gender-tag-pill {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}

.gender-tag-pill.male {
    background: rgba(43, 108, 176, 0.1);
    color: #2b6cb0;
}

.gender-tag-pill.female {
    background: rgba(184, 50, 128, 0.1);
    color: #b83280;
}

.gender-tag-pill.child {
    background: rgba(47, 133, 90, 0.1);
    color: #2f855a;
}

.sheet-settings-guide {
    background: rgba(255, 242, 221, 0.5);
    border-left: 4px solid var(--secondary);
    padding: 20px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-top: 15px;
}

.sheet-settings-guide code {
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: Consolas, monospace;
    font-size: 13.5px;
    color: var(--primary);
    border: 1px solid rgba(0,0,0,0.08);
}

.code-block-wrapper {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: Consolas, monospace;
    font-size: 12.5px;
    margin-top: 10px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.checkout-devotee-photo {
    width: 180px;
    height: 180px;
    border-radius: var(--radius);
    object-fit: cover;
    border: 3px solid var(--primary);
    background: #fff2dd;
}

.checkout-devotee-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-row-item {
    display: flex;
    border-bottom: 1px solid rgba(138, 23, 8, 0.1);
    padding-bottom: 6px;
}

.info-row-item strong {
    width: 160px;
    color: var(--primary);
}

/* Calendar Filter & Stats Layout */
.calendar-picker-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--card);
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid rgba(138, 23, 8, 0.15);
    margin-bottom: 25px;
}

.calendar-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-input-group input[type="date"] {
    padding: 10px 15px;
    border: 1px solid rgba(138, 23, 8, 0.3);
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    background: #fff;
    cursor: pointer;
}

.action-buttons-group {
    display: flex;
    gap: 12px;
}

.stats-grid-devotees {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.stat-box-small {
    background: #fff;
    border-radius: var(--radius);
    padding: 15px;
    border: 1px solid rgba(138, 23, 8, 0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform var(--transition);
}

.stat-box-small:hover {
    transform: translateY(-2px);
}

.stat-box-small .icon-wrapper {
    font-size: 24px;
    background: rgba(216, 74, 0, 0.1);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--secondary);
}

.stat-box-small .val-group h4 {
    font-size: 20px;
    color: var(--text);
    font-weight: 800;
}

.stat-box-small .val-group p {
    font-size: 12.5px;
    color: #777;
    font-weight: 500;
}

/* Devotee Table Badges */
.devotee-status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
}

.devotee-status-badge.new {
    background-color: rgba(216, 74, 0, 0.15);
    color: var(--secondary);
    border: 1px solid rgba(216, 74, 0, 0.3);
}

.devotee-status-badge.old {
    background-color: rgba(138, 23, 8, 0.15);
    color: var(--primary);
    border: 1px solid rgba(138, 23, 8, 0.3);
}

.gender-tags-container {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gender-tag-pill {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}

.gender-tag-pill.male {
    background: rgba(43, 108, 176, 0.1);
    color: #2b6cb0;
}

.gender-tag-pill.female {
    background: rgba(184, 50, 128, 0.1);
    color: #b83280;
}

.gender-tag-pill.child {
    background: rgba(47, 133, 90, 0.1);
    color: #2f855a;
}

.sheet-settings-guide {
    background: rgba(255, 242, 221, 0.5);
    border-left: 4px solid var(--secondary);
    padding: 20px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-top: 15px;
}

.sheet-settings-guide code {
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: Consolas, monospace;
    font-size: 13.5px;
    color: var(--primary);
    border: 1px solid rgba(0,0,0,0.08);
}

.code-block-wrapper {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: Consolas, monospace;
    font-size: 12.5px;
    margin-top: 10px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive Overrides */
@media (max-width: 991px) {
    .checkout-details-box {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .info-row-item {
        justify-content: center;
    }
    .info-row-item strong {
        width: auto;
        margin-right: 10px;
    }
}

/* ==========================================================================
   Admin Gallery Manager Styles (Premium Look)
   ========================================================================== */
.dashboard-gallery-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    padding: 10px 5px;
}

.dashboard-gallery-item {
    background: var(--card);
    border: 1px solid var(--muted);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
}

.dashboard-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(138, 23, 8, 0.15);
}

.dashboard-gallery-item .thumbnail-container {
    width: 100%;
    height: 110px;
    background: #1e1e24;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dashboard-gallery-item img, 
.dashboard-gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-gallery-item .media-placeholder {
    color: var(--accent);
    font-size: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.dashboard-gallery-item .item-details {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.dashboard-gallery-item .item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

.dashboard-gallery-item .btn-delete-media {
    width: 100%;
    padding: 6px 10px;
    background: #e03131;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.dashboard-gallery-item .btn-delete-media:hover {
    background: #c92a2a;
}

/* ==========================================================================
   Devotee Check-in Profile & Visit History Styles
   ========================================================================== */
.devotee-checkin-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    width: 100%;
}

@media (min-width: 1024px) {
    .devotee-checkin-layout.has-history {
        grid-template-columns: 1.2fr 1fr;
    }
}

.checkin-history-panel {
    background: var(--card);
    border: 1px solid var(--muted);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 4px 15px rgba(138, 23, 8, 0.1);
    animation: fadeInSlide 0.4s ease-out;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-header-premium {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1.5px dashed rgba(138, 23, 8, 0.2);
}

.profile-photo-container {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(138, 23, 8, 0.05);
    flex-shrink: 0;
}

.profile-photo-premium {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-meta-premium {
    flex-grow: 1;
}

.profile-meta-premium .profile-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
    text-transform: capitalize;
}

.profile-meta-premium .profile-details {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 6px;
    opacity: 0.9;
}

.profile-badge-returning {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--secondary);
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-address-box {
    background: rgba(216, 74, 0, 0.06);
    border: 1px solid rgba(216, 74, 0, 0.15);
    border-radius: 6px;
    padding: 10px 15px;
    font-size: 13.5px;
    color: var(--text);
    margin-bottom: 20px;
}

.history-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-table-container {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid rgba(138, 23, 8, 0.15);
    border-radius: 6px;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.history-table th {
    background: rgba(138, 23, 8, 0.08);
    color: var(--primary);
    font-weight: 700;
    padding: 10px;
    position: sticky;
    top: 0;
    border-bottom: 1px solid rgba(138, 23, 8, 0.15);
}

.history-table td {
    padding: 10px;
    border-bottom: 1px solid rgba(138, 23, 8, 0.08);
    color: var(--text);
}

.history-table tr:last-child td {
    border-bottom: none;
}

.history-table tr:hover {
    background: rgba(216, 74, 0, 0.04);
}

/* ==========================================================================
   Photo Lightbox Styles
   ========================================================================== */
.photo-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.photo-lightbox.active {
    display: flex;
    animation: zoomIn 0.25s ease-out;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 85%;
    border-radius: var(--radius);
    border: 3px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}

/* ==========================================================================
   Mobile responsiveness improvements for Devotee Register
   ========================================================================== */

/* Responsive Photo Upload & Capture Grid */
.devotee-photo-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 15px;
}

@media (max-width: 768px) {
    .devotee-photo-section {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .devotees-nav-tabs {
        top: 94px;
        padding-top: 8px;
        gap: 8px;
        padding-bottom: 6px;
        margin-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        background: rgba(255, 247, 232, 0.95);
    }
    
    .devotee-subtab-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .camera-preview-window {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4/3;
    }
}

.camera-container {
    width: 100%;
    box-sizing: border-box;
}

.devotee-upload-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(138, 23, 8, 0.05);
    padding: 20px;
    border-radius: var(--radius);
    border: 1px dashed rgba(138, 23, 8, 0.25);
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .form-group-counts {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }
    
    .profile-header-premium {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 10px;
    }
    
    .profile-photo-container {
        margin: 0 auto;
    }
    
    .profile-meta-premium {
        text-align: center;
    }
}

/* Calendar Collapsible Panels */
.calendar-toggle-header {
    cursor: pointer;
    user-select: none;
    background: #fffdf9;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.calendar-toggle-header:hover {
    background: #fdf6ec !important;
}

.calendar-toggle-header .toggle-icon {
    font-size: 11px;
    color: var(--primary);
    transition: transform 0.2s ease;
    display: inline-block;
    margin-right: 8px;
    transform: rotate(0deg);
}

.calendar-toggle-header.expanded .toggle-icon {
    transform: rotate(90deg);
}