/* =========================================================
   HINDU TEMPLE BELGIUM
   TRADITIONAL SOUTH INDIAN TEMPLE DESIGN
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;

    min-height: 100%;
}


body.temple-site {
    margin: 0 !important;
    padding: 0 !important;

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: #49362d;

    background: #fff8ea;
}


body.temple-site .app-page-content {
    flex: 1;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff8ea !important;
}


/* =========================================================
   HEADER
========================================================= */

.temple-header {
    background:
        linear-gradient(
            100deg,
            #26002f 0%,
            #3a0647 45%,
            #4a0b59 72%,
            #26002f 100%
        ) !important;

    border-top:
        2px solid #b88222 !important;

    border-bottom:
        3px solid #d5a83d !important;

    box-shadow:
        0 5px 16px
        rgba(34, 0, 44, .28) !important;
}


/* SUBTLE ORNAMENT */

.temple-header::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 2px;

    height: 4px;

    opacity: .45;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 6px,
            #e3be67 6px 8px,
            transparent 8px 14px
        );
}


/* =========================================================
   HEADER INNER
========================================================= */

.temple-header-inner {
    width: 100%;

    max-width: 1580px;

    min-height: 108px;

    margin: 0 auto;

    padding: 11px 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 32px;
}


/* =========================================================
   BRAND / LOGO
========================================================= */

.temple-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    text-decoration: none;
}

.temple-brand-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.temple-brand-name {
    color: #ebcd7a;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .01em;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0,0,0,0.22);
}


/* =========================================================
   NAVIGATION
========================================================= */

.temple-nav {
    display: flex;

    align-items: center;

    gap: 36px;

    margin-left: auto;

    white-space: nowrap;
}


.temple-nav > a {
    position: relative;

    color: #fff0ce;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    transition:
        color .2s ease;
}


.temple-nav > a:hover,
.temple-nav > a.active {
    color: #efd071;
}


.temple-nav > a.active::after {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;

    bottom: -13px;

    height: 3px;

    border-radius: 4px;

    background: #e9c557;
}


/* =========================================================
   USER MENU
========================================================= */

.temple-user-dropdown {
    position: relative;
}


.temple-user-button {
    padding: 10px 16px;

    border:
        1px solid rgba(231,195,104,.40);

    border-radius: 5px;

    cursor: pointer;

    color: #fff1d0;

    background:
        rgba(255,255,255,.06);

    font-family: inherit;

    font-weight: 600;
}


.temple-user-menu {
    display: none;

    position: absolute;

    top: 48px;
    right: 0;

    min-width: 210px;

    overflow: hidden;

    border:
        1px solid #ddbd79;

    border-radius: 7px;

    background: #fff8e9;

    box-shadow:
        0 15px 35px
        rgba(51,14,6,.22);
}


.temple-user-menu.show {
    display: block;
}


.temple-user-menu a {
    display: block;

    padding: 12px 17px;

    color: #6c0b12;

    text-decoration: none;

    border-bottom:
        1px solid #ead8ae;
}


.temple-user-menu a:hover {
    background: #f7e8c7;
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.temple-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    padding: 8px;

    border: none;

    background: transparent;

    cursor: pointer;
}


.temple-menu-button span {
    display: block;

    height: 2px;

    margin: 6px 0;

    background: #f1d47e;
}


/* =========================================================
   HOME
========================================================= */

.traditional-home {
    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   HERO
========================================================= */

.traditional-hero {
    position: relative;

    width: 100%;

    min-height:
        calc(100vh - 194px);

    overflow: hidden;

    display: flex;

    align-items: center;

    background:

        radial-gradient(
            circle at 72% 52%,
            rgba(234,178,64,.27),
            transparent 31%
        ),

        radial-gradient(
            circle at 19% 24%,
            rgba(255,255,255,.68),
            transparent 32%
        ),

        linear-gradient(
            105deg,
            #fffaf0 0%,
            #fff4dc 52%,
            #f5d99f 100%
        );
}


/* TEXTURE */

.traditional-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .055;

    background-image:
        radial-gradient(
            circle,
            #a76f28 0 1px,
            transparent 1.4px
        );

    background-size:
        11px 11px;
}


/* LEFT MANDALA */

.traditional-hero::after {
    content: "✺";

    position: absolute;

    left: -85px;
    bottom: -125px;

    color:
        rgba(183,114,30,.10);

    font-size: 410px;

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   HERO INNER
========================================================= */

.traditional-hero-inner {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding:
        55px 6.5% 72px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 25px;
}


/* =========================================================
   LEFT HERO CONTENT
========================================================= */

.traditional-hero-copy {
    max-width: 700px;

    margin: 0 auto;

    text-align: center;
}


.hero-ornament {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;
}


.hero-ornament span {
    width: 105px;
    height: 1px;

    background: #b57b28;
}


.hero-ornament strong {
    color: #ad7120;

    font-size: 16px;
}


.hero-eyebrow {
    margin-bottom: 8px;

    color: #8d5b20;

    font-size: 17px;

    font-weight: 600;

    letter-spacing: .30em;
}


/* =========================================================
   HERO TITLE
========================================================= */

.traditional-hero h1 {
    margin: 0;

    line-height: .91;

    font-weight: 700;
}


.hero-red {
    display: block;

    color: #770910;

    font-size:
        clamp(60px, 6vw, 94px);
}


.hero-gold {
    display: block;

    color: #a36a19;

    font-size:
        clamp(62px, 6.2vw, 98px);
}


/* =========================================================
   VALUES
========================================================= */

.hero-values {
    margin-top: 28px;

    color: #80531f;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .23em;
}


.hero-values b {
    margin: 0 9px;

    color: #a87737;
}


/* =========================================================
   DIVIDER
========================================================= */

.hero-divider {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin:
        29px auto 18px;
}


.hero-divider span {
    width: 130px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ba8130
        );
}


.hero-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            #ba8130,
            transparent
        );
}


.hero-divider strong {
    color: #ad701e;
}


/* =========================================================
   INTRO
========================================================= */

.hero-intro {
    max-width: 625px;

    margin: 0 auto;

    color: #665248;

    font-size: 18px;

    line-height: 1.55;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.hero-actions {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;
}


.traditional-button {
    min-width: 205px;

    min-height: 57px;

    padding: 0 25px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border-radius: 6px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 700;

    transition:
        transform .2s ease,
        background .2s ease;
}


.traditional-button.primary {
    color: #fff4d6;

    background:
        linear-gradient(
            135deg,
            #8c0c15,
            #65060d
        );

    border:
        1px solid #b57b25;

    box-shadow:
        0 8px 19px
        rgba(104,17,11,.16);
}


.traditional-button.secondary {
    color: #672214;

    background:
        rgba(255,250,238,.70);

    border:
        1px solid #bb8030;
}


.traditional-button:hover {
    transform:
        translateY(-2px);
}


.button-temple-symbol {
    color: #e2bc5f;

    font-size: 21px;
}


.button-arrow {
    font-family: Arial, sans-serif;

    font-size: 27px;

    font-weight: 400;
}


/* =========================================================
   RIGHT TEMPLE IMAGE
========================================================= */

.traditional-temple-visual {
    position: relative;

    min-height: 620px;

    display: flex;

    align-items: flex-end;

    justify-content: center;
}


.temple-sun-glow {
    position: absolute;

    right: -10px;
    bottom: 50px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,236,158,.92) 0%,
            rgba(239,181,61,.25) 43%,
            transparent 72%
        );

    filter: blur(4px);
}


.traditional-temple-image {
    position: relative;

    z-index: 2;

    width: min(100%, 650px);

    max-height: 680px;

    display: block;

    object-fit: contain;

    object-position:
        bottom center;

    opacity: .87;

    filter:
        sepia(.20)
        saturate(.75)
        contrast(.92)
        drop-shadow(
            0 18px 25px
            rgba(112,67,26,.12)
        );

    mix-blend-mode: multiply;
}


/* =========================================================
   HANGING LAMPS
========================================================= */

.traditional-lamp {
    position: absolute;

    top: 0;

    z-index: 8;

    width: 60px;
    height: 188px;

    pointer-events: none;
}


.lamp-left {
    left: 58px;
}


.lamp-right {
    right: 58px;
}


.lamp-chain {
    position: absolute;

    left: 50%;
    top: 0;

    width: 2px;
    height: 115px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            #895a18,
            #ca9843
        );
}


.lamp-diya {
    position: absolute;

    left: 50%;
    bottom: 24px;

    width: 60px;
    height: 19px;

    transform:
        translateX(-50%);

    border-radius:
        5px 5px 30px 30px;

    background:
        linear-gradient(
            #f2cc72,
            #a65e15
        );

    box-shadow:
        0 5px 10px
        rgba(88,48,7,.21);
}


.lamp-flame {
    position: absolute;

    left: 50%;
    bottom: 42px;

    width: 12px;
    height: 21px;

    transform:
        translateX(-50%)
        rotate(45deg);

    border-radius:
        70% 0 70% 70%;

    background:
        linear-gradient(
            #fff7ad,
            #e78d15
        );

    box-shadow:
        0 0 16px
        rgba(229,145,26,.60);
}


/* =========================================================
   TRADITIONAL BOTTOM BORDER
========================================================= */

.hero-bottom-border {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 12px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    overflow: hidden;

    background:
        linear-gradient(
            #8d1014,
            #69070b
        );

    border-top:
        2px solid #c79234;
}


.hero-bottom-border span {
    width: 7px;
    height: 7px;

    transform: rotate(45deg);

    border:
        1px solid #d0a54b;
}


/* =========================================================
   FOOTER
========================================================= */

.temple-footer {
    position: relative;

    width: 100%;

    min-height: 84px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 13px 48px;

    background:
        linear-gradient(
            100deg,
            #58060b 0%,
            #73090f 45%,
            #8a1016 70%,
            #60070b 100%
        );

    border-top:
        3px solid #c79433;

    color: #fff0d1;

    box-shadow:
        0 -4px 16px
        rgba(66,4,9,.22);
}


/* FOOTER SOCIAL */

.temple-footer-social {
    position: absolute;

    left: 48px;

    display: flex;

    align-items: center;

    gap: 13px;
}

.temple-social {
    position: relative;
}

.temple-social::after {
    content: attr(data-tooltip);

    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);

    transform: translateX(-50%);

    padding: 6px 9px;

    color: #fff7e6;
    background: #3a0647;

    border: 1px solid #d7aa3f;
    border-radius: 6px;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        transform .2s ease;

    z-index: 9999;
}

.temple-social:hover::after {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(-2px);
}
.temple-social {
    width: 39px;
    height: 39px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #e8c466;

    border:
        1px solid rgba(232,196,102,.60);

    text-decoration: none;

    transition: .2s ease;
}


.temple-social:hover {
    color: #61070b;

    background: #e8c466;
}


.temple-social svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}


.temple-social svg rect,
.temple-social svg circle {
    fill: none;

    stroke: currentColor;

    stroke-width: 2;
}


.temple-social .youtube-play {
    fill: #6c080d;
}


/* FOOTER COPYRIGHT */

.temple-footer-copyright {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    text-align: center;

    color: #ffefd0;

    font-size: 13px;
}


.footer-decoration {
    color: #b9842e;

    font-size: 11px;
}


/* CHARITY */

.temple-footer-charity {
    position: absolute;

    right: 48px;

    display: flex;

    align-items: center;

    gap: 18px;

    color: #ebca79;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;
}


.charity-line {
    width: 1px;
    height: 28px;

    background:
        rgba(214,170,71,.55);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .temple-header-inner {
        padding:
            10px 24px;
    }


    .temple-brand-name {
        font-size:
            23px;
    }


    .temple-nav {
        gap:
            20px;
    }


    .traditional-hero-inner {
        grid-template-columns:
            1fr;
    }


    .traditional-temple-visual {
        min-height:
            420px;
    }


    .traditional-temple-image {
        max-height:
            460px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .temple-header-inner {
        min-height:
            80px;

        padding:
            8px 15px;
    }


    .temple-brand-logo {
        width:
            58px;

        height:
            58px;
    }


    .temple-brand-name {
        font-size:
            19px;
    }


    .temple-menu-button {
        display:
            block;
    }


    .temple-nav {
        display:
            none;

        position:
            absolute;

        top:
            100%;

        left:
            0;

        right:
            0;

        padding:
            20px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            17px;

        background:
            linear-gradient(
                #63070c,
                #840d14
            );

        border-top:
            1px solid
            rgba(230,193,101,.35);

        box-shadow:
            0 12px 25px
            rgba(0,0,0,.20);
    }


    .temple-nav.mobile-open {
        display:
            flex;
    }


    .traditional-hero-inner {
        padding:
            48px 20px 70px;
    }


    .hero-red,
    .hero-gold {
        font-size:
            48px;
    }


    .hero-eyebrow {
        font-size:
            12px;

        letter-spacing:
            .22em;
    }


    .hero-values {
        font-size:
            10px;

        line-height:
            2;

        letter-spacing:
            .13em;
    }


    .hero-intro {
        font-size:
            16px;
    }


    .hero-actions {
        flex-direction:
            column;
    }


    .traditional-button {
        width:
            100%;
    }


    .traditional-lamp {
        display:
            none;
    }


    .traditional-temple-visual {
        min-height:
            320px;
    }


    .traditional-temple-image {
        max-height:
            340px;
    }


    .temple-footer {
        flex-direction:
            column;

        gap:
            12px;

        padding:
            16px 20px;
    }


    .temple-footer-social,
    .temple-footer-charity {
        position:
            static;
    }


    .temple-footer-charity {
        font-size:
            12px;
    }


    .charity-line {
        display:
            none;
    }

}
/* =========================================================
   FINAL FIX
   FIX HEADER + FOOTER IN PLACE
   ONLY PAGE CONTENT SCROLLS
========================================================= */

:root {
    --header-height: 108px;
    --footer-height: 84px;
}


/* =========================================================
   BODY
========================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;

    width: 100%;

    min-height: 100%;

    overflow-x: hidden;
}


body.temple-site {
    padding-top: var(--header-height) !important;
    padding-bottom: var(--footer-height) !important;

    min-height: 100vh !important;

    overflow-y: auto !important;

    background: #fff8ea;
}


/* =========================================================
   FIXED HEADER
========================================================= */

.temple-header {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: var(--header-height) !important;

    z-index: 999999 !important;

    margin: 0 !important;

    transform: none !important;

    background:
        linear-gradient(
            100deg,
            #58060b 0%,
            #760910 45%,
            #8b1118 70%,
            #62070c 100%
        ) !important;

    border-top: 2px solid #9f6c20 !important;
    border-bottom: 3px solid #c99736 !important;

    box-shadow:
        0 5px 16px rgba(65,4,9,.23) !important;
}


/* Header content fits inside fixed header */

.temple-header-inner {
    height: 100% !important;
    min-height: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 10px 48px !important;
}


/* =========================================================
   FIXED FOOTER
========================================================= */

.temple-footer {
    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: var(--footer-height) !important;
    min-height: var(--footer-height) !important;

    z-index: 999998 !important;

    margin: 0 !important;

    transform: none !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 13px 48px !important;

    background:
        linear-gradient(
            100deg,
            #58060b 0%,
            #73090f 45%,
            #8a1016 70%,
            #60070b 100%
        ) !important;

    border-top: 3px solid #c79433 !important;

    box-shadow:
        0 -4px 16px rgba(66,4,9,.22) !important;
}


/* =========================================================
   PAGE CONTENT
========================================================= */

.app-page-content {
    min-height:
        calc(
            100vh
            - var(--header-height)
            - var(--footer-height)
        ) !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* homepage hero fits between header and footer */

.traditional-hero {
    min-height:
        calc(
            100vh
            - var(--header-height)
            - var(--footer-height)
        ) !important;

    margin: 0 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    :root {
        --header-height: 80px;
        --footer-height: 72px;
    }


    body.temple-site {
        padding-top: 80px !important;
        padding-bottom: 72px !important;
    }


    .temple-header {
        height: 80px !important;
        min-height: 80px !important;
    }


    .temple-header-inner {
        height: 80px !important;

        padding:
            7px 14px !important;
    }


    .temple-footer {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        height: 72px !important;
        min-height: 72px !important;

        padding:
            8px 12px !important;

        flex-direction: row !important;

        justify-content: space-between !important;

        align-items: center !important;
    }


    .temple-footer-social {
        position: static !important;

        transform: none !important;

        display: flex !important;

        gap: 6px !important;
    }


    .temple-footer-copyright {
        position: static !important;

        flex: 1;

        font-size: 10px !important;

        text-align: center !important;
    }


    .temple-footer-charity {
        display: none !important;
    }


    .footer-decoration {
        display: none !important;
    }


    /* MOBILE MENU BELOW FIXED HEADER */

    .temple-nav.mobile-open {
        position: fixed !important;

        top: 80px !important;

        left: 0 !important;
        right: 0 !important;

        z-index: 1000000 !important;
    }

}


/* =========================================================
   IPHONE / PWA SAFE AREA
========================================================= */

@supports (
    padding-bottom:
    env(safe-area-inset-bottom)
) {

    .temple-footer {
        padding-bottom:
            calc(
                8px
                + env(safe-area-inset-bottom)
            ) !important;
    }

}
/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-page {
    width: 100%;

    background:
        linear-gradient(
            180deg,
            #fffaf0 0%,
            #f8ecd5 100%
        );

    color: #4c372f;
}


/* =========================================================
   CONTACT HERO
========================================================= */

.contact-hero {
    padding:
        68px 25px 55px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(214,168,71,.13),
            transparent 34%
        );
}


.contact-hero-inner {
    max-width:
        760px;

    margin:
        0 auto;
}


.contact-ornament {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom:
        13px;
}


.contact-ornament span {
    width:
        95px;

    height:
        1px;

    background:
        #b67a29;
}


.contact-ornament strong {
    color:
        #b67a29;

    font-size:
        15px;
}


.contact-eyebrow {
    margin:
        0 0 9px;

    color:
        #976621;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .25em;
}


.contact-hero h1 {
    margin:
        0;

    color:
        #770910;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(48px,5vw,68px);

    line-height:
        1;
}


.contact-intro {
    max-width:
        620px;

    margin:
        21px auto 0;

    color:
        #705b50;

    font-size:
        16px;

    line-height:
        1.7;
}


/* =========================================================
   CONTACT CARDS
========================================================= */

.contact-info-section {
    padding:
        0 6% 55px;
}


.contact-info-grid {
    width:
        100%;

    max-width:
        1250px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        18px;
}


.contact-info-card {
    min-height:
        210px;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    text-decoration:
        none;

    color:
        inherit;

    background:
        rgba(255,253,247,.90);

    border:
        1px solid rgba(193,139,48,.30);

    border-radius:
        14px;

    box-shadow:
        0 12px 30px rgba(86,45,20,.07);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


a.contact-info-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(178,119,32,.56);

    box-shadow:
        0 18px 38px rgba(86,45,20,.11);
}


.contact-card-icon {
    width:
        48px;

    height:
        48px;

    margin-bottom:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #7a0a11;

    background:
        #f1d99b;

    font-size:
        20px;
}


.contact-card-label,
.contact-section-small {
    color:
        #a3712c;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .19em;
}


.contact-info-card h2 {
    margin:
        9px 0 7px;

    color:
        #711019;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        22px;
}


.contact-info-card p {
    margin:
        0;

    color:
        #715c51;

    font-size:
        14px;

    line-height:
        1.65;
}


/* =========================================================
   FORM + MAP
========================================================= */

.contact-main-section {
    padding:
        0 6% 75px;
}


.contact-main-grid {
    width:
        100%;

    max-width:
        1250px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        25px;

    align-items:
        stretch;
}


/* =========================================================
   FORM PANEL
========================================================= */

.contact-form-panel,
.contact-map-panel {
    border:
        1px solid rgba(192,137,48,.30);

    border-radius:
        16px;

    background:
        rgba(255,253,247,.93);

    box-shadow:
        0 15px 38px rgba(83,42,16,.08);

    overflow:
        hidden;
}


.contact-form-panel {
    padding:
        38px;
}


.contact-form-panel h2 {
    margin:
        8px 0 12px;

    color:
        #720b14;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        34px;
}


.contact-form-intro {
    margin:
        0 0 27px;

    color:
        #756057;

    font-size:
        14px;

    line-height:
        1.65;
}


/* =========================================================
   FORM
========================================================= */

.contact-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;
}


.contact-field-row {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;
}


.contact-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.contact-field label {
    color:
        #682319;

    font-size:
        12px;

    font-weight:
        700;
}


