/* =========================================================
   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 {
    position: relative;

    width: 100%;

    flex-shrink: 0;

    z-index: 10000;

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

    border-top:
        2px solid #9f6c20;

    border-bottom:
        3px solid #c99736;

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


/* 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 {
    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 {
        width: 100% !important;
        padding: 13px 5px !important;
        color: #fff0ce !important;
        font-size: 15px !important;
        text-align: left !important;
        border-bottom:
            1px solid rgba(235,205,122,.14) !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%;
    }

}