.contact-field input,
.contact-field textarea {
    width:
        100%;

    border:
        1px solid #dcc59b;

    border-radius:
        7px;

    background:
        #fffdf8;

    color:
        #4d352e;

    font:
        inherit;

    outline:
        none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.contact-field input {
    height:
        46px;

    padding:
        0 13px;
}


.contact-field textarea {
    padding:
        12px 13px;

    resize:
        vertical;
}


.contact-field input:focus,
.contact-field textarea:focus {
    border-color:
        #a86b20;

    box-shadow:
        0 0 0 3px
        rgba(183,126,42,.10);
}


/* =========================================================
   BUTTON
========================================================= */

.contact-submit {
    width:
        fit-content;

    min-width:
        170px;

    height:
        49px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    border:
        1px solid #b67b2c;

    border-radius:
        6px;

    cursor:
        pointer;

    color:
        #fff5dd;

    background:
        linear-gradient(
            135deg,
            #8a0b14,
            #62060c
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        15px;

    font-weight:
        700;
}


.contact-submit:hover {
    background:
        #790a11;
}


.contact-submit span {
    font-size:
        24px;
}


/* =========================================================
   ALERT
========================================================= */

.contact-alert {
    margin-bottom:
        20px;

    padding:
        12px 15px;

    border-radius:
        7px;

    font-size:
        13px;
}


.contact-alert.success {
    color:
        #38572b;

    background:
        #edf5e7;

    border:
        1px solid #bfd4af;
}


.contact-alert.error {
    color:
        #7b1e1e;

    background:
        #fff0ec;

    border:
        1px solid #e3bbb0;
}


/* =========================================================
   MAP
========================================================= */

.contact-map {
    height:
        360px;

    background:
        #eee3ce;
}


.contact-map iframe {
    width:
        100%;

    height:
        100%;

    border:
        0;
}


/* =========================================================
   OFFICE DETAILS
========================================================= */

.contact-office-details {
    padding:
        30px 32px;
}


.contact-office-details h3 {
    margin:
        7px 0 19px;

    color:
        #720b14;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        25px;
}


.contact-office-details > p {
    margin:
        0 0 20px;

    color:
        #705d53;

    line-height:
        1.65;

    font-size:
        14px;
}


.office-detail-line {
    padding:
        12px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-top:
        1px solid #eadbc1;

    font-size:
        13px;
}


.office-detail-line strong {
    color:
        #692319;
}


.office-detail-line a,
.office-detail-line span {
    color:
        #86642f;

    text-decoration:
        none;

    text-align:
        right;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .contact-info-grid {
        grid-template-columns:
            1fr;
    }


    .contact-main-grid {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .contact-hero {
        padding:
            45px 20px 40px;
    }


    .contact-info-section,
    .contact-main-section {
        padding-left:
            20px;

        padding-right:
            20px;
    }


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


    .contact-form-panel {
        padding:
            26px 20px;
    }


    .contact-form-panel h2 {
        font-size:
            29px;
    }


    .contact-map {
        height:
            280px;
    }


    .contact-office-details {
        padding:
            25px 20px;
    }


    .office-detail-line {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .office-detail-line a,
    .office-detail-line span {
        text-align:
            left;
    }

}
/* =========================================================
   CONTACT - GOOGLE MAP DIRECTIONS
========================================================= */

.contact-map-wrap {
    position: relative;
}


.map-directions-button {
    position: absolute;

    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);

    min-width: 230px;
    height: 46px;

    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            #7d0911,
            #59060b
        );

    border: 1px solid #c18b35;

    color: #fff3d5;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    box-shadow:
        0 7px 20px
        rgba(70,10,8,.20);

    z-index: 5;
}


.map-directions-button:hover {
    background: #8d1018;
}


.map-directions-button span {
    font-size: 22px;
}


/* =========================================================
   SIMPLE PLAN YOUR VISIT
   FINAL CLEAN VERSION
========================================================= */

.visit-section-simple {
    width: 100%;
    padding: 35px 6% 65px;
    background: linear-gradient(180deg, #fff9ed 0%, #f8ecd6 100%);
}

.visit-simple-container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.visit-simple-heading {
    margin-bottom: 28px;
    text-align: center;
}

.visit-simple-heading h2 {
    margin: 7px 0 8px;
    color: #720b13;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 31px;
}

.visit-simple-heading p {
    margin: 0;
    color: #756158;
    font-size: 13px;
}

.visit-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.visit-option {
    min-height: 145px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: rgba(255,253,248,.96);
    border: 1px solid rgba(190,136,47,.30);
    border-radius: 14px;
    box-shadow: 0 9px 24px rgba(78,39,15,.06);
    transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease;
}

.visit-option:hover {
    transform: translateY(-4px);
    border-color: rgba(181,118,31,.55);
    box-shadow: 0 15px 32px rgba(78,39,15,.10);
}

.visit-option-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f2dda8;
    font-size: 23px;
}

.visit-option h3 {
    margin: 0 0 5px;
    color: #720b13;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
}

.visit-option span {
    color: #8b6a36;
    font-size: 11px;
    font-weight: 600;
}

.visit-parking {
    margin-top: 18px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: rgba(255,253,248,.96);
    border: 1px solid rgba(190,136,47,.30);
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(78,39,15,.05);
}

.visit-parking-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.visit-parking-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #efcf7d;
    background: linear-gradient(135deg, #7f0a12, #57060b);
    font-size: 17px;
    font-weight: 800;
}

.visit-parking h3 {
    margin: 0 0 4px;
    color: #711018;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
}

.visit-parking p {
    margin: 0;
    color: #766258;
    font-size: 12px;
    line-height: 1.5;
}

.visit-parking-link {
    flex-shrink: 0;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #b67d31;
    border-radius: 6px;
    color: #721018;
    background: #fff9ec;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: .2s ease;
}

.visit-parking-link:hover {
    color: #fff3d8;
    background: #730b13;
}

.visit-parking-link span {
    font-size: 20px;
}

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

@media (max-width: 550px) {
    .visit-section-simple {
        padding: 30px 20px 50px;
    }

    .visit-simple-heading h2 {
        font-size: 27px;
    }

    .visit-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .visit-option {
        min-height: 125px;
        padding: 16px 10px;
    }

    .visit-option-icon {
        width: 43px;
        height: 43px;
        font-size: 19px;
    }

    .visit-option h3 {
        font-size: 16px;
    }

    .visit-option span {
        font-size: 10px;
    }

    .visit-parking {
        align-items: flex-start;
        flex-direction: column;
        padding: 17px;
    }

    .visit-parking-link {
        margin-left: 64px;
    }
}
/* =========================================================
   CONTACT HERO - FINAL COLOUR FIX
========================================================= */

.contact-hero {
    position: relative;

    padding:
        58px 25px 52px !important;

    text-align:
        center;

    background:
        linear-gradient(
            110deg,
            #65070d 0%,
            #7b0d14 52%,
            #85151c 100%
        ) !important;

    border-bottom:
        2px solid #c99736;
}


/* SMALL DECORATION */

.contact-ornament span {
    background:
        #c99736 !important;
}


.contact-ornament strong {
    color:
        #dcb45a !important;
}


/* HINDU TEMPLE BELGIUM */

.contact-eyebrow {
    color:
        #dcb45a !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .27em !important;
}


/* CONTACT US */

.contact-hero h1 {
    color:
        #f1d482 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        clamp(46px, 5vw, 66px) !important;

    line-height:
        1 !important;

    margin:
        10px 0 18px !important;

    text-shadow:
        0 2px 3px rgba(0,0,0,.15);
}


/* DESCRIPTION */

.contact-intro {
    max-width:
        680px !important;

    margin:
        0 auto !important;

    color:
        #fff1d8 !important;

    font-size:
        15px !important;

    line-height:
        1.7 !important;

    opacity:
        .95;
}
/* =========================================================
   HEADER ALIGNMENT FIX
   BRAND ALWAYS LEFT / NAV ALWAYS RIGHT
========================================================= */

.temple-header-inner {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding-left: 28px !important;
    padding-right: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}


/* LOGO + NAME STAY ON FAR LEFT */

.temple-brand {
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 12px !important;

    flex-shrink: 0 !important;
}


/* LOGO */

.temple-brand-logo {
    width: 66px !important;
    height: 66px !important;

    object-fit: contain !important;

    margin: 0 !important;

    background: transparent !important;
}


/* NAME */

.temple-brand-name {
    margin: 0 !important;

    color: #ebcd7a !important;

    font-size: 29px !important;

    white-space: nowrap !important;
}


/* NAV STAYS ON FAR RIGHT - DESKTOP ONLY */

@media (min-width: 801px) {

    .temple-nav {
        margin-left: auto !important;
        margin-right: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .temple-header-inner {
        padding-left: 28px !important;
        padding-right: 35px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .temple-header-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    .temple-brand {
        gap: 8px !important;
    }


    .temple-brand-logo {
        width: 50px !important;
        height: 50px !important;
    }


    .temple-brand-name {
        font-size: 18px !important;
    }


    .temple-nav {
        margin: 0 !important;
    }

}
/* =========================================================
   ABOUT PAGE
========================================================= */

.about-page {
    width: 100%;
    background: #fff8ea;
    color: #4c372f;
}


/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {
    padding: 58px 25px 55px;

    text-align: center;

    background:
        linear-gradient(
            110deg,
            #65070d 0%,
            #7b0d14 52%,
            #85151c 100%
        );

    border-bottom: 2px solid #c99736;
}


.about-hero-inner {
    max-width: 760px;
    margin: 0 auto;
}


.about-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-bottom: 13px;
}


.about-ornament span {
    width: 95px;
    height: 1px;

    background: #c99736;
}


.about-ornament strong {
    color: #dcb45a;
}


.about-eyebrow {
    margin: 0 0 9px;

    color: #dcb45a;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .27em;
}


.about-hero h1 {
    margin: 10px 0 18px;

    color: #f1d482;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(48px, 5vw, 68px);

    line-height: 1;
}


.about-intro {
    margin: 0 auto;

    max-width: 680px;

    color: #fff1d8;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   STANDARD ABOUT SECTION
========================================================= */

.about-section {
    padding: 70px 6%;
}


.about-soft-section {
    background:
        linear-gradient(
            180deg,
            #f9ecd6,
            #fff9ed
        );
}


.about-two-column {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 55px;

    align-items: center;
}


.about-two-column.reverse {
    grid-template-columns:
        .85fr 1.15fr;
}


.about-small-heading {
    color: #a3712c;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .20em;
}


.about-copy h2,
.about-section-heading h2,
.about-welcome-inner h2 {
    margin: 9px 0 17px;

    color: #730b13;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 3.3vw, 44px);

    line-height: 1.08;
}


.about-copy p {
    margin: 0 0 15px;

    color: #6f5a50;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   HIGHLIGHT CARD
========================================================= */

.about-highlight-card,
.about-language-card,
.about-location-card {
    padding: 34px;

    background:
        rgba(255,253,247,.95);

    border:
        1px solid rgba(190,136,47,.30);

    border-radius: 16px;

    box-shadow:
        0 14px 34px rgba(78,39,15,.07);
}


.about-highlight-card {
    text-align: center;
}


.about-highlight-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1d99b;

    color: #790b12;

    font-size: 30px;
}


.about-highlight-card h3,
.about-language-card h3 {
    margin: 0 0 11px;

    color: #711019;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;
}


.about-highlight-card p,
.about-language-card p {
    margin: 0;

    color: #715f55;

    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   VALUES
========================================================= */

.about-values-section,
.about-festivals-section {
    padding: 65px 6%;
}


.about-values-section {
    background:
        linear-gradient(
            180deg,
            #fff9ed,
            #f8ecd6
        );
}


.about-section-heading {
    max-width: 720px;

    margin: 0 auto 35px;

    text-align: center;
}


.about-section-heading p {
    margin: 0;

    color: #746057;

    font-size: 14px;
    line-height: 1.7;
}


.about-values-grid {
    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;
}


.about-value-card {
    min-height: 205px;

    padding: 27px 20px;

    text-align: center;

    background:
        rgba(255,253,248,.96);

    border:
        1px solid rgba(190,136,47,.30);

    border-radius: 14px;

    box-shadow:
        0 10px 26px rgba(78,39,15,.06);
}


.about-value-icon {
    width: 50px;
    height: 50px;

    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f2dda8;

    font-size: 22px;
}


.about-value-card h3 {
    margin: 0 0 8px;

    color: #720b13;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;
}


.about-value-card p {
    margin: 0;

    color: #746158;

    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   LOCATIONS
========================================================= */

.about-location-card {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;
}


.about-location-row {
    padding: 13px 14px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-radius: 8px;

    background: #fff8e8;

    color: #6f2a1b;
}


.about-location-row span {
    color: #c18b35;
}


/* =========================================================
   FESTIVAL TAGS
========================================================= */

.festival-tags {
    max-width: 1000px;

    margin: 0 auto;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 11px;
}


.festival-tags span,
.language-tags span {
    padding: 9px 14px;

    border:
        1px solid rgba(181,125,47,.34);

    border-radius: 30px;

    color: #7c2b1d;

    background: #fffaf0;

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   LANGUAGES
========================================================= */

.language-tags {
    margin-top: 20px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


/* =========================================================
   WELCOME SECTION
========================================================= */

.about-welcome-section {
    padding: 70px 6% 85px;

    background:
        linear-gradient(
            110deg,
            #65070d 0%,
            #7b0d14 52%,
            #85151c 100%
        );

    text-align: center;
}


.about-welcome-inner {
    max-width: 740px;

    margin: 0 auto;
}


.about-welcome-inner .about-small-heading {
    color: #dcb45a;
}


.about-welcome-inner h2 {
    color: #f1d482;
}


.about-welcome-inner p {
    margin: 0 auto;

    max-width: 640px;

    color: #fff1d8;

    font-size: 15px;
    line-height: 1.7;
}


.about-actions {
    margin-top: 27px;

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}


.about-button {
    min-width: 160px;
    min-height: 46px;

    padding: 0 20px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    border-radius: 6px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}


.about-button.primary {
    color: #5f080d;

    background: #f1d482;
}


.about-button.secondary {
    color: #fff1d8;

    border: 1px solid #d7ae56;

    background: transparent;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .about-two-column,
    .about-two-column.reverse {
        grid-template-columns: 1fr;
    }


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

}


@media (max-width: 550px) {

    .about-hero {
        padding:
            45px 20px 42px;
    }


    .about-section,
    .about-values-section,
    .about-festivals-section,
    .about-welcome-section {
        padding-left: 20px;
        padding-right: 20px;
    }


    .about-values-grid {
        grid-template-columns: 1fr;
    }


    .about-location-card {
        grid-template-columns: 1fr;
    }


    .about-actions {
        flex-direction: column;
    }


    .about-button {
        width: 100%;
    }

}
/* =========================================================
   MOBILE APP FOOTER
========================================================= */

.mobile-app-footer {
    display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    /* -----------------------------------------
       DESKTOP FOOTER OFF
    ----------------------------------------- */

    .desktop-temple-footer {
        display: none !important;
    }


    /* -----------------------------------------
       MOBILE APP FOOTER
    ----------------------------------------- */

    .mobile-app-footer {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 999999;

        height: 66px;

        padding:
            5px 7px
            env(safe-area-inset-bottom);

        display: grid;

        grid-template-columns:
            repeat(5, 1fr);

        align-items: center;

        background:
            linear-gradient(
                100deg,
                #58060b,
                #780a11 55%,
                #66070c
            );

        border-top:
            2px solid #c99736;

        box-shadow:
            0 -5px 18px
            rgba(62,4,7,.24);
    }


    /* ITEMS */

    .mobile-app-item {
        position: relative;

        height: 55px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 2px;

        color:
            #ead39a;

        text-decoration:
            none;

        border-radius:
            9px;

        transition:
            background .2s ease,
            color .2s ease;
    }


    .mobile-app-icon {
        font-size:
            19px;

        line-height:
            1;
    }


    .mobile-app-label {
        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size:
            9px;

        font-weight:
            700;
    }


    /* ACTIVE ITEM */

    .mobile-app-item.active {
        color:
            #fff1bd;

        background:
            rgba(255,255,255,.08);
    }


    .mobile-app-item.active::before {
        content: "";

        position: absolute;

        top:
            -7px;

        left:
            30%;

        right:
            30%;

        height:
            3px;

        border-radius:
            3px;

        background:
            #efcd68;
    }


    /* -----------------------------------------
       PAGE SPACING FOR APP FOOTER
    ----------------------------------------- */

    body.temple-site {
        padding-bottom:
            calc(
                66px
                + env(safe-area-inset-bottom)
            ) !important;
    }


    .app-page-content {
        padding-bottom:
            0 !important;
    }


    /* -----------------------------------------
       HAMBURGER MENU
    ----------------------------------------- */

    .temple-nav.mobile-open {
        display:
            flex !important;

        position:
            fixed !important;

        top:
            var(--header-height) !important;

        left:
            0 !important;

        right:
            0 !important;

        bottom:
            auto !important;

        padding:
            20px !important;

        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        gap:
            18px !important;

        background:
            linear-gradient(
                180deg,
                #62070c,
                #810d14
            ) !important;

        border-top:
            1px solid
            rgba(230,193,101,.35);

        box-shadow:
            0 14px 28px
            rgba(0,0,0,.24);

        z-index:
            999998 !important;
    }

}
/* =========================================================
   DESKTOP LOGIN
========================================================= */

.desktop-login-link {
    display: inline-flex !important;
}


/* MOBILE:
   login is already in the bottom app footer,
   so hide it from the hamburger menu
*/

@media (max-width: 800px) {

    .desktop-login-link {
        display: none !important;
    }

}


/* =========================================================
   FINAL AUTHORITATIVE MOBILE HEADER / HAMBURGER RULES
   KEEP THIS BLOCK AT THE VERY END OF THE FILE
========================================================= */

@media (max-width: 800px) {

    .temple-header {
        height: 80px !important;
        min-height: 80px !important;
    }

    .temple-header-inner {
        position: relative !important;
        width: 100% !important;
        height: 80px !important;
        min-height: 80px !important;
        margin: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .temple-brand {
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        z-index: 2 !important;
    }

    .temple-brand-logo {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
        object-fit: contain !important;
    }

    .temple-brand-name {
        margin: 0 !important;
        font-size: 17px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .temple-menu-button {
        position: relative !important;
        display: block !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        margin: 0 !important;
        padding: 8px !important;
        flex: 0 0 42px !important;
        border: 0 !important;
        background: transparent !important;
        cursor: pointer !important;
        z-index: 1000002 !important;
    }

    .temple-menu-button span {
        display: block !important;
        width: 26px !important;
        height: 2px !important;
        margin: 5px auto !important;
        background: #f1d47e !important;
        border-radius: 3px !important;
        transition:
            transform .25s ease,
            opacity .25s ease !important;
    }

    .temple-menu-button.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .temple-menu-button.open span:nth-child(2) {
        opacity: 0 !important;
    }

    .temple-menu-button.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

    .temple-nav {
        display: none !important;
        position: fixed !important;
        top: 80px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 18px 20px 22px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        background:
            linear-gradient(
                180deg,
                #65070d 0%,
                #790b12 100%
            ) !important;
        border-top:
            1px solid rgba(232,195,109,.30) !important;
        border-bottom:
            2px solid #c99736 !important;
        box-shadow:
            0 14px 28px rgba(0,0,0,.25) !important;
        z-index: 1000000 !important;
    }

    .temple-nav.mobile-open {
        display: flex !important;
    }

   .temple-nav > a {
    color: #fff7e6 !important;

    font-weight: 600 !important;

    text-shadow:
        0 1px 2px
        rgba(0, 0, 0, .25) !important;
}

    .temple-nav > a.active {
        color: #efd071 !important;
    }

    .temple-nav > a.active::after {
        display: none !important;
    }

    .desktop-login-link {
        display: none !important;
    }

    .desktop-temple-footer {
        display: none !important;
    }

    .mobile-app-footer {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 999999 !important;
        height: 66px !important;
        padding:
            5px 7px
            env(safe-area-inset-bottom) !important;
        display: grid !important;
        grid-template-columns:
            repeat(5, 1fr) !important;
        align-items: center !important;
        background:
            linear-gradient(
                100deg,
                #58060b,
                #780a11 55%,
                #66070c
            ) !important;
        border-top:
            2px solid #c99736 !important;
        box-shadow:
            0 -5px 18px
            rgba(62,4,7,.24) !important;
    }

    body.temple-site {
        padding-top: 80px !important;
        padding-bottom:
            calc(
                66px
                + env(safe-area-inset-bottom)
            ) !important;
    }

}


/* =========================================================
   DESKTOP FINAL NAVIGATION
========================================================= */

@media (min-width: 801px) {

    .temple-menu-button {
        display: none !important;
    }

    .temple-nav {
        display: flex !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .mobile-app-footer {
        display: none !important;
    }

    .desktop-login-link {
        display: inline-flex !important;
    }

}


/* =========================================================
   FINAL MOBILE DOCUMENT SCROLL FIX
   IMPORTANT: browser/document scrolls, not html/body containers
========================================================= */

@media (max-width: 800px) {

    html {
        width: 100% !important;

        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;

        overflow-x: hidden !important;
        overflow-y: visible !important;

        scroll-behavior: auto !important;
    }


    body,
    body.temple-site {
        position: static !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;

        margin: 0 !important;

        padding-top: 80px !important;

        padding-right: 0 !important;

        padding-bottom:
            calc(
                82px
                + env(safe-area-inset-bottom)
            ) !important;

        padding-left: 0 !important;

        overflow-x: hidden !important;

        /*
         * Do NOT use overflow-y:auto/scroll on body in mobile/PWA.
         * It can create a separate scroll container.
         */
        overflow-y: visible !important;

        touch-action: auto !important;
    }


    /* Main content must participate in normal document flow */
    body.temple-site .app-page-content,
    .app-page-content {
        position: static !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        transform: none !important;
    }


    /* All page wrappers must grow with their content */
    main,
    .traditional-home,
    .contact-page,
    .about-page {
        position: static !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        transform: none !important;
    }


    /* Long content sections */
    .about-section,
    .about-values-section,
    .about-festivals-section,
    .about-welcome-section,
    .contact-info-section,
    .contact-main-section,
    .visit-section-simple,
    .visit-section-specific {
        position: relative !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /*
     * Homepage hero can grow naturally.
     * Keep only horizontal/decorative clipping.
     */
    .traditional-hero {
        position: relative !important;

        height: auto !important;

        min-height:
            calc(
                100svh
                - 80px
                - 66px
            ) !important;

        max-height: none !important;

        overflow-x: hidden !important;
        overflow-y: visible !important;
    }


    /* Header remains fixed */
    .temple-header {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        height: 80px !important;

        z-index: 1000001 !important;
    }


    /* Bottom app navigation remains fixed */
    .mobile-app-footer {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        z-index: 1000001 !important;
    }


    /* Open hamburger sits between header and bottom nav */
    .temple-nav.mobile-open {
        position: fixed !important;

        top: 80px !important;

        left: 0 !important;
        right: 0 !important;

        max-height:
            calc(
                100svh
                - 80px
                - 66px
            ) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;
    }

}

/* =========================================================
   DONATION PAGE
========================================================= */

.donation-page {
    width: 100%;
    background: #fff8ea;
    color: #4c372f;
}

.donation-container {
    width: 92%;
    max-width: 1180px;
    margin: 0 auto;
}


/* HERO */

.donation-hero {
    padding: 60px 25px 55px;

    text-align: center;

    background:
        linear-gradient(
            110deg,
            #65070d 0%,
            #7b0d14 52%,
            #85151c 100%
        );

    border-bottom:
        2px solid #c99736;
}

.donation-hero-inner {
    max-width: 850px;
    margin: 0 auto;
}

.donation-ornament {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;
}

.donation-ornament span {
    width: 95px;
    height: 1px;

    background: #c99736;
}

.donation-ornament strong {
    color: #dcb45a;
}

.donation-eyebrow {
    margin: 0 0 10px;

    color: #dcb45a;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .27em;
}

.donation-small-heading {
    color: #a3712c;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .20em;
}

.donation-hero h1 {
    margin: 0;

    color: #f5df9c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5vw, 64px);

    line-height: 1.07;
}

.donation-hero h1 span {
    display: block;

    color: #fff1d8;
}

.donation-intro {
    max-width: 720px;

    margin:
        22px auto 0;

    color: #fff1d8;

    font-size: 15px;

    line-height: 1.72;
}


/* MESSAGE */

.donation-page-message {
    max-width: 760px;

    margin:
        22px auto 0;

    padding:
        12px 18px;

    text-align: center;

    color: #6a521f;

    background: #fff5d5;

    border:
        1px solid #e0c478;

    border-radius: 7px;
}

.donation-page-message.error {
    color: #7a1919;

    background: #fff0ec;

    border-color: #dfb6aa;
}


/* PURPOSE */

.donation-purpose-section {
    padding:
        58px 0 48px;
}

.donation-section-heading {
    max-width: 730px;

    margin:
        0 auto 28px;

    text-align: center;
}

.donation-section-heading h2 {
    margin:
        8px 0 10px;

    color: #720b13;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(29px,3vw,39px);
}

.donation-section-heading p {
    margin: 0;

    color: #756158;

    font-size: 14px;

    line-height: 1.65;
}

.donation-purpose-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 17px;
}

.donation-purpose-card {
    position: relative;

    min-height: 205px;

    padding:
        25px 22px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    cursor: pointer;

    background:
        rgba(255,253,248,.97);

    border:
        1px solid
        rgba(190,136,47,.30);

    border-radius: 14px;

    box-shadow:
        0 10px 26px
        rgba(78,39,15,.06);

    transition: .2s ease;
}

.donation-purpose-card:hover,
.donation-purpose-card.active {
    transform:
        translateY(-3px);

    border-color:
        #bd8730;

    box-shadow:
        0 16px 34px
        rgba(78,39,15,.10);
}

.donation-purpose-card.active::after {
    content: "✓";

    position: absolute;

    top: 12px;
    right: 14px;

    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #fff5d8;

    background: #7b0b12;

    font-size: 12px;
}

.donation-purpose-card input {
    position: absolute;

    opacity: 0;
}

.donation-purpose-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #f2dda8;

    font-size: 23px;
}

.donation-purpose-card h3 {
    margin:
        0 0 8px;

    color: #711018;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;
}

.donation-purpose-card p {
    margin: 0;

    color: #746158;

    font-size: 12px;

    line-height: 1.55;
}


/* PAYMENT */

.donation-payment-section {
    padding:
        10px 0 70px;
}

.donation-payment-grid {
    display: grid;

    grid-template-columns:
        1.12fr .88fr;

    gap: 24px;

    align-items: stretch;
}

.donation-stripe-card,
.donation-bank-card {
    padding: 34px;

    background:
        rgba(255,253,248,.98);

    border:
        1px solid
        rgba(190,136,47,.30);

    border-radius: 16px;

    box-shadow:
        0 14px 34px
        rgba(78,39,15,.07);
}

.donation-stripe-card h2,
.donation-bank-card h2 {
    margin:
        8px 0 10px;

    color: #720b13;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 31px;
}

.donation-payment-intro,
.donation-bank-card > p {
    margin:
        0 0 24px;

    color: #746057;

    font-size: 13px;

    line-height: 1.6;
}

.donation-field-label {
    display: block;

    margin:
        0 0 8px;

    color: #662117;

    font-size: 12px;

    font-weight: 700;
}


/* AMOUNTS */

.donation-amount-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 10px;

    margin-bottom: 13px;
}

.donation-amount {
    min-height: 47px;

    border:
        1px solid #d9bd84;

    border-radius: 7px;

    color: #6f2017;

    background: #fffaf0;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;
}

.donation-amount:hover,
.donation-amount.active {
    color: #fff4d6;

    background:
        linear-gradient(
            135deg,
            #870b14,
            #62060c
        );

    border-color:
        #ad7729;
}


/* INPUTS */

.custom-amount-wrap {
    display: none;

    position: relative;

    margin-bottom: 17px;
}

.custom-amount-wrap.show {
    display: flex;
}

.custom-amount-wrap > span {
    position: absolute;

    left: 14px;

    top: 50%;

    transform:
        translateY(-50%);

    color: #8a6738;

    font-weight: 700;
}

.custom-amount-wrap input,
.donation-input {
    width: 100%;

    height: 46px;

    padding:
        0 13px;

    border:
        1px solid #dcc59b;

    border-radius: 7px;

    color: #4d352e;

    background: #fffdf8;

    font: inherit;

    outline: none;
}

.custom-amount-wrap input {
    padding-left: 31px;
}

.custom-amount-wrap input:focus,
.donation-input:focus {
    border-color: #a86b20;

    box-shadow:
        0 0 0 3px
        rgba(183,126,42,.10);
}

.donation-name-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 13px;

    margin-top: 17px;
}

.donation-input {
    margin-bottom: 16px;
}

.donation-anonymous-row {
    margin:
        2px 0 20px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: #705b51;

    font-size: 12px;

    cursor: pointer;
}


/* STRIPE BUTTON */

.donation-stripe-button {
    width: 100%;

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border:
        1px solid #bb8430;

    border-radius: 7px;

    color: #fff3d6;

    background:
        linear-gradient(
            135deg,
            #8b0b14,
            #61060c
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;
}

.donation-stripe-button:hover {
    background: #790a11;
}

.donation-secure-note {
    margin-top: 15px;

    padding:
        12px 14px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    border-radius: 7px;

    color: #6f5c53;

    background: #f8f1e4;

    font-size: 11px;

    line-height: 1.45;
}


/* BANK */

.donation-bank-details {
    overflow: hidden;

    border:
        1px solid #ead7b3;

    border-radius: 9px;
}

.donation-bank-details > div {
    padding:
        13px 15px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    border-bottom:
        1px solid #eadbc1;
}

.donation-bank-details > div:last-child {
    border-bottom: 0;
}

.donation-bank-details span {
    color: #9b773d;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.donation-bank-details strong {
    color: #64231a;

    font-size: 13px;
}

.donation-reference-box {
    margin-top: 16px;

    padding:
        14px 15px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    border-radius: 8px;

    background: #f2dda8;
}

.donation-reference-box span {
    color: #8b6226;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.donation-reference-box strong {
    color: #701019;

    font-size: 14px;
}


/* FUTURE */

.donation-future-section {
    padding:
        52px 6% 75px;

    background:
        linear-gradient(
            180deg,
            #f8ecd6,
            #fff9ed
        );
}

.donation-future-inner {
    max-width: 950px;

    margin: 0 auto;

    padding: 30px;

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 25px;

    align-items: center;

    background:
        rgba(255,253,248,.95);

    border:
        1px solid
        rgba(190,136,47,.30);

    border-radius: 15px;
}

.donation-future-symbol {
    width: 78px;
    height: 78px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #720b13;

    background: #f2dda8;

    font-size: 33px;
}

.donation-future-inner h2 {
    margin:
        7px 0 8px;

    color: #720b13;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;
}

.donation-future-inner p {
    margin: 0;

    color: #705d54;

    font-size: 13px;

    line-height: 1.65;
}


/* SUCCESS */

.donation-result-page {
    min-height:
        calc(
            100vh
            - var(--header-height)
            - var(--footer-height)
        );

    padding:
        70px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            #fff9ed,
            #f8ecd6
        );
}

.donation-result-card {
    width: 100%;

    max-width: 650px;

    padding:
        45px 35px;

    text-align: center;

    background: #fffdf8;

    border:
        1px solid
        rgba(190,136,47,.30);

    border-radius: 16px;

    box-shadow:
        0 15px 40px
        rgba(78,39,15,.09);
}

.donation-result-icon {
    width: 66px;

    height: 66px;

    margin:
        0 auto 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #fff7dd;

    background: #751018;

    font-size: 29px;
}

.donation-result-card h1 {
    color: #720b13;
}

.donation-result-actions {
    margin-top: 25px;

    display: flex;

    justify-content: center;

    gap: 10px;
}

.donation-result-button {
    padding:
        12px 18px;

    border-radius: 6px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;
}

.donation-result-button.primary {
    color: #fff2d7;

    background: #720b13;
}

.donation-result-button.secondary {
    color: #720b13;

    background: #fff8e8;

    border:
        1px solid #c28b35;
}


/* MOBILE */

@media (max-width: 900px) {

    .donation-purpose-grid,
    .donation-payment-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .donation-hero {
        padding:
            45px 20px 42px;
    }

    .donation-purpose-section,
    .donation-payment-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .donation-container {
        width: 100%;
    }

    .donation-stripe-card,
    .donation-bank-card {
        padding:
            25px 20px;
    }

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

    .donation-name-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .donation-future-inner {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .donation-future-symbol {
        margin: 0 auto;
    }

    .donation-result-actions {
        flex-direction: column;
    }

}


/* =========================================================
   HEADER DONATE BUTTON
========================================================= */

.header-donate-link {
    padding: 10px 18px !important;

    border: 1px solid #d8b45b !important;

    border-radius: 6px !important;

    color: #65121a !important;

    background:
        linear-gradient(
            135deg,
            #f1d482,
            #ddb451
        ) !important;

    font-weight: 700 !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.12);

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}


.header-donate-link:hover,
.header-donate-link.active {
    color: #4f0910 !important;

    background:
        linear-gradient(
            135deg,
            #f7df99,
            #e7bf62
        ) !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 16px rgba(0,0,0,.16);
}


/* remove normal active underline for Donate */

.header-donate-link.active::after {
    display: none !important;
}


/* MOBILE:
   keep Donate inside hamburger if you want it there */

@media (max-width: 800px) {

    .header-donate-link {
        width: 100% !important;

        padding: 13px 5px !important;

        border: 0 !important;

        border-radius: 0 !important;

        color: #efd071 !important;

        background: transparent !important;

        box-shadow: none !important;

        text-align: left !important;
    }

}
/* =========================================================
   LOGIN / AUTH PAGES
   HINDU TEMPLE BELGIUM
========================================================= */

.auth-page {
    width: 100%;

    min-height:
        calc(
            100vh
            - var(--header-height)
            - var(--footer-height)
        );

    padding:
        65px 20px 80px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(224, 177, 79, .12),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #fffaf0 0%,
            #f7ead4 100%
        );
}


/* =========================================================
   LOGIN CARD
========================================================= */

.auth-card {
    position: relative;

    width: 100%;
    max-width: 650px;

    padding:
        42px 42px 38px;

    background:
        rgba(255, 253, 248, .98);

    border:
        1px solid
        rgba(189, 135, 46, .32);

    border-radius: 18px;

    box-shadow:
        0 18px 48px
        rgba(81, 38, 13, .11);

    overflow: hidden;
}


/* GOLD TOP LINE */

.auth-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #7b0b12,
            #d6a84b,
            #7b0b12
        );
}


/* LOGIN PAGE A LITTLE NARROWER */

.auth-card-login {
    max-width: 525px;
}


/* =========================================================
   HEADING
========================================================= */

.auth-heading {
    margin-bottom: 30px;

    text-align: center;
}


.auth-kicker {
    display: block;

    margin-bottom: 9px;

    color: #a8782e;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .23em;

    text-transform: uppercase;
}


.auth-heading h1 {
    margin:
        0 0 10px;

    color: #720b13;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(36px, 4vw, 48px);

    line-height: 1.05;
}


.auth-heading p {
    max-width: 420px;

    margin: 0 auto;

    color: #766157;

    font-size: 13px;

    line-height: 1.6;
}


/* DECORATION UNDER HEADING */

.auth-heading::after {
    content: "◆";

    display: block;

    width: 150px;

    margin:
        20px auto 0;

    color: #c38e35;

    font-size: 10px;

    background:
        linear-gradient(
            90deg,
            #d7b16c 0%,
            #d7b16c 42%,
            transparent 42%,
            transparent 58%,
            #d7b16c 58%,
            #d7b16c 100%
        );

    background-size:
        100% 1px;

    background-position:
        center;

    background-repeat:
        no-repeat;
}


/* =========================================================
   FORM
========================================================= */

.auth-form {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


.auth-field {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.auth-field label,
.auth-label-row label {
    color: #632118;

    font-size: 12px;

    font-weight: 700;
}


/* LABEL + FORGOT PASSWORD */

.auth-label-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.auth-label-row a {
    color: #9b6f28;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    transition: .2s ease;
}


.auth-label-row a:hover {
    color: #720b13;

    text-decoration: underline;
}


/* =========================================================
   INPUTS
========================================================= */

.auth-field input {
    width: 100%;

    height: 49px;

    padding:
        0 14px;

    border:
        1px solid #ddc79f;

    border-radius: 8px;

    outline: none;

    color: #4b342d;

    background: #fffdf9;

    font-family:
        inherit;

    font-size: 14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.auth-field input:hover {
    border-color: #c69a50;
}


.auth-field input:focus {
    border-color: #a86c21;

    background: #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(183, 126, 42, .10);
}


/* =========================================================
   PASSWORD
========================================================= */

.auth-password-wrap {
    position: relative;
}


.auth-password-wrap input {
    padding-right: 50px;
}


.auth-password-toggle {
    position: absolute;

    top: 50%;
    right: 8px;

    transform:
        translateY(-50%);

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 6px;

    color: #775546;

    background: transparent;

    font-size: 16px;

    cursor: pointer;

    transition:
        background .2s ease;
}


.auth-password-toggle:hover {
    background: #f6ecd9;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.auth-submit {
    width: 100%;

    min-height: 52px;

    margin-top: 4px;

    border:
        1px solid #b77d2e;

    border-radius: 8px;

    color: #fff3d8;

    background:
        linear-gradient(
            135deg,
            #8b0c15 0%,
            #67070d 100%
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 17px
        rgba(89, 11, 14, .14);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.auth-submit:hover {
    transform:
        translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #970e18,
            #750810
        );

    box-shadow:
        0 10px 22px
        rgba(89, 11, 14, .18);
}


/* =========================================================
   REGISTER LINK
========================================================= */

.auth-switch {
    margin:
        4px 0 0;

    color: #766157;

    text-align: center;

    font-size: 12px;
}


.auth-switch a {
    margin-left: 3px;

    color: #780b12;

    font-weight: 700;

    text-decoration: none;
}


.auth-switch a:hover {
    text-decoration: underline;
}


/* =========================================================
   ALERTS
========================================================= */

.auth-alert {
    margin-bottom: 22px;

    padding:
        13px 15px;

    border-radius: 8px;

    font-size: 12px;

    line-height: 1.55;
}


.auth-alert.error {
    color: #791f1f;

    background: #fff0ec;

    border:
        1px solid #e3bbb1;
}


.auth-alert.success {
    color: #36572a;

    background: #eef6e9;

    border:
        1px solid #bdd2ae;
}


.auth-alert p {
    margin: 0;
}


/* =========================================================
   OPTIONAL TEMPLE SYMBOL
========================================================= */

.auth-card-login::after {
    content: "ॐ";

    position: absolute;

    right: -20px;
    bottom: -43px;

    color:
        rgba(181, 133, 47, .055);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 150px;

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .auth-page {
        padding:
            32px 16px 55px;
    }


    .auth-card {
        padding:
            31px 20px 28px;

        border-radius: 14px;
    }


    .auth-heading {
        margin-bottom: 25px;
    }


    .auth-heading h1 {
        font-size: 36px;
    }


    .auth-heading p {
        font-size: 12px;
    }


    .auth-field input {
        height: 48px;

        font-size: 16px;
    }


    .auth-submit {
        min-height: 51px;
    }


    .auth-label-row {
        align-items: flex-end;
    }


    .auth-card-login::after {
        font-size: 110px;
    }

}
/* =========================================================
   USER DASHBOARD
========================================================= */

.account-page {
    width: 100%;

    min-height:
        calc(
            100vh
            - var(--header-height)
            - var(--footer-height)
        );

    padding:
        52px 5% 78px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(216, 170, 73, .10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fffaf0 0%,
            #f7ead5 100%
        );
}


.account-container {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.account-page .auth-alert {
    max-width: 1180px;

    margin:
        0 auto 24px;

    padding:
        13px 16px;

    border-radius: 8px;

    font-size: 12px;
}


.account-page .auth-alert.success {
    color: #395b2f;

    background: #eef6e9;

    border:
        1px solid #bfd4af;
}


/* =========================================================
   WELCOME AREA
========================================================= */

.account-welcome {
    position: relative;

    margin-bottom: 32px;

    padding:
        32px 34px;

    overflow: hidden;

    border:
        1px solid
        rgba(190, 136, 47, .28);

    border-radius: 16px;

    background:
        linear-gradient(
            120deg,
            #fffdf8 0%,
            #fff8e8 100%
        );

    box-shadow:
        0 14px 35px
        rgba(78, 39, 15, .07);
}


.account-welcome::after {
    content: "ॐ";

    position: absolute;

    right: 28px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        rgba(164, 113, 32, .07);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 120px;

    pointer-events: none;
}


.account-welcome .auth-kicker {
    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 8px;

    color: #a3712c;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .22em;
}


.account-welcome h1 {
    position: relative;

    z-index: 2;

    margin:
        0 0 9px;

    color: #720b13;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(34px, 4vw, 48px);

    line-height: 1.08;
}


.account-welcome p {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #745f55;

    font-size: 13px;
}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.account-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}


/* =========================================================
   CARD
========================================================= */

.account-card {
    position: relative;

    min-height: 260px;

    padding:
        28px 24px 24px;

    overflow: hidden;

    background:
        rgba(255, 253, 248, .98);

    border:
        1px solid
        rgba(190, 136, 47, .30);

    border-radius: 15px;

    box-shadow:
        0 12px 30px
        rgba(78, 39, 15, .07);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.account-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 17px 38px
        rgba(78, 39, 15, .10);
}


.account-card::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #7b0b12,
            #d2a34b
        );
}


/* =========================================================
   CARD ICON
========================================================= */

.account-card-icon {
    width: 54px;
    height: 54px;

    margin-bottom: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #761018;

    background:
        linear-gradient(
            145deg,
            #f4e3b6,
            #e7c46f
        );

    font-size: 23px;

    box-shadow:
        inset 0 0 0 1px
        rgba(160, 111, 30, .15);
}


/* =========================================================
   CARD TITLE
========================================================= */

.account-card h2 {
    margin:
        0 0 15px;

    color: #711018;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;
}


/* =========================================================
   PROFILE DETAILS
========================================================= */

.account-detail {
    padding:
        10px 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

    border-bottom:
        1px solid #eadbc1;
}


.account-detail:last-child {
    border-bottom: none;
}


.account-detail span {
    color: #a0783d;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.account-detail strong {
    color: #574037;

    font-size: 13px;

    font-weight: 600;

    overflow-wrap: anywhere;
}


/* =========================================================
   BOOKINGS / DONATION TEXT
========================================================= */

.account-card p {
    margin:
        0 0 16px;

    color: #746158;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   CARD LINKS
========================================================= */

.account-card > a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 5px;

    padding:
        9px 14px;

    border:
        1px solid #c5923e;

    border-radius: 6px;

    color: #711018;

    background: #fff8e8;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: .2s ease;
}


.account-card > a:hover {
    color: #fff3d8;

    background: #720b13;

    border-color: #720b13;
}


/* =========================================================
   BOTTOM ACTIONS
========================================================= */

.account-actions {
    margin-top: 28px;

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}


.account-button {
    min-width: 155px;

    min-height: 44px;

    padding:
        0 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    color: #fff2d7;

    background:
        linear-gradient(
            135deg,
            #860b14,
            #63060c
        );

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 6px 15px
        rgba(80, 10, 13, .12);

    transition: .2s ease;
}


.account-button:hover {
    transform:
        translateY(-1px);

    background: #750a11;
}


.account-button.secondary {
    color: #711018;

    background: #fff9ed;

    border:
        1px solid #c58d36;

    box-shadow: none;
}


.account-button.secondary:hover {
    color: #fff2d7;

    background: #720b13;

    border-color: #720b13;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

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


    .account-card:first-child {
        grid-column:
            1 / -1;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .account-page {
        padding:
            30px 16px 58px;
    }


    .account-welcome {
        padding:
            25px 20px;
    }


    .account-welcome h1 {
        font-size: 31px;
    }


    .account-welcome::after {
        right: -10px;

        font-size: 90px;
    }


    .account-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .account-card:first-child {
        grid-column: auto;
    }


    .account-card {
        min-height: auto;

        padding:
            24px 20px;
    }


    .account-actions {
        flex-direction: column;
    }


    .account-button {
        width: 100%;
    }

}
/* =========================================================
   EVENTS + FEEDBACK PAGES
========================================================= */

.events-page,
.feedback-page {
    width: 100%;
    background: #fff8ea;
    color: #4c372f;
}

.events-container,
.feedback-container {
    width: 92%;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   SHARED HERO
========================================================= */

.events-hero,
.feedback-hero {
    padding: 58px 25px 54px;

    text-align: center;

    background:
        linear-gradient(
            110deg,
            #65070d 0%,
            #7b0d14 52%,
            #85151c 100%
        );

    border-bottom: 2px solid #c99736;
}

.events-hero-inner,
.feedback-hero-inner {
    max-width: 760px;
    margin: 0 auto;
}

.events-ornament,
.feedback-ornament {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;
}

.events-ornament span,
.feedback-ornament span {
    width: 95px;
    height: 1px;

    background: #c99736;
}

.events-ornament strong,
.feedback-ornament strong {
    color: #dcb45a;
}

.events-eyebrow,
.feedback-eyebrow {
    margin: 0 0 9px;

    color: #dcb45a;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .27em;
}

.events-hero h1,
.feedback-hero h1 {
    margin: 10px 0 18px;

    color: #f1d482;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(44px, 5vw, 64px);

    line-height: 1;
}

.events-intro,
.feedback-intro {
    max-width: 680px;

    margin: 0 auto;

    color: #fff1d8;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   EVENTS PAGE
========================================================= */

.events-list-section {
    padding: 60px 0 70px;
}

.events-section-heading {
    max-width: 720px;

    margin: 0 auto 32px;

    text-align: center;
}

.events-small-heading,
.feedback-small-heading {
    color: #a3712c;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .20em;
}

.events-section-heading h2 {
    margin: 8px 0 10px;

    color: #720b13;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 3vw, 40px);
}

.events-section-heading p {
    margin: 0;

    color: #756158;

    font-size: 14px;
}


/* =========================================================
   EVENTS GRID
========================================================= */

.events-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 22px;
}


/* =========================================================
   EVENT CARD
========================================================= */

.event-card {
    overflow: hidden;

    background:
        rgba(255, 253, 248, .98);

    border:
        1px solid rgba(190, 136, 47, .30);

    border-radius: 16px;

    box-shadow:
        0 14px 34px
        rgba(78, 39, 15, .07);
}


/* =========================================================
   EVENT IMAGE
========================================================= */

.event-image-wrap,
.event-image-placeholder {
    width: 100%;
    height: 220px;
}

.event-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.event-image-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #f6e5b8,
            #efd28b
        );

    font-size: 58px;
}


/* =========================================================
   EVENT CARD BODY
========================================================= */

.event-card-body {
    position: relative;

    padding: 24px;
}


/* DATE BADGE */

.event-date-badge {
    position: absolute;

    top: -40px;
    right: 22px;

    width: 72px;
    height: 72px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #fff4d8;

    background:
        linear-gradient(
            135deg,
            #850b14,
            #60060c
        );

    box-shadow:
        0 8px 20px
        rgba(86, 8, 12, .18);
}

.event-date-day {
    font-size: 23px;

    font-weight: 800;

    line-height: 1;
}

.event-date-month {
    margin-top: 4px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .12em;
}


/* =========================================================
   EVENT TEXT
========================================================= */

.event-card-kicker {
    color: #a3712c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .18em;
}

.event-card h3 {
    margin: 7px 0 10px;

    color: #711018;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;
}

.event-card-description {
    margin: 0 0 16px;

    color: #746158;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   EVENT META
========================================================= */

.event-meta {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.event-meta > div {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #684e42;

    font-size: 12px;
}


/* =========================================================
   EVENT ACTION
========================================================= */

.event-card-actions {
    margin-top: 20px;
}

.event-primary-button {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        10px 16px;

    border-radius: 7px;

    color: #fff3d8;

    background: #720b13;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        transform .2s ease,
        background .2s ease;
}

.event-primary-button:hover {
    transform:
        translateY(-1px);

    background: #870d16;
}


/* =========================================================
   EMPTY EVENTS
========================================================= */

.events-empty-state {
    max-width: 660px;

    margin: 0 auto;

    padding:
        45px 30px;

    text-align: center;

    background: #fffdf8;

    border:
        1px solid rgba(190, 136, 47, .30);

    border-radius: 15px;

    box-shadow:
        0 12px 30px
        rgba(78, 39, 15, .06);
}

.events-empty-icon {
    font-size: 42px;
}

.events-empty-state h3 {
    margin:
        12px 0 8px;

    color: #711018;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;
}

.events-empty-state p {
    margin: 0;

    color: #746158;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   EVENTS COMMUNITY
========================================================= */

.events-community-section {
    padding:
        0 6% 78px;

    background:
        linear-gradient(
            180deg,
            #fff8ea,
            #f7ead5
        );
}

.events-community-inner {
    max-width: 940px;

    margin: 0 auto;

    padding: 30px;

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 24px;

    align-items: center;

    background: #fffdf8;

    border:
        1px solid rgba(190, 136, 47, .30);

    border-radius: 15px;
}

.events-community-icon {
    width: 74px;
    height: 74px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #720b13;

    background: #f2dda8;

    font-size: 31px;
}

.events-community-inner h2 {
    margin:
        7px 0;

    color: #720b13;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;
}

.events-community-inner p {
    margin: 0;

    color: #705d54;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   FEEDBACK PAGE
========================================================= */

.feedback-section {
    padding:
        65px 0 80px;
}

.feedback-layout {
    display: grid;

    grid-template-columns:
        .82fr 1.18fr;

    gap: 35px;

    align-items: start;
}


/* =========================================================
   FEEDBACK INFO
========================================================= */

.feedback-info {
    padding:
        25px 10px 25px 0;
}

.feedback-info h2,
.feedback-form-card h2 {
    margin:
        8px 0 15px;

    color: #720b13;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 33px;
}

.feedback-info > p {
    margin:
        0 0 14px;

    color: #725f55;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   FEEDBACK INFO ITEMS
========================================================= */

.feedback-info-point {
    margin-top: 13px;

    padding:
        13px 15px;

    display: flex;

    align-items: center;

    gap: 13px;

    background:
        rgba(255, 253, 248, .78);

    border:
        1px solid rgba(190, 136, 47, .22);

    border-radius: 9px;
}

.feedback-info-point div {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f2dda8;
}

.feedback-info-point span {
    color: #6e3324;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================================
   FEEDBACK FORM CARD
========================================================= */

.feedback-form-card {
    padding: 35px;

    background:
        rgba(255, 253, 248, .98);

    border:
        1px solid rgba(190, 136, 47, .30);

    border-radius: 16px;

    box-shadow:
        0 14px 36px
        rgba(78, 39, 15, .08);
}


/* =========================================================
   FEEDBACK ALERTS
========================================================= */

.feedback-alert {
    margin:
        0 0 20px;

    padding:
        13px 15px;

    border-radius: 7px;

    font-size: 13px;
}

.feedback-alert.success {
    color: #39582c;

    background: #edf5e7;

    border:
        1px solid #bfd4af;
}

.feedback-alert.error {
    color: #7b1e1e;

    background: #fff0ec;

    border:
        1px solid #e3bbb0;
}


/* =========================================================
   FEEDBACK FORM
========================================================= */

.feedback-form {
    display: flex;

    flex-direction: column;

    gap: 17px;
}

.feedback-field-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;
}

.feedback-field {
    display: flex;

    flex-direction: column;

    gap: 7px;
}

.feedback-field label {
    color: #652319;

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   INPUTS
========================================================= */

.feedback-field input,
.feedback-field select,
.feedback-field textarea {
    width: 100%;

    border:
        1px solid #dcc59b;

    border-radius: 7px;

    color: #4d352e;

    background: #fffdf8;

    font: inherit;

    outline: none;
}

.feedback-field input,
.feedback-field select {
    height: 46px;

    padding:
        0 13px;
}

.feedback-field textarea {
    padding:
        12px 13px;

    resize: vertical;
}

.feedback-field input:focus,
.feedback-field select:focus,
.feedback-field textarea:focus {
    border-color: #a86b20;

    box-shadow:
        0 0 0 3px
        rgba(183, 126, 42, .10);
}


/* =========================================================
   DISABLED FIELDS
========================================================= */

.disabled-field {
    opacity: .5;

    background:
        #eee8dc !important;

    cursor: not-allowed;
}


/* =========================================================
   STAR RATING
========================================================= */

.feedback-rating {
    display: flex;

    flex-direction: row-reverse;

    justify-content: flex-end;

    gap: 4px;
}

.feedback-rating input {
    display: none;
}

.feedback-rating label {
    color: #d8c7a6;

    font-size: 31px;

    cursor: pointer;

    transition:
        color .15s ease,
        transform .15s ease;
}

.feedback-rating label:hover,
.feedback-rating label:hover ~ label,
.feedback-rating input:checked ~ label {
    color: #d59d2e;
}

.feedback-rating label:hover {
    transform:
        translateY(-1px);
}


/* =========================================================
   CHARACTER COUNT
========================================================= */

.feedback-character-count {
    text-align: right;

    color: #a18b79;

    font-size: 10px;
}


/* =========================================================
   ANONYMOUS BOX
========================================================= */

.feedback-anonymous {
    padding:
        13px 14px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    cursor: pointer;

    border-radius: 8px;

    background: #f8f1e4;
}

.feedback-anonymous > span {
    display: flex;

    flex-direction: column;

    gap: 3px;

    color: #6b4e40;

    font-size: 12px;

    font-weight: 700;
}

.feedback-anonymous small {
    color: #907b6e;

    font-size: 10px;

    font-weight: 400;
}


/* =========================================================
   FEEDBACK BUTTON
========================================================= */

.feedback-submit {
    width: 100%;

    min-height: 51px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    border:
        1px solid #b67c2e;

    border-radius: 7px;

    color: #fff3d7;

    background:
        linear-gradient(
            135deg,
            #870b14,
            #60060b
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.feedback-submit:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(78, 13, 12, .18);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .events-grid,
    .feedback-layout {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .events-hero,
    .feedback-hero {
        padding:
            44px 20px 41px;
    }


    .events-list-section,
    .feedback-section {
        padding-left: 20px;

        padding-right: 20px;
    }


    .events-container,
    .feedback-container {
        width: 100%;
    }


    .event-image-wrap,
    .event-image-placeholder {
        height: 190px;
    }


    .event-card-body {
        padding:
            21px 18px;
    }


    .events-community-inner {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .events-community-icon {
        margin: 0 auto;
    }


    .feedback-info {
        padding: 0;
    }


    .feedback-form-card {
        padding:
            25px 19px;
    }


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


    .feedback-info h2,
    .feedback-form-card h2 {
        font-size: 28px;
    }

}
/* =========================================================
   ACCOUNT SETTINGS PAGE
========================================================= */

.settings-page {
    width: 100%;

    background:
        linear-gradient(
            180deg,
            #fff9ed 0%,
            #f7ead5 100%
        );

    color: #4c372f;
}


.settings-container {
    width: 92%;

    max-width: 980px;

    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.settings-hero {
    padding:
        52px 25px 48px;

    text-align: center;

    background:
        linear-gradient(
            110deg,
            #65070d 0%,
            #7b0d14 52%,
            #85151c 100%
        );

    border-bottom:
        2px solid #c99736;
}


.settings-hero-inner {
    max-width: 720px;

    margin: 0 auto;
}


.settings-ornament {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 11px;
}


.settings-ornament span {
    width: 90px;

    height: 1px;

    background: #c99736;
}


.settings-ornament strong {
    color: #dcb45a;
}


.settings-eyebrow {
    margin:
        0 0 9px;

    color: #dcb45a;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .26em;
}


.settings-hero h1 {
    margin:
        8px 0 12px;

    color: #f1d482;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            40px,
            5vw,
            58px
        );
}


.settings-intro {
    margin: 0;

    color: #fff1d8;

    font-size: 14px;
}


/* =========================================================
   CONTENT
========================================================= */

.settings-section {
    padding:
        55px 0 80px;
}


.settings-container {
    display: flex;

    flex-direction: column;

    gap: 22px;
}


/* =========================================================
   CARD
========================================================= */

.settings-card {
    padding:
        31px;

    background:
        rgba(
            255,
            253,
            248,
            .98
        );

    border:
        1px solid
        rgba(
            190,
            136,
            47,
            .30
        );

    border-radius: 16px;

    box-shadow:
        0 13px 32px
        rgba(
            78,
            39,
            15,
            .07
        );
}


/* =========================================================
   CARD HEADING
========================================================= */

.settings-card-heading {
    margin-bottom: 23px;

    display: flex;

    align-items: center;

    gap: 14px;
}


.settings-icon {
    width: 49px;

    height: 49px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #f3e2b4,
            #e6c36e
        );

    font-size: 21px;
}


.settings-small-heading {
    color: #a3712c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .20em;
}


.settings-card-heading h2 {
    margin:
        5px 0 0;

    color: #711018;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;
}


/* =========================================================
   FORM
========================================================= */

.settings-form {
    display: flex;

    flex-direction: column;

    gap: 17px;
}


.settings-field-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;
}


.settings-field {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.settings-field label {
    color: #652319;

    font-size: 12px;

    font-weight: 700;
}


.settings-field input {
    width: 100%;

    height: 47px;

    padding:
        0 13px;

    border:
        1px solid #dcc59b;

    border-radius: 7px;

    color: #4d352e;

    background: #fffdf8;

    font: inherit;

    outline: none;
}


.settings-field input:focus {
    border-color: #a86b20;

    box-shadow:
        0 0 0 3px
        rgba(
            183,
            126,
            42,
            .10
        );
}


.settings-field small {
    color: #978174;

    font-size: 10px;

    line-height: 1.5;
}


.settings-readonly {
    color: #807169 !important;

    background:
        #f4eee3 !important;

    cursor: not-allowed;
}


/* =========================================================
   PASSWORD
========================================================= */

.settings-password-wrap {
    position: relative;
}


.settings-password-wrap input {
    padding-right: 48px;
}


.settings-password-toggle {
    position: absolute;

    top: 50%;

    right: 7px;

    transform:
        translateY(-50%);

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.settings-password-note {
    margin:
        -5px 0 0;

    color: #958074;

    font-size: 10px;
}


/* =========================================================
   BUTTON
========================================================= */

.settings-button {
    align-self: flex-start;

    min-width: 190px;

    min-height: 46px;

    padding:
        0 19px;

    border:
        1px solid #b67d2e;

    border-radius: 7px;

    color: #fff3d7;

    background:
        linear-gradient(
            135deg,
            #870b14,
            #60060b
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.settings-button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 7px 17px
        rgba(
            78,
            13,
            12,
            .16
        );
}


/* =========================================================
   ALERT
========================================================= */

.settings-alert {
    margin-bottom: 19px;

    padding:
        13px 15px;

    border-radius: 7px;

    font-size: 12px;
}


.settings-alert.success {
    color: #39582c;

    background: #edf5e7;

    border:
        1px solid #bfd4af;
}


.settings-alert.error {
    color: #7b1e1e;

    background: #fff0ec;

    border:
        1px solid #e3bbb0;
}


/* =========================================================
   ACCOUNT DETAILS
========================================================= */

.settings-account-info {
    overflow: hidden;

    border:
        1px solid #ead8b7;

    border-radius: 9px;
}


.settings-account-info > div {
    padding:
        13px 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid #eadbc1;
}


.settings-account-info > div:last-child {
    border-bottom: 0;
}


.settings-account-info span {
    color: #94723e;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.settings-account-info strong {
    color: #5d4237;

    font-size: 12px;
}


.settings-status-active {
    color: #437132 !important;
}


/* =========================================================
   ACCOUNT ACTIONS
========================================================= */

.settings-account-actions {
    margin-top: 21px;

    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}


.settings-secondary-button,
.settings-logout-button {
    min-height: 42px;

    padding:
        0 16px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;
}


.settings-secondary-button {
    color: #711018;

    background: #fff8e8;

    border:
        1px solid #c38c37;
}


.settings-logout-button {
    color: #fff3d8;

    background: #720b13;

    border:
        1px solid #720b13;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .settings-hero {
        padding:
            42px 20px 39px;
    }


    .settings-section {
        padding:
            38px 17px 65px;
    }


    .settings-container {
        width: 100%;
    }


    .settings-card {
        padding:
            24px 19px;
    }


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


    .settings-button {
        width: 100%;
    }


    .settings-account-info > div {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .settings-account-actions {
        flex-direction: column;
    }


    .settings-secondary-button,
    .settings-logout-button {
        width: 100%;
    }

}
/* =========================================================
   ADMIN DASHBOARD
========================================================= */

.admin-page {
    width: 100%;

    background:
        linear-gradient(
            180deg,
            #fff9ed 0%,
            #f8ecd8 100%
        );

    color: #4f392f;
}


.admin-container {
    width: 92%;

    max-width: 1280px;

    margin: 0 auto;
}


/* =========================================================
   ADMIN WELCOME
========================================================= */

.admin-welcome {
    padding:
        42px 0 38px;

    background:
        linear-gradient(
            120deg,
            #65070d,
            #810e17
        );

    border-bottom:
        2px solid #c99639;
}


.admin-welcome-inner {
    min-height: 150px;

    padding:
        25px 32px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    overflow: hidden;
}


.admin-kicker {
    color: #d8af55;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .25em;
}


.admin-welcome h1 {
    margin:
        8px 0 9px;

    color: #f3d681;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            34px,
            4vw,
            50px
        );
}


.admin-welcome p {
    margin: 0;

    max-width: 700px;

    color: #f8e9d0;

    font-size: 13px;

    line-height: 1.6;
}


.admin-welcome-symbol {
    color:
        rgba(
            246,
            215,
            130,
            .12
        );

    font-size: 125px;

    line-height: 1;
}


/* =========================================================
   CONTENT
========================================================= */

.admin-content {
    padding:
        40px 0 85px;
}


/* =========================================================
   STATS
========================================================= */

.admin-stats-grid {
    margin-bottom: 25px;

    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 13px;
}


.admin-stat-card {
    min-height: 145px;

    padding:
        19px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 13px;

    color: inherit;

    text-decoration: none;

    background:
        #fffdf8;

    border:
        1px solid
        rgba(
            188,
            132,
            42,
            .28
        );

    border-radius: 13px;

    box-shadow:
        0 8px 22px
        rgba(
            76,
            39,
            17,
            .05
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.admin-stat-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 13px 28px
        rgba(
            76,
            39,
            17,
            .10
        );
}


.admin-stat-icon {
    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #f4e2af,
            #eacb7b
        );

    font-size: 19px;
}


.admin-stat-label {
    display: block;

    color: #a0712d;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .16em;
}


.admin-stat-number {
    display: block;

    margin-top: 3px;

    color: #710d15;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 29px;
}


.admin-stat-description {
    display: block;

    margin-top: 3px;

    color: #90796b;

    font-size: 9px;
}


.admin-stat-notice {
    display: inline-block;

    margin-top: 5px;

    padding:
        3px 7px;

    color: #8a1d22;

    background:
        #fff0e6;

    border-radius: 20px;

    font-size: 8px;

    font-weight: 700;
}


/* =========================================================
   PANELS
========================================================= */

.admin-panel {
    margin-bottom: 24px;

    padding:
        26px;

    background:
        rgba(
            255,
            253,
            248,
            .98
        );

    border:
        1px solid
        rgba(
            188,
            132,
            42,
            .27
        );

    border-radius: 14px;

    box-shadow:
        0 10px 27px
        rgba(
            76,
            39,
            17,
            .05
        );
}


.admin-panel-heading {
    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.admin-section-kicker {
    color: #a3712c;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .19em;
}


.admin-panel-heading h2,
.admin-website-panel h2 {
    margin:
        4px 0 0;

    color: #720d15;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;
}


.admin-panel-heading > a {
    color: #8d652c;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.admin-actions-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}


.admin-action {
    padding:
        15px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: inherit;

    text-decoration: none;

    border:
        1px solid #ead9b8;

    border-radius: 10px;

    background: #fffaf0;

    transition:
        background .2s ease,
        transform .2s ease;
}


.admin-action:hover {
    transform:
        translateY(-2px);

    background:
        #fff5df;
}


.admin-action > span {
    width: 41px;

    height: 41px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #f2dda7;

    font-size: 18px;
}


.admin-action strong {
    display: block;

    color: #711018;

    font-size: 11px;
}


.admin-action small {
    display: block;

    margin-top: 3px;

    color: #8b776b;

    font-size: 9px;
}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.admin-dashboard-grid {
    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 24px;
}


/* =========================================================
   USER TABLE
========================================================= */

.admin-table-wrap {
    width: 100%;

    overflow-x: auto;
}


.admin-table {
    width: 100%;

    border-collapse: collapse;
}


.admin-table th {
    padding:
        9px 10px;

    color: #9b753d;

    text-align: left;

    font-size: 8px;

    letter-spacing: .12em;

    border-bottom:
        1px solid #ead9bb;
}


.admin-table td {
    padding:
        12px 10px;

    color: #644d43;

    font-size: 10px;

    border-bottom:
        1px solid #f0e4ce;
}


.admin-user-cell {
    display: flex;

    align-items: center;

    gap: 10px;
}


.admin-avatar {
    width: 35px;

    height: 35px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #711018;

    background: #f0d99f;

    font-family: Georgia, serif;

    font-weight: 700;
}


.admin-user-cell strong {
    display: block;

    color: #60382d;

    font-size: 10px;
}


.admin-user-cell small {
    display: block;

    margin-top: 2px;

    color: #9a8577;

    font-size: 8px;
}


/* =========================================================
   STATUS
========================================================= */

.admin-status {
    padding:
        4px 8px;

    border-radius: 20px;

    font-size: 8px;

    font-weight: 700;
}


.admin-status-active {
    color: #3f672f;

    background: #ecf5e6;
}


.admin-status-pending {
    color: #9a6d16;

    background: #fff4d8;
}


.admin-status-blocked {
    color: #8a2525;

    background: #fce9e7;
}


/* =========================================================
   EVENTS LIST
========================================================= */

.admin-event-list {
    display: flex;

    flex-direction: column;
}


.admin-event-item {
    padding:
        11px 0;

    display: grid;

    grid-template-columns:
        48px 1fr auto;

    align-items: center;

    gap: 12px;

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid #eee1cc;
}


.admin-event-item:last-child {
    border-bottom: none;
}


.admin-event-date {
    width: 44px;

    height: 47px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    color: #fff0d3;

    background: #770d15;
}


.admin-event-date strong {
    font-size: 16px;
}


.admin-event-date span {
    font-size: 7px;

    letter-spacing: .08em;
}


.admin-event-info strong {
    display: block;

    color: #65372e;

    font-size: 10px;
}


.admin-event-info span {
    display: block;

    margin-top: 3px;

    color: #a18473;

    font-size: 8px;
}


.admin-event-arrow {
    color: #b6812f;

    font-size: 20px;
}


/* =========================================================
   EMPTY
========================================================= */

.admin-empty {
    padding:
        30px 15px;

    text-align: center;

    color: #927d6f;

    font-size: 11px;
}


.admin-empty > span {
    display: block;

    font-size: 30px;
}


.admin-small-button {
    display: inline-flex;

    margin-top: 8px;

    padding:
        8px 13px;

    color: #fff4dc;

    background: #730c14;

    border-radius: 6px;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   WEBSITE PANEL
========================================================= */

.admin-website-panel {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.admin-website-panel p {
    margin:
        7px 0 0;

    color: #877268;

    font-size: 10px;
}


.admin-website-actions {
    display: flex;

    gap: 9px;
}


.admin-outline-button,
.admin-primary-button {
    min-height: 40px;

    padding:
        0 15px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;
}


.admin-outline-button {
    color: #711018;

    border:
        1px solid #c68e36;

    background: #fffaf0;
}


.admin-primary-button {
    color: #fff3d8;

    background: #720b13;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .admin-stats-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 850px) {

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }


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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .admin-welcome {
        padding:
            22px 0;
    }


    .admin-welcome-inner {
        min-height: auto;

        padding:
            19px 5px;
    }


    .admin-welcome-symbol {
        position: absolute;

        right: 5px;

        font-size: 85px;
    }


    .admin-content {
        padding:
            25px 0 75px;
    }


    .admin-container {
        width: 92%;
    }


    .admin-stats-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 9px;
    }


    .admin-stat-card {
        min-height: 125px;

        padding: 14px;
    }


    .admin-actions-grid {
        grid-template-columns: 1fr;
    }


    .admin-panel {
        padding:
            20px 16px;
    }


    .admin-website-panel {
        align-items: stretch;

        flex-direction: column;
    }


    .admin-website-actions {
        flex-direction: column;
    }


    .admin-outline-button,
    .admin-primary-button {
        width: 100%;
    }

}


/* =========================================================
   ADMIN AREA EXTENSIONS
   Paste after your existing Admin Dashboard CSS
========================================================= */

.admin-page-heading .admin-welcome-inner { min-height: 125px; }

.admin-subnav {
    display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px;
}
.admin-subnav a {
    padding:9px 13px; border-radius:7px; color:#6f3f31;
    background:#fffaf0; border:1px solid #e2c791;
    text-decoration:none; font-size:10px; font-weight:700;
}
.admin-subnav a:hover { background:#f8e9ca; }

.admin-flash {
    margin-bottom:18px; padding:13px 15px; border-radius:8px; font-size:11px;
}
.admin-flash-success { color:#3f672f; background:#ecf5e6; border:1px solid #bfd4af; }
.admin-flash-danger { color:#8a2525; background:#fce9e7; border:1px solid #e2b7b1; }

.admin-page-actions {
    margin:0 0 18px; display:flex; justify-content:flex-end;
}

.admin-filterbar {
    display:flex; gap:9px; align-items:center;
}
.admin-filterbar input {
    flex:1; min-height:42px; padding:0 13px;
    border:1px solid #dcc59b; border-radius:7px;
    background:#fffdf8; color:#4d352e;
}

.admin-inline-actions {
    display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.admin-inline-actions form { margin:0; }

.admin-inline-actions select,
.admin-message-action select {
    min-height:34px; padding:0 8px;
    border:1px solid #d8c198; border-radius:6px;
    background:#fffdf8; color:#5b4036; font-size:9px;
}

.admin-mini-button {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:34px; padding:0 10px;
    border:1px solid #c8923b; border-radius:6px;
    color:#720b13; background:#fff9ec;
    text-decoration:none; font-size:9px; font-weight:700; cursor:pointer;
}
.admin-mini-button.danger {
    color:#8d1e24; border-color:#d7aaa6; background:#fff3f0;
}

.admin-muted { color:#9a8577; font-size:9px; }

.admin-block {
    display:block; margin-top:3px; max-width:360px;
    color:#9a8577; font-size:8px; line-height:1.45;
}

.admin-status-success { color:#3f672f; background:#ecf5e6; }
.admin-status-warning { color:#8f671b; background:#fff4d8; }
.admin-status-danger { color:#8a2525; background:#fce9e7; }
.admin-status-neutral { color:#6a5b52; background:#f1ece3; }

.admin-form-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:15px;
}
.admin-field {
    display:flex; flex-direction:column; gap:6px;
}
.admin-field-span-2 { grid-column:span 2; }

.admin-field label,
.admin-checkbox {
    color:#652319; font-size:10px; font-weight:700;
}

.admin-field input,
.admin-field textarea,
.admin-field select {
    width:100%; border:1px solid #dcc59b; border-radius:7px;
    background:#fffdf8; color:#4d352e; font:inherit;
}
.admin-field input,
.admin-field select {
    min-height:43px; padding:0 11px;
}
.admin-field textarea {
    padding:11px; resize:vertical;
}

.admin-checkbox {
    display:flex; gap:8px; align-items:center;
}
.admin-form-actions {
    display:flex; gap:8px; justify-content:flex-end;
}

.admin-summary-grid {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px; margin-bottom:20px;
}
.admin-summary-card {
    padding:19px; border:1px solid rgba(188,132,42,.27);
    border-radius:12px; background:#fffdf8;
}
.admin-summary-card span {
    display:block; color:#a0712d; font-size:8px; font-weight:800; letter-spacing:.16em;
}
.admin-summary-card strong {
    display:block; margin-top:5px; color:#720d15;
    font-family:Georgia,"Times New Roman",serif; font-size:27px;
}

.admin-card-list {
    display:flex; flex-direction:column; gap:15px;
}
.admin-card-list .admin-panel { margin-bottom:0; }

.admin-message-top {
    display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
}
.admin-message-top h2 {
    margin:5px 0 0; color:#720d15;
    font-family:Georgia,"Times New Roman",serif; font-size:21px;
}
.admin-message-text {
    margin:18px 0; color:#674f45; font-size:11px; line-height:1.7;
}
.admin-message-meta {
    display:flex; gap:14px; flex-wrap:wrap; color:#9a8171; font-size:9px;
}
.admin-message-meta a { color:#8c5f25; }

.admin-message-action {
    display:flex; gap:7px; align-items:center; margin-top:15px;
}
.admin-rating {
    margin-top:10px; color:#d09b31; letter-spacing:.07em;
}

.admin-table-wide { min-width:900px; }

@media (max-width:700px) {
    .admin-filterbar { align-items:stretch; flex-direction:column; }
    .admin-filterbar .admin-primary-button,
    .admin-filterbar .admin-outline-button { width:100%; }

    .admin-form-grid { grid-template-columns:1fr; }
    .admin-field-span-2 { grid-column:span 1; }

    .admin-form-actions { align-items:stretch; flex-direction:column; }
    .admin-form-actions .admin-primary-button,
    .admin-form-actions .admin-outline-button { width:100%; }

    .admin-summary-grid { grid-template-columns:1fr; }
    .admin-message-top { flex-direction:column; }
    .admin-message-action { align-items:stretch; flex-direction:column; }
}
/* =========================================================
   ADMIN CURRENT TAB
========================================================= */

.admin-subnav > a.admin-tab-active {
    color: #fff4d8 !important;

    background:
        linear-gradient(
            135deg,
            #760910,
            #980f19
        ) !important;

    border-color: #9b1119 !important;

    box-shadow:
        0 5px 14px
        rgba(114, 11, 19, .20) !important;

    position: relative !important;
}


.admin-subnav > a.admin-tab-active::after {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: -6px !important;

    width: 24px !important;
    height: 3px !important;

    transform:
        translateX(-50%) !important;

    border-radius: 5px !important;

    background: #e0b64e !important;
}

/* =========================================================
   FINAL HEADER + FOOTER COLOUR THEME
   DEEP PURPLE + GOLD
   COLOUR OVERRIDE ONLY
========================================================= */

/* =========================================================
   HEADER
========================================================= */

.temple-header {
    background:
        linear-gradient(
            100deg,
            #210027 0%,
            #31003b 38%,
            #43064f 70%,
            #26002f 100%
        ) !important;

    border-top:
        2px solid #b88627 !important;

    border-bottom:
        3px solid #d7aa3f !important;

    box-shadow:
        0 5px 16px
        rgba(29, 0, 36, .30) !important;
}


/* HEADER ORNAMENT */

.temple-header::after {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 6px,
            #e0b84f 6px 8px,
            transparent 8px 14px
        ) !important;
}


/* BRAND NAME */

.temple-brand-name {
    color: #f1cf67 !important;

    text-shadow:
        0 1px 2px
        rgba(0, 0, 0, .30) !important;
}


/* DESKTOP NAVIGATION */

.temple-nav > a {
    color: #fff1d2 !important;
}


.temple-nav > a:hover,
.temple-nav > a.active {
    color: #f2c94c !important;
}


.temple-nav > a.active::after {
    background: #f2c94c !important;

    height: 3px !important;

    border-radius: 4px !important;
}

/* USER ACCOUNT BUTTON */

/* USER NAME BUTTON */

.temple-user-button {
    color: #fff7e6 !important;

    border-color:
        rgba(242, 201, 76, .45) !important;
}


.temple-user-button:hover {
    color: #f2c94c !important;

    border-color:
        rgba(242, 201, 76, .75) !important;
}


/* HAMBURGER LINES */

.temple-menu-button span {
    background: #f0cc61 !important;
}


/* MOBILE HEADER MENU */

@media (max-width: 800px) {

    .temple-nav {
        background:
            linear-gradient(
                180deg,
                #26002f 0%,
                #3b0646 100%
            ) !important;

        border-top:
            1px solid
            rgba(228, 188, 78, .42) !important;

        box-shadow:
            0 12px 25px
            rgba(22, 0, 28, .28) !important;
    }

}


/* =========================================================
   FOOTER
========================================================= */

.temple-footer {
    background:
        linear-gradient(
            100deg,
            #210027 0%,
            #31003b 38%,
            #43064f 70%,
            #26002f 100%
        ) !important;

    border-top:
        3px solid #d7aa3f !important;

    color:
        #fff1d2 !important;

    box-shadow:
        0 -4px 16px
        rgba(29, 0, 36, .30) !important;
}


/* FOOTER SOCIAL ICONS */

.temple-social {
    color:
        #efc958 !important;

    border-color:
        rgba(239, 201, 88, .68) !important;
}


.temple-social:hover {
    color:
        #2b0034 !important;

    background:
        #efc958 !important;
}


.temple-social .youtube-play {
    fill:
        #2b0034 !important;
}


/* COPYRIGHT */

.temple-footer-copyright {
    color:
        #fff1d2 !important;
}


/* DECORATIVE GOLD LINE */

.footer-decoration {
    color:
        #d5a934 !important;
}


/* CHARITY NUMBER */

.temple-footer-charity {
    color:
        #efcc69 !important;
}


.charity-line {
    background:
        rgba(218, 172, 61, .62) !important;
}


/* =========================================================
   END DEEP PURPLE + GOLD THEME
========================================================= */

/* =========================================================
   FINAL MOBILE APP FOOTER COLOUR OVERRIDE
   DEEP PURPLE + GOLD
========================================================= */

@media (max-width: 800px) {

    .mobile-app-footer {
        background:
            linear-gradient(
                100deg,
                #210027 0%,
                #31003b 45%,
                #43064f 72%,
                #26002f 100%
            ) !important;

        border-top:
            2px solid #d7aa3f !important;

        box-shadow:
            0 -4px 16px
            rgba(29, 0, 36, .30) !important;
    }


    .mobile-app-item {
        color:
            #efc958 !important;
    }


    .mobile-app-label {
        color:
            #fff1d2 !important;
    }


    .mobile-app-icon {
        color:
            #efc958 !important;
    }


    .mobile-app-item.active {
        color:
            #fff3c4 !important;

        background:
            rgba(255,255,255,.07) !important;
    }


    .mobile-app-item.active .mobile-app-label,
    .mobile-app-item.active .mobile-app-icon {
        color:
            #f3cd55 !important;
    }


    .mobile-app-item.active::before {
        background:
            #e6bd3d !important;
    }

}
/* =========================================================
   REFINED PURPLE + GOLD THEME
   REMOVE NAV UNDERLINE + LIGHT PAGE HERO
========================================================= */


/* =========================================================
   HEADER NAVIGATION
========================================================= */

.temple-nav > a {
    color: #fff7e6 !important;
}


.temple-nav > a:hover,
.temple-nav > a.active {
    color: #f2c94c !important;
}


/* REMOVE UNDERLINE COMPLETELY */

.temple-nav > a.active::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   ABOUT PAGE HERO
========================================================= */

.about-hero {
    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #f7ead1 100%
        ) !important;

    border-bottom:
        1px solid #d7aa3f !important;
}


.about-hero h1 {
    color: #3a0647 !important;

    text-shadow: none !important;
}


.about-eyebrow {
    color: #a67824 !important;
}


.about-intro {
    color: #665248 !important;
}


.about-ornament span {
    background: #c99a35 !important;
}


.about-ornament strong {
    color: #b78425 !important;
}


/* =========================================================
   CONTACT PAGE HERO
========================================================= */

.contact-hero {
    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #f7ead1 100%
        ) !important;

    border-bottom:
        1px solid #d7aa3f !important;
}


.contact-hero h1 {
    color: #3a0647 !important;

    text-shadow: none !important;
}


.contact-eyebrow {
    color: #a67824 !important;
}


.contact-intro {
    color: #665248 !important;
}


.contact-ornament span {
    background: #c99a35 !important;
}


.contact-ornament strong {
    color: #b78425 !important;
}


/* =========================================================
   DONATION PAGE HERO
========================================================= */

.donation-hero {
    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #f7ead1 100%
        ) !important;

    border-bottom:
        1px solid #d7aa3f !important;
}


.donation-hero h1 {
    color: #3a0647 !important;

    text-shadow: none !important;
}


/* =========================================================
   FEEDBACK PAGE HERO
========================================================= */

.feedback-hero {
    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #f7ead1 100%
        ) !important;

    border-bottom:
        1px solid #d7aa3f !important;
}


.feedback-hero h1 {
    color: #3a0647 !important;

    text-shadow: none !important;
}


/* =========================================================
   EVENTS PAGE HERO
========================================================= */

.events-hero {
    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #f7ead1 100%
        ) !important;

    border-bottom:
        1px solid #d7aa3f !important;
}


.events-hero h1 {
    color: #3a0647 !important;

    text-shadow: none !important;
}
/* =========================================================
   CONTACT HERO - LIGHT THEME FINAL OVERRIDE
========================================================= */

.contact-hero {
    background:
        linear-gradient(
            180deg,
            #fff8e9 0%,
            #f7ead1 100%
        ) !important;

    border-bottom:
        1px solid #d7aa3f !important;
}


.contact-hero h1 {
    color: #3a0647 !important;

    text-shadow: none !important;
}


.contact-eyebrow {
    color: #a67824 !important;
}


.contact-intro {
    color: #665248 !important;
}


.contact-ornament span {
    background: #c99a35 !important;
}


.contact-ornament strong {
    color: #b78425 !important;
}
/* =========================================================
   FINAL STANDARD PAGE TITLE HERO
   SAME DESIGN / HEIGHT / SPACING ON ALL PAGES
========================================================= */


/* =========================================================
   HERO BOX
========================================================= */

.about-hero,
.contact-hero,
.donation-hero,
.events-hero,
.feedback-hero,
.settings-hero {

    width: 100% !important;

    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;

    padding: 0 25px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    background:
        linear-gradient(
            180deg,
            #fff9ed 0%,
            #f7ead1 100%
        ) !important;

    border-bottom:
        1px solid #d6aa43 !important;

    overflow: hidden !important;
}


/* =========================================================
   INNER CONTENT
========================================================= */

.about-hero-inner,
.contact-hero-inner,
.donation-hero-inner,
.events-hero-inner,
.feedback-hero-inner,
.settings-hero-inner {

    width: 100% !important;

    max-width: 820px !important;

    margin: 0 auto !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;
}


/* =========================================================
   TOP ORNAMENT
========================================================= */

.about-ornament,
.contact-ornament,
.donation-ornament,
.events-ornament,
.feedback-ornament,
.settings-ornament {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 13px !important;

    margin:
        0 0 12px !important;
}


.about-ornament span,
.contact-ornament span,
.donation-ornament span,
.events-ornament span,
.feedback-ornament span,
.settings-ornament span {

    width: 95px !important;
    height: 1px !important;

    background:
        #c89832 !important;
}


.about-ornament strong,
.contact-ornament strong,
.donation-ornament strong,
.events-ornament strong,
.feedback-ornament strong,
.settings-ornament strong {

    color:
        #b98425 !important;

    font-size:
        15px !important;
}


/* =========================================================
   SMALL UPPER HEADING
========================================================= */

.about-eyebrow,
.contact-eyebrow,
.donation-eyebrow,
.events-eyebrow,
.feedback-eyebrow,
.settings-eyebrow {

    margin:
        0 0 9px !important;

    color:
        #a37221 !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .27em !important;

    line-height:
        1.3 !important;
}


/* =========================================================
   MAIN PAGE TITLE
========================================================= */

.about-hero h1,
.contact-hero h1,
.donation-hero h1,
.events-hero h1,
.feedback-hero h1,
.settings-hero h1 {

    margin:
        5px 0 18px !important;

    color:
        #3a0647 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        clamp(
            48px,
            5vw,
            68px
        ) !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-shadow:
        none !important;
}


/* Donation currently contains title spans */

.donation-hero h1 span {

    display:
        inline !important;

    color:
        #3a0647 !important;
}


/* =========================================================
   INTRO TEXT
========================================================= */

.about-intro,
.contact-intro,
.donation-intro,
.events-intro,
.feedback-intro,
.settings-intro {

    width:
        100% !important;

    max-width:
        700px !important;

    margin:
        0 auto !important;

    color:
        #665248 !important;

    font-size:
        15px !important;

    line-height:
        1.7 !important;

    opacity:
        1 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .about-hero,
    .contact-hero,
    .donation-hero,
    .events-hero,
    .feedback-hero,
    .settings-hero {

        height:
            260px !important;

        min-height:
            260px !important;

        max-height:
            260px !important;

        padding:
            0 20px !important;
    }


    .about-hero h1,
    .contact-hero h1,
    .donation-hero h1,
    .events-hero h1,
    .feedback-hero h1,
    .settings-hero h1 {

        font-size:
            42px !important;

        margin-bottom:
            14px !important;
    }


    .about-intro,
    .contact-intro,
    .donation-intro,
    .events-intro,
    .feedback-intro,
    .settings-intro {

        font-size:
            13px !important;

        line-height:
            1.55 !important;
    }


    .about-ornament span,
    .contact-ornament span,
    .donation-ornament span,
    .events-ornament span,
    .feedback-ornament span,
    .settings-ornament span {

        width:
            65px !important;
    }

}
/* =========================================================
   ABSOLUTE FINAL CONTACT HERO FIX
========================================================= */

body.temple-site
.contact-page
.contact-hero {

    background:
        linear-gradient(
            180deg,
            #fff9ed 0%,
            #f7ead1 100%
        ) !important;

    background-color:
        #fff9ed !important;

    height:
        330px !important;

    min-height:
        330px !important;

    max-height:
        330px !important;

    padding:
        0 25px !important;

    border-bottom:
        1px solid #d6aa43 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}


body.temple-site
.contact-page
.contact-hero h1 {

    color:
        #3a0647 !important;

    text-shadow:
        none !important;
}


body.temple-site
.contact-page
.contact-eyebrow {

    color:
        #a37221 !important;
}


body.temple-site
.contact-page
.contact-intro {

    color:
        #665248 !important;
}


body.temple-site
.contact-page
.contact-ornament span {

    background:
        #c89832 !important;
}


body.temple-site
.contact-page
.contact-ornament strong {

    color:
        #b98425 !important;
}
/* =========================================================
   FINAL PAGE TITLE SIZE REDUCTION - ALL PAGES
========================================================= */

/* Main page title sections */
.about-hero,
.contact-hero,
.events-hero,
.donate-hero,
.feedback-hero,
.settings-hero,
.login-hero,
.register-hero,
.verification-hero,
.verification-sent-hero,
.page-hero,
.page-title-hero {
    min-height: 220px !important;
    max-height: 220px !important;
    padding: 38px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Inner wrapper */
.about-hero-content,
.contact-hero-content,
.events-hero-content,
.donate-hero-content,
.feedback-hero-content,
.settings-hero-content,
.login-hero-content,
.register-hero-content,
.verification-hero-content,
.verification-sent-hero-content,
.page-hero-content,
.page-title-hero-content {
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Small top label like HINDU TEMPLE BELGIUM */
.about-hero .hero-eyebrow,
.contact-hero .contact-eyebrow,
.events-hero .hero-eyebrow,
.donate-hero .hero-eyebrow,
.feedback-hero .hero-eyebrow,
.settings-hero .hero-eyebrow,
.login-hero .hero-eyebrow,
.register-hero .hero-eyebrow,
.verification-hero .hero-eyebrow,
.verification-sent-hero .hero-eyebrow,
.page-hero .hero-eyebrow,
.page-title-hero .hero-eyebrow {
    font-size: 13px !important;
    letter-spacing: 3px !important;
    margin-bottom: 10px !important;
}

/* Main page title */
.about-hero h1,
.contact-hero h1,
.events-hero h1,
.donate-hero h1,
.feedback-hero h1,
.settings-hero h1,
.login-hero h1,
.register-hero h1,
.verification-hero h1,
.verification-sent-hero h1,
.page-hero h1,
.page-title-hero h1 {
    font-size: 64px !important;
    line-height: 1.05 !important;
    margin: 8px 0 14px !important;
}

/* Subtitle / paragraph */
.about-hero p,
.contact-hero p,
.events-hero p,
.donate-hero p,
.feedback-hero p,
.settings-hero p,
.login-hero p,
.register-hero p,
.verification-hero p,
.verification-sent-hero p,
.page-hero p,
.page-title-hero p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}

/* Decorative lines above title */
.about-hero .hero-ornament,
.contact-hero .contact-ornament,
.events-hero .hero-ornament,
.donate-hero .hero-ornament,
.feedback-hero .hero-ornament,
.settings-hero .hero-ornament,
.login-hero .hero-ornament,
.register-hero .hero-ornament,
.verification-hero .hero-ornament,
.verification-sent-hero .hero-ornament,
.page-hero .hero-ornament,
.page-title-hero .hero-ornament {
    margin-bottom: 12px !important;
}

/* Tablet */
@media (max-width: 991px) {
    .about-hero,
    .contact-hero,
    .events-hero,
    .donate-hero,
    .feedback-hero,
    .settings-hero,
    .login-hero,
    .register-hero,
    .verification-hero,
    .verification-sent-hero,
    .page-hero,
    .page-title-hero {
        min-height: 190px !important;
        max-height: 190px !important;
        padding: 30px 18px !important;
    }

    .about-hero h1,
    .contact-hero h1,
    .events-hero h1,
    .donate-hero h1,
    .feedback-hero h1,
    .settings-hero h1,
    .login-hero h1,
    .register-hero h1,
    .verification-hero h1,
    .verification-sent-hero h1,
    .page-hero h1,
    .page-title-hero h1 {
        font-size: 48px !important;
    }

    .about-hero p,
    .contact-hero p,
    .events-hero p,
    .donate-hero p,
    .feedback-hero p,
    .settings-hero p,
    .login-hero p,
    .register-hero p,
    .verification-hero p,
    .verification-sent-hero p,
    .page-hero p,
    .page-title-hero p {
        font-size: 15px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .about-hero,
    .contact-hero,
    .events-hero,
    .donate-hero,
    .feedback-hero,
    .settings-hero,
    .login-hero,
    .register-hero,
    .verification-hero,
    .verification-sent-hero,
    .page-hero,
    .page-title-hero {
        min-height: 165px !important;
        max-height: 165px !important;
        padding: 24px 16px !important;
    }

    .about-hero h1,
    .contact-hero h1,
    .events-hero h1,
    .donate-hero h1,
    .feedback-hero h1,
    .settings-hero h1,
    .login-hero h1,
    .register-hero h1,
    .verification-hero h1,
    .verification-sent-hero h1,
    .page-hero h1,
    .page-title-hero h1 {
        font-size: 36px !important;
        margin-bottom: 10px !important;
    }

    .about-hero p,
    .contact-hero p,
    .events-hero p,
    .donate-hero p,
    .feedback-hero p,
    .settings-hero p,
    .login-hero p,
    .register-hero p,
    .verification-hero p,
    .verification-sent-hero p,
    .page-hero p,
    .page-title-hero p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .about-hero .hero-eyebrow,
    .contact-hero .contact-eyebrow,
    .events-hero .hero-eyebrow,
    .donate-hero .hero-eyebrow,
    .feedback-hero .hero-eyebrow,
    .settings-hero .hero-eyebrow,
    .login-hero .hero-eyebrow,
    .register-hero .hero-eyebrow,
    .verification-hero .hero-eyebrow,
    .verification-sent-hero .hero-eyebrow,
    .page-hero .hero-eyebrow,
    .page-title-hero .hero-eyebrow {
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }
}
/* =========================================================
   FINAL UNIFIED PAGE HERO
   MATCH ABOUT US ON EVERY PAGE
========================================================= */

.about-hero,
.contact-hero,
.donation-hero,
.events-hero,
.feedback-hero,
.settings-hero {

    width: 100% !important;

    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;

    padding: 0 25px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    background:
        linear-gradient(
            180deg,
            #fff9ed 0%,
            #f7ead1 100%
        ) !important;

    border-bottom:
        1px solid #d6aa43 !important;

    overflow: hidden !important;
}


/* INNER */

.about-hero-inner,
.contact-hero-inner,
.donation-hero-inner,
.events-hero-inner,
.feedback-hero-inner,
.settings-hero-inner {

    width: 100% !important;

    max-width: 780px !important;

    margin: 0 auto !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;
}


/* GOLD ORNAMENT */

.about-ornament,
.contact-ornament,
.donation-ornament,
.events-ornament,
.feedback-ornament,
.settings-ornament {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    margin:
        0 0 9px !important;
}


.about-ornament span,
.contact-ornament span,
.donation-ornament span,
.events-ornament span,
.feedback-ornament span,
.settings-ornament span {

    width: 80px !important;
    height: 1px !important;

    background:
        #c89832 !important;
}


.about-ornament strong,
.contact-ornament strong,
.donation-ornament strong,
.events-ornament strong,
.feedback-ornament strong,
.settings-ornament strong {

    color:
        #b98425 !important;

    font-size:
        13px !important;
}


/* SMALL HEADING */

.about-eyebrow,
.contact-eyebrow,
.donation-eyebrow,
.events-eyebrow,
.feedback-eyebrow,
.settings-eyebrow {

    margin:
        0 0 7px !important;

    color:
        #a37221 !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .26em !important;

    line-height:
        1.3 !important;
}


/* =========================================================
   SAME TITLE SIZE ON EVERY PAGE
========================================================= */

.about-hero h1,
.contact-hero h1,
.donation-hero h1,
.events-hero h1,
.feedback-hero h1,
.settings-hero h1 {

    margin:
        4px 0 13px !important;

    padding: 0 !important;

    color:
        #3a0647 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        50px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-shadow:
        none !important;
}


/* REMOVE SPECIAL DONATION TITLE BEHAVIOUR */

.donation-hero h1 span {

    display:
        inline !important;

    color:
        #3a0647 !important;

    font-size:
        inherit !important;
}


/* SUBTITLE */

.about-intro,
.contact-intro,
.donation-intro,
.events-intro,
.feedback-intro,
.settings-intro {

    width: 100% !important;

    max-width: 700px !important;

    margin:
        0 auto !important;

    color:
        #665248 !important;

    font-size:
        14px !important;

    line-height:
        1.6 !important;

    opacity:
        1 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .about-hero,
    .contact-hero,
    .donation-hero,
    .events-hero,
    .feedback-hero,
    .settings-hero {

        height:
            190px !important;

        min-height:
            190px !important;

        max-height:
            190px !important;

        padding:
            0 18px !important;
    }


    .about-hero h1,
    .contact-hero h1,
    .donation-hero h1,
    .events-hero h1,
    .feedback-hero h1,
    .settings-hero h1 {

        font-size:
            36px !important;

        margin-bottom:
            10px !important;
    }


    .about-intro,
    .contact-intro,
    .donation-intro,
    .events-intro,
    .feedback-intro,
    .settings-intro {

        font-size:
            12px !important;

        line-height:
            1.5 !important;
    }


    .about-ornament span,
    .contact-ornament span,
    .donation-ornament span,
    .events-ornament span,
    .feedback-ornament span,
    .settings-ornament span {

        width:
            55px !important;
    }

}
/* =========================================================
   FORCE CONTACT HERO TO MATCH ABOUT HERO EXACTLY
========================================================= */

.contact-hero {

    width: 100% !important;

    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;

    padding: 0 25px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    background:
        linear-gradient(
            180deg,
            #fff9ed 0%,
            #f7ead1 100%
        ) !important;

    border-bottom:
        1px solid #d6aa43 !important;

    overflow: hidden !important;
}


.contact-hero-inner {

    width: 100% !important;

    max-width: 780px !important;

    margin: 0 auto !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;
}


.contact-hero h1 {

    margin:
        4px 0 13px !important;

    color:
        #3a0647 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        50px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-shadow:
        none !important;
}


.contact-intro {

    max-width:
        700px !important;

    margin:
        0 auto !important;

    color:
        #665248 !important;

    font-size:
        14px !important;

    line-height:
        1.6 !important;
}


/* MOBILE */

@media (max-width: 800px) {

    .contact-hero {

        height:
            190px !important;

        min-height:
            190px !important;

        max-height:
            190px !important;

        padding:
            0 18px !important;
    }


    .contact-hero h1 {

        font-size:
            36px !important;

        margin-bottom:
            10px !important;
    }


    .contact-intro {

        font-size:
            12px !important;

        line-height:
            1.5 !important;
    }

}

/* =========================================================
   TRUE FINAL UNIFIED PAGE HERO
   ABOUT / CONTACT / EVENTS / DONATE / FEEDBACK / SETTINGS
   KEEP THIS BLOCK AT THE VERY END OF THE FILE
========================================================= */

body.temple-site .app-page-content .about-hero,
body.temple-site .app-page-content .contact-hero,
body.temple-site .app-page-content .events-hero,
body.temple-site .app-page-content .donation-hero,
body.temple-site .app-page-content .donate-hero,
body.temple-site .app-page-content .feedback-hero,
body.temple-site .app-page-content .settings-hero {
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    margin: 0 !important;
    padding: 0 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: linear-gradient(180deg, #fff9ed 0%, #f7ead1 100%) !important;
    background-color: #fff9ed !important;
    border-bottom: 1px solid #d6aa43 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.temple-site .app-page-content .about-hero-inner,
body.temple-site .app-page-content .contact-hero-inner,
body.temple-site .app-page-content .events-hero-inner,
body.temple-site .app-page-content .donation-hero-inner,
body.temple-site .app-page-content .donate-hero-inner,
body.temple-site .app-page-content .feedback-hero-inner,
body.temple-site .app-page-content .settings-hero-inner,
body.temple-site .app-page-content .about-hero-content,
body.temple-site .app-page-content .contact-hero-content,
body.temple-site .app-page-content .events-hero-content,
body.temple-site .app-page-content .donation-hero-content,
body.temple-site .app-page-content .donate-hero-content,
body.temple-site .app-page-content .feedback-hero-content,
body.temple-site .app-page-content .settings-hero-content {
    width: 100% !important;
    max-width: 780px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

body.temple-site .app-page-content .about-ornament,
body.temple-site .app-page-content .contact-ornament,
body.temple-site .app-page-content .events-ornament,
body.temple-site .app-page-content .donation-ornament,
body.temple-site .app-page-content .donate-ornament,
body.temple-site .app-page-content .feedback-ornament,
body.temple-site .app-page-content .settings-ornament {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
}

body.temple-site .app-page-content .about-ornament span,
body.temple-site .app-page-content .contact-ornament span,
body.temple-site .app-page-content .events-ornament span,
body.temple-site .app-page-content .donation-ornament span,
body.temple-site .app-page-content .donate-ornament span,
body.temple-site .app-page-content .feedback-ornament span,
body.temple-site .app-page-content .settings-ornament span {
    width: 80px !important;
    height: 1px !important;
    background: #c89832 !important;
}

body.temple-site .app-page-content .about-ornament strong,
body.temple-site .app-page-content .contact-ornament strong,
body.temple-site .app-page-content .events-ornament strong,
body.temple-site .app-page-content .donation-ornament strong,
body.temple-site .app-page-content .donate-ornament strong,
body.temple-site .app-page-content .feedback-ornament strong,
body.temple-site .app-page-content .settings-ornament strong {
    color: #b98425 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

body.temple-site .app-page-content .about-eyebrow,
body.temple-site .app-page-content .contact-eyebrow,
body.temple-site .app-page-content .events-eyebrow,
body.temple-site .app-page-content .donation-eyebrow,
body.temple-site .app-page-content .donate-eyebrow,
body.temple-site .app-page-content .feedback-eyebrow,
body.temple-site .app-page-content .settings-eyebrow,
body.temple-site .app-page-content .about-hero .hero-eyebrow,
body.temple-site .app-page-content .contact-hero .hero-eyebrow,
body.temple-site .app-page-content .events-hero .hero-eyebrow,
body.temple-site .app-page-content .donation-hero .hero-eyebrow,
body.temple-site .app-page-content .donate-hero .hero-eyebrow,
body.temple-site .app-page-content .feedback-hero .hero-eyebrow,
body.temple-site .app-page-content .settings-hero .hero-eyebrow {
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: #a37221 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .26em !important;
    line-height: 1.3 !important;
}

body.temple-site .app-page-content .about-hero h1,
body.temple-site .app-page-content .contact-hero h1,
body.temple-site .app-page-content .events-hero h1,
body.temple-site .app-page-content .donation-hero h1,
body.temple-site .app-page-content .donate-hero h1,
body.temple-site .app-page-content .feedback-hero h1,
body.temple-site .app-page-content .settings-hero h1 {
    width: 100% !important;
    max-width: 780px !important;
    margin: 4px auto 13px !important;
    padding: 0 !important;
    color: #3a0647 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 50px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-shadow: none !important;
}

body.temple-site .app-page-content .donation-hero h1 span,
body.temple-site .app-page-content .donate-hero h1 span {
    display: inline !important;
    color: #3a0647 !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

body.temple-site .app-page-content .about-intro,
body.temple-site .app-page-content .contact-intro,
body.temple-site .app-page-content .events-intro,
body.temple-site .app-page-content .donation-intro,
body.temple-site .app-page-content .donate-intro,
body.temple-site .app-page-content .feedback-intro,
body.temple-site .app-page-content .settings-intro {
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #665248 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    opacity: 1 !important;
}

@media (max-width: 900px) {
    body.temple-site .app-page-content .about-hero,
    body.temple-site .app-page-content .contact-hero,
    body.temple-site .app-page-content .events-hero,
    body.temple-site .app-page-content .donation-hero,
    body.temple-site .app-page-content .donate-hero,
    body.temple-site .app-page-content .feedback-hero,
    body.temple-site .app-page-content .settings-hero {
        height: 205px !important;
        min-height: 205px !important;
        max-height: 205px !important;
        padding: 0 20px !important;
    }

    body.temple-site .app-page-content .about-hero h1,
    body.temple-site .app-page-content .contact-hero h1,
    body.temple-site .app-page-content .events-hero h1,
    body.temple-site .app-page-content .donation-hero h1,
    body.temple-site .app-page-content .donate-hero h1,
    body.temple-site .app-page-content .feedback-hero h1,
    body.temple-site .app-page-content .settings-hero h1 {
        font-size: 42px !important;
    }
}

@media (max-width: 600px) {
    body.temple-site .app-page-content .about-hero,
    body.temple-site .app-page-content .contact-hero,
    body.temple-site .app-page-content .events-hero,
    body.temple-site .app-page-content .donation-hero,
    body.temple-site .app-page-content .donate-hero,
    body.temple-site .app-page-content .feedback-hero,
    body.temple-site .app-page-content .settings-hero {
        height: 185px !important;
        min-height: 185px !important;
        max-height: 185px !important;
        padding: 0 16px !important;
    }

    body.temple-site .app-page-content .about-hero h1,
    body.temple-site .app-page-content .contact-hero h1,
    body.temple-site .app-page-content .events-hero h1,
    body.temple-site .app-page-content .donation-hero h1,
    body.temple-site .app-page-content .donate-hero h1,
    body.temple-site .app-page-content .feedback-hero h1,
    body.temple-site .app-page-content .settings-hero h1 {
        margin: 3px auto 9px !important;
        font-size: 34px !important;
        line-height: 1.04 !important;
    }

    body.temple-site .app-page-content .about-intro,
    body.temple-site .app-page-content .contact-intro,
    body.temple-site .app-page-content .events-intro,
    body.temple-site .app-page-content .donation-intro,
    body.temple-site .app-page-content .donate-intro,
    body.temple-site .app-page-content .feedback-intro,
    body.temple-site .app-page-content .settings-intro {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
}

/* =========================================================
   END TRUE FINAL UNIFIED PAGE HERO
========================================================= */

/* =========================================================
   FINAL PURPLE + GOLD BUTTON THEME
   REPLACES ALL OLD RED / MAROON BUTTON COLOURS
========================================================= */

/* PRIMARY BUTTONS */
.traditional-button.primary,
.donation-stripe-button,
.donation-result-button.primary,
.account-button,
.event-primary-button,
.settings-button,
.settings-logout-button,
.admin-primary-button,
.admin-small-button,
.admin-mini-button,
.about-button.primary,
.contact-button.primary,
.feedback-button,
.feedback-submit-button,
.login-button,
.register-button,
.verification-button,
button[type="submit"] {
    color: #fff7e6 !important;

    background:
        linear-gradient(
            135deg,
            #2f003d 0%,
            #3a0647 52%,
            #4b0a59 100%
        ) !important;

    border-color:
        #c99736 !important;

    box-shadow:
        0 6px 16px
        rgba(47, 0, 61, .16) !important;
}


/* PRIMARY BUTTON HOVER */
.traditional-button.primary:hover,
.donation-stripe-button:hover,
.donation-result-button.primary:hover,
.account-button:hover,
.event-primary-button:hover,
.settings-button:hover,
.settings-logout-button:hover,
.admin-primary-button:hover,
.admin-small-button:hover,
.admin-mini-button:hover,
.about-button.primary:hover,
.contact-button.primary:hover,
.feedback-button:hover,
.feedback-submit-button:hover,
.login-button:hover,
.register-button:hover,
.verification-button:hover,
button[type="submit"]:hover {
    color: #f4d56a !important;

    background:
        linear-gradient(
            135deg,
            #3a0647 0%,
            #4b0a59 55%,
            #5d126d 100%
        ) !important;

    border-color:
        #d8ae4d !important;
}


/* SECONDARY / OUTLINE BUTTONS */
.traditional-button.secondary,
.donation-result-button.secondary,
.account-button.secondary,
.settings-secondary-button,
.admin-outline-button,
.about-button.secondary,
.contact-button.secondary {
    color: #3a0647 !important;

    background:
        #fff9ed !important;

    border-color:
        #c99736 !important;
}


/* SECONDARY BUTTON HOVER */
.traditional-button.secondary:hover,
.donation-result-button.secondary:hover,
.account-button.secondary:hover,
.settings-secondary-button:hover,
.admin-outline-button:hover,
.about-button.secondary:hover,
.contact-button.secondary:hover {
    color: #fff7e6 !important;

    background:
        #3a0647 !important;

    border-color:
        #d8ae4d !important;
}


/* ADMIN DELETE / DANGER BUTTONS
   User requested no red buttons, so keep danger meaning by outline,
   but use the same purple family.
*/
.admin-mini-button.danger,
button.danger,
.button-danger {
    color: #4b0a59 !important;

    background:
        #fff7ee !important;

    border-color:
        #9c6aaa !important;
}


.admin-mini-button.danger:hover,
button.danger:hover,
.button-danger:hover {
    color: #fff7e6 !important;

    background:
        #4b0a59 !important;

    border-color:
        #d8ae4d !important;
}


/* SMALL CARD / ACTION LINKS THAT PREVIOUSLY TURNED RED */
.account-card > a:hover {
    color: #fff7e6 !important;

    background:
        #3a0647 !important;

    border-color:
        #c99736 !important;
}


/* =========================================================
   REMOVE OLD RED STRIP ABOVE FOOTER
========================================================= */

/*
   The old stylesheet still contains legacy maroon footer/section
   borders. Force the final boundary between page content and footer
   to use only the new gold/purple theme.
*/

body.temple-site .app-page-content {
    border-bottom: 0 !important;
    box-shadow: none !important;
}


body.temple-site .app-page-content > *:last-child {
    border-bottom-color:
        #d7aa3f !important;
}


/* About bottom welcome section */
.about-welcome-section {
    background:
        linear-gradient(
            135deg,
            #2f003d 0%,
            #3a0647 52%,
            #4b0a59 100%
        ) !important;

    border-bottom:
        0 !important;
}


/* Ensure footer itself starts with GOLD, never legacy red */
.temple-footer,
.desktop-temple-footer,
.mobile-app-footer {
    border-top:
        3px solid #d7aa3f !important;
}


.temple-footer::before,
.desktop-temple-footer::before,
.mobile-app-footer::before {
    background:
        #d7aa3f !important;

    border-color:
        #d7aa3f !important;
}

/* =========================================================
   HEADER BRAND NAME + TAGLINE
========================================================= */

.temple-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    text-decoration: none;
}


.temple-brand-text {
    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;
}


/* MAIN NAME */

/* =========================================================
   REFINED TEMPLE WORDMARK
========================================================= */

.temple-brand-name {
    display: block;

    color: #f1cf67 !important;

    font-family:
        "Trebuchet MS",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 27px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: .035em !important;

    text-transform: none !important;

    text-shadow:
        0 1px 1px rgba(0, 0, 0, .22) !important;
}


/* TAGLINE */

.temple-brand-tagline {
    display: block;

    margin-top: 5px;

    color: #d9b44a !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size: 7px !important;

    font-weight: 600 !important;

    line-height: 1.2 !important;

    letter-spacing: .18em !important;

    text-transform: uppercase !important;
}


/* MOBILE */
/* =========================================================
   MOBILE ACCOUNT MENU - FIXED FOR GRID FOOTER
========================================================= */

@media (max-width: 800px) {

    .mobile-account-wrapper {
        position: relative;

        width: 100%;
        height: 55px;

        min-width: 0;
    }


    /* MAKE ACCOUNT BUTTON MATCH OTHER FOOTER ITEMS */

    .mobile-account-button {
        position: relative;

        width: 100%;
        height: 55px;

        padding: 0;

        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 2px;

        color: #efc958 !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 9px;

        font-family: inherit;

        box-shadow: none !important;

        cursor: pointer;

        appearance: none;
        -webkit-appearance: none;
    }


    .mobile-account-button .mobile-app-icon {
        font-size: 19px;

        line-height: 1;

        color: #efc958 !important;
    }


    .mobile-account-button .mobile-app-label {
        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 9px;

        font-weight: 700;

        color: #fff1d2 !important;
    }


    /* =====================================================
       POPUP
    ====================================================== */

    .mobile-account-menu {
        display: none;

        position: absolute;

        right: 4px;
        bottom: calc(100% + 12px);

        width: 245px;

        padding: 10px;

        background:
            linear-gradient(
                145deg,
                #fffaf0 0%,
                #f8ebd2 100%
            );

        border:
            1px solid #d3a846;

        border-radius: 15px;

        box-shadow:
            0 14px 35px
            rgba(35, 0, 45, .24);

        z-index: 1000000;
    }


    .mobile-account-menu.show {
        display: block;
    }


    /* POINTER */

    .mobile-account-menu::after {
        content: "";

        position: absolute;

        right: 23px;
        bottom: -7px;

        width: 13px;
        height: 13px;

        background: #f8ebd2;

        border-right:
            1px solid #d3a846;

        border-bottom:
            1px solid #d3a846;

        transform:
            rotate(45deg);
    }


    /* =====================================================
       USER
    ====================================================== */

    .mobile-account-name {
        display: flex;

        align-items: center;

        gap: 10px;

        padding:
            9px 8px 12px;

        text-align: left;
    }


    .mobile-account-avatar {
        width: 38px;
        height: 38px;

        display: flex;

        align-items: center;
        justify-content: center;

        flex-shrink: 0;

        border-radius: 50%;

        background: #edd390;
    }


    .mobile-account-name strong {
        display: block;

        color: #3a0647;

        font-size: 12px;
    }


    .mobile-account-name small {
        display: block;

        margin-top: 2px;

        color: #9a742b;

        font-size: 9px;

        text-transform: capitalize;
    }


    .mobile-account-divider {
        height: 1px;

        margin:
            0 5px 6px;

        background: #ead5aa;
    }


    /* =====================================================
       MENU LINKS
    ====================================================== */

    .mobile-account-link {
        min-height: 43px;

        padding:
            0 11px;

        display: flex;

        align-items: center;

        gap: 11px;

        border-radius: 8px;

        color: #3a0647 !important;

        background: transparent !important;

        text-decoration: none;

        font-size: 11px;

        font-weight: 700;

        text-align: left;
    }


    .mobile-account-link:hover {
        color: #fff7e6 !important;

        background: #3a0647 !important;
    }


    .mobile-account-link > span:first-child {
        width: 22px;

        text-align: center;
    }


    /* LOGOUT */

    .mobile-account-logout {
        margin-top: 4px;

        padding-top: 4px;

        border-top:
            1px solid #ead5aa;

        border-radius:
            0 0 8px 8px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 801px) {

    .mobile-account-wrapper,
    .mobile-account-menu {
        display: none !important;
    }

}
/* =========================================================
   END FINAL PURPLE + GOLD BUTTON THEME
========================================================= */

/* =========================================================
   SOCIAL MEDIA BUTTON COMPATIBILITY
   Keeps social <button> icons visually identical to links.
   No other site styling is changed.
========================================================= */

button.temple-social {
    margin: 0;
    padding: 0;

    font: inherit;

    background: transparent;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
}


/* Keep keyboard accessibility clear */
button.temple-social:focus-visible {
    outline: 2px solid #d7aa3f;
    outline-offset: 3px;
}
/* =========================================================
   TEMPLE CHAT ASSISTANT
========================================================= */

.temple-chat {
    position: fixed;

    right: 24px;
    bottom: 105px;

    z-index: 9999999;
}


/* =========================================================
   LOGO CHAT BUTTON
========================================================= */

.temple-chat-launcher {
    position: relative;

    width: 67px;
    height: 67px;

    padding: 5px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        2px solid #d7aa3f !important;

    border-radius:
        50%;

    cursor:
        pointer;

    background:
        linear-gradient(
            135deg,
            #2f003d,
            #4b0a59
        ) !important;

    box-shadow:
        0 8px 26px
        rgba(45, 0, 58, .30) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.temple-chat-launcher:hover {
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 12px 32px
        rgba(45, 0, 58, .38) !important;
}


.temple-chat-launcher img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 50%;
}


/* ONLINE DOT */

.temple-chat-online {
    position: absolute;

    right: 2px;
    bottom: 4px;

    width: 14px;
    height: 14px;

    border:
        2px solid #fff8e9;

    border-radius:
        50%;

    background:
        #45a85a;
}


/* =========================================================
   CHAT WINDOW
========================================================= */

.temple-chat-window {
    display: none;

    position: absolute;

    right: 0;
    bottom: 82px;

    width: 365px;
    height: 520px;

    overflow: hidden;

    flex-direction: column;

    border:
        1px solid #d7aa3f;

    border-radius:
        18px;

    background:
        #fffaf0;

    box-shadow:
        0 18px 55px
        rgba(37, 0, 47, .28);
}


.temple-chat-window.show {
    display: flex;
}


/* =========================================================
   HEADER
========================================================= */

.temple-chat-header {
    min-height: 72px;

    padding:
        10px 14px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background:
        linear-gradient(
            100deg,
            #26002f,
            #3a0647,
            #4b0a59
        );

    border-bottom:
        2px solid #d7aa3f;
}


.temple-chat-header-brand {
    display: flex;

    align-items: center;

    gap: 10px;
}


.temple-chat-header-brand img {
    width: 44px;
    height: 44px;

    object-fit: contain;
}


.temple-chat-header-brand strong {
    display: block;

    color:
        #f1cf67;

    font-size:
        14px;
}


.temple-chat-header-brand span {
    display: block;

    margin-top: 2px;

    color:
        #fff2d5;

    font-size:
        9px;
}


.temple-chat-close {
    width: 34px;
    height: 34px;

    border: 0 !important;

    background:
        transparent !important;

    color:
        #f1cf67 !important;

    font-size:
        26px;

    box-shadow:
        none !important;

    cursor:
        pointer;
}


/* =========================================================
   MESSAGES
========================================================= */

.temple-chat-messages {
    flex: 1;

    padding:
        17px 14px;

    overflow-y:
        auto;

    background:
        linear-gradient(
            180deg,
            #fffaf0,
            #f8edd8
        );
}


.temple-chat-message {
    display: flex;

    margin-bottom:
        11px;
}


.temple-chat-user {
    justify-content:
        flex-end;
}


.temple-chat-bot {
    justify-content:
        flex-start;
}


.temple-chat-bubble {
    max-width:
        82%;

    padding:
        10px 12px;

    border-radius:
        12px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.55;

    white-space:
        pre-line;
}


.temple-chat-bot
.temple-chat-bubble {
    color:
        #554039;

    background:
        #ffffff;

    border:
        1px solid #e2cea4;
}


.temple-chat-user
.temple-chat-bubble {
    color:
        #fff7e6;

    background:
        #3a0647;
}


/* =========================================================
   QUICK QUESTIONS
========================================================= */

.temple-chat-suggestions {
    padding:
        8px 10px;

    display: flex;

    gap: 6px;

    overflow-x:
        auto;

    background:
        #fffaf0;

    border-top:
        1px solid #ead7ae;
}


.temple-chat-suggestions button {
    flex-shrink: 0;

    padding:
        7px 10px;

    border:
        1px solid #cfaa58 !important;

    border-radius:
        18px;

    color:
        #3a0647 !important;

    background:
        #fff7e8 !important;

    box-shadow:
        none !important;

    font-size:
        9px;

    cursor:
        pointer;
}


/* =========================================================
   INPUT
========================================================= */

.temple-chat-form {
    min-height: 62px;

    padding:
        9px 10px;

    display: flex;

    align-items: center;

    gap: 8px;

    background:
        #ffffff;

    border-top:
        1px solid #ead7ae;
}


.temple-chat-form input {
    flex: 1;

    height: 42px;

    padding:
        0 12px;

    border:
        1px solid #d8c39a;

    border-radius:
        21px;

    outline:
        none;

    color:
        #4c382f;

    background:
        #fffaf3;

    font-size:
        11px;
}


.temple-chat-form input:focus {
    border-color:
        #6a2477;

    box-shadow:
        0 0 0 3px
        rgba(58, 6, 71, .08);
}


.temple-chat-form button {
    width: 42px;
    height: 42px;

    padding: 0;

    border-radius:
        50% !important;

    border:
        1px solid #d7aa3f !important;

    color:
        #f3d374 !important;

    background:
        #3a0647 !important;

    box-shadow:
        none !important;

    cursor:
        pointer;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .temple-chat {
        right: 14px;

        bottom:
            88px;
    }


    .temple-chat-launcher {
        width: 58px;
        height: 58px;
    }


    .temple-chat-window {
        position: fixed;

        left: 12px;
        right: 12px;

        bottom:
            86px;

        width:
            auto;

        height:
            min(
                530px,
                calc(
                    100vh
                    - 180px
                )
            );

        border-radius:
            16px;
    }

}
/* =========================================================
   TEMPLE CHAT ASSISTANT
========================================================= */

.temple-chat {
    position: fixed;

    right: 24px;
    bottom: 105px;

    z-index: 9999999;
}


/* =========================================================
   LOGO CHAT BUTTON
========================================================= */

.temple-chat-launcher {
    position: relative;

    width: 67px;
    height: 67px;

    padding: 5px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        2px solid #d7aa3f !important;

    border-radius:
        50%;

    cursor:
        pointer;

    background:
        linear-gradient(
            135deg,
            #2f003d,
            #4b0a59
        ) !important;

    box-shadow:
        0 8px 26px
        rgba(45, 0, 58, .30) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.temple-chat-launcher:hover {
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 12px 32px
        rgba(45, 0, 58, .38) !important;
}


.temple-chat-launcher img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 50%;
}


/* ONLINE DOT */

.temple-chat-online {
    position: absolute;

    right: 2px;
    bottom: 4px;

    width: 14px;
    height: 14px;

    border:
        2px solid #fff8e9;

    border-radius:
        50%;

    background:
        #45a85a;
}


/* =========================================================
   CHAT WINDOW
========================================================= */

.temple-chat-window {
    display: none;

    position: absolute;

    right: 0;
    bottom: 82px;

    width: 365px;
    height: 520px;

    overflow: hidden;

    flex-direction: column;

    border:
        1px solid #d7aa3f;

    border-radius:
        18px;

    background:
        #fffaf0;

    box-shadow:
        0 18px 55px
        rgba(37, 0, 47, .28);
}


.temple-chat-window.show {
    display: flex;
}


/* =========================================================
   HEADER
========================================================= */

.temple-chat-header {
    min-height: 72px;

    padding:
        10px 14px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background:
        linear-gradient(
            100deg,
            #26002f,
            #3a0647,
            #4b0a59
        );

    border-bottom:
        2px solid #d7aa3f;
}


.temple-chat-header-brand {
    display: flex;

    align-items: center;

    gap: 10px;
}


.temple-chat-header-brand img {
    width: 44px;
    height: 44px;

    object-fit: contain;
}


.temple-chat-header-brand strong {
    display: block;

    color:
        #f1cf67;

    font-size:
        14px;
}


.temple-chat-header-brand span {
    display: block;

    margin-top: 2px;

    color:
        #fff2d5;

    font-size:
        9px;
}


.temple-chat-close {
    width: 34px;
    height: 34px;

    border: 0 !important;

    background:
        transparent !important;

    color:
        #f1cf67 !important;

    font-size:
        26px;

    box-shadow:
        none !important;

    cursor:
        pointer;
}


/* =========================================================
   MESSAGES
========================================================= */

.temple-chat-messages {
    flex: 1;

    padding:
        17px 14px;

    overflow-y:
        auto;

    background:
        linear-gradient(
            180deg,
            #fffaf0,
            #f8edd8
        );
}


.temple-chat-message {
    display: flex;

    margin-bottom:
        11px;
}


.temple-chat-user {
    justify-content:
        flex-end;
}


.temple-chat-bot {
    justify-content:
        flex-start;
}


.temple-chat-response {
    max-width:
        86%;
}


.temple-chat-user
.temple-chat-response {

    display: flex;

    flex-direction: column;

    align-items: flex-end;
}


.temple-chat-bot
.temple-chat-response {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.temple-chat-bubble {
    max-width:
        100%;

    padding:
        10px 12px;

    border-radius:
        12px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.55;

    white-space:
        pre-line;
}


.temple-chat-bot
.temple-chat-bubble {
    color:
        #554039;

    background:
        #ffffff;

    border:
        1px solid #e2cea4;
}


.temple-chat-user
.temple-chat-bubble {
    color:
        #fff7e6;

    background:
        #3a0647;
}


/* =========================================================
   CHAT ACTION LINKS
========================================================= */

.temple-chat-actions {
    margin-top:
        7px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.temple-chat-action-link {
    min-height:
        32px;

    padding:
        0 12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #c99b3c;

    border-radius:
        16px;

    color:
        #fff7e6 !important;

    background:
        #3a0647;

    text-decoration:
        none !important;

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

    transition:
        .2s ease;
}


.temple-chat-action-link:hover {
    color:
        #3a0647 !important;

    background:
        #f1cf67;

    transform:
        translateY(-1px);
}


/* =========================================================
   QUICK QUESTIONS
========================================================= */

.temple-chat-suggestions {
    padding:
        8px 10px;

    display: flex;

    gap: 6px;

    overflow-x:
        auto;

    background:
        #fffaf0;

    border-top:
        1px solid #ead7ae;
}


.temple-chat-suggestions button {
    flex-shrink: 0;

    padding:
        7px 10px;

    border:
        1px solid #cfaa58 !important;

    border-radius:
        18px;

    color:
        #3a0647 !important;

    background:
        #fff7e8 !important;

    box-shadow:
        none !important;

    font-size:
        9px;

    cursor:
        pointer;
}


/* =========================================================
   INPUT
========================================================= */

.temple-chat-form {
    min-height:
        62px;

    padding:
        9px 10px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    background:
        #ffffff;

    border-top:
        1px solid #ead7ae;
}


.temple-chat-form input {
    flex:
        1;

    height:
        42px;

    padding:
        0 12px;

    border:
        1px solid #d8c39a;

    border-radius:
        21px;

    outline:
        none;

    color:
        #4c382f;

    background:
        #fffaf3;

    font-size:
        11px;
}


.temple-chat-form input:focus {
    border-color:
        #6a2477;

    box-shadow:
        0 0 0 3px
        rgba(58, 6, 71, .08);
}


.temple-chat-form button {
    width:
        42px;

    height:
        42px;

    padding:
        0;

    border-radius:
        50% !important;

    border:
        1px solid #d7aa3f !important;

    color:
        #f3d374 !important;

    background:
        #3a0647 !important;

    box-shadow:
        none !important;

    cursor:
        pointer;
}


/* =========================================================
   THINKING
========================================================= */

.temple-chat-thinking {
    opacity:
        .7;

    font-style:
        italic;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .temple-chat {
        right:
            14px;

        bottom:
            88px;
    }


    .temple-chat-launcher {
        width:
            58px;

        height:
            58px;
    }


    .temple-chat-window {
        position:
            fixed;

        left:
            12px;

        right:
            12px;

        bottom:
            86px;

        width:
            auto;

        height:
            min(
                530px,
                calc(
                    100vh
                    - 180px
                )
            );

        border-radius:
            16px;
    }

}
/* =========================================================
   EVENTS GRID - COMPACT MODERN CARDS
========================================================= */

.events-list-section {
    padding: 36px 6% 70px;
}

.events-grid {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   EVENT CARD
========================================================= */

.event-card {
    position: relative;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-height: 100%;

    background: #fffdf8;

    border:
        1px solid rgba(202, 158, 70, .35);

    border-radius: 16px;

    box-shadow:
        0 10px 28px rgba(58, 6, 71, .08);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.event-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(202, 158, 70, .65);

    box-shadow:
        0 18px 38px rgba(58, 6, 71, .13);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.event-card-image {
    position: relative;

    height: 175px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #f8e7b3,
            #efd18a
        );
}


.event-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.event-card-placeholder {
    font-size: 48px;
}


/* =========================================================
   DATE BADGE
========================================================= */



/* =========================================================
   BODY
========================================================= */

.event-card-body {
    padding:
        26px 20px 20px;

    display: flex;
    flex-direction: column;

    flex: 1;
}


.event-card-kicker {
    margin-bottom: 7px;

    color: #a37221;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.event-card-title {
    margin: 0 0 9px;

    color: #3a0647;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;

    line-height: 1.15;
}


.event-card-description {
    margin: 0 0 16px;

    color: #6b554b;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   META DETAILS
========================================================= */

.event-card-meta {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-bottom: 18px;
}


.event-card-meta-row {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #59433b;

    font-size: 11px;

    font-weight: 600;
}


.event-card-meta-icon {
    width: 18px;

    flex-shrink: 0;

    text-align: center;

    color: #a37221;
}


/* =========================================================
   BUTTON
========================================================= */

.event-card-actions {
    margin-top: auto;
}


.event-card-button {
    min-height: 38px;

    padding:
        0 16px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #fff7e6 !important;

    background:
        linear-gradient(
            135deg,
            #2f003d,
            #4b0a59
        );

    border:
        1px solid #c99b3c;

    border-radius: 7px;

    text-decoration: none !important;

    font-size: 11px;

    font-weight: 700;

    transition: .2s ease;
}


.event-card-button:hover {
    color: #3a0647 !important;

    background: #f1cf67;

    transform: translateY(-1px);
}


/* =========================================================
   FEATURED BADGE
========================================================= */

.event-featured-badge {
    position: absolute;

    left: 14px;
    top: 14px;

    padding:
        6px 9px;

    color: #3a0647;

    background: #f1cf67;

    border-radius: 12px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;

    z-index: 4;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .events-list-section {
        padding:
            24px 16px 50px;
    }


    .events-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .event-card-image {
        height: 150px;
    }


    .event-card-date {
        top: 126px;

        width: 60px;
        height: 60px;
    }


    .event-card-date strong {
        font-size: 20px;
    }


    .event-card-title {
        font-size: 21px;
    }

}
/* =========================================================
   ADMIN EVENT IMAGE UPLOAD
========================================================= */

.admin-event-image-preview {
    width: 230px;
    height: 135px;

    margin-bottom: 12px;

    overflow: hidden;

    border:
        1px solid #d7aa3f;

    border-radius: 10px;

    background: #fffaf0;
}


.admin-event-image-preview img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.admin-field input[type="file"] {
    width: 100%;

    padding: 10px;

    border:
        1px solid #d8c39a;

    border-radius: 7px;

    background: #fffdf8;
}


.admin-field-help {
    display: block;

    margin-top: 6px;

    color: #8a6f61;

    font-size: 10px;
}
/* =========================================================
   EVENT BOOKING
========================================================= */

.event-booking-page,
.booking-success-page {
    background: #fff8eb;
}


/* EVENT SUMMARY */

.booking-event-hero {
    padding: 34px 6%;

    border-bottom:
        1px solid #d7aa3f;

    background:
        linear-gradient(
            180deg,
            #fffaf0,
            #f8ecd5
        );
}


.booking-event-inner {
    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        320px 1fr;

    gap: 34px;

    align-items: center;
}


.booking-event-image {
    height: 210px;

    overflow: hidden;

    border-radius: 15px;

    border:
        1px solid #d9bb77;
}


.booking-event-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.booking-eyebrow {
    color: #a37221;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .2em;
}


.booking-event-copy h1 {
    margin:
        8px 0 10px;

    color: #3a0647;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 38px;
}


.booking-event-copy p {
    color: #6b554b;

    line-height: 1.6;
}


.booking-event-meta {
    margin-top: 18px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.booking-event-meta span {
    padding:
        8px 12px;

    border:
        1px solid #dfc68e;

    border-radius: 18px;

    background: #fffdf8;

    color: #59443b;

    font-size: 11px;

    font-weight: 600;
}


/* FORM AREA */

.booking-section {
    padding:
        40px 6% 80px;
}


.booking-container {
    max-width: 900px;

    margin: 0 auto;
}


.booking-form-card,
.booking-already,
.booking-success-card {
    padding: 32px;

    background: #fffdf8;

    border:
        1px solid #dec48e;

    border-radius: 16px;

    box-shadow:
        0 12px 32px rgba(58,6,71,.08);
}


.booking-form-heading {
    margin-bottom: 24px;
}


.booking-form-heading span {
    color: #a37221;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .18em;
}


.booking-form-heading h2 {
    margin:
        5px 0 5px;

    color: #3a0647;

    font-size: 28px;
}


.booking-form-heading p {
    margin: 0;

    color: #755f54;
}


/* GRID */

.booking-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 17px;
}


.booking-span-2 {
    grid-column:
        1 / -1;
}


.booking-field {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.booking-field label {
    color: #3a0647;

    font-size: 11px;

    font-weight: 700;
}


.booking-field input,
.booking-field select,
.booking-field textarea {
    width: 100%;

    padding: 12px;

    border:
        1px solid #d8bd83;

    border-radius: 8px;

    background: #fffaf2;

    color: #513d35;

    font: inherit;
}


.booking-field textarea {
    resize: vertical;
}


/* AVAILABILITY */

.booking-availability {
    margin-bottom: 20px;

    padding: 11px 15px;

    border:
        1px solid #d8bd83;

    border-radius: 8px;

    background: #fff7df;

    color: #715a3b;

    font-size: 12px;
}


.booking-availability strong {
    color: #3a0647;

    font-size: 16px;
}


/* ALERT */

.booking-alert {
    margin-bottom: 20px;

    padding: 12px 14px;

    border-radius: 8px;
}


.booking-alert-error {
    background: #fff1eb;

    border:
        1px solid #e5b7a8;

    color: #74382d;
}


/* BUTTONS */

.booking-form-actions,
.booking-success-actions {
    margin-top: 25px;

    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}


.booking-primary-button,
.booking-secondary-button {
    min-height: 42px;

    padding:
        0 18px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 7px;

    text-decoration: none !important;

    font-weight: 700;

    font-size: 11px;

    cursor: pointer;
}


.booking-primary-button {
    color: #fff7e6 !important;

    background:
        linear-gradient(
            135deg,
            #2f003d,
            #4b0a59
        ) !important;

    border:
        1px solid #d7aa3f;
}


.booking-secondary-button {
    color: #3a0647 !important;

    background: #fffaf0;

    border:
        1px solid #d7aa3f;
}


/* SUCCESS */

.booking-success-section {
    min-height:
        calc(100vh - 210px);

    padding:
        55px 20px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.booking-success-card {
    width: 100%;

    max-width: 720px;

    text-align: center;
}


.booking-success-icon {
    width: 62px;
    height: 62px;

    margin:
        0 auto 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff7e6;

    background: #3a0647;

    border:
        2px solid #d7aa3f;

    font-size: 28px;
}


.booking-success-card h1 {
    margin: 8px 0;

    color: #3a0647;
}


.booking-success-intro {
    color: #6c564c;
}


.booking-reference {
    margin:
        22px auto;

    padding:
        12px;

    max-width:
        330px;

    border:
        1px solid #d9be87;

    border-radius: 8px;

    background: #fff7df;

    color: #786248;
}


.booking-reference strong {
    display: block;

    margin-top: 4px;

    color: #3a0647;

    font-size: 17px;
}


.booking-summary {
    margin-top: 25px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 1px;

    overflow: hidden;

    border:
        1px solid #e0ca99;

    border-radius: 10px;

    background: #e0ca99;

    text-align: left;
}


.booking-summary > div {
    padding: 13px;

    background: #fffdf8;
}


.booking-summary span {
    display: block;

    color: #9c7a3b;

    font-size: 9px;

    text-transform: uppercase;
}


.booking-summary strong {
    display: block;

    margin-top: 3px;

    color: #513d35;
}


/* MOBILE */

@media (max-width: 700px) {

    .booking-event-inner {
        grid-template-columns: 1fr;
    }


    .booking-event-image {
        height: 170px;
    }


    .booking-event-copy h1 {
        font-size: 30px;
    }


    .booking-form-grid {
        grid-template-columns: 1fr;
    }


    .booking-span-2 {
        grid-column: auto;
    }


    .booking-form-card,
    .booking-already,
    .booking-success-card {
        padding: 22px 17px;
    }


    .booking-summary {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   ABOUT DROPDOWN + COMMUNITY PAGES
========================================================= */

.temple-nav-dropdown {
    position: relative;
    flex-shrink: 0;
}

.temple-nav-dropdown-button {
    position: relative;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: #fff0ce;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.temple-nav-dropdown-button:hover,
.temple-nav-dropdown-button.active {
    color: #efd071;
}

.temple-nav-dropdown-button.active::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -13px;
    height: 3px;
    border-radius: 4px;
    background: #e9c557;
}

.temple-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 22px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 235px;
    padding: 8px;
    border: 1px solid #d7b35f;
    border-radius: 10px;
    background: #fffaf0;
    box-shadow: 0 16px 38px rgba(35,0,45,.22);
    z-index: 1000001;
}

.temple-nav-dropdown:hover .temple-nav-dropdown-menu,
.temple-nav-dropdown-menu.show {
    display: block;
}

.temple-nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: #fffaf0;
    border-left: 1px solid #d7b35f;
    border-top: 1px solid #d7b35f;
}

.temple-nav-dropdown-menu a {
    display: block;
    padding: 11px 12px;
    border-radius: 7px;
    color: #3a0647 !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 700;
}

.temple-nav-dropdown-menu a:hover,
.temple-nav-dropdown-menu a.active {
    color: #fff7e6 !important;
    background: #3a0647;
}


/* Header spacing with additional navigation */

.temple-nav {
    gap: 22px;
}

.temple-header-inner {
    gap: 22px;
}


/* =========================================================
   SHARED COMMUNITY PAGE
========================================================= */

.community-page {
    width: 100%;
    background: #fff8ea;
    color: #533f36;
}

.community-page-hero {
    min-height: 245px;
    padding: 36px 22px 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(
            circle at center,
            rgba(215,170,63,.12),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #fffaf0,
            #f8ecd5
        );
    border-bottom: 1px solid #d6aa43;
}

.community-page-hero-inner {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

.community-page-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 9px;
}

.community-page-ornament span {
    width: 90px;
    height: 1px;
    background: #bd842c;
}

.community-page-ornament strong {
    color: #b57925;
    font-size: 14px;
}

.community-page-eyebrow,
.community-kicker {
    color: #9a6927;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .22em;
}

.community-page-hero h1 {
    margin: 8px 0 10px;
    color: #3a0647 !important;
    font-family: Georgia,"Times New Roman",serif;
    font-size: clamp(38px,4vw,54px);
    line-height: 1;
}

.community-page-hero p {
    max-width: 700px;
    margin: 0 auto;
    color: #6d574c;
    font-size: 14px;
    line-height: 1.65;
}

.community-section {
    padding: 44px 6% 80px;
}

.community-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.community-intro-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 28px;
    align-items: stretch;
}

.community-intro-grid h2,
.vision-roadmap h2,
.document-overview-card h2,
.document-download-card h2,
.petition-story h2,
.petition-form-card h2,
.community-cta h2 {
    margin: 7px 0 14px;
    color: #3a0647 !important;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 31px;
    line-height: 1.15;
}

.community-intro-grid p,
.document-overview-card p,
.document-download-card p,
.petition-story p,
.petition-form-card p,
.community-cta p {
    color: #6e594f;
    font-size: 13px;
    line-height: 1.7;
}

.community-highlight-card {
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(58,6,71,.07);
}

.community-highlight-card h3 {
    margin: 11px 0 7px;
    color: #3a0647 !important;
    font-size: 23px;
}

.community-icon {
    width: 55px;
    height: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #3a0647;
    background: #f1d99b;
    font-size: 24px;
}


/* =========================================================
   VISION
========================================================= */

.vision-card-grid,
.sustainability-grid,
.document-topic-grid {
    margin-top: 38px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.vision-card,
.sustainability-grid article,
.document-topic-grid article {
    padding: 24px;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 14px;
    box-shadow: 0 9px 25px rgba(58,6,71,.05);
}

.vision-card h3,
.sustainability-grid h3,
.document-topic-grid h3 {
    margin: 12px 0 7px;
    color: #3a0647 !important;
    font-size: 20px;
}

.vision-card p,
.sustainability-grid p,
.document-topic-grid p {
    margin: 0;
    color: #705c51;
    font-size: 12px;
    line-height: 1.65;
}

.vision-roadmap {
    margin-top: 46px;
    padding: 30px;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 16px;
}

.vision-roadmap-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
}

.vision-roadmap-grid > div {
    padding: 18px;
    background: #fff8e9;
    border: 1px solid #ead7ae;
    border-radius: 10px;
}

.vision-roadmap-grid strong,
.document-topic-grid article > span {
    color: #b37b28;
    font-size: 11px;
    letter-spacing: .12em;
}

.vision-roadmap-grid h3 {
    margin: 7px 0;
    color: #3a0647 !important;
    font-size: 17px;
}

.vision-roadmap-grid p {
    margin: 0;
    color: #705b51;
    font-size: 11px;
    line-height: 1.55;
}

.community-cta {
    margin-top: 42px;
    padding: 34px;
    text-align: center;
    color: #fff6dd;
    background:
        linear-gradient(
            120deg,
            #26002f,
            #3a0647,
            #4b0a59
        );
    border: 1px solid #d7aa3f;
    border-radius: 15px;
}

.community-cta .community-kicker {
    color: #efca66;
}

.community-cta h2 {
    color: #f4d77f !important;
}

.community-cta p {
    max-width: 720px;
    margin: 0 auto 18px;
    color: #fff1d7;
}

.community-cta > div {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.community-primary-button,
.community-secondary-button {
    min-height: 43px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.community-primary-button {
    color: #fff7e6 !important;
    background: #3a0647 !important;
    border: 1px solid #d7aa3f !important;
}

.community-cta .community-primary-button {
    color: #3a0647 !important;
    background: #f1cf67 !important;
}

.community-secondary-button {
    color: #3a0647 !important;
    background: #fffaf0 !important;
    border: 1px solid #d7aa3f !important;
}

.community-cta .community-secondary-button {
    color: #fff7e6 !important;
    background: transparent !important;
}


/* =========================================================
   ARTICLES
========================================================= */

.document-overview-card,
.document-download-card {
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 15px;
    box-shadow: 0 10px 28px rgba(58,6,71,.06);
}

.document-overview-card > div:first-child,
.document-download-card > div:first-child {
    max-width: 800px;
}

.document-icon {
    flex-shrink: 0;
}

.document-download-card {
    margin-top: 32px;
}


/* =========================================================
   PETITION
========================================================= */

.petition-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.petition-points {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.petition-points > div {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.petition-points > div > span {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #3a0647;
    background: #f1d99b;
    font-size: 11px;
    font-weight: 800;
}

.petition-points p {
    margin: 2px 0 0;
}

.petition-count-card {
    margin-top: 26px;
    padding: 21px;
    max-width: 280px;
    text-align: center;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 13px;
}

.petition-count-card > span {
    color: #a37221;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

.petition-count-card strong {
    display: block;
    margin-top: 5px;
    color: #3a0647;
    font-size: 38px;
}

.petition-count-card p {
    margin: 0;
    font-size: 11px;
}

.petition-form-card {
    padding: 28px;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(58,6,71,.07);
}

.petition-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.petition-form > label:not(.petition-consent) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #3a0647;
    font-size: 10px;
    font-weight: 700;
}

.petition-form label span {
    color: #8b7568;
    font-weight: 400;
}

.petition-form input[type="text"],
.petition-form input[type="email"],
.petition-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #d8bd83;
    border-radius: 8px;
    background: #fffaf2;
    color: #513d35;
    font: inherit;
}

.petition-consent {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    color: #6c584e;
    font-size: 10px;
    line-height: 1.5;
}

.petition-consent input {
    margin-top: 3px;
}

.petition-alert {
    margin: 14px 0;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 11px;
}

.petition-alert-success {
    color: #38572b;
    background: #edf5e7;
    border: 1px solid #bfd4af;
}

.petition-alert-error {
    color: #7b1e1e;
    background: #fff0ec;
    border: 1px solid #e3bbb0;
}


/* =========================================================
   GALLERY
========================================================= */

.gallery-filter {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.gallery-filter button {
    min-height: 35px;
    padding: 0 14px;
    border: 1px solid #d5b266 !important;
    border-radius: 18px;
    color: #3a0647 !important;
    background: #fffaf0 !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}

.gallery-filter button.active,
.gallery-filter button:hover {
    color: #fff7e6 !important;
    background: #3a0647 !important;
}

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

.gallery-card {
    overflow: hidden;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 14px;
    box-shadow: 0 9px 25px rgba(58,6,71,.05);
}

.gallery-placeholder {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            135deg,
            #f8e7b3,
            #efd18a
        );
    font-size: 48px;
}

.gallery-card > div:last-child {
    padding: 18px;
}

.gallery-card span {
    color: #a37221;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

.gallery-card h3 {
    margin: 5px 0 6px;
    color: #3a0647 !important;
    font-size: 20px;
}

.gallery-card p {
    margin: 0;
    color: #725e54;
    font-size: 11px;
}

.gallery-note {
    margin-top: 25px;
    padding: 14px 16px;
    color: #715b50;
    background: #fff7df;
    border: 1px solid #dec58e;
    border-radius: 9px;
    font-size: 11px;
}


/* =========================================================
   RESPONSIVE COMMUNITY PAGES
========================================================= */

@media (max-width: 1150px) {

    .temple-nav {
        gap: 14px;
    }

    .temple-nav > a,
    .temple-nav-dropdown-button {
        font-size: 13px;
    }

}

@media (max-width: 900px) {

    .community-intro-grid,
    .petition-layout {
        grid-template-columns: 1fr;
    }

    .vision-card-grid,
    .sustainability-grid,
    .document-topic-grid,
    .gallery-grid {
        grid-template-columns: repeat(2,1fr);
    }

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

}

@media (max-width: 800px) {

    .temple-nav-dropdown {
        width: 100%;
    }

    .temple-nav-dropdown-button {
        width: 100%;
        justify-content: space-between;
        color: #fff0ce;
        font-size: 15px;
    }

    .temple-nav-dropdown-button.active::after {
        display: none;
    }

    .temple-nav-dropdown-menu {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 9px;
        padding: 6px;
        transform: none;
        background: rgba(255,250,240,.98);
        box-shadow: none;
    }

    .temple-nav-dropdown:hover .temple-nav-dropdown-menu {
        display: none;
    }

    .temple-nav-dropdown-menu.show {
        display: block;
    }

    .temple-nav-dropdown-menu::before {
        display: none;
    }

}

@media (max-width: 600px) {

    .community-page-hero {
        min-height: 205px;
        padding: 28px 18px;
    }

    .community-page-hero h1 {
        font-size: 36px;
    }

    .community-page-hero p {
        font-size: 12px;
    }

    .community-section {
        padding: 30px 18px 55px;
    }

    .vision-card-grid,
    .sustainability-grid,
    .document-topic-grid,
    .gallery-grid,
    .vision-roadmap-grid {
        grid-template-columns: 1fr;
    }

    .document-overview-card,
    .document-download-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .community-cta {
        padding: 26px 18px;
    }

    .community-intro-grid h2,
    .vision-roadmap h2,
    .document-overview-card h2,
    .document-download-card h2,
    .petition-story h2,
    .petition-form-card h2,
    .community-cta h2 {
        font-size: 26px;
    }

    .gallery-placeholder {
        height: 155px;
    }

}

/* =========================================================
   EVENT CART + CHECKOUT
========================================================= */
.events-list-section{padding:34px 6% 70px}.events-list-top{width:100%;max-width:1280px;margin:0 auto 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.events-list-kicker{color:#a37221;font-size:9px;font-weight:800;letter-spacing:.18em}.events-list-top h2{margin:5px 0 0;color:#3a0647;font-size:30px}.events-cart-button,.temple-cart-link{position:relative;min-height:40px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff7e6!important;background:linear-gradient(135deg,#2f003d,#4b0a59);border:1px solid #d7aa3f;border-radius:8px;text-decoration:none!important;font-size:11px;font-weight:700}.events-cart-button>span,.temple-cart-count{min-width:21px;height:21px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;color:#3a0647;background:#f1cf67;font-size:9px;font-weight:800}.events-grid{width:100%;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.event-card{overflow:hidden;display:flex;flex-direction:column;min-height:100%;background:#fffdf8;border:1px solid rgba(202,158,70,.35);border-radius:16px;box-shadow:0 10px 28px rgba(58,6,71,.08);transition:transform .22s ease,box-shadow .22s ease}.event-card:hover{transform:translateY(-4px);box-shadow:0 17px 36px rgba(58,6,71,.13)}.event-card-image{height:170px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8e7b3,#efd18a)}.event-card-image img{width:100%;height:100%;object-fit:cover}.event-card-placeholder{font-size:46px}.event-card-body{padding:20px;display:flex;flex-direction:column;flex:1}.event-card-kicker{margin-bottom:6px;color:#a37221;font-size:8px;font-weight:800;letter-spacing:.17em;text-transform:uppercase}.event-card-title{margin:0 0 8px;color:#3a0647!important;font-size:22px;line-height:1.16}.event-card-description{margin:0 0 15px;color:#6b554b;font-size:12px;line-height:1.55}.event-card-meta{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}.event-card-meta-row{display:flex;gap:8px;align-items:center;color:#59433b;font-size:11px}.event-card-meta-icon{width:18px;flex-shrink:0;text-align:center}.event-card-actions{margin-top:auto}.event-card-actions form{margin:0}.event-card-button{min-height:38px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;color:#fff7e6!important;background:linear-gradient(135deg,#2f003d,#4b0a59)!important;border:1px solid #c99b3c!important;border-radius:7px;text-decoration:none!important;font-size:11px;font-weight:700;cursor:pointer;box-shadow:none!important}.event-card-button-added{color:#3a0647!important;background:#f1cf67!important}.event-no-booking{color:#826d60;font-size:10px;font-weight:700}.events-empty,.event-cart-empty{max-width:700px;margin:30px auto;padding:45px 25px;text-align:center;background:#fffdf8;border:1px solid #dfc792;border-radius:16px}.events-empty>span,.event-cart-empty-icon{display:block;margin-bottom:12px;font-size:38px}.events-empty h2,.event-cart-empty h2{color:#3a0647!important}
.event-cart-page,.event-checkout-page{background:#fff8eb}.cart-page-hero{min-height:190px;padding:28px 20px;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#fff9ed,#f7ead1);border-bottom:1px solid #d6aa43}.cart-page-hero>div{max-width:760px}.cart-page-hero span{color:#a37221;font-size:9px;font-weight:800;letter-spacing:.2em}.cart-page-hero h1{margin:6px 0 8px;color:#3a0647!important;font-size:44px}.cart-page-hero p{margin:0;color:#665248;font-size:13px}.event-cart-section,.event-checkout-section{padding:38px 6% 75px}.event-cart-container,.event-checkout-container{width:100%;max-width:1200px;margin:0 auto}.event-cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}.event-cart-items{display:flex;flex-direction:column;gap:16px}.event-cart-item{display:grid;grid-template-columns:190px 1fr;overflow:hidden;background:#fffdf8;border:1px solid #dec48e;border-radius:14px;box-shadow:0 9px 25px rgba(58,6,71,.06)}.event-cart-image{min-height:190px}.event-cart-image img{width:100%;height:100%;object-fit:cover}.event-cart-main{padding:20px}.event-cart-heading{display:flex;justify-content:space-between;gap:15px}.event-cart-kicker,.event-cart-summary-kicker{color:#a37221;font-size:8px;font-weight:800;letter-spacing:.17em}.event-cart-heading h2,.event-cart-summary h2,.event-checkout-heading h2{margin:5px 0 0;color:#3a0647!important}.event-cart-remove,.cart-clear-button{border:0!important;background:transparent!important;color:#755166!important;box-shadow:none!important;cursor:pointer;font-size:10px;font-weight:700}.event-cart-meta{margin:14px 0;display:flex;flex-wrap:wrap;gap:8px 14px;color:#665248;font-size:10px}.event-cart-attendees{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.event-cart-attendees label{display:flex;flex-direction:column;gap:5px;color:#3a0647;font-size:9px;font-weight:700}.event-cart-attendees select{min-width:90px;height:36px;padding:0 8px;border:1px solid #d8bd83;border-radius:7px;background:#fffaf2}.event-cart-update{min-height:36px;padding:0 13px;border:1px solid #d7aa3f!important;border-radius:7px;color:#fff7e6!important;background:#3a0647!important;box-shadow:none!important;cursor:pointer;font-size:9px;font-weight:700}.event-cart-summary{position:sticky;top:125px;padding:24px;background:#fffdf8;border:1px solid #dec48e;border-radius:14px;box-shadow:0 10px 28px rgba(58,6,71,.08)}.event-cart-summary-row{padding:12px 0;display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #ead8b3;color:#675147;font-size:11px}.event-cart-summary-row strong{color:#3a0647}.cart-primary-button,.cart-secondary-button{min-height:42px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;text-decoration:none!important;font-size:10px;font-weight:700;cursor:pointer}.cart-primary-button{color:#fff7e6!important;background:linear-gradient(135deg,#2f003d,#4b0a59)!important;border:1px solid #d7aa3f!important}.cart-secondary-button{color:#3a0647!important;background:#fffaf0!important;border:1px solid #d7aa3f!important}.cart-checkout-button{width:100%;margin-top:20px}.cart-secondary-link{margin-top:12px;display:block;text-align:center;color:#3a0647!important;font-size:10px;font-weight:700;text-decoration:none}.event-cart-summary form{margin-top:10px;text-align:center}.event-cart-flash{max-width:1280px;margin:0 auto 18px;padding:11px 14px;border-radius:8px;font-size:11px}.event-cart-flash-success{color:#365b2d;background:#edf5e8;border:1px solid #bdd2ae}.event-cart-flash-danger{color:#754133;background:#fff0e9;border:1px solid #e4b8aa}
.event-checkout-container{max-width:850px}.event-checkout-card{padding:30px;background:#fffdf8;border:1px solid #dec48e;border-radius:15px;box-shadow:0 11px 30px rgba(58,6,71,.07)}.event-checkout-heading{margin-bottom:23px}.event-checkout-heading>span{color:#a37221;font-size:8px;font-weight:800;letter-spacing:.18em}.event-checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.event-checkout-span-2{grid-column:1/-1}.event-checkout-field{display:flex;flex-direction:column;gap:6px}.event-checkout-field label{color:#3a0647;font-size:10px;font-weight:700}.event-checkout-field input,.event-checkout-field textarea{width:100%;padding:12px;border:1px solid #d8bd83;border-radius:8px;background:#fffaf2;color:#513d35;font:inherit}.event-checkout-actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.booking-success-events{margin-top:24px;display:flex;flex-direction:column;gap:10px;text-align:left}.booking-success-event{padding:15px;background:#fffaf2;border:1px solid #e1c994;border-radius:10px}.booking-success-event>div:first-child>span{color:#a37221;font-size:8px;font-weight:800;letter-spacing:.15em}.booking-success-event h3{margin:4px 0 0;color:#3a0647!important}.booking-success-event-meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px 13px;color:#675147;font-size:10px}.mobile-cart-count{position:absolute;top:2px;right:18%;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:#3a0647;background:#f1cf67;font-size:8px;font-weight:800}
@media(max-width:1000px){.events-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.event-cart-layout{grid-template-columns:1fr}.event-cart-summary{position:static}}
@media(max-width:650px){.events-list-section,.event-cart-section,.event-checkout-section{padding:24px 16px 55px}.events-list-top{align-items:stretch;flex-direction:column}.events-cart-button{align-self:flex-start}.events-grid{grid-template-columns:1fr;gap:16px}.event-card-image{height:150px}.cart-page-hero{min-height:165px}.cart-page-hero h1{font-size:34px}.event-cart-item{grid-template-columns:1fr}.event-cart-image{height:155px;min-height:0}.event-cart-heading{flex-direction:column}.event-cart-remove{align-self:flex-start;padding:0}.event-checkout-grid{grid-template-columns:1fr}.event-checkout-span-2{grid-column:auto}.event-checkout-card{padding:22px 17px}}

/* =========================================================
   CART VISIBILITY + IMPROVED BOOKING FLOW
   2026-10 FINAL OVERRIDES
========================================================= */

/* Keep navigation and header actions separate */
.temple-header-inner {
    display: flex;
    align-items: center;
}

.temple-nav {
    margin-left: auto;
}

.temple-header-actions {
    margin-left: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Header cart - always visible */
.temple-header-actions .temple-cart-link {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f2cf69 !important;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(232,194,92,.48);
    border-radius: 8px;
    text-decoration: none !important;
    overflow: visible !important;
}

.temple-header-actions .temple-cart-link:hover,
.temple-header-actions .temple-cart-link.active {
    color: #fff3cf !important;
    background: rgba(239,202,102,.12);
    border-color: #d7aa3f;
}

.temple-header-actions .temple-cart-icon {
    width: 21px;
    height: 21px;
    display: block;
}

.temple-header-actions .temple-cart-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.temple-header-actions .temple-cart-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #3a0647;
    border-radius: 11px;
    color: #3a0647;
    background: #f1cf67;
    font-family: Arial,sans-serif;
    font-size: 9px;
    font-weight: 800;
}

/* Events page */
.events-list-help {
    max-width: 620px;
    margin: 7px 0 0;
    color: #79645a;
    font-size: 11px;
    line-height: 1.55;
}

.events-cart-button {
    white-space: nowrap;
}

.events-cart-icon {
    font-size: 14px;
}

.events-cart-text {
    color: inherit;
}

.events-cart-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #3a0647;
    background: #f1cf67;
    font-size: 9px;
    font-weight: 800;
}

.event-added-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 9px;
    border: 1px solid #d7aa3f;
    border-radius: 14px;
    color: #3a0647;
    background: #f1cf67;
    font-size: 9px;
    font-weight: 800;
    z-index: 4;
}

.event-card-image {
    position: relative;
}

.event-card-actions {
    margin-top: auto;
}

.event-card-button-add {
    min-width: 128px;
}

.event-card-button-add > span {
    margin-right: 4px;
    font-size: 15px;
}

.event-added-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.event-added-text {
    color: #6b563e;
    font-size: 10px;
    font-weight: 700;
}

.event-card-button-view {
    color: #3a0647 !important;
    background: #f1cf67 !important;
}

.event-flash-link {
    margin-left: 10px;
    color: #3a0647 !important;
    font-weight: 800;
    text-decoration: none;
}

/* Booking progress */
.booking-steps {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto 26px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
}

.booking-step {
    min-height: 54px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a776d;
    background: #fffaf1;
    border: 1px solid #e5d2aa;
    border-radius: 9px;
    text-decoration: none !important;
}

.booking-step > span {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #8a776d;
    background: #f0e4ca;
    font-family: Arial,sans-serif;
    font-size: 10px;
    font-weight: 800;
}

.booking-step strong {
    font-size: 10px;
}

.booking-step.active {
    color: #fff7e6;
    background: #3a0647;
    border-color: #d7aa3f;
}

.booking-step.active > span {
    color: #3a0647;
    background: #f1cf67;
}

.booking-step.complete {
    color: #3a0647;
    border-color: #d7aa3f;
}

.booking-step.complete > span {
    color: #3a0647;
    background: #f1cf67;
}

.booking-steps-events {
    max-width: 920px;
    margin-bottom: 24px;
}

/* Sticky next action on events page */
.events-sticky-cart {
    position: sticky;
    left: 0;
    right: 0;
    bottom: 16px;
    max-width: 760px;
    margin: 28px auto 0;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #fff4d5;
    background: rgba(48,0,59,.96);
    border: 1px solid #d7aa3f;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(43,0,53,.22);
    z-index: 40;
    backdrop-filter: blur(8px);
}

.events-sticky-cart > div {
    display: flex;
    flex-direction: column;
}

.events-sticky-cart strong {
    color: #f3d477;
    font-size: 12px;
}

.events-sticky-cart span {
    margin-top: 2px;
    font-size: 9px;
}

/* Cart details */
.cart-summary-help {
    margin: 8px 0 15px;
    color: #766159;
    font-size: 10px;
    line-height: 1.55;
}

.cart-add-more {
    padding: 14px;
    display: block;
    text-align: center;
    color: #3a0647 !important;
    background: #fffaf0;
    border: 1px dashed #d2a84d;
    border-radius: 10px;
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 800;
}

.checkout-confirm-note {
    margin-top: 20px;
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #705c53;
    background: #fff7df;
    border: 1px solid #dfc58e;
    border-radius: 8px;
}

.checkout-confirm-note p {
    margin: 0;
    font-size: 10px;
    line-height: 1.55;
}

/* Tablet: tighten nav so header actions remain visible */
@media (max-width: 1250px) and (min-width: 801px) {
    .temple-nav {
        gap: 12px !important;
    }

    .temple-nav > a,
    .temple-nav-dropdown-button {
        font-size: 12px !important;
    }

    .temple-header-actions {
        margin-left: 10px;
    }

    .temple-user-button,
    .desktop-login-link {
        font-size: 11px !important;
    }
}

/* Mobile: cart stays visible beside hamburger */
@media (max-width: 800px) {
    .temple-header-inner {
        position: relative;
    }

    .temple-header-actions {
        margin-left: auto;
        margin-right: 50px;
        gap: 6px;
    }

    .temple-header-actions .temple-cart-link {
        width: 38px;
        height: 38px;
    }

    .temple-header-actions .temple-cart-icon {
        width: 18px;
        height: 18px;
    }

    /* Account remains handled by existing mobile account UI/menu */
    .temple-header-actions .temple-user-dropdown,
    .temple-header-actions .desktop-login-link {
        display: none !important;
    }

    .booking-steps {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 4px;
    }

    .booking-step {
        min-height: 52px;
        padding: 6px 4px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 3px;
    }

    .booking-step > span {
        width: 23px;
        height: 23px;
        font-size: 8px;
    }

    .booking-step strong {
        font-size: 7px;
        line-height: 1.15;
    }

    .events-sticky-cart {
        bottom: 82px;
        margin-left: 0;
        margin-right: 0;
        border-radius: 10px;
    }
}

@media (max-width: 600px) {
    .events-list-top {
        gap: 14px;
    }

    .events-cart-button {
        width: 100%;
    }

    .event-card-actions form,
    .event-card-button {
        width: 100%;
    }

    .event-card-button {
        min-height: 42px;
    }

    .event-added-actions {
        width: 100%;
    }

    .events-sticky-cart {
        align-items: stretch;
        flex-direction: column;
    }

    .events-sticky-cart .community-primary-button {
        width: 100%;
    }
}

/* =========================================================
   END CART VISIBILITY + IMPROVED BOOKING FLOW
========================================================= */

/* =========================================================
   CART PAGE POLISH FIX
========================================================= */
.event-cart-page .event-cart-section{padding-top:30px;}
.event-cart-page .event-cart-container{max-width:1180px;}
.event-cart-page .event-cart-layout{gap:26px;}
.event-cart-page .event-cart-item{min-height:210px;}
.event-cart-page .event-cart-image{min-height:210px;max-height:230px;}
.event-cart-page .event-cart-main{display:flex;flex-direction:column;justify-content:center;}
.event-cart-page .event-cart-heading h2{font-size:24px;line-height:1.15;}
.event-cart-page .event-cart-meta{font-size:11px;}
.event-cart-page .event-cart-attendees{margin-top:8px;padding-top:14px;border-top:1px solid #ead8b3;}
.event-cart-page .event-cart-attendees label{font-size:10px;}
.event-cart-page .event-cart-summary{top:calc(var(--header-height) + 18px);}
.event-cart-page .event-cart-summary h2{font-size:26px;}
.event-cart-page .cart-summary-help{line-height:1.55;}
@media(max-width:650px){
 .event-cart-page .event-cart-layout{gap:16px;}
 .event-cart-page .event-cart-item{min-height:0;}
 .event-cart-page .event-cart-image{height:170px;min-height:0;max-height:none;}
 .event-cart-page .event-cart-main{padding:17px;}
 .event-cart-page .event-cart-heading h2{font-size:21px;}
 .event-cart-page .event-cart-attendees{display:grid;grid-template-columns:1fr 1fr;}
 .event-cart-page .event-cart-attendees label{width:100%;}
 .event-cart-page .event-cart-attendees select{width:100%;min-width:0;}
}

/* =========================================================
   EVENTS PAGE - CLEAN ISOLATED DESIGN
========================================================= */

.events-page {
    width: 100%;

    background:
        #fff8ea;
}


/* =========================================================
   HERO
========================================================= */

.events-clean-hero {
    min-height:
        225px;

    padding:
        30px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    background:
        linear-gradient(
            180deg,
            #fffaf0,
            #f8ecd5
        );

    border-bottom:
        1px solid #d6aa43;
}


.events-clean-hero-inner {
    width:
        100%;

    max-width:
        850px;

    margin:
        0 auto;
}


.events-clean-ornament {
    margin-bottom:
        8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;
}


.events-clean-ornament span {
    width:
        85px;

    height:
        1px;

    background:
        #ba812c;
}


.events-clean-ornament strong {
    color:
        #a66f24;

    font-size:
        18px;
}


.events-clean-eyebrow {
    color:
        #a06e29;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .2em;
}


.events-clean-hero h1 {
    margin:
        7px 0 8px;

    color:
        #3a0647 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        48px;

    line-height:
        1;
}


.events-clean-hero p {
    margin:
        0;

    color:
        #6c564d;

    font-size:
        13px;
}


/* =========================================================
   CONTENT
========================================================= */

.events-clean-section {
    padding:
        38px 6% 80px;
}


.events-clean-container {
    width:
        100%;

    max-width:
        1280px;

    margin:
        0 auto;
}


/* =========================================================
   TOP
========================================================= */

.events-clean-top {
    margin-bottom:
        22px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        25px;
}


.events-clean-kicker {
    color:
        #9e6a25;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .19em;
}


.events-clean-top h2 {
    margin:
        5px 0;

    color:
        #3a0647 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        31px;
}


.events-clean-top p {
    margin:
        0;

    color:
        #765f54;

    font-size:
        11px;
}


.events-clean-cart-button {
    min-height:
        43px;

    padding:
        0 16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    flex-shrink:
        0;

    color:
        #fff7e6 !important;

    background:
        #3a0647;

    border:
        1px solid #d7aa3f;

    border-radius:
        8px;

    text-decoration:
        none !important;

    font-size:
        11px;

    font-weight:
        700;
}


.events-clean-cart-button strong {
    min-width:
        21px;

    height:
        21px;

    padding:
        0 5px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    color:
        #3a0647;

    background:
        #f1cf67;

    font-size:
        9px;
}


/* =========================================================
   STEPS
========================================================= */

.events-clean-steps {
    margin-bottom:
        28px;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        7px;
}


.events-clean-steps > div {
    min-height:
        52px;

    padding:
        8px 12px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #8b786d;

    background:
        #fffdf8;

    border:
        1px solid #e5d2aa;

    border-radius:
        8px;
}


.events-clean-steps > div > span {
    width:
        27px;

    height:
        27px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #806d63;

    background:
        #efe2c6;

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    font-weight:
        800;
}


.events-clean-steps > div strong {
    font-size:
        10px;
}


.events-clean-steps > div.active {
    color:
        #fff7e6;

    background:
        #3a0647;

    border-color:
        #d7aa3f;
}


.events-clean-steps > div.active > span {
    color:
        #3a0647;

    background:
        #f1cf67;
}


/* =========================================================
   MESSAGE
========================================================= */

.events-clean-message {
    margin-bottom:
        20px;

    padding:
        11px 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-radius:
        8px;

    font-size:
        11px;
}


.events-clean-message-success {
    color:
        #405d31;

    background:
        #edf5e7;

    border:
        1px solid #bdd1ad;
}


.events-clean-message-danger {
    color:
        #78392e;

    background:
        #fff0eb;

    border:
        1px solid #e3b7ab;
}


.events-clean-message a {
    color:
        #3a0647 !important;

    font-weight:
        800;

    text-decoration:
        none;
}


/* =========================================================
   GRID
========================================================= */

.events-clean-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        22px;
}


/* =========================================================
   CARD
========================================================= */

.events-clean-card {
    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        100%;

    background:
        #fffdf8;

    border:
        1px solid #dec58e;

    border-radius:
        15px;

    box-shadow:
        0 10px 28px
        rgba(
            58,
            6,
            71,
            .07
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.events-clean-card:hover {
    transform:
        translateY(
            -4px
        );

    box-shadow:
        0 17px 38px
        rgba(
            58,
            6,
            71,
            .12
        );
}


/* IMAGE */

.events-clean-image {
    position:
        relative;

    height:
        180px;

    overflow:
        hidden;

    background:
        #f3d991;
}


.events-clean-image img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.events-clean-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        45px;
}


.events-clean-added-badge {
    position:
        absolute;

    top:
        12px;

    right:
        12px;

    padding:
        6px 10px;

    color:
        #3a0647;

    background:
        #f1cf67;

    border:
        1px solid #cfa542;

    border-radius:
        15px;

    font-size:
        9px;

    font-weight:
        800;
}


/* =========================================================
   CARD BODY
========================================================= */

.events-clean-card-body {
    padding:
        20px;

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;
}


.events-clean-card-kicker {
    margin-bottom:
        6px;

    color:
        #9c6a28;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}


.events-clean-card h3 {
    margin:
        0 0 9px;

    color:
        #3a0647 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        22px;

    line-height:
        1.2;
}


.events-clean-description {
    margin:
        0 0 15px;

    color:
        #6d584e;

    font-size:
        11px;

    line-height:
        1.6;
}


/* META */

.events-clean-meta {
    margin-bottom:
        15px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.events-clean-meta > div {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.events-clean-meta > div > span {
    width:
        18px;

    text-align:
        center;

    flex-shrink:
        0;
}


.events-clean-meta strong {
    color:
        #59443a;

    font-size:
        10px;

    font-weight:
        600;
}


.events-clean-capacity {
    margin-bottom:
        15px;

    color:
        #886a38;

    font-size:
        10px;

    font-weight:
        700;
}


/* =========================================================
   ACTION
========================================================= */

.events-clean-actions {
    margin-top:
        auto;
}


.events-clean-actions form {
    margin:
        0;
}


.events-clean-add-button,
.events-clean-review-button {
    min-height:
        40px;

    padding:
        0 16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #d7aa3f;

    border-radius:
        7px;

    text-decoration:
        none !important;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;
}


.events-clean-add-button {
    color:
        #fff7e6 !important;

    background:
        #3a0647 !important;
}


.events-clean-review-button {
    color:
        #3a0647 !important;

    background:
        #f1cf67;
}


.events-clean-selected {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        8px;
}


.events-clean-selected > span {
    color:
        #6e5748;

    font-size:
        10px;

    font-weight:
        700;
}


.events-clean-no-booking {
    color:
        #806d61;

    font-size:
        10px;

    font-weight:
        700;
}


/* =========================================================
   NEXT STEP
========================================================= */

.events-clean-next {
    margin:
        30px auto 0;

    max-width:
        760px;

    padding:
        13px 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #fff5db;

    background:
        #3a0647;

    border:
        1px solid #d7aa3f;

    border-radius:
        11px;

    box-shadow:
        0 12px 30px
        rgba(
            58,
            6,
            71,
            .18
        );
}


.events-clean-next > div {
    display:
        flex;

    flex-direction:
        column;
}


.events-clean-next strong {
    color:
        #f1cf67;

    font-size:
        12px;
}


.events-clean-next span {
    margin-top:
        2px;

    font-size:
        9px;
}


.events-clean-next-button {
    min-height:
        40px;

    padding:
        0 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    color:
        #3a0647 !important;

    background:
        #f1cf67;

    border:
        1px solid #d7aa3f;

    border-radius:
        7px;

    text-decoration:
        none !important;

    font-size:
        10px;

    font-weight:
        800;
}


/* =========================================================
   EMPTY
========================================================= */

.events-clean-empty {
    padding:
        45px 20px;

    text-align:
        center;

    background:
        #fffdf8;

    border:
        1px solid #dec58e;

    border-radius:
        14px;
}


.events-clean-empty > span {
    font-size:
        35px;
}


.events-clean-empty h2 {
    color:
        #3a0647 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width:
    1000px
) {

    .events-clean-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width:
    650px
) {

    .events-clean-hero {
        min-height:
            185px;

        padding:
            25px 17px;
    }


    .events-clean-hero h1 {
        font-size:
            36px;
    }


    .events-clean-section {
        padding:
            25px 16px 60px;
    }


    .events-clean-top {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .events-clean-cart-button {
        width:
            100%;
    }


    .events-clean-steps {
        gap:
            4px;
    }


    .events-clean-steps > div {
        min-height:
            54px;

        padding:
            6px 3px;

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

        gap:
            3px;
    }


    .events-clean-steps > div > span {
        width:
            22px;

        height:
            22px;

        font-size:
            8px;
    }


    .events-clean-steps > div strong {
        font-size:
            7px;

        line-height:
            1.1;
    }


    .events-clean-grid {
        grid-template-columns:
            1fr;
    }


    .events-clean-image {
        height:
            165px;
    }


    .events-clean-add-button,
    .events-clean-review-button {
        width:
            100%;
    }


    .events-clean-selected {
        width:
            100%;
    }


    .events-clean-next {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .events-clean-next-button {
        width:
            100%;
    }

}
/* =========================================================
   EVENTS PAGE - FINAL DISPLAY FIX
========================================================= */

.events-clean-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 20px !important;
    margin-bottom: 22px !important;
}

.events-clean-cart-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    min-height: 42px !important;
    padding: 0 15px !important;

    color: #fff7e6 !important;
    background: #3a0647 !important;

    border: 1px solid #d7aa3f !important;
    border-radius: 8px !important;

    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.events-clean-cart-button strong {
    min-width: 21px !important;
    height: 21px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    color: #3a0647 !important;
    background: #f1cf67 !important;

    font-size: 9px !important;
}


/* =========================================================
   BOOKING STEPS
========================================================= */

.events-clean-steps {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 8px !important;

    margin-bottom: 26px !important;
}

.events-clean-steps > div {
    min-height: 52px !important;

    padding: 8px 10px !important;

    display: flex !important;
    align-items: center !important;

    gap: 8px !important;

    color: #88756b !important;

    background: #fffdf8 !important;

    border: 1px solid #e4d0a7 !important;
    border-radius: 8px !important;
}

.events-clean-steps > div > span {
    width: 27px !important;
    height: 27px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;

    border-radius: 50% !important;

    color: #806e63 !important;
    background: #eee1c5 !important;

    font-size: 9px !important;
    font-weight: 800 !important;
}

.events-clean-steps > div strong {
    font-size: 10px !important;
    font-weight: 700 !important;
}

.events-clean-steps > div.active {
    color: #fff7e6 !important;
    background: #3a0647 !important;
    border-color: #d7aa3f !important;
}

.events-clean-steps > div.active > span {
    color: #3a0647 !important;
    background: #f1cf67 !important;
}


/* =========================================================
   EVENT GRID
========================================================= */

.events-clean-grid {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 22px !important;
}

.events-clean-card {
    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    background: #fffdf8 !important;

    border: 1px solid #dec58e !important;
    border-radius: 15px !important;

    box-shadow:
        0 10px 28px rgba(58, 6, 71, .07) !important;
}

.events-clean-image {
    position: relative !important;

    height: 180px !important;

    overflow: hidden !important;
}

.events-clean-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    display: block !important;
}

.events-clean-card-body {
    padding: 20px !important;

    display: flex !important;
    flex-direction: column !important;

    flex: 1 !important;
}

.events-clean-card h3 {
    margin: 0 0 9px !important;

    color: #3a0647 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 22px !important;
}

.events-clean-description {
    margin: 0 0 15px !important;

    color: #6d584e !important;

    font-size: 11px !important;
    line-height: 1.6 !important;
}

.events-clean-meta {
    display: flex !important;
    flex-direction: column !important;

    gap: 7px !important;

    margin-bottom: 15px !important;
}

.events-clean-meta > div {
    display: flex !important;
    align-items: center !important;

    gap: 8px !important;
}

.events-clean-capacity {
    margin-bottom: 15px !important;

    color: #886a38 !important;

    font-size: 10px !important;
    font-weight: 700 !important;
}


/* =========================================================
   SELECTED / BUTTONS
========================================================= */

.events-clean-selected {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 8px !important;
}

.events-clean-selected > span {
    color: #6d584e !important;

    font-size: 10px !important;
    font-weight: 700 !important;
}

.events-clean-review-button,
.events-clean-add-button {
    min-height: 40px !important;

    padding: 0 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #d7aa3f !important;
    border-radius: 7px !important;

    text-decoration: none !important;

    font-size: 10px !important;
    font-weight: 700 !important;
}

.events-clean-review-button {
    color: #3a0647 !important;
    background: #f1cf67 !important;
}

.events-clean-add-button {
    color: #fff7e6 !important;
    background: #3a0647 !important;
}


/* =========================================================
   BOTTOM NEXT STEP
========================================================= */

.events-clean-next {
    max-width: 760px !important;

    margin: 28px auto 0 !important;

    padding: 13px 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 18px !important;

    color: #fff6dc !important;

    background: #3a0647 !important;

    border: 1px solid #d7aa3f !important;
    border-radius: 11px !important;

    box-shadow:
        0 12px 30px rgba(58, 6, 71, .18) !important;
}

.events-clean-next > div {
    display: flex !important;
    flex-direction: column !important;
}

.events-clean-next strong {
    color: #f1cf67 !important;

    font-size: 12px !important;
}

.events-clean-next span {
    font-size: 9px !important;
}

.events-clean-next-button {
    min-height: 40px !important;

    padding: 0 15px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #3a0647 !important;

    background: #f1cf67 !important;

    border: 1px solid #d7aa3f !important;
    border-radius: 7px !important;

    text-decoration: none !important;

    font-size: 10px !important;
    font-weight: 800 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .events-clean-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .events-clean-top {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .events-clean-cart-button {
        width: 100% !important;
    }

    .events-clean-steps {
        gap: 4px !important;
    }

    .events-clean-steps > div {
        min-height: 54px !important;

        padding: 5px 3px !important;

        flex-direction: column !important;

        justify-content: center !important;

        text-align: center !important;
    }

    .events-clean-steps > div > span {
        width: 22px !important;
        height: 22px !important;
    }

    .events-clean-steps > div strong {
        font-size: 7px !important;
    }

    .events-clean-grid {
        grid-template-columns: 1fr !important;
    }

    .events-clean-image {
        height: 165px !important;
    }

    .events-clean-review-button,
    .events-clean-add-button {
        width: 100% !important;
    }

    .events-clean-next {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .events-clean-next-button {
        width: 100% !important;
    }

}
/* =========================================================
   EVENT BOOKING DETAIL PAGE
   Isolated styles - append to home-theme.css
========================================================= */

.event-booking-detail-page {
    width: 100%;
    background: #fff8ea;
}

.booking-detail-hero {
    padding: 28px 6% 24px;
    background:
        linear-gradient(
            180deg,
            #fffaf0,
            #f8ecd5
        );
    border-bottom: 1px solid #d6aa43;
}

.booking-detail-hero-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.booking-detail-back {
    display: inline-block;
    margin-bottom: 18px;
    color: #80613b !important;
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 700;
}

.booking-detail-kicker,
.booking-detail-label {
    display: block;
    color: #9b6927;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.booking-detail-hero h1 {
    margin: 7px 0 0;
    color: #3a0647 !important;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 40px;
    line-height: 1.1;
}

.booking-detail-section {
    padding: 38px 6% 75px;
}

.booking-detail-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.booking-detail-layout {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(340px,.85fr);
    gap: 28px;
    align-items: start;
}


/* LEFT EVENT CARD */

.booking-detail-event-card,
.booking-detail-form-card {
    overflow: hidden;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(58,6,71,.07);
}

.booking-detail-image {
    height: 310px;
    overflow: hidden;
    background: #f3d991;
}

.booking-detail-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.booking-detail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 55px;
}

.booking-detail-event-body {
    padding: 25px;
}

.booking-detail-event-body h2,
.booking-detail-form-card h2 {
    margin: 7px 0 10px;
    color: #3a0647 !important;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 28px;
}

.booking-detail-description {
    margin: 0 0 21px;
    color: #6c584e;
    font-size: 12px;
    line-height: 1.65;
}

.booking-detail-meta {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px;
}

.booking-detail-meta > div {
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fff8e9;
    border: 1px solid #ead6ac;
    border-radius: 9px;
}

.booking-detail-meta > div > span {
    flex-shrink: 0;
    font-size: 15px;
}

.booking-detail-meta small {
    display: block;
    margin-bottom: 3px;
    color: #9a742b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.booking-detail-meta strong {
    display: block;
    color: #4f3a32;
    font-size: 10px;
}

.booking-detail-meta p {
    margin: 3px 0 0;
    color: #756157;
    font-size: 9px;
    line-height: 1.4;
}

.booking-detail-availability {
    margin-top: 18px;
    padding: 11px 13px;
    color: #5d5732;
    background: #f1f2dc;
    border: 1px solid #ced09c;
    border-radius: 8px;
    font-size: 10px;
}

.booking-detail-availability strong {
    color: #3a0647;
    font-size: 14px;
}

.booking-detail-availability.full {
    color: #793a31;
    background: #fff0eb;
    border-color: #e1b7aa;
}


/* RIGHT FORM */

.booking-detail-form-card {
    position: sticky;
    top: calc(var(--header-height) + 18px);
    padding: 27px;
}

.booking-detail-form-intro {
    margin: 0 0 20px;
    color: #715d53;
    font-size: 11px;
    line-height: 1.55;
}

.booking-detail-attendee-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.booking-detail-attendee {
    padding: 13px;
    display: flex;
    flex-direction: column;
    background: #fff8e9;
    border: 1px solid #dfc28a;
    border-radius: 9px;
}

.booking-detail-attendee > span {
    color: #3a0647;
    font-size: 11px;
    font-weight: 800;
}

.booking-detail-attendee small {
    margin: 2px 0 9px;
    color: #8c786e;
    font-size: 8px;
}

.booking-detail-attendee select {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    color: #4d3932;
    background: #fffdf8;
    border: 1px solid #d5b574;
    border-radius: 7px;
}

.booking-detail-summary {
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid #e0ca99;
    border-radius: 10px;
}

.booking-detail-summary > div {
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #fffdf8;
    border-bottom: 1px solid #ead8b2;
}

.booking-detail-summary > div:last-child {
    border-bottom: 0;
}

.booking-detail-summary span {
    color: #7b685e;
    font-size: 9px;
}

.booking-detail-summary strong {
    color: #3a0647;
    font-size: 10px;
    text-align: right;
}

.booking-detail-summary-total {
    background: #fff5d9 !important;
}

.booking-detail-summary-total strong {
    font-size: 17px;
}

.booking-detail-add-button,
.booking-detail-secondary-button {
    width: 100%;
    min-height: 44px;
    margin-top: 20px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7aa3f !important;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.booking-detail-add-button {
    color: #fff7e6 !important;
    background: #3a0647 !important;
}

.booking-detail-secondary-button {
    color: #3a0647 !important;
    background: #fffaf0 !important;
}

.booking-detail-full-message {
    margin-top: 18px;
    padding: 13px;
    color: #793a31;
    background: #fff0eb;
    border: 1px solid #e1b7aa;
    border-radius: 8px;
    font-size: 10px;
}


/* RESPONSIVE */

@media (max-width: 850px) {

    .booking-detail-layout {
        grid-template-columns: 1fr;
    }

    .booking-detail-form-card {
        position: static;
    }

}

@media (max-width: 600px) {

    .booking-detail-hero {
        padding: 23px 17px;
    }

    .booking-detail-hero h1 {
        font-size: 31px;
    }

    .booking-detail-section {
        padding: 25px 16px 55px;
    }

    .booking-detail-image {
        height: 210px;
    }

    .booking-detail-event-body,
    .booking-detail-form-card {
        padding: 20px 16px;
    }

    .booking-detail-meta,
    .booking-detail-attendee-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   CART PAGE - CLEAN ISOLATED DESIGN
========================================================= */

.event-cart-page {
    width: 100%;
    min-height: calc(
        100vh
        - var(--header-height)
        - var(--footer-height)
    );

    background: #fff8ea;
}


/* =========================================================
   HERO
========================================================= */

.booking-cart-hero {
    padding: 28px 6% 24px;

    background:
        linear-gradient(
            180deg,
            #fffaf0,
            #f8ecd5
        );

    border-bottom:
        1px solid #d6aa43;
}


.booking-cart-hero-inner {
    width: 100%;

    max-width: 1180px;

    margin: 0 auto;
}


.booking-cart-back {
    display: inline-block;

    margin-bottom: 17px;

    color: #80613b !important;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 700;
}


.booking-cart-kicker {
    display: block;

    color: #9b6927;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .18em;
}


.booking-cart-hero h1 {
    margin: 6px 0 7px;

    color: #3a0647 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 40px;

    line-height: 1.1;
}


.booking-cart-hero p {
    margin: 0;

    color: #6d584e;

    font-size: 12px;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.booking-cart-section {
    padding: 36px 6% 75px;
}


.booking-cart-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   FLASH
========================================================= */

.booking-cart-flash {
    margin-bottom: 20px;

    padding: 11px 14px;

    border-radius: 8px;

    font-size: 11px;
}


.booking-cart-flash-success {
    color: #405d31;

    background: #edf5e7;

    border: 1px solid #bdd1ad;
}


.booking-cart-flash-danger {
    color: #78392e;

    background: #fff0eb;

    border: 1px solid #e3b7ab;
}


/* =========================================================
   EMPTY CART
========================================================= */

.booking-cart-empty {
    max-width: 680px;

    margin: 25px auto;

    padding: 45px 25px;

    text-align: center;

    background: #fffdf8;

    border: 1px solid #dec58e;

    border-radius: 15px;

    box-shadow:
        0 10px 28px rgba(58, 6, 71, .07);
}


.booking-cart-empty-icon {
    margin-bottom: 12px;

    font-size: 38px;
}


.booking-cart-empty h2 {
    margin: 0 0 9px;

    color: #3a0647 !important;
}


.booking-cart-empty p {
    margin-bottom: 20px;

    color: #6e5b51;

    font-size: 12px;
}


/* =========================================================
   TWO COLUMN LAYOUT
========================================================= */

.booking-cart-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    gap: 25px;

    align-items: start;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.booking-cart-events {
    display: flex;

    flex-direction: column;

    gap: 16px;
}


.booking-cart-section-heading {
    margin-bottom: 4px;
}


.booking-cart-section-heading > span {
    color: #9b6927;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .18em;
}


.booking-cart-section-heading h2 {
    margin: 5px 0 6px;

    color: #3a0647 !important;

    font-size: 29px;
}


.booking-cart-section-heading p {
    margin: 0;

    color: #6d594f;

    font-size: 11px;
}


/* =========================================================
   EVENT CARD
========================================================= */

.booking-cart-event-card {
    overflow: hidden;

    display: grid;

    grid-template-columns:
        210px 1fr;

    background: #fffdf8;

    border:
        1px solid #dec58e;

    border-radius:
        14px;

    box-shadow:
        0 10px 28px rgba(58, 6, 71, .06);
}


.booking-cart-event-image {
    min-height: 230px;

    background: #f3d991;

    overflow: hidden;
}


.booking-cart-event-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.booking-cart-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 45px;
}


/* =========================================================
   EVENT MAIN
========================================================= */

.booking-cart-event-main {
    padding: 20px;
}


.booking-cart-event-top {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    align-items: flex-start;
}


.booking-cart-event-kicker {
    color: #9b6927;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .16em;
}


.booking-cart-event-top h3 {
    margin: 5px 0 0;

    color: #3a0647 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    line-height: 1.2;
}


.booking-cart-remove-button {
    padding: 0;

    border: 0 !important;

    color: #8a5c55 !important;

    background: transparent !important;

    box-shadow: none !important;

    cursor: pointer;

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   EVENT META
========================================================= */

.booking-cart-event-meta {
    margin: 14px 0 17px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px 14px;
}


.booking-cart-event-meta > div {
    display: flex;

    align-items: center;

    gap: 6px;
}


.booking-cart-event-meta strong {
    color: #5a473e;

    font-size: 10px;

    font-weight: 600;
}


/* =========================================================
   ATTENDEE SECTION
========================================================= */

.booking-cart-attendee-form {
    padding-top: 15px;

    border-top:
        1px solid #ead8b2;
}


.booking-cart-attendee-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr 110px;

    gap: 10px;

    align-items: stretch;
}


.booking-cart-attendee-box {
    padding: 11px;

    display: flex;

    flex-direction: column;

    background: #fff8e9;

    border:
        1px solid #dfc28a;

    border-radius:
        8px;
}


.booking-cart-attendee-box > span {
    color: #3a0647;

    font-size: 10px;

    font-weight: 800;
}


.booking-cart-attendee-box small {
    margin:
        2px 0 8px;

    color: #8c786e;

    font-size: 8px;
}


.booking-cart-attendee-box select {
    width: 100%;

    height: 38px;

    padding:
        0 8px;

    color: #4d3932;

    background: #fffdf8;

    border:
        1px solid #d5b574;

    border-radius:
        6px;
}


/* TOTAL */

.booking-cart-attendee-total {
    padding: 11px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    background: #fff3ce;

    border:
        1px solid #d8b453;

    border-radius:
        8px;
}


.booking-cart-attendee-total > span {
    color: #806632;

    font-size: 8px;

    font-weight: 700;

    text-transform: uppercase;
}


.booking-cart-attendee-total strong {
    margin:
        3px 0;

    color: #3a0647;

    font-size: 23px;
}


.booking-cart-attendee-total small {
    color: #76614d;

    font-size: 8px;
}


/* UPDATE BUTTON */

.booking-cart-update-button {
    min-height: 36px;

    margin-top: 10px;

    padding:
        0 13px;

    border:
        1px solid #d7aa3f !important;

    border-radius:
        7px;

    color: #fff7e6 !important;

    background:
        #3a0647 !important;

    box-shadow:
        none !important;

    cursor: pointer;

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   ADD ANOTHER EVENT
========================================================= */

.booking-cart-add-event {
    padding:
        13px;

    display: block;

    text-align: center;

    color:
        #3a0647 !important;

    background:
        #fffaf0;

    border:
        1px dashed #d2a84d;

    border-radius:
        9px;

    text-decoration:
        none !important;

    font-size:
        10px;

    font-weight:
        800;
}


/* =========================================================
   RIGHT SUMMARY
========================================================= */

.booking-cart-summary {
    position: sticky;

    top:
        calc(
            var(--header-height)
            + 18px
        );

    padding: 24px;

    background: #fffdf8;

    border:
        1px solid #dec58e;

    border-radius:
        14px;

    box-shadow:
        0 10px 28px rgba(58, 6, 71, .08);
}


.booking-cart-summary-kicker {
    color: #9b6927;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .17em;
}


.booking-cart-summary h2 {
    margin:
        5px 0 8px;

    color: #3a0647 !important;

    font-size: 25px;
}


.booking-cart-summary-intro {
    margin:
        0 0 16px;

    color:
        #6d594f;

    font-size:
        10px;

    line-height:
        1.5;
}


/* SUMMARY LIST */

.booking-cart-summary-list {
    overflow: hidden;

    border:
        1px solid #e4cf9f;

    border-radius:
        9px;
}


.booking-cart-summary-list > div {
    padding:
        11px 12px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    background:
        #fffdf8;

    border-bottom:
        1px solid #ead9b3;
}


.booking-cart-summary-list > div:last-child {
    border-bottom:
        0;
}


.booking-cart-summary-list span {
    color:
        #79655b;

    font-size:
        9px;
}


.booking-cart-summary-list strong {
    color:
        #3a0647;

    font-size:
        11px;
}


.booking-cart-summary-total {
    background:
        #fff4d5 !important;
}


.booking-cart-summary-total strong {
    font-size:
        18px;
}


/* =========================================================
   MAIN BUTTON
========================================================= */

.booking-cart-primary-button {
    min-height:
        43px;

    padding:
        0 17px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #fff7e6 !important;

    background:
        #3a0647;

    border:
        1px solid #d7aa3f;

    border-radius:
        7px;

    text-decoration:
        none !important;

    font-size:
        10px;

    font-weight:
        800;
}


.booking-cart-checkout {
    width: 100%;

    margin-top:
        20px;
}


/* SECONDARY LINK */

.booking-cart-secondary-link {
    margin-top:
        12px;

    display:
        block;

    text-align:
        center;

    color:
        #3a0647 !important;

    text-decoration:
        none !important;

    font-size:
        9px;

    font-weight:
        700;
}


/* CLEAR */

.booking-cart-clear-form {
    margin-top:
        9px;

    text-align:
        center;
}


.booking-cart-clear-button {
    border: 0 !important;

    color:
        #8a5c55 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    cursor:
        pointer;

    font-size:
        9px;

    font-weight:
        700;
}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width:
    950px
) {

    .booking-cart-layout {
        grid-template-columns:
            1fr;
    }


    .booking-cart-summary {
        position:
            static;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width:
    650px
) {

    .booking-cart-hero {
        padding:
            23px 17px;
    }


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


    .booking-cart-section {
        padding:
            25px 16px 55px;
    }


    .booking-cart-event-card {
        grid-template-columns:
            1fr;
    }


    .booking-cart-event-image {
        height:
            190px;

        min-height:
            0;
    }


    .booking-cart-event-main {
        padding:
            17px;
    }


    .booking-cart-event-top {
        flex-direction:
            column;
    }


    .booking-cart-attendee-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .booking-cart-attendee-total {
        grid-column:
            1 / -1;
    }


    .booking-cart-update-button {
        width:
            100%;
    }

}
/* =========================================================
   CART + DEVOTEE DETAILS + PAYMENT OPTIONS
   ISOLATED BOOKING FLOW
========================================================= */

/* =========================================================
   CART PAGE
========================================================= */

.cart-details-page {
    width: 100%;
    background: #fff8ea;
}

.cart-details-hero {
    padding: 27px 6% 24px;
    background: linear-gradient(180deg,#fffaf0,#f8ecd5);
    border-bottom: 1px solid #d6aa43;
}

.cart-details-hero-inner,
.cart-details-container,
.payment-options-hero-inner,
.payment-options-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.cart-details-back,
.payment-options-back {
    display: inline-block;
    margin-bottom: 16px;
    color: #80613b !important;
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 700;
}

.cart-details-kicker,
.cart-details-heading > span,
.cart-details-contact-kicker,
.payment-options-kicker,
.payment-options-hero-inner > span {
    display: block;
    color: #9b6927;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.cart-details-hero h1,
.payment-options-hero h1 {
    margin: 6px 0 7px;
    color: #3a0647 !important;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 40px;
    line-height: 1.1;
}

.cart-details-hero p,
.payment-options-hero p {
    margin: 0;
    color: #6d584e;
    font-size: 12px;
}

.cart-details-section,
.payment-options-section {
    padding: 34px 6% 75px;
}

.cart-details-layout {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr);
    gap: 26px;
    align-items: start;
}

.cart-details-heading {
    margin-bottom: 18px;
}

.cart-details-heading h2,
.cart-details-contact h2,
.payment-options-summary h2,
.payment-options-card h2 {
    margin: 6px 0 8px;
    color: #3a0647 !important;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 27px;
}

.cart-details-heading p,
.cart-details-contact-intro,
.payment-options-intro {
    margin: 0;
    color: #6e5b51;
    font-size: 10px;
    line-height: 1.55;
}

.cart-details-events {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-details-event {
    overflow: hidden;
    display: grid;
    grid-template-columns: 210px minmax(0,1fr);
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(58,6,71,.06);
}

.cart-details-event-image {
    min-height: 245px;
    overflow: hidden;
    background: #f3d991;
}

.cart-details-event-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.cart-details-event-image > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
}

.cart-details-event-body {
    padding: 19px;
}

.cart-details-event-title-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.cart-details-event-title-row > div > span {
    color: #9b6927;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .15em;
}

.cart-details-event-title-row h3 {
    margin: 5px 0 0;
    color: #3a0647 !important;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 21px;
}

.cart-details-remove {
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #875950 !important;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

.cart-details-event-meta {
    margin: 13px 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
}

.cart-details-event-meta > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-details-event-meta strong {
    color: #5b483f;
    font-size: 9px;
}

.cart-details-attendees {
    display: grid;
    grid-template-columns: 1fr 1fr 105px;
    gap: 9px;
}

.cart-details-attendees label,
.cart-details-attendee-total {
    padding: 10px;
    border: 1px solid #dfc28a;
    border-radius: 8px;
    background: #fff8e9;
}

.cart-details-attendees label {
    display: flex;
    flex-direction: column;
}

.cart-details-attendees label > span,
.cart-details-attendee-total > span {
    color: #3a0647;
    font-size: 9px;
    font-weight: 800;
}

.cart-details-attendees small,
.cart-details-attendee-total small {
    margin: 2px 0 7px;
    color: #88746a;
    font-size: 7px;
}

.cart-details-attendees select {
    width: 100%;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #d5b574;
    border-radius: 6px;
    background: #fffdf8;
    color: #4d3932;
}

.cart-details-attendee-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff3ce;
    border-color: #d8b453;
    text-align: center;
}

.cart-details-attendee-total strong {
    color: #3a0647;
    font-size: 22px;
}

.cart-details-edit-event {
    display: inline-block;
    margin-top: 10px;
    color: #3a0647 !important;
    font-size: 8px;
    font-weight: 700;
    text-decoration: none !important;
}

.cart-details-add-event {
    padding: 13px;
    display: block;
    text-align: center;
    color: #3a0647 !important;
    background: #fffaf0;
    border: 1px dashed #d2a84d;
    border-radius: 9px;
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 800;
}

/* RIGHT DETAILS CARD */

.cart-details-contact {
    position: sticky;
    top: calc(var(--header-height) + 18px);
    padding: 24px;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 15px;
    box-shadow: 0 10px 28px rgba(58,6,71,.08);
}

.cart-details-contact-intro {
    margin-bottom: 18px;
}

.cart-details-field {
    margin-bottom: 12px;
}

.cart-details-field label {
    display: block;
    margin-bottom: 5px;
    color: #3a0647;
    font-size: 9px;
    font-weight: 700;
}

.cart-details-field label small {
    color: #8d796e;
    font-size: 7px;
    font-weight: 400;
}

.cart-details-field input,
.cart-details-field select,
.cart-details-field textarea {
    width: 100%;
    padding: 10px 11px;
    color: #503c34;
    background: #fffaf2;
    border: 1px solid #d8bd83;
    border-radius: 7px;
    font: inherit;
}

.cart-details-field input,
.cart-details-field select {
    min-height: 40px;
}

.cart-details-field textarea {
    resize: vertical;
}

.cart-details-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cart-details-summary {
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid #e2cd9e;
    border-radius: 8px;
}

.cart-details-summary > div {
    padding: 9px 11px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ead9b5;
}

.cart-details-summary > div:last-child {
    border-bottom: 0;
}

.cart-details-summary span {
    color: #79655b;
    font-size: 8px;
}

.cart-details-summary strong {
    color: #3a0647;
    font-size: 10px;
}

.cart-details-summary .total {
    background: #fff4d5;
}

.cart-details-summary .total strong {
    font-size: 16px;
}

.cart-details-book-button {
    width: 100%;
    min-height: 45px;
    margin-top: 17px;
    padding: 0 15px;
    border: 1px solid #d7aa3f !important;
    border-radius: 8px;
    background: #3a0647 !important;
    color: #fff7e6 !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.cart-details-payment-note {
    margin: 9px 0 0;
    color: #816e65;
    font-size: 8px;
    line-height: 1.45;
}

.cart-details-alert {
    margin-bottom: 18px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 10px;
}

.cart-details-alert-success {
    color: #405d31;
    background: #edf5e7;
    border: 1px solid #bdd1ad;
}

.cart-details-alert-danger {
    color: #78392e;
    background: #fff0eb;
    border: 1px solid #e3b7ab;
}

.cart-details-empty {
    max-width: 680px;
    margin: 20px auto;
    padding: 42px 24px;
    text-align: center;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 15px;
}

.cart-details-empty > div {
    font-size: 38px;
}

.cart-details-empty h2 {
    color: #3a0647 !important;
}

.cart-details-primary-button {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff7e6 !important;
    background: #3a0647;
    border: 1px solid #d7aa3f;
    border-radius: 7px;
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 800;
}


/* =========================================================
   PAYMENT OPTIONS PAGE
========================================================= */

.payment-options-page {
    width: 100%;
    background: #fff8ea;
}

.payment-options-hero {
    padding: 27px 6% 24px;
    background: linear-gradient(180deg,#fffaf0,#f8ecd5);
    border-bottom: 1px solid #d6aa43;
}

.payment-options-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 400px;
    gap: 25px;
    align-items: start;
}

.payment-options-summary,
.payment-options-card {
    padding: 25px;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 15px;
    box-shadow: 0 10px 28px rgba(58,6,71,.07);
}

.payment-options-card {
    position: sticky;
    top: calc(var(--header-height) + 18px);
}

.payment-options-events {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-options-events article {
    padding: 13px;
    background: #fff8e9;
    border: 1px solid #ead5aa;
    border-radius: 9px;
}

.payment-options-events h3 {
    margin: 0 0 7px;
    color: #3a0647 !important;
    font-size: 15px;
}

.payment-options-events p {
    margin: 3px 0;
    color: #705d53;
    font-size: 9px;
}

.payment-options-events article > div {
    margin-top: 7px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.payment-options-events article > div span {
    padding: 4px 7px;
    color: #3a0647;
    background: #f5e2ad;
    border-radius: 10px;
    font-size: 8px;
    font-weight: 700;
}

.payment-options-total {
    margin-top: 15px;
    padding: 12px 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff4d5;
    border: 1px solid #dfc177;
    border-radius: 8px;
}

.payment-options-total span {
    color: #755f54;
    font-size: 9px;
}

.payment-options-total strong {
    color: #3a0647;
    font-size: 18px;
}

.payment-options-contact {
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid #ead8b3;
}

.payment-options-contact > span {
    display: block;
    margin-bottom: 7px;
    color: #9b6927;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .15em;
}

.payment-options-contact strong {
    color: #3a0647;
    font-size: 13px;
}

.payment-options-contact p {
    margin: 3px 0;
    color: #715e54;
    font-size: 9px;
}

.payment-options-intro {
    margin-bottom: 18px;
}

.payment-method-card {
    margin-bottom: 10px;
    padding: 14px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 11px;
    align-items: center;
    border: 1px solid #dfc58e;
    border-radius: 9px;
    background: #fffaf0;
}

.payment-method-card.disabled {
    opacity: .62;
}

.payment-method-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a0647;
    background: #f1d99b;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 800;
}

.payment-method-card strong {
    display: block;
    color: #3a0647;
    font-size: 11px;
}

.payment-method-card span {
    display: block;
    margin-top: 2px;
    color: #745f55;
    font-size: 8px;
}

.payment-method-card small {
    color: #8a756b;
    font-size: 7px;
    text-align: right;
}

.payment-options-notice {
    margin-top: 16px;
    padding: 13px;
    color: #715944;
    background: #fff4d8;
    border: 1px solid #dec078;
    border-radius: 8px;
}

.payment-options-notice strong {
    color: #3a0647;
    font-size: 10px;
}

.payment-options-notice p {
    margin: 5px 0 0;
    font-size: 8px;
    line-height: 1.5;
}

.payment-options-edit-button {
    width: 100%;
    min-height: 40px;
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3a0647 !important;
    background: #fffaf0;
    border: 1px solid #d7aa3f;
    border-radius: 7px;
    text-decoration: none !important;
    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .cart-details-layout,
    .payment-options-layout {
        grid-template-columns: 1fr;
    }

    .cart-details-contact,
    .payment-options-card {
        position: static;
    }

}

@media (max-width: 650px) {

    .cart-details-hero,
    .payment-options-hero {
        padding: 22px 17px;
    }

    .cart-details-hero h1,
    .payment-options-hero h1 {
        font-size: 32px;
    }

    .cart-details-section,
    .payment-options-section {
        padding: 24px 16px 55px;
    }

    .cart-details-event {
        grid-template-columns: 1fr;
    }

    .cart-details-event-image {
        height: 190px;
        min-height: 0;
    }

    .cart-details-attendees {
        grid-template-columns: 1fr 1fr;
    }

    .cart-details-attendee-total {
        grid-column: 1 / -1;
    }

    .cart-details-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cart-details-contact,
    .payment-options-summary,
    .payment-options-card {
        padding: 20px 16px;
    }

    .payment-method-card {
        grid-template-columns: 38px 1fr;
    }

    .payment-method-card small {
        grid-column: 2;
        text-align: left;
    }

}
/* =========================================================
   HEADER CART ICON - FORCE VISIBLE
========================================================= */

.temple-header-actions {
    margin-left: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.temple-header-booking {
    position: relative !important;
    width: 43px !important;
    height: 43px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #f2cf69 !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(215,170,63,.65) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    overflow: visible !important;
}

.temple-header-booking:hover,
.temple-header-booking.active {
    color: #fff1c8 !important;
    background: rgba(241,207,103,.12) !important;
}

.temple-header-booking-icon {
    width: 21px !important;
    height: 21px !important;
    display: block !important;
    color: inherit !important;
}

.temple-header-booking-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.temple-header-booking-count {
    position: absolute !important;
    top: -7px !important;
    right: -7px !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #3a0647 !important;
    background: #f1cf67 !important;
    border: 2px solid #3a0647 !important;
    border-radius: 12px !important;
    font-family: Arial,sans-serif !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* Remove old / accidental cart objects inside navigation */
.temple-nav > .temple-cart-link {
    display: none !important;
}


/* =========================================================
   SIMPLIFIED CART RIGHT SIDE
========================================================= */

.cart-details-contact {
    padding: 26px !important;
}

.cart-details-contact h2 {
    margin-bottom: 8px !important;
}

.cart-details-contact-intro {
    margin-bottom: 20px !important;
}

.cart-details-field {
    margin-bottom: 14px !important;
}

.cart-details-book-button {
    margin-top: 8px !important;
}


/* =========================================================
   MOBILE HEADER CART
========================================================= */

@media (max-width: 800px) {

    .temple-header-actions {
        margin-left: auto !important;
        margin-right: 50px !important;
        gap: 6px !important;
    }

    .temple-header-booking {
        width: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
    }

    .temple-header-booking-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .temple-header-actions .temple-user-dropdown,
    .temple-header-actions .desktop-login-link {
        display: none !important;
    }

}
/* =========================================================
   EVENT DONATION + MANUAL BANK / QR PAYMENT
   Append to the BOTTOM of home-theme.css
========================================================= */

/* Event card donation */

.event-donation-chip,
.booking-detail-donation,
.cart-event-donation {
    margin: 11px 0 15px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: #684f37;
    background: #fff3ce;
    border: 1px solid #dfbd64;
    border-radius: 8px;
}

.event-donation-chip span,
.booking-detail-donation span,
.cart-event-donation span {
    font-size: 9px;
    font-weight: 700;
}

.event-donation-chip strong,
.booking-detail-donation strong,
.cart-event-donation strong {
    color: #3a0647;
    font-size: 15px;
}

.booking-detail-donation {
    flex-wrap: wrap;
}

.booking-detail-donation small {
    width: 100%;
    color: #806c61;
    font-size: 7px;
}

.cart-total-donation {
    margin-top: 16px;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff3ce;
    border: 1px solid #dfbd64;
    border-radius: 8px;
}

.cart-total-donation span {
    color: #725b45;
    font-size: 9px;
    font-weight: 700;
}

.cart-total-donation strong {
    color: #3a0647;
    font-size: 19px;
}


/* =========================================================
   MANUAL PAYMENT PAGE
========================================================= */

.manual-payment-page {
    width: 100%;
    background: #fff8ea;
}

.manual-payment-hero {
    padding: 27px 6% 24px;
    background: linear-gradient(180deg,#fffaf0,#f8ecd5);
    border-bottom: 1px solid #d6aa43;
}

.manual-payment-hero-inner,
.manual-payment-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.manual-payment-back {
    display: inline-block;
    margin-bottom: 16px;
    color: #80613b !important;
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 700;
}

.manual-payment-hero-inner > span,
.manual-payment-kicker {
    display: block;
    color: #9b6927;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.manual-payment-hero h1 {
    margin: 6px 0 7px;
    color: #3a0647 !important;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 40px;
    line-height: 1.1;
}

.manual-payment-hero p {
    margin: 0;
    color: #6d584e;
    font-size: 12px;
}

.manual-payment-section {
    padding: 34px 6% 75px;
}

.manual-payment-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 470px;
    gap: 26px;
    align-items: start;
}

.manual-payment-summary,
.manual-payment-details {
    padding: 25px;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 15px;
    box-shadow: 0 10px 28px rgba(58,6,71,.07);
}

.manual-payment-details {
    position: sticky;
    top: calc(var(--header-height) + 18px);
}

.manual-payment-summary h2,
.manual-payment-details h2 {
    margin: 6px 0 16px;
    color: #3a0647 !important;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 27px;
}

.manual-payment-events {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.manual-payment-events article {
    padding: 14px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    background: #fff8e9;
    border: 1px solid #ead5aa;
    border-radius: 9px;
}

.manual-payment-events h3 {
    margin: 0 0 7px;
    color: #3a0647 !important;
    font-size: 15px;
}

.manual-payment-events p {
    margin: 3px 0;
    color: #715e54;
    font-size: 9px;
}

.manual-payment-events article > strong {
    flex-shrink: 0;
    color: #3a0647;
    font-size: 17px;
}

.manual-payment-total {
    margin-top: 15px;
    padding: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff3ce;
    border: 1px solid #dfbd64;
    border-radius: 8px;
}

.manual-payment-total span {
    color: #725b45;
    font-size: 10px;
    font-weight: 700;
}

.manual-payment-total strong {
    color: #3a0647;
    font-size: 22px;
}

.manual-payment-reference {
    margin-top: 14px;
    padding: 13px;
    background: #f8f1df;
    border: 1px solid #dac38d;
    border-radius: 8px;
}

.manual-payment-reference span,
.manual-payment-contact > span {
    display: block;
    margin-bottom: 5px;
    color: #9b6927;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
}

.manual-payment-reference strong {
    display: block;
    color: #3a0647;
    font-size: 15px;
    letter-spacing: .04em;
}

.manual-payment-reference small {
    display: block;
    margin-top: 5px;
    color: #766157;
    font-size: 8px;
}

.manual-payment-contact {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #ead8b2;
}

.manual-payment-contact strong {
    color: #3a0647;
    font-size: 13px;
}

.manual-payment-contact p {
    margin: 3px 0;
    color: #715e54;
    font-size: 9px;
}


/* Bank details + QR */

.manual-bank-grid {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 18px;
    align-items: center;
}

.manual-bank-info {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.manual-bank-info > div {
    padding-bottom: 9px;
    border-bottom: 1px solid #eee0c4;
}

.manual-bank-info > div:last-child {
    border-bottom: 0;
}

.manual-bank-info span {
    display: block;
    margin-bottom: 3px;
    color: #8d7568;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.manual-bank-info strong {
    color: #3a0647;
    font-size: 10px;
}

.manual-bank-qr {
    text-align: center;
}

.manual-bank-qr img {
    width: 100%;
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}

.manual-bank-qr span {
    display: block;
    margin-top: 6px;
    color: #3a0647;
    font-size: 9px;
    font-weight: 800;
}

.manual-payment-instructions {
    margin-top: 18px;
    padding: 13px;
    color: #715944;
    background: #fff3ce;
    border: 1px solid #dfbd64;
    border-radius: 8px;
}

.manual-payment-instructions strong {
    color: #3a0647;
    font-size: 13px;
}

.manual-payment-instructions p {
    margin: 5px 0 0;
    font-size: 8px;
    line-height: 1.55;
}

.manual-payment-method {
    margin-top: 16px;
    display: block;
}

.manual-payment-method > span {
    display: block;
    margin-bottom: 5px;
    color: #3a0647;
    font-size: 9px;
    font-weight: 700;
}

.manual-payment-method select {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    background: #fffaf2;
    border: 1px solid #d8bd83;
    border-radius: 7px;
    color: #503c34;
}

.manual-payment-confirm-check {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #66534b;
    font-size: 9px;
    line-height: 1.4;
}

.manual-payment-confirm-check input {
    margin-top: 2px;
}

.manual-payment-submit {
    width: 100%;
    min-height: 45px;
    margin-top: 16px;
    padding: 0 14px;
    color: #fff7e6 !important;
    background: #3a0647 !important;
    border: 1px solid #d7aa3f !important;
    border-radius: 8px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.manual-payment-small-note {
    margin: 8px 0 0;
    color: #806e64;
    font-size: 7px;
    line-height: 1.45;
}


/* =========================================================
   PAYMENT SUBMITTED PAGE
========================================================= */

.payment-submitted-page {
    min-height: 70vh;
    background: #fff8ea;
}

.payment-submitted-section {
    padding: 55px 20px 80px;
}

.payment-submitted-card {
    max-width: 650px;
    margin: 0 auto;
    padding: 38px 30px;
    text-align: center;
    background: #fffdf8;
    border: 1px solid #dec58e;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(58,6,71,.08);
}

.payment-submitted-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a0647;
    background: #f1cf67;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 800;
}

.payment-submitted-card > span {
    color: #9b6927;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.payment-submitted-card h1 {
    margin: 7px 0 10px;
    color: #3a0647 !important;
    font-size: 36px;
}

.payment-submitted-card > p {
    color: #6d584e;
    font-size: 11px;
    line-height: 1.6;
}

.payment-submitted-reference {
    margin: 22px 0 15px;
    overflow: hidden;
    border: 1px solid #dfc58e;
    border-radius: 9px;
}

.payment-submitted-reference > div {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #ead8b2;
}

.payment-submitted-reference > div:last-child {
    border-bottom: 0;
}

.payment-submitted-reference span {
    color: #806d63;
    font-size: 8px;
}

.payment-submitted-reference strong {
    color: #3a0647;
    font-size: 10px;
}

.payment-submitted-note {
    padding: 13px;
    color: #715944;
    background: #fff3ce;
    border: 1px solid #dfbd64;
    border-radius: 8px;
}

.payment-submitted-note strong {
    color: #3a0647;
    font-size: 10px;
}

.payment-submitted-note p {
    margin: 5px 0 0;
    font-size: 8px;
    line-height: 1.5;
}

.payment-submitted-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.payment-submitted-primary,
.payment-submitted-secondary {
    min-height: 41px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7aa3f;
    border-radius: 7px;
    text-decoration: none !important;
    font-size: 9px;
    font-weight: 800;
}

.payment-submitted-primary {
    color: #fff7e6 !important;
    background: #3a0647;
}

.payment-submitted-secondary {
    color: #3a0647 !important;
    background: #fffaf0;
}


/* Responsive */

@media (max-width: 950px) {

    .manual-payment-layout {
        grid-template-columns: 1fr;
    }

    .manual-payment-details {
        position: static;
    }

}

@media (max-width: 650px) {

    .manual-payment-hero {
        padding: 22px 17px;
    }

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

    .manual-payment-section {
        padding: 24px 16px 55px;
    }

    .manual-payment-summary,
    .manual-payment-details {
        padding: 20px 16px;
    }

    .manual-bank-grid {
        grid-template-columns: 1fr;
    }

    .manual-bank-qr {
        max-width: 180px;
        margin: 0 auto;
    }

    .manual-payment-events article {
        flex-direction: column;
    }

}
/* =========================================================
   MOBILE ABOUT DROPDOWN FIX
========================================================= */

@media (max-width: 800px) {

    .temple-nav-dropdown {
        width: 100%;
        position: relative;
    }

    .temple-nav-dropdown-button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 14px 16px;

        border: 0;
        background: transparent;

        color: #fff7e6;

        font-family: inherit;
        font-size: 15px;
        font-weight: 700;

        cursor: pointer;
    }

    .temple-nav-dropdown-button.active,
    .temple-nav-dropdown-button.open {
        color: #f1cf67;
    }

    .temple-nav-dropdown-menu {
        position: static !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 6px 0 10px !important;

        display: none !important;

        background: rgba(255, 255, 255, 0.05) !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }

    .temple-nav-dropdown-menu.show {
        display: block !important;
    }

    .temple-nav-dropdown-menu a {
        width: 100%;

        padding: 11px 24px !important;

        display: block;

        color: #fff7e6 !important;

        background: transparent !important;

        border: 0 !important;

        text-decoration: none !important;

        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .temple-nav-dropdown-menu a:hover,
    .temple-nav-dropdown-menu a.active {
        color: #f1cf67 !important;
        background: rgba(241, 207, 103, 0.08) !important;
    }

    .temple-dropdown-arrow {
        transition: transform 0.2s ease;
    }

    .temple-nav-dropdown-button.open .temple-dropdown-arrow {
        transform: rotate(180deg);
    }

}

/* =========================================================
   PAYMENT OPTIONS - STRIPE + MANUAL PAYMENT
   Append this to home-theme.css
========================================================= */

.payment-options-intro {
    margin: 0 0 20px;
    color: #6f5a4f;
    line-height: 1.6;
}


/* =========================================================
   STRIPE PAYMENT CARD
========================================================= */

.stripe-payment-option {
    margin-top: 18px;
    padding: 20px;
    background: linear-gradient(
        135deg,
        #fffdf8 0%,
        #fff7e6 100%
    );
    border: 1px solid #dfbd64;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(58, 6, 71, 0.06);
}

.stripe-payment-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
}

.stripe-payment-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7e4a1;
    border: 1px solid #dfbd64;
    border-radius: 50%;

    font-size: 21px;
}

.stripe-payment-kicker {
    display: block;
    margin-bottom: 3px;

    color: #9a6c22;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.stripe-payment-heading h3,
.manual-payment-option-heading h3 {
    margin: 0;
    color: #3a0647;
    font-size: 21px;
}

.stripe-payment-description {
    margin: 0 0 16px;

    color: #6b584d;

    font-size: 13px;
    line-height: 1.6;
}

.stripe-payment-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 16px;
    padding: 13px 15px;

    background: #fff1bf;
    border: 1px solid #dfbd64;
    border-radius: 8px;
}

.stripe-payment-total span {
    color: #5f493e;
    font-size: 12px;
    font-weight: 700;
}

.stripe-payment-total strong {
    color: #3a0647;
    font-size: 22px;
}

.stripe-payment-button {
    width: 100%;

    padding: 14px 18px;

    border: 1px solid #d7aa3b;
    border-radius: 8px;

    background: #3a0647;
    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 8px 18px rgba(58, 6, 71, .15);

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.stripe-payment-button:hover {
    transform: translateY(-1px);
    background: #4b075b;
    box-shadow: 0 10px 22px rgba(58, 6, 71, .20);
}

.stripe-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    margin-top: 10px;

    color: #76645a;

    font-size: 10px;
}


/* =========================================================
   STRIPE CANCEL MESSAGE
========================================================= */

.payment-stripe-alert {
    margin: 0 0 15px;
    padding: 11px 13px;

    background: #fff0ee;
    border: 1px solid #e6aaa3;
    border-radius: 8px;

    color: #8d2e27;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   PAYMENT METHOD DIVIDER
========================================================= */

.payment-option-divider {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 19px 0;
}

.payment-option-divider::before,
.payment-option-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #dfccaa;
}

.payment-option-divider span {
    color: #9b793d;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}


/* =========================================================
   MANUAL PAYMENT WRAPPER
========================================================= */

.manual-bank-payment-option {
    padding: 20px;

    background: #fffdf8;
    border: 1px solid #e2ca9b;
    border-radius: 12px;
}

.manual-payment-option-heading {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 18px;
}

.manual-payment-option-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f8ebbd;
    border: 1px solid #dfbd64;
    border-radius: 50%;

    font-size: 21px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .stripe-payment-option,
    .manual-bank-payment-option {
        padding: 16px;
    }

    .stripe-payment-heading,
    .manual-payment-option-heading {
        align-items: flex-start;
    }

    .stripe-payment-total strong {
        font-size: 19px;
    }

    .stripe-payment-button {
        padding: 13px 14px;
    }

}

/* =========================================================
   PAYMENT METHOD DROPDOWN / DYNAMIC PANELS
   Append to home-theme.css
========================================================= */

.payment-options-intro {
    margin: 0 0 18px;
    color: #6f5a4f;
    line-height: 1.6;
}

.payment-method-selector {
    display: block;
    margin-bottom: 18px;
}

.payment-method-selector > span {
    display: block;
    margin-bottom: 7px;

    color: #5c2330;

    font-size: 11px;
    font-weight: 700;
}

.payment-method-selector select {
    width: 100%;
    min-height: 46px;

    padding: 0 13px;

    background: #fffdf8;
    border: 1px solid #dfbd64;
    border-radius: 8px;

    color: #3a0647;

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.payment-method-selector select:focus {
    border-color: #3a0647;
    box-shadow: 0 0 0 3px rgba(58, 6, 71, .08);
}


/* =========================================================
   PAYMENT PANELS
========================================================= */

.payment-method-panel {
    margin-top: 8px;
    padding: 20px;

    background: #fffdf8;
    border: 1px solid #dfbd64;
    border-radius: 12px;

    box-shadow: 0 8px 20px rgba(58, 6, 71, .05);
}

.payment-method-panel[hidden] {
    display: none !important;
}

.payment-method-panel-heading {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 14px;
}

.payment-method-panel-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7e6ac;
    border: 1px solid #dfbd64;
    border-radius: 50%;

    font-size: 21px;
}

.payment-method-panel-heading span {
    display: block;
    margin-bottom: 2px;

    color: #997134;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.payment-method-panel-heading h3 {
    margin: 0;

    color: #3a0647;

    font-size: 21px;
}

.payment-method-panel > p {
    margin: 0 0 16px;

    color: #6c594f;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   SELECTED TOTAL
========================================================= */

.payment-selected-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 16px 0;
    padding: 13px 15px;

    background: #fff1bf;
    border: 1px solid #dfbd64;
    border-radius: 8px;
}

.payment-selected-total span {
    font-size: 12px;
    font-weight: 700;
}

.payment-selected-total strong {
    color: #3a0647;
    font-size: 22px;
}


/* =========================================================
   STRIPE
========================================================= */

.stripe-payment-button {
    width: 100%;

    padding: 14px 18px;

    background: #3a0647;
    color: #fff;

    border: 1px solid #d6ad42;
    border-radius: 8px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 8px 18px rgba(58, 6, 71, .14);

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.stripe-payment-button:hover {
    background: #4b075b;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(58, 6, 71, .19);
}

.payment-secure-note {
    margin-top: 10px;

    text-align: center;

    color: #78665c;

    font-size: 10px;
}


/* =========================================================
   BANK TRANSFER
========================================================= */

.payment-bank-only {
    display: grid;
    gap: 0;

    margin-bottom: 16px;
}

.payment-bank-only > div {
    padding: 10px 0;
    border-bottom: 1px solid #eadbbd;
}

.payment-bank-only > div:last-child {
    border-bottom: 0;
}


/* =========================================================
   QR
========================================================= */

.payment-qr-layout {
    display: grid;
    grid-template-columns: 1fr 145px;
    gap: 18px;
    align-items: center;

    margin-bottom: 16px;
}

.payment-qr-layout .manual-bank-qr img {
    width: 100%;
    max-width: 135px;
    height: auto;
}


/* =========================================================
   DEFAULT PLACEHOLDER
========================================================= */

.payment-method-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 150px;

    padding: 25px;

    background: #fffaf0;
    border: 1px dashed #dfbd64;
    border-radius: 10px;

    text-align: center;
}

.payment-method-placeholder[hidden] {
    display: none !important;
}

.payment-method-placeholder > span {
    margin-bottom: 8px;

    font-size: 25px;
}

.payment-method-placeholder p {
    margin: 0;

    color: #705d53;

    font-size: 12px;
}


/* =========================================================
   STRIPE CANCEL ALERT
========================================================= */

.payment-stripe-alert {
    margin-bottom: 15px;
    padding: 11px 13px;

    background: #fff0ee;
    border: 1px solid #e5aba4;
    border-radius: 8px;

    color: #8e3029;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .payment-method-panel {
        padding: 16px;
    }

    .payment-method-panel-heading {
        align-items: flex-start;
    }

    .payment-qr-layout {
        grid-template-columns: 1fr;
    }

    .payment-qr-layout .manual-bank-qr {
        text-align: center;
    }

    .payment-qr-layout .manual-bank-qr img {
        max-width: 160px;
    }

}