@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+Gujarati:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Noto Sans Gujarati", sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* ===================================
   1. Global Declaration
=================================== */
:root {
    --primary-color: #E85D04;
    --primary-color-dark: #C2410C;
    --secondary-color: #056B6B;
    --secondary-color-dark: #044f4f;
    --black-color: #222222;
    --white-color: #FFFFFF;

    --pink-color: #EF4444;
    --pink-color-light: #FDE4E7;
    --orange-color-light: #FBEADA;
    --teal-color-light: #DCEFEE;

    --text-gray: #6B7280;
    --text-slate: #525961;
    --bg-cream: #FDF7F5;
    --border-color: #E5E7EB;

    --font-heading: "Noto Sans Gujarati", sans-serif;
    --font-body: "Noto Sans Gujarati", sans-serif;
    --font-en: "Poppins", "Inter", sans-serif;

    --container-width: 1240px;
    --section-padding: 70px 0;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 999px;

    --transition: all 0.3s ease;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--black-color);
    background-color: var(--white-color);
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

a {
    color: inherit;
}

html.preloader-active,
html.preloader-active body {
    overflow: hidden;
}

/* ===================================
   1b. Preloader
=================================== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, var(--bg-cream) 0%, #FDF1E9 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

.preloader__orbit {
    position: relative;
    width: 150px;
    height: 150px;
}

.preloader__core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    border-radius: var(--radius-full);
    background-color: var(--primary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 0 0 0 rgba(232, 93, 4, 0.45);
    animation: preloaderPulse 2s ease-out infinite;
}

@keyframes preloaderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(232, 93, 4, 0.45);
    }

    70% {
        box-shadow: 0 0 0 22px rgba(232, 93, 4, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(232, 93, 4, 0);
    }
}

.preloader__node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: var(--radius-full);
    background-color: var(--secondary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: var(--shadow-sm);
    animation: preloaderOrbit 3.2s linear infinite;
}

.preloader__node--1 {
    animation-delay: 0s;
}

.preloader__node--2 {
    animation-delay: -0.8s;
}

.preloader__node--3 {
    animation-delay: -1.6s;
}

.preloader__node--4 {
    animation-delay: -2.4s;
}

@keyframes preloaderOrbit {
    from {
        transform: rotate(0deg) translateX(64px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(64px) rotate(-360deg);
    }
}

.preloader__tagline {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.2px;
}

.preloader__tagline span {
    color: var(--primary-color);
    animation: preloaderDot 1.4s ease-in-out infinite;
}

.preloader__tagline span:nth-child(2) {
    animation-delay: 0.2s;
}

.preloader__tagline span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes preloaderDot {

    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.preloader__bar {
    width: 160px;
    height: 4px;
    border-radius: var(--radius-full);
    background-color: var(--border-color);
    overflow: hidden;
}

.preloader__bar span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    animation: preloaderBar 1.4s ease-in-out infinite;
}

@keyframes preloaderBar {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(250%);
    }
}

@media (max-width: 480px) {
    .preloader__orbit {
        width: 120px;
        height: 120px;
    }

    .preloader__core {
        width: 52px;
        height: 52px;
        margin: -26px 0 0 -26px;
        font-size: 20px;
    }

    .preloader__node {
        width: 28px;
        height: 28px;
        margin: -14px 0 0 -14px;
        font-size: 11px;
    }

    @keyframes preloaderOrbit {
        from {
            transform: rotate(0deg) translateX(50px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translateX(50px) rotate(-360deg);
        }
    }

    .preloader__tagline {
        font-size: 13px;
        text-align: center;
    }
}

/* ===================================
   2. Layout Helpers
=================================== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding: 60px 0;
}

.section {
    padding: var(--section-padding);
}

.section--gray {
    background-color: #FAFAFA;
}

.section-head {
    margin-bottom: 36px;
}

/* ===================================
   3. Typography (Reusable Headings & Text)
=================================== */
.heading-1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--black-color);
}

.heading-2 {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: var(--black-color);
    margin-bottom: 4px;
}

.heading-3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--black-color);
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}

.text-body {
    font-size: 15px;
    color: var(--text-gray);
}

.text-muted {
    color: var(--text-gray);
    font-size: 14px;
}

.top-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;

    h5 {
        font-weight: 400;
        font-size: 28px;
        line-height: 100%;
        color: var(--primary-color);
    }

    h3 {
        font-family: var(--font-en);
        font-weight: 600;
        font-size: 30px;
        line-height: 100%;
    }

    .gujarati-text {
        font-family: var(--font-body);
        font-weight: 700;
    }
}

.paragraph {
    font-weight: 400;
    font-size: 20px;
    line-height: 160%;
    letter-spacing: 0%;
    color: var(--black-color);
}

/* ===================================
   4. Buttons (Reusable)
=================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--radius-full);

    font-weight: 500;
    font-size: 22.1px;
    line-height: 100%;
    letter-spacing: 0%;

    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    padding-top: 13px;
    padding-right: 22px;
    padding-bottom: 10px;
    padding-left: 22px;

}

.btn--primary {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

.btn--primary:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    transform: translateY(-2px);
}

.btn--secondary {
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-color: var(--secondary-color);
}

.btn--secondary:hover {
    background-color: var(--secondary-color-dark);
    transform: translateY(-2px);
}

.btn--outline {
    background-color: var(--white-color);
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn--outline:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
    transform: translateY(-2px);
}

/* ===================================
   5. Card (Reusable)
=================================== */
.card {
    background-color: var(--white-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

/* ===================================
   6. Header
=================================== */
.site-header {
    /* position: sticky;
    top: 0;
    z-index: 1000; */
    width: 100%;
    position: relative;
    background-color: var(--bg-cream);
}

.header-top {
    height: 194px;
    opacity: 1;
    padding-top: 29.59px;
    padding-bottom: 44px;
    border-width: 1px;
    width: 1284px;
    margin: auto;
}

.header-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand__logo {
    width: 104.86px;
    height: 104.86px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.brand__title {
    font-weight: 800;
    font-size: 24.63px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--primary-color);
}

.brand__title-en {
    font-family: var(--font-en);
    font-weight: 600;
    font-size: 16.06px;
    line-height: 100%;
    color: var(--secondary-color);
}

.brand__subtitle {
    color: var(--text-slate);
    letter-spacing: 0.1px;
    font-weight: 400;
    font-size: 13.89px;
    line-height: 100%;
    margin-top: 4px;
}

.top-cta-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-top__cta {
    display: flex;
    align-items: center;
    background-color: var(--primary-color);
    color: var(--white-color);
    flex-shrink: 0;
    transition: var(--transition);

    border-radius: 10.56px;
    padding-top: 12px;
    padding-right: 17.85px;
    padding-bottom: 12px;
    padding-left: 17.85px;
    gap: 14.28px;
    border-width: 2.04px;

}

.header-top__cta:nth-child(1) {
    border: 2px solid #E85D04;
    background-color: var(--white-color);
    color: var(--primary-color);
}

.header-top__cta:nth-child(1):hover {
    background-color: var(--orange-color-light);
}

.header-top__cta:hover {
    background-color: var(--primary-color-dark);
}

.header-top__cta-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 0;
}

.header-top__cta-text {
    display: flex;
    flex-direction: column;
    font-weight: 500;
    font-size: 21.12px;
    line-height: 100%;
    letter-spacing: 0%;
}

.header-top__cta-text small {
    font-size: 13.86px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-top: 3px;
}

/* ===== Main Navigation ===== */
.main-nav {
    background-color: var(--white-color);
    box-shadow: var(--shadow-sm);
    width: 1284px;
    height: 76px;
    position: absolute;
    top: 80%;
    left: calc(50% - 642px);
    z-index: 100;
    justify-content: space-between;
    border-radius: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding: 16px 48.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 6px 1px 16px 0px #0000002E;
}

.main-nav__inner {
    display: flex;
    align-items: center;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--black-color);
    font-size: 20px;
    padding: 14px 0;
    cursor: pointer;
}

.nav-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 46px;
}

.nav-list li a {
    font-weight: 500;
    color: var(--text-slate);
    transition: var(--transition);
    position: relative;
    border-bottom: 2px solid transparent;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;

}

.nav-list li a:hover {
    color: var(--primary-color);
}

.nav-list li a.is-active {
    color: var(--primary-color);
    font-weight: 700;
    border-bottom-color: var(--primary-color);
}

.nav-list__dropdown a i {
    font-size: 16px;
}

/* mobile drawer footer buttons (see .nav-list__actions media rules) — desktop nav is a
   plain flex row of links, so this li stays out of it entirely */
.nav-list__actions,
.nav-list__brand {
    display: none;
}

/* ===================================
   7. Hero Slider
=================================== */
.hero {
    position: relative;
    background-color: var(--bg-cream);
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
}

/* Crossfade: the incoming slide fades in ON TOP while the outgoing one stays
   fully visible underneath, and only hides once the fade has finished — so
   there is no washed-out / blank moment between slides. */
.hero-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: 60% center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0s linear 1.2s, visibility 0s linear 1.2s;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

/* Slow "Ken Burns" zoom-out on the artwork (same image, inherited from the slide) */
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    will-change: transform;
}

.hero-slide.is-active::before {
    animation: heroKenBurns 7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes heroKenBurns {
    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }
}

.hero-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(253, 247, 245, 0) 60%, #FDF7F5 100%);

    /* background: linear-gradient(90deg, var(--bg-cream) 0%, rgba(253, 247, 245, 0.92) 32%, rgba(253, 247, 245, 0.5) 48%, rgba(253, 247, 245, 0) 62%); */
}

.hero-slide__content {
    position: relative;
    z-index: 2;
}

/* Text rises in line by line every time a slide becomes active
   (the animation restarts whenever .is-active is re-applied) */
.hero-slide.is-active .hero-slide__content>* {
    animation: heroFadeUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero-slide.is-active .hero-slide__content>:nth-child(1) {
    animation-delay: 0.3s;
}

.hero-slide.is-active .hero-slide__content>:nth-child(2) {
    animation-delay: 0.42s;
}

.hero-slide.is-active .hero-slide__content>:nth-child(3) {
    animation-delay: 0.54s;
}

.hero-slide.is-active .hero-slide__content>:nth-child(4) {
    animation-delay: 0.66s;
}

.hero-slide.is-active .hero-slide__content>:nth-child(5) {
    animation-delay: 0.78s;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@media (prefers-reduced-motion: reduce) {

    .hero-slide,
    .hero-slide.is-active {
        transition: none;
    }

    .hero-slide.is-active::before,
    .hero-slide.is-active .hero-slide__content>* {
        animation: none;
    }
}

.hero-tag {
    color: var(--primary-color);
    margin-bottom: 14px;
    font-weight: 700;
    font-size: 28.38px;
    line-height: 100%;
    letter-spacing: 0%;
}

.hero-title {
    margin-bottom: 14px;
    /* font-family: var(--font-en); */
    font-weight: 700;
    font-size: 48.89px;
    line-height: 120%;
    color: var(--black-color);
}

.hero-subtitle {
    font-family: var(--font-en);
    color: var(--text-gray);
    margin-bottom: 14px;

    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
}

.hero-keywords {
    color: var(--text-slate);
    font-family: var(--font-en);
    margin-bottom: 53px;
    font-weight: 500;
    font-size: 27.35px;
    line-height: 140%;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 23px;
}

/* Arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.75);
    color: var(--black-color);
    font-size: 16px;
    cursor: pointer;
    z-index: 3;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.hero-arrow:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.hero-arrow--prev {
    left: 24px;
}

.hero-arrow--next {
    right: 24px;
}

/* Dots */
.hero-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.hero-dots__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.hero-dots__dot.is-active {
    background-color: var(--primary-color);
    width: 26px;
    border-radius: var(--radius-full);
}

/* ===== Hero Features Strip ===== */
.hero-features {
    position: relative;
    z-index: 4;
    background-color: var(--bg-cream);
}

.hero-features__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 22px 0px;
}

.feature-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: left;
    border-right: 1px solid var(--primary-color);
}

.feature-card:last-child {
    border-right: none;
}

.feature-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 28px;
    background-color: #FEEDE1;
    color: var(--primary-color);
}

.feature-card__label {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
}


/* trust info */
.trust-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 62px;
    background-color: var(--white-color);

    .paragraph {
        margin: 20px 0;
    }

    .trust-info-list {
        opacity: 1;
        border-radius: 7px;
        border-width: 0.6px;
        padding: 16px;
        border: 0.6px solid;
        background: linear-gradient(0deg, #FAF9F5, #FAF9F5),
            linear-gradient(0deg, #FDF7F5, #FDF7F5);
        border-color: #feede1;
        margin-bottom: 20px;
        display: flex;
        align-items: flex-start;

        >div {
            padding: 0 31.67px;
            border-right: 0.6px solid var(--primary-color);
            height: 100%;

            h5 {
                font-weight: 700;
                font-size: 18px;
                line-height: 100%;
                letter-spacing: 0%;
                color: var(--primary-color);
                margin-bottom: 16px;
            }

            span {
                font-weight: 400;
                font-size: 16px;
                line-height: 100%;
                letter-spacing: 0%;
                color: var(--black-color);
            }
        }

        >div:first-child {
            padding-left: 0;
        }

        >div:last-child {
            padding-right: 0;
            border: none;
            width: 32%;
        }


    }

    .trust-right img {
        width: 100%;
    }
}

/* Chief Coordinators & Main Committee */
.committee-section {
    background-color: #FAF9F5;
}

.committee-heading {
    margin-top: 50px;
}

.committee-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px 30px;
    margin-top: 26px;
}

.committee-grid .person-card {
    text-align: center;
}

.committee-grid .person-card__avatar {
    margin: 0 auto 12px;
}

.person-card {
    background-color: var(--white-color);
    border-radius: var(--radius-md);
    padding: 16px 10px;
    box-shadow: 0px 1px 2px 0px #0000000D;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.person-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.person-card__avatar {
    width: 117px;
    height: 117px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffdbcd;
    transition: border-color 0.35s ease, transform 0.35s ease;
}

.person-card:hover .person-card__avatar {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.person-card:hover .person-card__phone i {
    background-color: var(--primary-color);
}

.person-card__name {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 22px;
    line-height: 100%;
    letter-spacing: 0%;
}

.person-card__role {
    color: var(--secondary-color);
    margin-bottom: 10px;

    font-weight: 600;
    font-size: 22px;
    line-height: 100%;
    letter-spacing: 0%;
}

.person-card__village {
    color: var(--black-color);
    margin: 10px 0px;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
}

.person-card__phone {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: var(--secondary-color);
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;

    i {
        width: 25.5px;
        height: 25.5px;
        border-radius: 50%;
        background-color: var(--secondary-color);
        display: grid;
        place-items: center;
        color: var(--white-color);
        font-size: 12px;
        transition: background-color 0.35s ease;
    }
}

.coordinator-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 40px;
    margin-top: 26px;
}

.person-card--row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;

    .person-card__phone {
        justify-content: flex-start;
    }
}


/* executive-committee */
.executive-committee {}

.executive-committee-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18.87px 17px;
}

.executive-card {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--black-color);
    box-shadow: -1px 1px 1px 0px #0000001F;
    background: #FAF9F5;
    border-radius: 12px;
    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;

    i {
        width: 15.5px;
        height: 15.5px;
        border-radius: 50%;
        background-color: var(--secondary-color);
        display: grid;
        place-items: center;
        color: var(--white-color);
        font-size: 8px;
        transition: background-color 0.35s ease;
    }
}

.executive-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    background-color: var(--white-color);
}

.executive-card:hover i {
    background-color: var(--primary-color);
}


.executive-card__avatar {
    width: 68px;
    height: 68px;
}

.executive-card__name {
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
}

.executive-card__village {
    /* font-family: var(--font-en); */
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-top: 7px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.executive-card__phone {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* villages */
.villages-section {
    background-color: #FAF9F5;
}

.villages-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.villages-head__note {
    color: var(--text-slate);
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
}

.villages-toolbar,
.villages-box {
    background-color: var(--white-color);
    border: 1px solid var(--bg-cream);

    border-radius: 12px;
    padding: 16px;
    border: 1px solid #E2E8F0
}

.villages-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

.villages-box {
    padding: 0;
    overflow: hidden;
}

.villages-search {
    flex: 1;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-full);
    color: var(--text-gray);

    i {
        color: var(--primary-color);
    }
}

.villages-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--black-color);
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

.villages-filters {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.villages-filter-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    color: var(--text-gray);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
}

.villages-filter-btn.is-active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.villages-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 600px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--white-color);
}

/* 16px track, 6px thumb centered via transparent borders -> 5px gap on each side */
.villages-table-wrap::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

.villages-table-wrap::-webkit-scrollbar-track {
    background-color: var(--white-color);
}

.villages-table-wrap::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    background-clip: padding-box;
    border: 5px solid transparent;
    border-radius: 10px;
}

.villages-table-wrap::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-color);
    background-clip: padding-box;
}

.villages-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.villages-table thead th {
    background-color: var(--secondary-color);
    color: var(--white-color);
    text-align: left;
    padding: 16px 24px;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
    position: sticky;
    top: 0;
    z-index: 1;
}

.villages-table thead th:first-child {
    width: 10%;
}

.villages-table thead th:nth-child(2) {
    width: 30%;
}

.villages-table thead th:nth-child(3) {
    width: 40%;
}

.villages-table thead th:last-child {
    width: 20%;
}

/* representatives: one name + phone row each, spanning the last two columns (40% | 20%) */
.villages-table tbody td.village-reps-cell {
    padding: 0;
}

.village-rep {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
}

.village-rep + .village-rep {
    border-top: 1px dashed var(--border-color);
}

.village-rep__name,
.village-rep__phone {
    padding: 12px 24px;
    min-width: 0;
}

.village-rep--empty .village-rep__name {
    color: #64748B;
    font-size: 14px;
    font-style: italic;
}

/* vertical divider under the "mobile number" header (the merged cell has no column border of its own) */
.village-rep__phone {
    align-self: stretch;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--border-color);
}

.villages-table tbody td {
    padding: 12px 24px;
    font-size: 15px;
    color: var(--black-color);
    border-bottom: 1px solid var(--border-color);
}

.villages-table tbody tr:nth-child(odd) {
    background-color: #FFFCF8;
}

.villages-table tbody td:first-child {
    color: var(--black-color);
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
}

.villages-table tbody td:nth-child(2) {
    font-weight: 600;
}

.villages-table .village-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--black-color);
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;

    i {
        color: var(--primary-color);
    }
}

.villages-no-result {
    display: none;
    text-align: center;
    padding: 30px;
    color: var(--text-gray);
}


/* membership-section */
.membership-content {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;

    .membership-heading {
        display: flex;
        align-items: center;
        gap: 13.5px;
        font-weight: 500;
        font-size: 29px;
        line-height: 100%;
        letter-spacing: 0%;
        color: var(--primary-color);

        i {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background-color: #FEEDE1;
            font-size: 26px;
            color: var(--primary-color);
        }
    }

    /* left-content */
    .paragraph {
        font-weight: 500;
        font-size: 22px;
        line-height: 28px;
        margin: 19px 0 16px;
    }

    .membership-table {
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 16px;
    }

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

    table th,
    table td {
        padding: 16px 24px;
        border: 1px solid #edf1f5;
    }

    table th {
        background-color: var(--secondary-color);
        color: var(--white-color);
        font-weight: 600;
        font-size: 18px;
        line-height: 22.5px;
    }

    table td {
        font-weight: 500;
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0px;
        color: var(--black-color);
    }

    .starting-date {
        border-radius: 10px;
        border-width: 0.6px;
        padding: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        background: #056B6B0F;
        border: 0.6px solid var(--secondary-color);
        font-weight: 600;
        font-size: 22px;
        line-height: 28px;
        letter-spacing: 0px;
        color: var(--secondary-color);
    }

    /* right-content */
    .right-content {
        background-color: #FAF9F5;
        border-radius: 15px;
        padding: 20px;
    }

    .donation-amount {
        background-color: var(--white-color);
        border-radius: 16px;
        padding: 20px;
        text-align: center;
        color: var(--primary-color);

        h4 {
            font-weight: 700;
            font-size: 40px;
            line-height: 28px;
            letter-spacing: 0px;
            margin-bottom: 16px;
        }

        span {
            font-weight: 600;
            font-size: 21px;
            line-height: 28px;
            letter-spacing: 0px;
        }
    }

    .special-2014 {
        font-weight: 600;
        font-size: 21px;
        line-height: 28px;
        letter-spacing: 0px;
        color: var(--secondary-color);
        text-align: center;
        margin: 16px 0;
    }

    .last-note {
        border-radius: 16px;
        padding: 12px;
        gap: 17px;
        border: 1px solid var(--secondary-color);
        display: flex;

        font-weight: 500;
        font-size: 19px;
        line-height: 28px;
        letter-spacing: 0px;
        color: var(--text-slate);
    }
}

/* section heading row: title on the left, "Become a Member" CTA on the right */
.membership-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

/* membership CTA — same look as the header "સભ્ય બનો / Become a Member" button */
.membership-cta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 14.28px;
    padding: 12px 17.85px;
    border: 2px solid var(--primary-color);
    border-radius: 10.56px;
    background-color: var(--white-color);
    color: var(--primary-color);
    transition: var(--transition);
}

.membership-cta:hover {
    background-color: var(--orange-color-light);
}

.membership-cta__icon {
    font-size: 28px;
    line-height: 0;
    flex-shrink: 0;
}

.membership-cta__text {
    display: flex;
    flex-direction: column;
    font-weight: 500;
    font-size: 21.12px;
    line-height: 100%;
}

.membership-cta__text small {
    font-size: 13.86px;
    line-height: 100%;
    margin-top: 3px;
}

.membership-cta__arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.membership-cta:hover .membership-cta__arrow {
    transform: translateX(4px);
}

/* gallery-section */
.gallery-section {
    padding-bottom: 60px;
    overflow: hidden;
    background-color: #FAF9F5;

    .container {
        padding-bottom: 50px;
    }
}

.gallery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 26px;
}

.gallery-desc {
    font-weight: 500;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0px;
}

.gallery-arrows {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.gallery-slider-wrap {
    position: relative;
    max-width: var(--container-width);
    margin-inline: auto;
}

.gallery-slider {
    display: flex;
    gap: 27px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    cursor: grab;
}

.gallery-slider::-webkit-scrollbar {
    display: none;
}

.gallery-slider.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.gallery-slider.is-dragging .gallery-slide img {
    pointer-events: none;
}

.gallery-slide {
    flex: 0 0 calc((100% - 54px) / 3);
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3.7 / 2.6;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
    -webkit-user-drag: none;
    user-select: none;
}

.gallery-slide:hover img {
    transform: scale(1.06);
}

.gallery-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    color: var(--secondary-color);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.gallery-arrow:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-color);
}

/* gallery slides open the lightbox */
.gallery-slide img {
    cursor: zoom-in;
}

.gallery-slider.is-dragging .gallery-slide img {
    cursor: grabbing;
}

.gallery-slide:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

/* ===== Gallery Lightbox ===== */
img[data-photo-lightbox] {
    cursor: zoom-in;
}

html.gallery-lightbox-open,
html.gallery-lightbox-open body {
    overflow: hidden;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 96px;
    background-color: rgba(17, 17, 17, 0.92);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gallery-lightbox[hidden] {
    display: none;
}

.gallery-lightbox.is-open {
    opacity: 1;
}

.gallery-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    margin: 0;
    transform: scale(0.96);
    transition: transform 0.25s ease;
}

.gallery-lightbox.is-open .gallery-lightbox__figure {
    transform: scale(1);
}

.gallery-lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.gallery-lightbox__img.is-loading {
    opacity: 0;
}

/* holds only the "2 / 4" counter, centred under the photo */
.gallery-lightbox__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 900px;
    color: var(--white-color);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
}

.gallery-lightbox__counter {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 14px;
    color: #D9D9D9;
}

.gallery-lightbox__btn {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--white-color);
    font-size: 20px;
    cursor: pointer;
    transition: var(--transition);
}

.gallery-lightbox__btn:hover,
.gallery-lightbox__btn:focus-visible {
    background-color: var(--primary-color);
    outline: none;
}

.gallery-lightbox__close {
    top: 20px;
    right: 20px;
    font-size: 24px;
}

.gallery-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
}

.gallery-lightbox__nav--prev {
    left: 24px;
}

.gallery-lightbox__nav--next {
    right: 24px;
}

/* footer */
footer {
    background-color: var(--secondary-color);
    color: var(--white-color);

    .container {
        padding: 80px 0;
    }

    .top {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 32px;

        img {
            width: 104px;
            height: 104px;
        }
    }

    .top-content {
        h5 {
            font-weight: 800;
            font-size: 24.63px;
            line-height: 100%;
            letter-spacing: 0%;
            margin-bottom: 6px;
        }

        span {
            font-weight: 600;
            font-size: 16.06px;
            line-height: 100%;
            font-family: var(--font-en);
        }
    }

    .bottom {
        >div {
            display: flex;
            justify-content: space-between;
            font-weight: 400;
            line-height: 100%;
            padding-bottom: 12px;
            color: #D9D9D9;

            span {
                font-size: 16px;
            }

            div {
                font-size: 19px;
            }
        }

        >div:last-child {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            padding-top: 12px;
            align-items: center;
        }

        .footer-crafted-by {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0;
            font-size: 16px;

            a {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                color: inherit;
                text-decoration: none;
            }

            a:hover {
                color: #00B5FF;
            }
        }
    }
}

/* ===== Sticky Main Nav (after scroll) ===== */
.main-nav.is-fixed {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.35s ease, box-shadow 0.35s ease;
}

.main-nav.is-fixed.is-visible {
    opacity: 1;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

/* ===== Scroll To Top Button ===== */
.scroll-top-btn {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    border: none;
    background-color: var(--secondary-color);
    color: var(--white-color);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, visibility 0.3s ease;
}

.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    border: 1px solid rgb(255, 255, 255, 0.5)
}

.scroll-top-btn:hover {
    background-color: var(--secondary-color-dark);
}

/* for contact page */
.contact-page {
    .committee-section {
        background-color: transparent;
    }

    .container {
        padding: 50px 0;
    }

    .committee-section .container {
        border-top: 0.6px solid #B5B5B5;
        border-bottom: 0.6px solid #B5B5B5;
    }

    .technical-support {
        border-top: 0.6px solid #B5B5B5;
    }

    .committee-section .committee-heading {
        margin-top: 0;
    }

    .committee-section .committee-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 26px 26px;
        margin-top: 26px;
    }

    .committee-section .committee-grid .person-card {
        text-align: left;
    }

    .committee-section .person-card {
        display: flex;
        gap: 26px;
        border: 1px solid #D0D0D0;
        padding: 20px 10px 20px 20px;
    }

    .committee-section .person-card__role,
    .committee-section .person-card__village {
        font-size: 19px;
    }

    .committee-section .person-card__phone {
        justify-content: flex-start;
    }

    .committee-section .person-card__name {
        color: var(--black-color);
    }

    .executive-card {
        background-color: transparent;
        box-shadow: none;
        border: 1px solid #D0D0D0;
    }
}

.contact-section {
    background-color: transparent;
    padding: 80px 0 50px;


    .contact-content {
        display: flex;
        align-items: flex-start;
        margin-top: 20px;
        border-radius: 13px;
        overflow: hidden;
        border: 0.6px solid var(--secondary-color);
        background-color: #F9FFFD99;

        padding: 26px 30px 27px;
    }

    .contact-content>div {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .contact-content>div:nth-child(1) {
        padding-right: 48px;
        flex-basis: 45%;
    }

    .contact-content>div:nth-child(2) {
        border-left: 0.6px solid var(--secondary-color);
        border-right: 0.6px solid var(--secondary-color);
        padding: 0 48px;
    }

    .contact-content>div:nth-child(3) {
        padding-left: 48px;
    }

    .location {
        display: flex;
        align-items: flex-start;
        gap: 14.55px;
    }

    .location i {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        border-radius: var(--radius-full);
        background-color: #FEEDE1;
        color: var(--primary-color);
        font-size: 28px;
    }

    .location h6 {
        color: var(--black-color);
        font-weight: 500;
        font-size: 26px;
        line-height: 100%;
        letter-spacing: 0%;
        margin-bottom: 6px;
    }

    .location span {
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        color: var(--text-slate);
    }

    .address {
        margin-top: 18px;
        color: var(--black-color);
        font-weight: 400;
        font-size: 22px;
        line-height: 160%;
        letter-spacing: 0%;
    }

    .more-details {
        display: flex;
        flex-direction: column;
        gap: 22.5px;
    }

    .detail-card {
        display: flex;
        align-items: center;
        gap: 14.5px;
    }

    .detail-card i {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 45.28px;
        height: 45.28px;
        border-radius: var(--radius-full);
        font-size: 20px;
        background-color: #EAF3FF;

        color: #1976D2;
    }

    .detail-card:nth-child(2) i {
        background: #F0EEFF;
        color: #5E35B1;
    }

    .detail-card:nth-child(3) i {
        background-color: #FEEDE1;
        color: var(--primary-color);
    }

    .detail-card span {
        display: block;
        color: var(--text-slate);
        margin-bottom: 6px;
        font-weight: 400;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: 0%;
    }

    .detail-card h6 {
        color: var(--black-color);
        font-weight: 500;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: 0%;
    }

    .quote-line {
        display: flex;
        gap: 11px;
    }

    .quote-line i {
        font-size: 30px;
        color: var(--secondary-color);
    }

    .quote-line div {
        color: var(--secondary-color);
        font-weight: 500;
        font-size: 32px;
        line-height: 120%;
        margin-top: 32px;
    }
}

.contact-section .container {
    padding: 0;
}

.download-section {
    padding: 80px 0 96px;
    background-color: transparent;

    .container {
        padding: 0;
    }

    .document-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 20px;
    }

    .document-card {
        background-color: var(--white-color);
        border: 1px solid #E5E5E5;
        border-radius: var(--radius-md);
        box-shadow: 0px 1px 11.3px 0px #00000021;
        padding: 26px;
    }

    .document-card__row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px 18px;
    }

    .document-card__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 43px;
        height: 43px;
        border-radius: var(--radius-full);
        background-color: #FEEDE1;
        color: var(--primary-color);
        font-size: 20px;
    }

    .document-card__titles {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1 1 auto;
        min-width: 160px;
    }

    .document-card__title {
        color: var(--black-color);
        font-weight: 500;
        font-size: 22px;
        line-height: 150%;
    }

    .document-card__title-en {
        color: var(--black-color);
        font-weight: 500;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;

    }

    .document-card__btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        background-color: var(--primary-color);
        color: var(--white-color);
        border-radius: var(--radius-full);
        padding: 12.6px 20px;
        transition: var(--transition);
        font-weight: 500;
        font-size: 18.8px;
        line-height: 100%;
        letter-spacing: 0%;
    }

    .document-card__btn:hover {
        background-color: var(--primary-color-dark);
        transform: translateY(-2px);
    }

    .document-card__desc {
        margin-top: 18px;
        color: var(--text-slate);
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
    }
}


/* member-login page */
.member-login {
    background-image: linear-gradient(180deg, rgba(253, 247, 245, 0) -29.62%, #FFFFFF 100%), url("../../assets/images/frontend/login-bg.png");
    background-size: cover;
    background-position: center;
    min-height: 601px;

    padding: 80px 0 42px;
    margin-bottom: 48px;

    .container {
        padding: 0;
    }

    .top-heading {
        text-align: center;
    }

    .gallery-head {
        justify-content: center;
        margin-top: 16px;
    }

    .login-form-container {
        width: 443px;
        min-height: 334px;
        margin: 26px auto 0;
        border-radius: 13px;
        padding: 26px;
        background: var(--white-color);
        border: 1px solid #E5E5E5;
        box-shadow: 6px 1px 16px 0px #00000042;
    }

    .form-field {
        margin-bottom: 26px;

        label {
            font-weight: 500;
            font-size: 26px;
            line-height: 100%;
            letter-spacing: 0%;
            margin-bottom: 16px;
            display: block;
        }

        .input-field {
            display: flex;
        }

        .input-field i {
            width: 52px;
            height: 52px;
            opacity: 1;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            background-color: #EBF4F4;
            display: grid;
            place-items: center;
            color: var(--secondary-color);
            font-size: 26px;
        }

        .input-field input {
            height: 52px;
            flex: 1;
            font-weight: 400;
            font-size: 16px;
            line-height: 100%;
            letter-spacing: 0%;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            border: 1px solid #e5e5e5;
            outline: none;
            padding: 12px 10px;
            color: var(--text-gray);
            /* explicit white — mobile browsers give native date inputs a grey fill */
            background-color: var(--white-color);
        }

        .input-field input::placeholder {
            color: var(--text-gray);
        }

        .input-field input:focus {
            border-color: #c94e025b;
        }

    }

    .form-field:nth-child(2) {
        margin-bottom: 18px;
    }

    .btn--primary {
        display: flex;
        width: 100%;
    }
}

.bottom-tag-line {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 27px;

    >div {
        font-weight: 400;
        font-size: 20.38px;
        line-height: 100%;
        letter-spacing: 0%;
        color: var(--text-slate);
    }
}

.bottom-tag-line::after,
.bottom-tag-line::before {
    content: '';
    height: 1px;
    width: 100%;
    background-color: #B5B5B5;
    flex: 1;
    display: block;
}

/* member-profile */
.member-profile {
    padding: 40px 0 0;

    .container {
        padding: 0;
    }
}

.member-profile-card {
    display: flex;
    align-items: center;
    gap: 22px;
    background-color: var(--white-color);
    padding: 26px 0px;
    margin-bottom: 12px;
}

.member-profile-card__avatar img {
    width: 121.5px;
    height: 121.5px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 4px solid #ffdbcd;
    box-shadow: var(--shadow-sm);
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #CEF0DE;
    color: #059658;
    border-radius: var(--radius-full);
    padding: 8px 8px 6px;
    font-weight: 400;
    font-size: 18.92px;
    line-height: 100%;
    letter-spacing: 0%;
}

.member-profile-card__info h5 {
    color: var(--black-color);
    margin: 18px 0;
    font-weight: 700;
    font-size: 26px;
    line-height: 100%;
    letter-spacing: 0%;

}

/* profile / transactions PDF download buttons under the member id */
.member-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.member-profile-actions__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--secondary-color);
    border-radius: 8px;
    color: var(--secondary-color);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    transition: var(--transition);
}

.member-profile-actions__btn span {
    font-weight: 400;
    font-size: 12px;
}

.member-profile-actions__btn:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

@media (max-width: 576px) {
    .member-profile-actions__btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

.profile-id {
    font-weight: 400;
    font-size: 15px;
    color: var(--black-color);
    font-weight: 400;
    font-size: 23px;
    line-height: 100%;
    letter-spacing: 0%;
}

.profile-id span {
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 26px;
    line-height: 100%;
}

.member-details-card {
    border: 1px solid #E5E5E5;
    border-radius: 13px;
    box-shadow: 6px 1px 16px 0px #00000009;
    padding: 43px 32px;
    margin-bottom: 31px;
}

.member-details-card.smaller-card {
    width: 920px;
    margin: 0 auto 31px;

    .reg-actions {
        padding-top: 64px;
    }
}

.member-details-card__title {
    color: var(--black-color);
    font-weight: 700;
    font-size: 25px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 40px;
}

.member-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}

.member-detail {
    display: flex;
    align-items: center;
    gap: 26px;
}

.member-detail__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 63px;
    height: 63px;
    border-radius: var(--radius-full);
    font-size: 30px;
    background-color: #EAF3FF;
    color: #1976D2;
}

.member-detail:nth-child(2) .member-detail__icon,
.member-detail:nth-child(4) .member-detail__icon {
    background-color: #FFF1E6;
    color: #F57C00;
}

.member-detail:nth-child(3) .member-detail__icon {
    background-color: #E8F8F4;
    color: #00897B;
}

.member-detail:nth-child(5) .member-detail__icon {
    background-color: #EAF3FF;
    color: #1976D2;
}

.member-detail:nth-child(6) .member-detail__icon {
    background-color: #F0EEFF;
    color: #5E35B1;
}

.member-detail__label {
    color: var(--text-slate);
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 23px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* small secondary line under a detail value, e.g. "ઉંમર: 37 વર્ષ" under the DOB */
.member-detail__meta {
    margin-top: 6px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--text-slate);
}

.member-detail__value {
    color: var(--black-color);
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* payment-history */
.payment-history {
    margin-bottom: 90px;
}

/* land below the floating nav when jumped to from the due overview card */
#paymentHistory {
    scroll-margin-top: 110px;
}

/* ===== Due overview (user-profile, mobile only) — links to the Due table ===== */
.due-overview {
    display: none; /* mobile only — shown in the ≤768px block */
    align-items: center;
    gap: 16px;
    margin-bottom: 31px;
    padding: 18px 24px;
    border: 1px solid #F8D9C0;
    border-radius: 13px;
    background-color: #FFF7F1;
    color: var(--black-color);
    transition: var(--transition);
}

.due-overview[hidden] {
    display: none;
}

.due-overview:hover,
.due-overview:focus-visible {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    outline: none;
}

.due-overview__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 24px;
}

.due-overview__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.due-overview__text small {
    font-weight: 500;
    font-size: 16px;
    color: var(--text-slate);
}

.due-overview__text small span {
    font-size: 13px;
}

.due-overview__text strong {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: var(--primary-color);
}

.due-overview__meta {
    font-size: 14px;
    color: var(--text-slate);
}

.due-overview__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-color);
}

.due-overview:hover .due-overview__cta i {
    transform: translateY(2px);
}

.due-overview__cta i {
    transition: transform 0.2s ease;
}

/* nothing due: calm teal instead of orange */
.due-overview.is-clear {
    border-color: #BFE3D4;
    background-color: #EFF9F2;
}

.due-overview.is-clear .due-overview__icon {
    background-color: var(--secondary-color);
}

.due-overview.is-clear strong,
.due-overview.is-clear .due-overview__cta {
    color: var(--secondary-color);
}

/* stacked payment cards (committee-member): normal card gap, 90px only after the last */
.payment-history:not(:last-child) {
    margin-bottom: 31px;
}

/* card heading with a one-line description (committee-member) */
.payment-history__head {
    margin-bottom: 32px;
}

.payment-history__head .member-details-card__title {
    margin-bottom: 8px;
}

.member-details-card__title small {
    font-weight: 500;
    font-size: 0.72em;
    color: var(--text-slate);
}

.payment-history__desc {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-slate);
}

.payment-tabs {
    display: flex;
    align-items: flex-end;
    margin-bottom: 18px;
}

.payment-tab {
    background-color: #F9F9F9;
    color: var(--text-gray);
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    border: 1px solid var(--border-color);
    border-radius: 12px 0px 0 0;
    padding: 14px 28px;
    min-width: 190px;
    height: 50px;
    cursor: pointer;
    transition: .2s height;
}

.payment-tab:nth-child(2) {
    border-radius: 0px 12px 0 0;
}

.payment-tab.is-active {
    background-color: var(--white-color);
    color: var(--black-color);
    font-weight: 600;
    border-color: var(--border-color);
    border-top: 3px solid var(--secondary-color);
    height: 62px;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.payment-tab-content {
    opacity: 0;
    transform: translateY(14px);
}

.payment-tab-content.is-animating {
    animation: paymentTabFadeUp 0.35s ease forwards;
}

@keyframes paymentTabFadeUp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.payment-table {
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 16px;
}

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

table th,
table td {
    padding: 16px 24px;
    border: 1px solid #edf1f5;
}

table th {
    background-color: var(--secondary-color);
    color: var(--white-color);
    font-weight: 600;
    font-size: 18px;
    line-height: 22.5px;
}

table td {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0px;
    color: var(--black-color);
}

.payment-checkbox {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 2px solid var(--border-color);
    background-color: var(--white-color);
    cursor: pointer;
}

.payment-checkbox::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    color: transparent;
}

.payment-checkbox:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.payment-checkbox:checked::after {
    color: var(--white-color);
}

/* "select all" text next to the header checkbox — shown only in the mobile card layout */
.payment-table__check-label {
    display: none;
}

/* item count on the Due / Paid tabs (user-profile) */
.payment-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: var(--radius-full);
    background-color: var(--teal-color-light);
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
}

.payment-tab__count[hidden] {
    display: none;
} 

/* "select all" when only some due items are ticked */
.payment-checkbox:indeterminate {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.payment-checkbox:indeterminate::after {
    content: '\f068';
    color: var(--white-color);
}

.payment-table--components .payment-table__check {
    width: 64px;
}

/* fixed "કુલ બાકી રકમ" footer row — always the full due, whatever is ticked */
.payment-table--components .payment-table__total-row td {
    background-color: var(--white-color);
    border-top: 2px solid var(--border-color);
    font-weight: 700;
    color: var(--black-color);
}

.payment-table--components .payment-table__total-label {
    text-align: right;
    font-size: 18px;
}

.payment-table--components .payment-table__total-label small {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-slate);
}

/* narrow, centred "ક્રમ" (row number) column */
.payment-table--components .payment-table__no {
    width: 64px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
}

.payment-table--components .payment-table__amount {
    text-align: right;
    white-space: nowrap;
}

.payment-table--components td.payment-table__amount {
    font-weight: 600;
}

.payment-type {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-type__name {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    color: var(--black-color);
}

.payment-type__native {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: var(--black-color);
}

.payment-table--components td.payment-table__detail {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--black-color);
}

/* ticked due items get a very light green row; unticked ones keep the default look */
.payment-table--due tbody tr:not(.is-unselected) td {
    background-color: #EFF9F2;
    transition: background-color 0.2s ease;
}

.payment-summary__meta {
    margin-left: 4px;
    font-size: 0.85em;
}

.payment-summary__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.payment-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 20px;
    border: 1.5px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-slate);
    font-size: 16px;
    text-align: center;
}

.payment-empty i {
    font-size: 32px;
    color: var(--secondary-color);
}

.payment-status {
    font-weight: 600;
}

.payment-status--due {
    color: var(--primary-color);
}

.payment-status--paid {
    color: var(--secondary-color);
}

.payment-receipt--none {
    color: var(--text-gray);
}

.payment-receipt--download {
    display: inline-flex;
    color: var(--secondary-color);
    font-size: 20px;
}

.payment-receipt--download:hover {
    color: var(--secondary-color-dark);
}

.member-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #E8F8F4;
    color: var(--black-color);
    font-weight: 500;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0px;
    vertical-align: middle;
    border-radius: var(--radius-full);
    padding: 4px 8px;
    margin-left: 4px;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.member-badge:hover,
.member-badge:focus-visible {
    background-color: var(--teal-color-light);
    color: var(--secondary-color);
    transform: translateY(-1px);
    outline: none;
}

/* member-badge tooltip: family/dependent members popup */
.member-badge-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    min-width: 200px;
    max-width: 260px;
    background-color: var(--black-color);
    color: var(--white-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 12px 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.member-badge-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.member-badge-tooltip__arrow {
    position: absolute;
    bottom: -5px;
    left: var(--arrow-left, 50%);
    width: 10px;
    height: 10px;
    background-color: var(--black-color);
    transform: translateX(-50%) rotate(45deg);
}

.member-badge-tooltip__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--teal-color-light);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.member-badge-tooltip__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.member-badge-tooltip__list li {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    font-weight: 400;
    line-height: 140%;
    color: var(--white-color);
}

.member-badge-tooltip__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

/* secondary line under a name, e.g. the village (user-profile expired members) */
.member-badge-tooltip__meta {
    display: block;
    font-size: 12px;
    color: #CBD5E1;
}

/* tooltip placed below its badge (not enough room above): arrow points up */
.member-badge-tooltip.is-below .member-badge-tooltip__arrow {
    top: -5px;
    bottom: auto;
}

/* "👤 10 સભ્યો" badge under the Expired Member Contribution name — a <button> that opens
   the expired members popup (expired-members-modal.blade.php) */
.payment-type__members {
    align-self: flex-start;
    margin: 6px 0 0;
    padding: 5px 10px;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

/* ===== Expired members popup ===== */
html.members-modal-open,
html.members-modal-open body {
    overflow: hidden;
}

.members-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: rgba(17, 17, 17, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.members-modal[hidden] {
    display: none;
}

.members-modal.is-open {
    opacity: 1;
}

.members-modal__dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: min(640px, 85vh);
    border-radius: 16px;
    background-color: var(--white-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.2s ease;
}

.members-modal.is-open .members-modal__dialog {
    transform: none;
}

.members-modal__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.members-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background-color: var(--teal-color-light);
    color: var(--secondary-color);
    font-size: 18px;
}

.members-modal__heading {
    flex: 1;
    min-width: 0;
}

.members-modal__title {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--black-color);
}

.members-modal__title small {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-slate);
}

.members-modal__subtitle {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-gray);
}

.members-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-full);
    background-color: #F5F6F7;
    color: var(--black-color);
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
}

.members-modal__close:hover,
.members-modal__close:focus-visible {
    background-color: var(--primary-color);
    color: var(--white-color);
    outline: none;
}

.members-modal__list {
    list-style: none;
    margin: 0;
    padding: 8px 20px 16px;
    max-height: 280px; /* ~3 members (name + village + date) visible, rest scrolls */
    overflow-y: auto;
    overscroll-behavior: contain;
    counter-reset: expired-member;
    scrollbar-width: thin;
}

.members-modal__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0 12px 40px;
    border-bottom: 1px solid #F1F5F9;
    counter-increment: expired-member;
}

.members-modal__item:last-child {
    border-bottom: none;
}

/* running number in a small circle */
.members-modal__item::before {
    content: counter(expired-member);
    position: absolute;
    top: 12px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background-color: #F5F6F7;
    color: var(--text-slate);
    font-family: var(--font-en);
    font-weight: 600;
    font-size: 12px;
}

.members-modal__name {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: var(--black-color);
}

.members-modal__village {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-gray);
}

.members-modal__village i {
    font-size: 11px;
    color: var(--secondary-color);
}

.payment-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 34px;
    margin-top: 22px;
}

.payment-summary__total {
    display: flex;
    align-items: center;
    gap: 12.55px;
}

.payment-summary__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 49.43px;
    height: 49.43px;
    border-radius: var(--radius-full);
    background-color: #E8F8F4;
    color: var(--secondary-color);
    font-size: 22px;
}

.payment-summary__text small {
    display: block;
    color: var(--text-gray);
    font-weight: 400;
    font-size: 20.4px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 5px;
}

.payment-summary__text strong {
    font-weight: 700;
    font-size: 22px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--secondary-color);
}

.payment-summary__btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background-color: var(--secondary-color);
    color: var(--white-color);
    border: none;
    border-radius: 10px;
    padding: 13px 22px;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    cursor: pointer;
    transition: var(--transition);
}

.payment-summary__btn:hover {
    background-color: var(--secondary-color-dark);
}

/* ===================================
   member-registration
=================================== */
.reg-section {
    padding-top: 10px;

    .paragraph {
        margin-top: 16px;
    }
}

/* -- Stepper -- */
.reg-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    list-style: none;
    margin: 30px auto;
    padding: 0;
    width: 80%;
}

.reg-step-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.reg-step-item__line {
    position: absolute;
    top: 22px;
    left: -50%;
    width: 100%;
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}

.reg-step-item:first-child .reg-step-item__line {
    display: none;
}

.reg-step-item__circle {
    position: relative;
    z-index: 2;
    width: 46.25px;
    height: 46.25px;
    border-radius: var(--radius-full);
    background-color: #efeff0;
    border: 4px solid var(--white-color);
    box-shadow: 0px 2.31px 4.62px 0px #04147C26;
    color: var(--text-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    transition: var(--transition);
}

.reg-step-item__circle i {
    display: none;
    font-size: 15px;
}

.reg-step-item__label {
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    color: var(--text-gray);
}

.reg-step-item__label small {
    display: block;
    color: var(--black-color);
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    margin-top: 2px;
}

/* Step states (Figma): previous = teal, current = white, next = grey.
   Every circle keeps the white border; only colours change per state. */

/* next steps (default) — grey circle, muted label, dashed line leading in */
.reg-step-item__line {
    background: repeating-linear-gradient(90deg, #C4C9D1 0 6px, transparent 6px 12px);
}

.reg-step-item:not(.is-active):not(.is-previous) .reg-step-item__label,
.reg-step-item:not(.is-active):not(.is-previous) .reg-step-item__label small {
    color: #9CA3AF;
}

/* previous steps — teal circle, white number, solid teal line */
.reg-step-item.is-previous .reg-step-item__circle {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

/* current step — white circle, dark number, solid teal line leading in */
.reg-step-item.is-active .reg-step-item__circle {
    background-color: var(--white-color);
    color: var(--black-color);
}

.reg-step-item.is-previous .reg-step-item__line,
.reg-step-item.is-active .reg-step-item__line {
    background: var(--secondary-color);
}

.reg-step-item.is-previous .reg-step-item__label,
.reg-step-item.is-active .reg-step-item__label {
    color: var(--black-color);
}

/* not reachable yet (only when step validation is enforced) */
.reg-step-item.is-locked {
    cursor: not-allowed;
}

/* -- Step panels -- */
.reg-step-panel {
    display: none;
    margin-bottom: 24px;
}

.reg-step-panel.is-active {
    display: block;
    animation: paymentTabFadeUp 0.35s ease forwards;
}

/* -- Card head -- */
.reg-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 31px;
}

.reg-card__head-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.reg-card__icon {
    flex-shrink: 0;
    width: 59px;
    height: 59px;
    border-radius: var(--radius-full);
    background: linear-gradient(0deg, #EFEFF0, #EFEFF0);
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.reg-card__icon--sm {
    width: 30px;
    height: 30px;
    font-size: 13px;
}

.reg-card__title {
    font-family: var(--font-en);
    font-weight: 500;
    font-size: 26px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--black-color);
    margin-bottom: 4px;
}

.reg-card__title-native {
    font-family: var(--font-body);
}

.reg-card__subtitle {
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0%;
    color: var(--text-slate);
}

.reg-required-note {
    color: var(--pink-color);
    white-space: nowrap;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0px;
}

.reg-subheading {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: var(--black-color);
    margin: 16px 0 10px;
}

.reg-subheading--icon {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0px;
    margin-bottom: 26px;
}

.reg-subheading--icon i {
    width: 59px;
    height: 59px;
    border-radius: var(--radius-full);
    background: linear-gradient(0deg, #EFEFF0, #EFEFF0);
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.reg-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 32px 0;
}

.reg-or {
    text-align: center;
    color: var(--text-gray);
    font-size: 12px;
    font-weight: 600;
    margin: 18px 0;
    text-transform: uppercase;
}

/* -- Form grid / fields (shared by most steps) -- */
.reg-grid {
    display: grid;
    gap: 18px 20px;
    margin-bottom: 12px;
}

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

.reg-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.reg-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.reg-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
}

.reg-field label {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0px;
    /* font-family: var(--font-en); */
    color: var(--black-color);
}

.reg-field .req {
    color: var(--pink-color);
    margin-left: 2px;
}

.reg-field input,
.reg-field select {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    color: var(--black-color);
    background-color: var(--white-color);
    transition: var(--transition);
}

/* one height for every single-line field (text, date, number, select), so
   selects line up with inputs regardless of font metrics */
.reg-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.reg-field select {
    height: 48px;
}

.reg-field input::placeholder {
    color: #A8ADB4;
}

.reg-field input:focus,
.reg-field select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.reg-field input:disabled,
.reg-field select:disabled {
    background-color: #F5F5F5;
    color: var(--text-gray);
}

.reg-field input[readonly] {
    background-color: #F1F5F9;
    color: var(--text-slate);
}

.reg-hint {
    font-weight: 400;
    font-size: 11px;
    line-height: 16.5px;
    letter-spacing: 0px;
    color: #94A3B8;
}

.reg-hint--count {
    align-self: flex-end;
}

/* -- Inline field validation message (shown under the field) -- */
.reg-error {
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    color: var(--pink-color);
}

.reg-field.has-error input:not([type="checkbox"]):not([type="radio"]),
.reg-field.has-error select,
.reg-field.has-error .select2-container--default .select2-selection--single {
    border-color: var(--pink-color);
}

.reg-field--btn {
    justify-content: flex-end;
}

/* -- Input group (icon / prefix / suffix attached to input) -- */
.reg-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition);
}

.reg-input-group:focus-within {
    border-color: var(--primary-color);
}

.reg-input-group input {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--black-color);
}

/* the group's own 1px top/bottom border makes up the 48px field height */
.reg-field .reg-input-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    height: 46px;
}

.reg-input-group input:focus {
    outline: none;
}

.reg-input-group__prefix,
.reg-input-group__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background-color: #F5F6F7;
    color: var(--text-gray);
    font-size: 14px;
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
}

.reg-input-group__suffix {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background-color: #F5F6F7;
    color: var(--text-gray);
    font-size: 14px;
    border-left: 1px solid var(--border-color);
    flex-shrink: 0;
}

.reg-field--icon .reg-input-group input[type="date"] {
    direction: ltr;
}

/* Date fields use Flatpickr (no native calendar button), so the icon is always
   shown and opens the picker (member-registration.blade.php). */
.reg-field--icon .reg-input-group__icon {
    cursor: pointer;
}

.reg-field--icon .reg-input-group input.flatpickr-input {
    cursor: pointer;
}

.reg-next,
.reg-back {
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    border-radius: 8px;
}

/* -- Radio group -- */
.reg-radio-group {
    display: flex;
    align-items: center;
    gap: 18px;
}

.reg-radio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--black-color);
    cursor: pointer;
}

.reg-radio input {
    accent-color: var(--primary-color);
    width: 16px;
    height: 16px;
}

/* -- Checkbox -- */
.reg-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--black-color);
    cursor: pointer;
    margin-bottom: 20px;
}

.reg-checkbox input {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}


/* -- Avatar upload row (left-aligned, below the card heading) -- */
.reg-photo-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 0;
}

.reg-photo-row .reg-avatar-upload {
    margin-right: auto;
}

/* -- Avatar upload -- */
.reg-avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 210px;
    gap: 6px;
    margin-bottom: 24px;
}

.reg-avatar-upload__circle {
    position: relative;
    width: 120px;
    height: 120px;
    cursor: pointer;
}

.reg-avatar-upload__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    background-color: #D9D9D9;
    border: 3px solid #FFFFFF;
    box-shadow: 0px 1px 4.5px 0px #00000012;
    color: #7E7E7E;
    font-size: 58px;
    overflow: hidden;
}

.reg-avatar-upload__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reg-avatar-upload__badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background-color: #F1F5F9;
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.reg-avatar-upload__label {
    font-weight: 500;
    font-size: 14px;
    line-height: 19.09px;
    letter-spacing: -0.33px;
    font-family: var(--font-en);
    color: #1E293B;
}

.reg-avatar-upload__hint {
    font-weight: 400;
    font-size: 12px;
    line-height: 15.27px;
    letter-spacing: 0px;
    color: #94A3B8;
}

/* Font Awesome sets `display` on icons, which would override the [hidden] attribute */
.reg-avatar-upload [hidden] {
    display: none !important;
}

.reg-avatar-upload__error {
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: var(--pink-color);
}

/* -- Fee / info boxes (step 1) -- */
.reg-fee-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #F8FAFC;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #F1F5F9;
}

.reg-fee-box__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background-color: var(--orange-color-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.reg-fee-box strong {
    display: block;
    font-size: 13.5px;
    color: var(--black-color);
}

.reg-fee-box p {
    font-size: 12px;
    color: var(--text-gray);
    margin: 3px 0 6px;
}

.reg-info-box {
    background-color: #FFF7ED;
    border-radius: 12px;
    padding: 14px;
    font-size: 12px;
    color: var(--text-slate);
    border: 1px solid #FFEDD5;
}

.reg-info-box>i {
    color: var(--primary-color-dark);
    margin-top: 2px;
}

.reg-info-box strong {
    display: block;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0px;
    color: var(--primary-color-dark);
    margin-bottom: 6px;
}

.reg-info-box__grid {
    display: flex;
    gap: 21.5px;
}

.reg-info-box__grid div {
    text-align: center;
    flex: 1;
    background-color: var(--white-color);
    border-radius: 7px;
    padding: 10px 16px;
}

.reg-info-box__grid div {
    border: 1.5px solid transparent;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.reg-info-box__grid div.is-active {
    background-color: #FFEDD5;
    border-color: var(--primary-color-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.reg-info-box__grid div.is-active strong {
    color: var(--primary-color-dark);
}

.reg-input-group.is-locked .flatpickr-input,
.reg-input-group.is-locked .reg-input-group__icon {
    cursor: not-allowed;
}

.reg-info-box__grid span {
    color: var(--black-color);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0px;
    display: block;
    margin-bottom: 10px;
}

.reg-info-box__grid strong {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
    line-height: 16px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: var(--black-color);
}

/* -- Info badge (nominee share note) -- */
.reg-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #EFF6FF;
    color: #0D6EFD;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 8px; 
    border: 1px solid #BFDBFECC;
}

/* -- Add-item buttons -- */
.reg-add-btn {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    white-space: normal;
    row-gap: 2px;
}

.reg-add-btn__main {
    white-space: nowrap;
}

.reg-add-btn__native {
    flex-basis: 100%;
    font-weight: 400;
    font-size: 0.78em;
}

/* -- Empty state -- */
.reg-empty {
    text-align: center;
    padding: 32px 16px;
    border: 1px solid #CBD5E1CC;
    border-radius: 12px;
    color: var(--text-gray);
    margin-bottom: 30px;
    background: #FAFBFC;
}

.reg-empty i {
    display: block;
    font-size: 24px;
    color: #CBCBCB;
    width: 63px;
    height: 63px;
    border-radius: var(--radius-full);
    background-color: #EFEFF0;
    display: grid;
    place-items: center;
    margin: auto;
    font-size: 30px;
    color: var(--black-color);
}

.reg-empty strong {
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #334155;
    margin-top: 15px;
    margin-bottom: 6px;
}

.reg-empty span {
    font-weight: 400;
    font-size: 12px;
    line-height: 16.5px;
    letter-spacing: 0px;
    color: #64748B;
}

/* -- Generic table (family / nominee / preview) -- */
.reg-table-wrap {
    overflow-x: auto;
    margin-bottom: 18px;
}

.reg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.reg-table th {
    text-align: left;
    padding: 10px 12px;
    background-color: #F7F7F5;
    color: var(--text-gray);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color);
}

.reg-table td {
    padding: 10px 12px;
    color: var(--black-color);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
}

.reg-remove-btn {
    border: none;
    background: none;
    color: var(--pink-color);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
}

/* -- Family / nominee add-entry flow (step 3) -- */
.reg-info-badge small {
    display: block;
    font-weight: 400;
    font-size: 11px;
    color: #475569; 
}

.reg-entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.reg-entry-head .reg-subheading {
    margin: 0;
}

.reg-entry-toggle {
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    background-color: var(--white-color);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
}

.reg-entry-toggle i {
    font-size: 18px;
}

.reg-entry-toggle__native {
    font-weight: 500;
}

.reg-entry-toggle:hover,
.reg-entry-toggle.is-active {
    background-color: var(--orange-color-light);
}

.reg-entry-form {
    background-color: #F0F6FFB2;
    border: 1px solid #DBEAFEE5;
    border: 1px solid #E1EAF7;
    border-radius: 12px;
    padding: 16px 16px 4px;
    margin-bottom: 20px;
    animation: paymentTabFadeUp 0.3s ease forwards;
}

.reg-entry-form[hidden] {
    display: none;
}

.reg-entry-form__title {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: var(--black-color);
    margin-bottom: 14px;
}

.reg-entry-grid {
    display: grid;
    gap: 0 20px;
}

.reg-entry-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.reg-entry-grid--family,
.reg-entry-grid--nominee {
    grid-template-columns: 1fr 1fr auto;
}

.reg-entry-submit {
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    white-space: nowrap;
}

.reg-entry-submit i {
    font-size: 14px;
}

/* Share input: suffix blends into the field instead of a grey add-on */
.reg-input-group--plain {
    background-color: var(--white-color);
}

.reg-input-group--plain input,
.reg-input-group--plain input[readonly] {
    background-color: var(--white-color);
    color: var(--black-color);
    font-size: 16px;
}

.reg-input-group--plain .reg-input-group__suffix {
    background-color: var(--white-color);
    border-left: none;
    color: var(--black-color);
}

/* Custom select with chevron */
.reg-select,
.reg-combobox {
    position: relative;
}

/* same 16px text as the regular inputs they sit next to */
.reg-select select,
.reg-combobox input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
}

.reg-select select {
    cursor: pointer;
    /* fixed 48px height: zero vertical padding + normal line-height centres mixed English/Gujarati text */
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
    display: flex;
    align-items: center;
}

/* empty choice reads like an input placeholder; the option list stays dark */
.reg-select select:has(option[value=""]:checked) {
    color: #A8ADB4;
}

.reg-select select option {
    color: var(--black-color);
}

.reg-select__arrow,
.reg-combobox__arrow {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-slate);
    pointer-events: none;
}

/* Themed option list for the plain selects (Chromium 135+ customizable select).
   Other browsers keep their native list; nothing else about the field changes. */
@supports (appearance: base-select) {
    .reg-select select,
    .reg-select select::picker(select) {
        appearance: base-select;
    }

    /* option list only: the field's own chevron and layout stay as they were */
    .reg-select select::picker-icon {
        display: none;
        content: none;
        width: 0;
        margin: 0;
        font-size: 0;
        visibility: hidden;
        position: absolute;
    }

    .reg-select select::picker(select) {
        margin-top: 4px;
        padding: 6px;
        max-height: 280px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background-color: var(--white-color);
        box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14);
    }
    .reg-select select option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 6px;
        font-size: 15px;
        color: var(--black-color);
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    /* drop the UA focus ring (black border) on the keyboard-focused / first option */
    .reg-select select option:focus,
    .reg-select select option:focus-visible {
        outline: none;
    }

    .reg-select select option::checkmark {
        display: none;
    }

    /* the empty "Select ..." entry reads as a hint */
    .reg-select select option[value=""] {
        color: var(--text-gray);
    }

    .reg-select select option:hover,
    .reg-select select option:focus {
        background-color: #FFF1E8;
        color: var(--primary-color-dark);
    }

    .reg-select select option:checked {
        background-color: #FFE3D1;
        color: var(--primary-color-dark);
        font-weight: 500;
    }

    .reg-select select:open {
        border-color: var(--primary-color);
    }
}

/* Address dropdowns: select2 skinned to match the regular 48px form fields */
.reg-select--s2 .select2-container {
    width: 100% !important;
}

.reg-select--s2 .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 48px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--white-color);
    transition: var(--transition);
}

.reg-select--s2 .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 40px 0 14px;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: var(--black-color);
}

.reg-select--s2 .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #A8ADB4;
}

.reg-select--s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 10px;
    height: 46px;
}

.reg-select--s2 .select2-container--default.select2-container--focus .select2-selection--single,
.reg-select--s2 .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary-color);
}

.reg-select--s2 .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #F5F5F5;
    cursor: not-allowed;
}

.reg-select--s2 .select2-container--default.select2-container--disabled .select2-selection__rendered {
    color: var(--text-gray);
}

body .reg-s2-dropdown.select2-dropdown {
    margin-top: 4px;
    border-color: var(--border-color);
    border-radius: 8px;
    background-color: var(--white-color);
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14);
    overflow: hidden;
    font-size: 15px;
}

body .reg-s2-dropdown .select2-search--dropdown {
    padding: 8px 8px 2px;
}

body .reg-s2-dropdown .select2-search--dropdown .select2-search__field {
    height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 15px;
}

body .reg-s2-dropdown .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--primary-color);
}

body .reg-s2-dropdown .select2-results > .select2-results__options {
    padding: 6px;
    max-height: 280px;
}

body .reg-s2-dropdown .select2-results__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--black-color);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body .reg-s2-dropdown .select2-results__option.select2-results__message {
    color: var(--text-gray);
    cursor: default;
}

body .reg-s2-dropdown .select2-results__option--highlighted[aria-selected],
body .reg-s2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #FFF1E8;
    color: var(--primary-color-dark);
}

body .reg-s2-dropdown .select2-results__option[aria-selected=true],
body .reg-s2-dropdown .select2-results__option--selected {
    background-color: #FFE3D1;
    color: var(--primary-color-dark);
    font-weight: 500;
}

/* selected + hovered keeps the selected look */
body .reg-s2-dropdown .select2-results__option--highlighted[aria-selected=true],
body .reg-s2-dropdown .select2-results__option--highlighted.select2-results__option--selected {
    background-color: #FFE3D1;
    color: var(--primary-color-dark);
}

/* Searchable member dropdown */
.reg-combobox__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 6px;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.reg-combobox__option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.reg-combobox__option:hover {
    background-color: var(--bg-cream);
}

.reg-combobox__option strong {
    font-weight: 500;
    font-size: 14px;
    color: var(--black-color);
}

.reg-combobox__option small,
.reg-combobox__empty {
    font-size: 12px;
    color: var(--text-gray);
}

.reg-combobox__empty {
    padding: 8px 10px;
}

/* Entry table (teal header, bordered cells) */
.reg-table-wrap--entry {
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.reg-table--entry th {
    background-color: var(--secondary-color);
    color: var(--white-color);
    font-weight: 500;
    font-size: 16px;
    padding: 14px 12px;
    border-bottom: none;
}

.reg-table--entry th+th,
.reg-table--entry td+td {
    border-left: 1px solid var(--border-color);
}

.reg-table--entry th:first-child,
.reg-table--entry td:first-child {
    text-align: center;
    width: 76px;
}

.reg-table--entry th:last-child,
.reg-table--entry td:last-child {
    text-align: center;
    width: 142px;
}

.reg-table--entry td {
    padding: 16px 12px;
    font-weight: 400;
    font-size: 16px;
    white-space: nowrap;
}

.reg-table--entry tbody tr:last-child td {
    border-bottom: none;
}

.reg-table--entry .reg-table__share {
    color: var(--secondary-color);
    font-weight: 500;
}

.reg-hint--done {
    color: #12B76A;
}

.reg-hint--over {
    color: var(--pink-color);
}

.reg-share-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.reg-share-input {
    width: 84px;
    padding: 6px 8px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 14px;
    text-align: right;
}

.reg-share-input:focus {
    outline: none;
    border-color: var(--primary-color-dark);
}

.reg-table--entry .reg-share-total__label {
    text-align: right;
    font-weight: 600;
}

.reg-table--entry .reg-share-total {
    font-weight: 700;
    color: #12B76A;
}

.reg-table--entry .reg-share-total.is-invalid {
    color: var(--pink-color);
}

#nomShareError {
    display: block;
    margin-top: 6px;
}

#nomShareError[hidden] {
    display: none;
}

.reg-table--entry .reg-table__address {
    max-width: 220px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.reg-table--entry .reg-remove-btn {
    color: var(--primary-color);
    font-size: 20px;
}

/* -- Document dropzone / rows (step 4) -- */
.reg-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 40px 20px;
    color: var(--text-gray);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    background-color: #FAFBFC;
    cursor: pointer;
    margin: 16px 0 20px;
    transition: var(--transition);
    height: 189px;

    i {
        width: 59px;
        height: 59px;
        border-radius: var(--radius-full);
        font-size: 30px;
        display: grid;
        place-items: center;
        background: linear-gradient(0deg, #EFEFF0, #EFEFF0);
    }
}

.reg-dropzone:hover,
.reg-dropzone.is-dragover {
    border-color: var(--primary-color);
    background-color: var(--orange-color-light);
}

.reg-dropzone.is-dragover i {
    color: var(--primary-color);
}

.reg-dropzone i {
    font-size: 26px;
    color: #A0A0A0;
}

.reg-doc-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.reg-doc-row--compact {
    padding: 10px 14px;
    margin-bottom: 10px;
    border-color: var(--border-color);
    background-color: #FAFBFC;
}

.reg-doc-row--compact .reg-doc-row__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    color: var(--black-color);
}

.reg-doc-row--compact .profile-badge.reg-doc-row__badge {
    background-color: transparent;
    color: #047857;
    padding: 0;
    font-weight: 600;
}

.reg-doc-row--compact .reg-doc-row__action {
    background-color: transparent;
    color: var(--black-color);
}

.reg-doc-row--compact .reg-doc-row__action:hover {
    background-color: transparent;
    color: var(--secondary-color);
}

.reg-doc-row__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--orange-color-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.reg-doc-row__info {
    flex: 1;
    min-width: 120px;
}

.reg-doc-row__info strong {
    display: block;
    font-size: 14px;
    color: var(--black-color);
    line-height: 20px;
}

.reg-doc-row__info small {
    font-size: 11.5px;
    color: var(--text-gray);
}

.reg-doc-row__badge {
    font-size: 12px;
    padding: 5px 10px;
}

.reg-doc-row__action {
    border: none;
    background-color: #F5F5F5;
    color: var(--text-slate);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.reg-doc-row__action:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

/* -- Actions row (Back / Next / Submit) -- */
.reg-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid #E2E8F0CC;
}

.reg-actions--end {
    justify-content: flex-end;
}

/* -- Preview / review step -- */
.reg-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    padding-top: 10px;
}

.reg-review-card {
    margin-bottom: 0;
    padding: 20px;
    box-shadow: 0px 1px 2px 0px #0000000D;
}

.reg-review-card--full {
    margin-top: 24px;
    margin-bottom: 24px;
}

.reg-review-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.reg-review-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.reg-review-card__head .reg-card__head-main {
    font-size: 15px;
    font-weight: 700;
    color: var(--black-color);
    gap: 10px;
}

.reg-edit-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #E0F2FE;
    background-color: #F0F9FF;
    color: #1D4ED8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: var(--transition);
}

.reg-edit-btn:hover {
    background-color: #1976D2;
    border-color: #1976D2;
    color: var(--white-color);
}

.reg-review-rows {
    display: flex;
    flex-direction: column;
    padding-top: 16px;
    border-top: 1px solid #F1F5F9
}

.reg-review-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #F8FAFC;
}

.reg-review-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.reg-review-row:first-child {
    padding-top: 0;
}

.reg-review-row span {
    color: var(--text-gray);
    flex-shrink: 0;
}

.reg-review-row strong {
    color: var(--black-color);
    font-weight: 600;
    text-align: right;
}

.reg-review-note {
    font-size: 13px;
    color: var(--text-gray);
}

.reg-important-text {
    font-size: 12.5px;
    color: var(--text-slate);
    line-height: 1.7;
}

.reg-confirm-checkbox {
    margin-top: 30px;
    padding: 16px 15px;
    background-color: #EFF6FF99;
    border: 1px solid #BAE6FDCC;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    color: var(--black-color);
}

.reg-confirm-checkbox__input {
    accent-color: #2563EB !important;
}

.main-review-step .reg-actions {
    padding-top: 27.5px;
}

/* -- Success panel -- */
.reg-success {
    text-align: center;
    margin: 40px auto 40px !important;
    padding: 44px 147px;
    background: radial-gradient(circle at top, #EEF9F3 0%, var(--white-color) 65%);
}

.reg-success__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 103px;
    height: 103px;
    border-radius: var(--radius-full);
    background: linear-gradient(0deg, #047857, #047857);
    color: var(--white-color);
    font-size: 54px;
    margin: 0 auto 20px;
}

.reg-success h3 {
    font-family: var(--font-en);
    font-weight: 500;
    font-size: 23px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--black-color);
    margin: 16px 0 11px;
}

.reg-success__native {
    font-weight: 500;
    font-size: 23px;
    line-height: 100%;
    color: #047857;
}

.reg-success__thanks {
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0px;
    color: var(--black-color);
    margin: 26px 0;
    line-height: 1.7;
}

.reg-success__id {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    text-align: left;
    margin-bottom: 26px;
}

.reg-success__id-icon {
    flex-shrink: 0;
    font-size: 30px;
    color: var(--black-color);
    margin-bottom: 10px;
}

.reg-success__id-label {
    flex: 1;
}

.reg-success__id strong {
    display: block;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--black-color);
    margin-bottom: 4px;
}

.reg-success__id small {
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--black-color);
}

.reg-success__id-box {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #F0F6FFB0;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 27px 26px;
}

.reg-success__id-value {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0%;
    line-height: 100%;
    color: var(--black-color);
}

.reg-copy-btn {
    flex-shrink: 0;
    border: none;
    background-color: transparent;
    width: 22px;
    height: 22px;
    color: var(--text-slate);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: var(--black-color);
}

.reg-copy-btn:hover {
    color: #1976D2;
}

/* brief "copied" tick (member-registration.blade.php) — same green as the success icon */
.reg-copy-btn.is-copied,
.reg-copy-btn.is-copied:hover {
    color: #047857;
}

.reg-success__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: left;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
    color: var(--black-color);
    padding-bottom: 27px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--border-color);
}

.reg-success__status-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--primary-color, #b3261e);
    font-weight: 600;
    text-decoration: underline;
}

.reg-success__note-icon {
    flex-shrink: 0;
    width: 49px;
    height: 49px;
    border-radius: var(--radius-full);
    background: linear-gradient(0deg, #EFEFF0, #EFEFF0);
    font-size: 25px;
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black-color);
}

.reg-success__home-btn {
    font-weight: 700;
}

/* ===================================
   8. Responsive
   -----------------------------------
   Desktop-first: every rule below lives inside a max-width media query, so
   the desktop design (≥1332px) is untouched. Blocks are grouped per section.

   Breakpoints
     1331px  header / nav bar (fixed 1284px) → fluid
     1288px  container (1240px + 2 × 24px gutter) → side gutters appear
     1200px  small desktop — header, nav & strips scaled to stay on one row
      992px  tablet — hamburger drawer, stacked layouts
      768px  mobile (Figma mobile frame)
      480px  small mobile
      380px  extra-small mobile

   Scales (shared across breakpoints)
     Spacing : 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48
     Type    : 12 / 14 / 16 / 18 / 20 / 24 / 28 / 34
     Gutter  : 24px (≤1331) → 20px (≤768, all mobile widths)
     Tap     : interactive targets ≥ 44px on touch layouts (≤992)
=================================== */

/* ===== 8.1 Responsive tokens ===== */
@media (max-width: 1331px) {
    :root {
        --gutter: 24px;
        --section-space: 60px;
    }
}

@media (max-width: 992px) {
    :root {
        --section-space: 48px;
    }
}

@media (max-width: 768px) {
    :root {
        --gutter: 20px;
        --section-space: 40px;
    }
}

@media (max-width: 480px) {
    :root {
        --section-space: 32px;
    }
}

/* ===== 8.2 Layout — equal left/right gutters on every section ===== */
@media (max-width: 1288px) {

    .container,
    .contact-page .container,
    .contact-section .container,
    .download-section .container,
    .member-login .container,
    .member-profile .container,
    footer .container {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    /* full-bleed gallery track lines up with the container gutter */
    .gallery-slider-wrap {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }
}

@media (max-width: 992px) {
    .container {
        padding-top: var(--section-space);
        padding-bottom: var(--section-space);
    }
}

/* ===== 8.3 Typography & Buttons (shared) ===== */
@media (max-width: 992px) {

    /* long Gujarati labels wrap instead of overflowing narrow screens */
    .btn {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .top-heading {
        gap: 6px;
    }

    .top-heading h5 {
        font-size: 20px;
    }

    .top-heading h3 {
        font-size: 28px;
        line-height: 1.2;
    }

    .paragraph {
        font-size: 16px;
    }

    .btn {
        min-height: 44px;
        font-size: 16px;
        padding: 11px 20px 9px;
    }
}

@media (max-width: 480px) {
    .top-heading h5 {
        font-size: 18px;
    }

    .top-heading h3 {
        font-size: 22px;
    }

    .btn {
        gap: 8px;
    }
}

/* ===== 8.4 Header & Navigation ===== */

/* -- Header: 1284px bar / nav become fluid -- */
@media (max-width: 1331px) {
    .header-top {
        width: auto;
        margin: 0 var(--gutter);
    }

    .main-nav {
        width: calc(100% - (var(--gutter) * 2));
        left: var(--gutter);
        padding: 16px 24px;
    }

    .nav-list {
        gap: 32px;
    }
}

/* -- Header: small desktop — scaled so brand + CTAs + nav stay on one row -- */
@media (max-width: 1200px) {
    .brand__logo {
        width: 88px;
        height: 88px;
    }

    .brand__title {
        font-size: 20px;
    }

    .brand__title-en {
        font-size: 13px;
    }

    .brand__subtitle {
        font-size: 11.5px;
    }

    .header-top__cta {
        padding: 10px 14px;
        gap: 10px;
    }

    .header-top__cta-icon {
        font-size: 24px;
    }

    .header-top__cta-text {
        font-size: 18px;
    }

    .header-top__cta-text small {
        font-size: 12px;
    }

    .main-nav {
        padding: 16px 20px;
    }

    .nav-list {
        flex-wrap: nowrap;
        gap: 20px;
    }

    .nav-list li a {
        font-size: 16px;
        white-space: nowrap;
    }
}

/* -- Header & Nav: tablet — brand row + CTA row, links move into a drawer -- */
@media (max-width: 992px) {
    .header-top {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 16px var(--gutter);
    }

    .header-top__inner {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    /* room on the right for the hamburger button */
    .brand {
        flex: 1 1 100%;
        min-width: 0;
        padding-right: 56px;
    }

    .brand__text {
        min-width: 0;
    }

    .brand__title,
    .brand__title-en,
    .brand__subtitle {
        line-height: 1.3;
        overflow-wrap: break-word;
    }

    .brand__logo {
        width: 64px;
        height: 64px;
    }

    .brand__title {
        font-size: 18px;
    }

    .brand__title-en {
        font-size: 12px;
    }

    .brand__subtitle {
        font-size: 11px;
    }

    .top-cta-buttons {
        flex: 1 1 100%;
        gap: 12px;
    }

    .header-top__cta {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        min-height: 48px;
        padding: 8px 12px;
        gap: 10px;
    }

    .header-top__cta-icon {
        font-size: 22px;
    }

    .header-top__cta-text {
        min-width: 0;
        font-size: 16px;
    }

    .header-top__cta-text small {
        font-size: 12px;
    }

    /* Floating nav bar (and its scroll-fixed state) collapses to just the toggle */
    .main-nav,
    .main-nav.is-fixed {
        position: static;
        width: auto;
        height: auto;
        top: auto;
        left: auto;
        transform: none;
        opacity: 1;
        padding: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        transition: none;
    }

    .main-nav__inner {
        position: static;
    }

    /* own stacking layer so the drawer + backdrop sit above every page section */
    .site-header {
        z-index: 1000;
    }

    /* Hamburger — positioned against .site-header, aligned to the brand row */
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 26px;
        right: var(--gutter);
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: var(--radius-full);
        font-size: 22px;
        z-index: 3;
    }

    /* Off-canvas drawer (slides in from the right) */
    .nav-list {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: min(320px, 86vw);
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        padding: 14px 0 24px;
        background-color: var(--white-color);
        box-shadow: var(--shadow-md);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
    }

    .nav-list.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.3s ease;
    }

    .nav-list li {
        width: 100%;
    }

    .nav-list li a {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        min-height: 52px;
        padding: 12px 24px;
        font-size: 16px;
        line-height: 1.3;
        white-space: normal;
        border-bottom: 1px solid var(--border-color);
        border-left: 3px solid transparent;
    }

    .nav-list li a.is-active {
        border-bottom-color: var(--border-color);
        border-left-color: var(--primary-color);
        background-color: var(--orange-color-light);
    }

    /* round logo at the top of the drawer, vertically centred with the ✕ button */
    .nav-list__brand {
        display: flex;
        align-items: center;
        min-height: 56px;
        padding: 0 24px 10px;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-list__brand .nav-list__brand-link {
        display: inline-flex;
        min-height: 0;
        padding: 0;
        border: none;
    }

    .nav-list__brand img {
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

    /* "Become a Member" / "Support Our Trust" — right after the links, one per line */
    .nav-list__actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 20px 24px 8px;
    }

    /* scoped as ".nav-list__actions .nav-list__cta" (2 classes) so this beats the
       ".nav-list li a" link styling (1 class + 2 elements) that would otherwise
       leak its border-bottom / padding / min-height onto these buttons */
    .nav-list__actions .nav-list__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        gap: 12px;
        min-height: 52px;
        padding: 8px 16px;
        border: 2px solid var(--primary-color);
        border-radius: 10px;
        background-color: var(--white-color);
        color: var(--primary-color);
        transition: var(--transition);
        white-space: normal;
    }

    .nav-list__actions .nav-list__cta:hover {
        background-color: var(--orange-color-light);
    }

    .nav-list__actions .nav-list__cta--primary {
        background-color: var(--primary-color);
        color: var(--white-color);
    }

    .nav-list__actions .nav-list__cta--primary:hover {
        background-color: var(--primary-color-dark);
    }

    .nav-list__cta-icon {
        flex-shrink: 0;
        font-size: 20px;
        line-height: 0;
    }

    .nav-list__cta-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.3;
    }

    .nav-list__cta-text small {
        font-weight: 400;
        font-size: 12px;
        line-height: 1.3;
    }

    /* Drawer backdrop — clicking it closes the drawer (see header.blade.php) */
    .main-nav::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 1;
        background-color: rgba(34, 34, 34, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    .main-nav.is-drawer-open::before {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

    /* while open, the toggle (now a ✕) is pinned to the drawer's top-right corner */
    .main-nav.is-drawer-open .nav-toggle {
        position: fixed;
        top: 16px;
        background-color: var(--bg-cream);
        color: var(--primary-color);
    }

    html.nav-drawer-open,
    html.nav-drawer-open body {
        overflow: hidden;
    }
}

/* -- Header: mobile (Figma) — sticky single row: logo · 2 icon CTAs · hamburger -- */
@media (max-width: 768px) {

    /* in-page anchors (#community, #villages…) land below the sticky header */
    html {
        scroll-padding-top: 72px;
    }

    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: var(--shadow-sm);
    }

    .header-top {
        padding: 10px calc(var(--gutter) + 56px) 10px var(--gutter);
    }

    .header-top__inner {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .brand {
        flex: 0 0 auto;
        padding-right: 0;
    }

    .brand__logo {
        width: 54px;
        height: 54px;
    }

    /* Logo only (per Figma) — the name stays available to screen readers
       and is repeated in the footer. */
    .brand__text,
    .header-top__cta-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .top-cta-buttons {
        flex: 0 0 auto;
        margin-left: auto;
        gap: 10px;
    }

    .header-top__cta {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        gap: 0;
        border-radius: var(--radius-full);
    }

    .header-top__cta-icon {
        font-size: 18px;
        line-height: 1;
    }

    .nav-toggle,
    .main-nav.is-drawer-open .nav-toggle {
        top: 16px;
    }

    .nav-list {
        width: min(300px, 86vw);
        padding-top: 14px;
    }
}

/* ===== 8.5 Hero Slider & Features Strip ===== */

/* -- Hero: arrows move to the bottom controls row once the text reaches the gutter -- */
@media (max-width: 1288px) {
    .hero-arrow {
        top: auto;
        bottom: 12px;
        transform: none;
    }

    .hero-arrow--prev {
        left: var(--gutter);
    }

    .hero-arrow--next {
        right: var(--gutter);
    }

    .hero-dots {
        bottom: 29px;
    }
}

/* -- Hero features: small desktop — 5 items fit without clipping -- */
@media (max-width: 1200px) {
    .feature-card {
        gap: 10px;
        padding: 0 8px;
    }

    .feature-card__icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .feature-card__label {
        font-size: 18px;
        line-height: 1.3;
    }
}

/* -- Hero: tablet — slides stack in one grid cell so height follows content -- */
@media (max-width: 992px) {
    .hero-slider {
        display: grid;
        height: auto;
        touch-action: pan-y;
    }

    .hero-slide {
        position: relative;
        inset: auto;
        grid-area: 1 / 1;
        min-height: 440px;
        background-position: 80% center;
    }

    /* left fade keeps text legible, bottom fade blends into the features strip */
    .hero-slide__overlay {
        background:
            linear-gradient(90deg, rgba(253, 247, 245, 0.9) 0%, rgba(253, 247, 245, 0.6) 40%, rgba(253, 247, 245, 0) 65%),
            linear-gradient(180deg, rgba(253, 247, 245, 0) 75%, var(--bg-cream) 100%);
    }

    .container.hero-slide__content {
        min-width: 0;
        padding-top: 40px;
        padding-bottom: 72px;
    }

    .hero-slide__content>* {
        max-width: 55%;
    }

    .hero-tag,
    .hero-title,
    .hero-subtitle,
    .hero-keywords {
        overflow-wrap: break-word;
    }

    .hero-tag {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .hero-title {
        font-size: 34px;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .hero-keywords {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .hero-actions {
        gap: 12px;
    }

    /* 5 feature points become a swipeable strip instead of wrapping */
    .container.hero-features__inner {
        display: flex;
        gap: 0;
        padding-top: 16px;
        padding-bottom: 16px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hero-features__inner::-webkit-scrollbar {
        display: none;
    }

    .feature-card {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 0 20px 0 0;
        margin-right: 20px;
    }

    .feature-card:last-child {
        padding-right: 0;
        margin-right: 0;
    }

    .feature-card__icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .feature-card__label {
        font-size: 16px;
        white-space: nowrap;
    }
}

/* -- Hero: mobile (Figma) — text on the left, deity on the right, stacked CTAs -- */
@media (max-width: 768px) {
    .hero-slide {
        min-height: 340px;
        background-position: 62% center;
    }

    .container.hero-slide__content {
        padding-top: 24px;
        padding-bottom: 52px;
    }

    .hero-slide__content>* {
        max-width: 62%;
    }

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

    .hero-title {
        font-size: 26px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    /* darker than desktop grey so it stays legible over the artwork */
    .hero-subtitle {
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 8px;
        color: var(--black-color);
    }

    .hero-keywords {
        font-size: 16px;
        margin-bottom: 16px;
    }

    /* buttons may run past the text column so each label stays on one line */
    .hero-slide__content>.hero-actions {
        max-width: 100%;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .hero-actions .btn {
        padding: 10px 20px 8px;
        white-space: nowrap;
    }

    /* touch swipe + dots replace the prev / next arrows on mobile */
    .hero-arrow {
        display: none;
    }

    .hero-dots {
        bottom: 20px;
    }

    .hero-dots__dot {
        position: relative;
    }

    .hero-dots__dot::after {
        content: '';
        position: absolute;
        inset: -17px -5px;
    }

    /* features strip auto-scrolls in a loop (hero.blade.php); snapping would fight it */
    .hero-features__inner.is-auto-scrolling {
        scroll-snap-type: none;
    }
}

@media (max-width: 480px) {
    .hero-slide {
        min-height: 300px;
    }

    .hero-slide__content>* {
        max-width: 64%;
    }

    .hero-tag {
        font-size: 14px;
    }

    .hero-title {
        font-size: 22px;

        br{
            display: none;
        }
    }

    /* short English tagline stays on one line (Figma) */
    .hero-slide__content>.hero-subtitle {
        max-width: 100%;
        font-size: 12px;
        font-weight: 600;
        background-color: #fdf7f3ab;
        padding: 3px 6px 3px 0px;
        border-radius: 5px;
        display: none;
    }

    .hero-keywords {
        font-size: 14px;

        br{
            display: none;
        }
    }

    .container.hero-features__inner {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .feature-card {
        gap: 8px;
        padding-right: 16px;
        margin-right: 16px;
    }

    .feature-card__icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .feature-card__label {
        font-size: 14px;
    }
}

/* ===== 8.6 Trust Info (About) ===== */
@media (max-width: 992px) {
    .trust-info {
        gap: 32px;
    }

    /* 4 facts become a 2 × 2 grid of cards */
    .trust-info .trust-info-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0;
        border: none;
        background: none;
    }

    .trust-info .trust-info-list>div,
    .trust-info .trust-info-list>div:first-child,
    .trust-info .trust-info-list>div:last-child {
        width: auto;
        height: auto;
        padding: 12px;
        border: 0.41px solid #FEEDE1;
        border-radius: 8px;
        background-color: #FDF7F5;
    }

    .trust-info .trust-info-list>div h5 {
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .trust-info .trust-info-list>div span {
        display: block;
        line-height: 1.4;
    }
}

/* -- Trust info: mobile (Figma) — heading · text · photo · facts · CTA -- */
@media (max-width: 768px) {
    .trust-info {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* flatten the left column so the photo can sit between text and facts */
    .trust-left {
        display: contents;
    }

    .trust-info .top-heading {
        order: 1;
    }

    .trust-info .paragraph {
        order: 2;
        margin: 16px 0 20px;
    }

    .trust-right {
        order: 3;
        margin-bottom: 20px;
    }

    .trust-info .trust-right img {
        border-radius: var(--radius-md);
    }

    .trust-info .trust-info-list {
        order: 4;
        margin-bottom: 20px;
    }

    .trust-info .trust-info-list>div,
    .trust-info .trust-info-list>div:first-child,
    .trust-info .trust-info-list>div:last-child {
        text-align: center;
    }

    /* Reg. no. and Head office span the full row; the two dates share one row */
    .trust-info .trust-info-list>div:first-child,
    .trust-info .trust-info-list>div:last-child {
        grid-column: 1 / -1;
    }

    .trust-left>div:last-child {
        order: 5;
    }

    .trust-left>div:last-child .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .trust-info .trust-info-list {
        gap: 10px;
    }

    .trust-info .trust-info-list>div,
    .trust-info .trust-info-list>div:first-child,
    .trust-info .trust-info-list>div:last-child {
        padding: 12px 8px;
    } 

    .trust-info .trust-info-list>div span {
        font-size: 15px;
    }
}

/* ===== 8.7 Chief Coordinators & Main Committee ===== */
@media (max-width: 1200px) {

    /* only 2 coordinators — give each card room for name + phone */
    .coordinator-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* -- Committee: mobile (Figma) — centred coordinator rows, 2-column committee -- */
@media (max-width: 768px) {
    .committee-heading {
        margin-top: 32px;
    }

    .coordinator-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
        margin-top: 20px;
    }

    .person-card--row {
        width: 100%;
        /* max-width: 340px; */
        gap: 16px;
        padding: 16px;
    }

    .committee-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 20px;
    }

    .person-card__avatar {
        width: 96px;
        height: 96px;
    }

    .person-card__name,
    .person-card__role {
        font-size: 18px;
        line-height: 1.3;
    }

    .person-card__village,
    .person-card__phone {
        font-size: 16px;
    }

    .person-card__name {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .person-card {
        padding: 14px 8px;
    }

    .person-card--row {
        padding: 14px 16px;
    }

    .person-card__avatar {
        width: 80px;
        height: 80px;
    }

    .person-card--row .person-card__avatar {
        width: 88px;
        height: 88px;
    }

    .person-card__name,
    .person-card__role {
        font-size: 16px;
    }

    .person-card__role {
        margin-bottom: 6px;
    }

    .person-card__village {
        margin: 6px 0 8px;
        font-size: 14px;
    }

    .person-card__phone {
        font-size: 14px;
        gap: 6px;
    }

    .person-card__phone i {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
}

/* ===== 8.8 Executive Committee ===== */
@media (max-width: 992px) {
    .executive-committee-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -- Executive: mobile (Figma) — 2 columns, card content centred and stacked -- */
@media (max-width: 768px) {
    .executive-committee-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 20px;
    }

    .executive-card {
        flex-direction: column;
        text-align: center;
        padding: 16px 8px;
    }

    .executive-card__avatar {
        width: 72px;
        height: 72px;
    }

    .executive-card__info {
        min-width: 0;
    }

    .executive-card__name {
        font-size: 16px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .executive-card__village,
    .executive-card__phone {
        justify-content: center;
        font-size: 14px;
    }

    .executive-card__village {
        margin: 8px 0 6px;
    }
}

/* ===== 8.9 Villages & Representatives ===== */
@media (max-width: 1200px) {
    .villages-head__note {
        text-align: right;
        line-height: 1.4;
    }
}

/* -- Villages: mobile (Figma) — table rows reflow into cards -- */
@media (max-width: 768px) {
    .villages-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }

    .villages-head__note {
        text-align: left;
        font-size: 16px;
    }

    .villages-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 0;
        margin-bottom: 20px;
        background-color: transparent;
        border: none;
    }

    .villages-search {
        max-width: none;
        min-height: 56px;
        padding: 0 16px;
        gap: 12px;
        border: 1px solid #E2E8F0;
        border-radius: var(--radius-md);
        background-color: var(--white-color);
    }

    .villages-search input {
        font-size: 16px;
    }

    .villages-filters {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .villages-filter-btn {
        min-height: 44px;
        padding: 0 16px;
    }

    .villages-box {
        overflow: visible;
        border: none;
        background-color: transparent;
    }

    .villages-table-wrap {
        overflow-x: hidden;
        max-height: 70vh;
    }

    .villages-table {
        min-width: 0;
    }

    /* column labels stay available to screen readers */
    .villages-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .villages-table,
    .villages-table tbody {
        display: block;
    }

    /* each row → card: [#no · village] header, then one [representative · phone] row per representative */
    .villages-table tbody tr,
    .villages-table tbody tr:nth-child(odd) {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "serial village"
            "reps reps";
        margin-bottom: 12px;
        overflow: hidden;
        border: 1px solid var(--secondary-color);
        border-radius: 8px;
        background-color: var(--white-color);
    }

    .villages-table tbody td {
        display: flex;
        align-items: center;
        min-width: 0;
        padding: 12px 16px;
        border: none;
    }

    /* row number leads the header */
    .villages-table tbody td:nth-child(1) {
        grid-area: serial;
        padding-right: 0;
        color: var(--black-color);
        font-weight: 600;
        font-size: 14px;
    }

    .villages-table tbody td:nth-child(2) {
        grid-area: village;
        gap: 8px;
        padding-left: 10px;
        color: var(--secondary-color);
        font-weight: 700;
        font-size: 16px;
    }

    .villages-table tbody td:nth-child(2)::before {
        content: '\f3c5';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 14px;
    }

    .villages-table tbody td:nth-child(1),
    .villages-table tbody td:nth-child(2) {
        background-color: #F0F9F8;
        border-bottom: 1px solid var(--secondary-color);
    }

    .villages-table tbody td.village-reps-cell {
        grid-area: reps;
        display: block;
        padding: 0;
    }

    /* no representative: swap the dash row for a text message on mobile */
    .villages-table tbody td.village-reps-cell--empty {
        padding: 12px 16px;
        color: #64748B;
        font-size: 14px;
        font-style: italic;
    }

    .villages-table tbody td.village-reps-cell--empty::before {
        content: 'No representative';
    }

    .villages-table tbody td.village-reps-cell--empty .village-rep {
        display: none;
    }

    /* name left, phone right; a long name wraps instead of overlapping the phone */
    .village-rep {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 0 16px;
    }

    .village-rep__name {
        padding: 12px 0;
        font-size: 16px;
        overflow-wrap: anywhere;
    }

    .village-rep__phone {
        padding: 0;
        border-left: none;
    }

    .villages-table .village-phone {
        min-height: 44px;
        gap: 8px;
        font-size: 16px;
    }

}

@media (max-width: 480px) {
    .villages-head__note {
        font-size: 14px;
    }

    .villages-table tbody td {
        padding: 12px;
    }

    .villages-table tbody td.village-reps-cell {
        padding: 0;
    }

    .villages-table tbody td.village-reps-cell--empty {
        padding: 12px;
    }

    .village-rep {
        padding: 0 12px;
    }
}

/* ===== 8.10 Membership & Fees ===== */
@media (max-width: 992px) {
    .membership-content {
        gap: 30px;
    }
}

@media (max-width: 768px) {

    /* heading CTA is desktop / tablet only */
    .membership-cta {
        display: none;
    }

    .membership-content {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 20px;

        .membership-heading {
            font-size: 22px;

            i {
                width: 44px;
                height: 44px;
                font-size: 20px;
            }
        }

        .paragraph {
            font-size: 18px;
            line-height: 1.4;
        }

        table th {
            font-size: 16px;
            padding: 12px 16px;
        }

        table td {
            font-size: 16px;
            padding: 12px 16px;
        }

        .starting-date {
            font-size: 16px;
            line-height: 1.4;
        }

        .donation-amount h4 {
            font-size: 32px;
        }

        .donation-amount span {
            font-size: 18px;
        }

        .special-2014 {
            font-size: 18px;
            line-height: 1.4;
        }

        .last-note {
            font-size: 16px;
            line-height: 1.5;
        }
    }
}

@media (max-width: 480px) {
    .membership-content {

        .membership-heading {
            font-size: 20px;
        }

        .paragraph {
            font-size: 16px;
        }

        table th,
        table td {
            padding: 10px 12px;
            font-size: 14px;
        }

        .right-content {
            padding: 16px;
        }

        .donation-amount h4 {
            font-size: 28px;
        }
    }
}

/* ===== 8.11 Events & Gallery ===== */
@media (max-width: 992px) {
    .gallery-slide {
        flex: 0 0 calc((100% - 27px) / 2);
    }
}

@media (max-width: 768px) {
    .gallery-section .container {
        padding-bottom: 24px;
    }

    .gallery-head {
        align-items: flex-start;
        margin-top: 16px;
    }

    .gallery-desc {
        font-size: 16px;
        line-height: 1.5;
    }

    .gallery-slider {
        gap: 16px;
    }

    .gallery-slide {
        flex: 0 0 85%;
    }

    /* lightbox: photo uses the full width, prev / next sit together at the bottom */
    .gallery-lightbox {
        padding: 64px 12px 92px;
    }

    .gallery-lightbox__img {
        max-height: calc(100vh - 200px);
        max-height: calc(100dvh - 200px);
    }

    .gallery-lightbox__caption {
        padding: 0 4px;
        font-size: 16px;
    }

    .gallery-lightbox__btn {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .gallery-lightbox__close {
        top: 12px;
        right: 12px;
        font-size: 22px;
    }

    .gallery-lightbox__nav {
        top: auto;
        bottom: 24px;
        transform: none;
    }

    .gallery-lightbox__nav--prev {
        left: calc(50% - 60px);
    }

    .gallery-lightbox__nav--next {
        right: calc(50% - 60px);
    }
}

@media (max-width: 480px) {
    .gallery-slide {
        flex: 0 0 92%;
    }
}

/* ===== 8.12 Footer & Scroll-to-top ===== */
@media (max-width: 768px) {
    footer {
        .container {
            padding-top: 48px;
            padding-bottom: 48px;
        }

        .top {
            gap: 14px;
            margin-bottom: 24px;

            img {
                width: 72px;
                height: 72px;
            }
        }

        .top-content h5 {
            font-size: 18px;
            line-height: 1.35;
        }

        .top-content span {
            font-size: 13px;
            line-height: 1.4;
        }

        .bottom>div,
        .bottom>div:last-child {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            line-height: 1.5;

            span {
                font-size: 14px;
            }

            div {
                font-size: 16px;
            }
        }
    }

    .scroll-top-btn {
        right: var(--gutter);
        bottom: var(--gutter);
        width: 44px;
        height: 44px;
    }

    /* "એક સમાજ • એક પરિવાર…" tagline (inner pages): centred, smaller, inside the gutter */
    .bottom-tag-line {
        justify-content: center;
        gap: 12px;
        padding: 0 var(--gutter);
        margin-bottom: 24px;

        >div {
            flex-shrink: 0;
            font-size: 14px;
            line-height: 1.4;
            text-align: center;
        }
    }
}

@media (max-width: 480px) {
    footer {

        /* logo and trust name side by side, with the name scaled down to fit */
        .top {
            align-items: center;
            gap: 12px;
            text-align: left;

            >div:first-child {
                flex-shrink: 0;
            }

            img {
                width: 56px;
                height: 56px;
            }
        }

        .top-content {
            min-width: 0;
        }

        .top-content h5 {
            font-size: 14.5px;
            line-height: 1.35;
            margin-bottom: 4px;
        }

        .top-content span {
            display: block;
            font-size: 10.5px;
            line-height: 1.4;
        }

        .bottom>div div {
            font-size: 14px;
        }
    }
}

/* ===== 8.13 Contact page ===== */
@media (max-width: 992px) {
    .contact-page .committee-section .committee-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-section {
        .contact-content {
            flex-wrap: wrap;
            gap: 24px;
        }

        .contact-content>div:nth-child(1) {
            padding-right: 0;
            flex-basis: 100%;
        }

        .contact-content>div:nth-child(2) {
            border-left: none;
            border-right: none;
            border-top: 0.6px solid var(--secondary-color);
            border-bottom: 0.6px solid var(--secondary-color);
            padding: 24px 0;
            flex-basis: 100%;
        }

        .contact-content>div:nth-child(3) {
            padding-left: 0;
            flex-basis: 100%;
        }
    }
}

@media (max-width: 768px) {
    .contact-page .container {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .contact-page .committee-section .committee-grid {
        grid-template-columns: 1fr;
    }

    .contact-page .committee-section .person-card {
        padding: 16px;
    }

    .contact-section {
        padding: 40px 0 30px;

        .contact-content {
            padding: 20px;
        }

        .location i {
            width: 46px;
            height: 46px;
            font-size: 22px;
        }

        .location h6 {
            font-size: 20px;
        }

        .address {
            font-size: 17px;
        }

        .detail-card i {
            width: 38px;
            height: 38px;
            font-size: 16px;
        }

        .quote-line div {
            font-size: 22px;
            margin-top: 0;
        }
    }
}

@media (max-width: 480px) {
    .contact-section {
        .location {
            flex-direction: column;
            align-items: flex-start;
        }

        .quote-line {
            flex-direction: column;
        }
    }
}

/* ===== 8.14 Downloads page ===== */
@media (max-width: 992px) {
    .download-section .document-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .download-section {
        padding: 40px 0 60px;

        .document-card {
            padding: 20px;
        }

        .document-card__title {
            font-size: 18px;
        }

        .document-card__btn {
            font-size: 15px;
            padding: 11px 18px;
        }
    }
}

@media (max-width: 480px) {
    .download-section .document-card__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .download-section .document-card__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== 8.15 Member login, Profile & Payment history ===== */
@media (max-width: 1288px) {

    /* fixed 920px review card never wider than the viewport */
    .member-details-card.smaller-card {
        max-width: 100%;
    }
}

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

    .payment-tab {
        min-width: 0;
        flex: 1 1 0;
        text-align: center;
    }

    /* 44px touch area around the 22px checkbox */
    .payment-checkbox {
        position: relative;
    }

    .payment-checkbox::before {
        content: '';
        position: absolute;
        inset: -11px;
    }

    /* 6–7 column tables scroll sideways inside their panel instead of widening the page */
    .payment-tab-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .payment-table th,
    .payment-table td {
        white-space: nowrap;
    }

    /* total + pay button stay in view while the table is scrolled */
    .payment-summary {
        position: sticky;
        left: 0;
    }
}

@media (max-width: 768px) {
    .member-login {
        min-height: 0;
        padding: 40px 0 32px;
        margin-bottom: 32px;

        .login-form-container {
            width: 100%;
            max-width: 443px;
            padding: 22px;
        }

        .form-field label {
            font-size: 18px;
        }

        .input-field i {
            width: 46px;
            height: 46px;
            font-size: 20px;
        }

        .input-field input {
            height: 46px;
        }
    }

    .member-profile-card {
        flex-wrap: wrap;
        padding: 20px 0;
    }

    .member-profile-card__avatar img {
        width: 90px;
        height: 90px;
    }

    .member-profile-card__info h5 {
        font-size: 21px;
        margin: 10px 0;
    }

    .profile-id {
        font-size: 16px;
    }

    .profile-id span {
        font-size: 18px;
    }

    .member-details-card {
        padding: 22px;
        margin-bottom: 22px;
    }

    .member-details-card__title {
        font-size: 19px;
        margin-bottom: 24px;
    }

    .member-details-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .member-detail__icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .member-detail__label {
        font-size: 15px;
        margin-bottom: 4px;
    }

    .member-detail__value {
        font-size: 16px;
    }

    .member-detail__meta {
        margin-top: 4px;
        font-size: 13px;
    }

    /* tabs stay side by side with the desktop "raised active tab" look, just smaller */
    .payment-tab {
        font-size: 15px;
        padding: 0 12px;
        height: 46px;
    }

    .payment-tab.is-active {
        height: 54px;
    }

    table th,
    table td {
        padding: 10px 12px;
        font-size: 14px;
    }

    .payment-summary {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: space-between;
    }

    .payment-summary__btn {
        font-size: 16px;
    }

    /* due overview: compact; the sticky header already offsets anchors (scroll-padding) */
    #paymentHistory {
        scroll-margin-top: 12px;
    }

    .due-overview {
        display: flex;
        gap: 12px;
        margin-bottom: 22px;
        padding: 14px 16px;
    }

    .due-overview__icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .due-overview__text small {
        font-size: 13px;
    }

    .due-overview__text small span {
        font-size: 11px;
    }

    .due-overview__text strong {
        font-size: 22px;
    }

    .due-overview__meta {
        font-size: 12px;
    }

    .due-overview__cta {
        font-size: 13px;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .member-profile{
        padding: 20px 0 0;
    }
    .member-profile-card {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .member-details-card {
        padding: 16px 14px; 
    }

    /* "મારી વિગતો": 2 items per row on phones, with a smaller icon */
    .member-details-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }

    .member-detail {
        gap: 10px;
        align-items: flex-start;
    }

    .member-detail__icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .member-detail__label {
        font-size: 13px;
    }

    .member-detail__value {
        font-size: 14px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .member-detail__meta {
        font-size: 12px;
    }

    .payment-summary {
        flex-direction: column;
        align-items: stretch;
    }

    /* total label + amount aligned left, above the full-width pay button */
    .payment-summary__total {
        justify-content: flex-start;
    }

    .payment-summary__btn {
        justify-content: center;
    }

    .member-login .login-form-container {
        padding: 18px;
    }
}

/* -- Payment history (user-profile / committee-member): each table row → card -- */
@media (max-width: 768px) {

    /* cards need no sideways scroll (the ≤992px table scroll is for tablet only) */
    .payment-tab-content {
        overflow-x: visible;
    }

    .payment-table,
    .payment-table thead,
    .payment-table tbody {
        display: block;
    }

    .payment-table {
        overflow: visible;
        border-radius: 0;
    }

    /* header row → a single "select all" bar; column names move onto each card */
    .payment-table thead tr {
        display: flex;
    }

    .payment-table thead th {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .payment-table thead th.payment-table__check {
        position: static;
        display: flex;
        align-items: center;
        gap: 12px;
        width: auto;
        height: auto;
        padding: 4px 16px 14px;
        overflow: visible;
        clip: auto;
        background-color: transparent;
        color: var(--black-color);
    }

    .payment-table__check-label {
        display: block;
        font-weight: 500;
        font-size: 14px;
        cursor: pointer;
    }

    /* card: [☐ · no. · date / name] header strip, then "label … value" lines */
    .payment-table tbody tr {
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        margin-bottom: 12px;
        overflow: hidden;
        border: 1px solid var(--secondary-color);
        border-radius: var(--radius-md);
        background-color: var(--white-color);
    }

    .payment-table tbody td {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
        padding: 10px 16px;
        border: none;
        border-top: 1px solid #edf1f5;
        font-size: 16px;
        line-height: 1.4;
        white-space: normal;
        text-align: right;
    }

    .payment-table tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-weight: 400;
        font-size: 14px;
        color: var(--text-gray);
        text-align: left;
    }

    /* header strip cells */
    .payment-table tbody td.payment-table__check,
    .payment-table tbody td.payment-table__no,
    .payment-table tbody td.payment-table__title {
        grid-row: 1;
        align-self: stretch;
        justify-content: flex-start;
        border-top: none;
        border-bottom: 1px solid var(--secondary-color);
        background-color: #F0F9F8;
        text-align: left;
    }

    .payment-table tbody td.payment-table__check::before,
    .payment-table tbody td.payment-table__title::before {
        content: none;
    }

    .payment-table tbody td.payment-table__check {
        grid-column: 1;
        padding: 12px 0 12px 16px;
    }

    /* row number shown as "#1" */
    .payment-table tbody td.payment-table__no {
        grid-column: 2;
        gap: 0;
        padding: 12px 10px 12px 12px;
        font-weight: 600;
        font-size: 14px;
        color: var(--text-gray);
    }

    .payment-table tbody td.payment-table__no::before {
        content: '#';
        font-weight: 600;
    }

    .payment-table tbody td.payment-table__no:first-child {
        padding-left: 16px;
    }

    .payment-table tbody td.payment-table__title {
        grid-column: 3;
        flex-wrap: wrap;
        gap: 4px 8px;
        padding: 12px 16px 12px 0;
        font-weight: 600;
        color: var(--secondary-color);
    }
}

/* -- Pay components (user-profile + committee-member) — mobile cards --

   Due:   [☐] │ Name                        │ બાકી રકમ
              │ (sub-line)                  │ ₹2,000
              │ details · 👤 badge          │

   Paid:      Name                          │ રકમ
              (sub-line)                    │ ₹2,000
              details                       │
             - - - - - - - - - - - - - - - - - - - -
              📅 08/01/2026      👤 badge      ⬇

   The title cell and its .payment-type wrapper use `display: contents`, so the name,
   sub-line and badge become grid items of the card and can each be placed —
   that is what lets the paid badge sit in the footer row. */
@media (max-width: 768px) {

    /* ---- card shell ---- */
    .payment-table--components tbody tr,
    .payment-table--components tbody tr:nth-child(odd) {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: none;
        align-items: start;
        column-gap: 0;
        margin-bottom: 10px;
        padding: 14px 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background-color: var(--white-color);
    }

    /* reset the generic label/value card cells */
    .payment-table--components tbody td,
    .payment-table--components tbody td.payment-table__check,
    .payment-table--components tbody td.payment-table__title {
        display: block;
        grid-row: auto;
        align-self: auto;
        padding: 0;
        border: none;
        background: none;
        text-align: left;
    }

    .payment-table--components tbody td::before {
        content: none;
    }

    .payment-table--components tbody td.payment-table__no {
        display: none;
    }

    /* ticked due rows keep the plain white card (desktop rows turn green) */
    .payment-table--due tbody tr:not(.is-unselected) td {
        background: none;
    }

    /* ---- left: name / sub-line / details / badge ---- */
    .payment-table--components tbody td.payment-table__title,
    .payment-table--components tbody td.payment-table__title .payment-type {
        display: contents;
    }

    .payment-table--components .payment-type__name {
        grid-column: 2;
        grid-row: 1;
        padding-right: 12px;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.35;
        color: var(--black-color);
    }

    .payment-table--components .payment-type__native {
        grid-column: 2;
        grid-row: 2;
        margin-top: 2px;
        padding-right: 12px;
        font-size: 14px;
        line-height: 1.35;
        color: var(--text-slate);
    }

    .payment-table--components tbody td.payment-table__detail {
        grid-column: 2;
        grid-row: 3;
        margin-top: 6px;
        padding-right: 12px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--text-slate);
    }

    .payment-table--components .payment-type__members {
        grid-column: 2;
        grid-row: 4;
        justify-self: start;
        margin: 8px 0 0;
        font-weight: 600;
        font-size: 13px;
    }

    /* ---- right: label above the amount, divider on the left ---- */
    .payment-table--components tbody td.payment-table__amount {
        grid-column: 3;
        grid-row: 1 / span 4;
        align-self: center;
        /* "₹" + number on one line; the label is positioned above it so a long label
           ("ચૂકવેલ રકમ") can't stretch the gap between "₹" and the number */
        display: flex;
        justify-content: center;
        align-items: baseline;
        gap: 0;
        position: relative;
        min-width: 100px;
        padding: 24px 0 4px 16px;
        border-left: 1px solid var(--border-color);
        font-weight: 700;
        font-size: 20px;
        line-height: 1.25;
        white-space: nowrap;
        color: var(--primary-color);
        text-align: center;
    }

    /* the label ("બાકી રકમ" / "રકમ") above the amount */
    .payment-table--components tbody td.payment-table__amount::before {
        content: attr(data-label);
        position: absolute;
        top: 4px;
        left: 16px;
        right: 0;
        font-weight: 400;
        font-size: 13px;
        line-height: 1.3;
        text-align: center;
        color: var(--text-slate);
    }

    .payment-table--components tbody td.payment-table__amount::after {
        content: '₹';
        order: -1;
    }

    .payment-table--paid tbody td.payment-table__amount {
        grid-row: 1 / span 3;
        color: var(--secondary-color);
    }

    /* ---- due: checkbox column ---- */
    .payment-table--components tbody td.payment-table__check {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: auto; /* desktop column is 64px wide */
        padding: 1px 12px 0 0;
    }

    /* ---- paid: dashed footer row — date │ badge │ receipt ---- */
    .payment-table--paid tbody tr {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .payment-table--paid .payment-type__name,
    .payment-table--paid .payment-type__native,
    .payment-table--paid tbody td.payment-table__detail {
        grid-column: 1 / 3;
    }

    .payment-table--paid tbody td.payment-table__amount {
        grid-column: 3;
    }

    /* full-width dashed line above the footer row (tr pseudo-element = grid item) */
    .payment-table--paid tbody tr::after {
        content: '';
        grid-column: 1 / -1;
        grid-row: 4;
        align-self: start;
        margin-top: 12px;
        border-top: 1px dashed #CBD2DA;
    }

    .payment-table--paid tbody td.payment-table__date,
    .payment-table--paid .payment-type__members,
    .payment-table--paid tbody td.payment-table__receipt {
        grid-row: 4;
        align-self: center;
        margin-top: 24px;
    }

    .payment-table--paid tbody td.payment-table__date {
        grid-column: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        font-size: 14px;
        color: var(--text-slate);
    }

    .payment-table--paid tbody td.payment-table__date::before {
        content: '\f073';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 15px;
        color: var(--text-slate);
    }

    .payment-table--paid .payment-type__members {
        grid-column: 2;
        justify-self: center;
        white-space: nowrap;
        margin-left: 14px;
        margin-right: 14px;
    }

    .payment-table--paid tbody td.payment-table__receipt {
        grid-column: 3;
        display: flex;
        justify-content: flex-end;
        padding-left: 14px;
    }

    /* no badge (non-expired items): the date runs across to the receipt */
    .payment-table--paid tbody td.payment-table__date {
        grid-column: 1 / 3;
    }

    /* with a badge: date, then the badge in the middle column */
    .payment-table--paid tbody tr:has(.payment-type__members) td.payment-table__date {
        grid-column: 1;
        padding-right: 14px;
    }

    /* 44px touch area for the receipt download icon */
    .payment-table--components .payment-receipt--download {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 36px;
        margin: -6px -10px -6px 0;
        font-size: 20px;
    }

    /* ---- fixed total row → a compact grey bar under the cards ---- */
    .payment-table--components tfoot {
        display: block;
    }

    .payment-table--components .payment-table__total-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        border-radius: var(--radius-md);
        background-color: #F5F6F7;
    }

    .payment-table--components .payment-table__total-row td {
        padding: 0;
        border: none;
        background: none;
    }

    .payment-table--components .payment-table__total-label {
        text-align: left;
        font-size: 15px;
    }

    .payment-table--components .payment-table__total-label small {
        font-size: 12px;
    }

    .payment-table--components .payment-table__total-row td.payment-table__amount {
        font-size: 17px;
    }

    /* cards have no column header ("રકમ (₹)"), so the ₹ sign goes back on the total */
    .payment-table--components .payment-table__total-row td.payment-table__amount::before {
        content: '₹';
    }

    .payment-tab__count {
        min-width: 20px;
        height: 20px;
        margin-left: 4px;
        padding: 0 6px;
        font-size: 12px;
    }

    .payment-history__head {
        margin-bottom: 20px;
    }

    .payment-history__desc {
        font-size: 14px;
    }
}

/* iOS draws <input type="date"> natively (taller min-height, centred value) and
   ignores the set height; the white fill is set on the base rule for all browsers.
   `-webkit-touch-callout` is only supported by iOS WebKit, so this block never
   reaches desktop or Android browsers. */
@supports (-webkit-touch-callout: none) {
    .member-login .form-field .input-field input {
        -webkit-appearance: none;
        appearance: none;
        min-width: 0;
        font-size: 16px;
        line-height: normal;
    }

    .member-login .form-field .input-field input::-webkit-date-and-time-value {
        margin: 0;
        text-align: left;
    }
}

@media (max-width: 380px) {
    .member-profile-card__avatar img {
        width: 76px;
        height: 76px;
    }
}

/* ===== 8.16 Member registration ===== */
@media (max-width: 992px) {

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

    .reg-review-grid {
        grid-template-columns: 1fr;
    }

    /* Stacked layout: flatten the two columns so cards follow the review order
       (Personal, Permanent, Communication, Nominee, Documents) instead of column order. */
    .reg-review-col {
        display: contents;
    }

    .reg-review-card--personal { order: 1; }
    .reg-review-card--permanent { order: 2; }
    .reg-review-card--communication { order: 3; }
    .reg-review-card--nominee { order: 4; }
    .reg-review-card--documents { order: 5; }

    .reg-entry-grid--3,
    .reg-entry-grid--family,
    .reg-entry-grid--nominee {
        grid-template-columns: repeat(2, 1fr);
    }

    .reg-entry-grid--family .reg-field--btn,
    .reg-entry-grid--nominee .reg-field--btn {
        grid-column: 1 / -1;
        align-items: flex-end;
    }

    /* the wrapping <label> is the touch target for radios / checkboxes */
    .reg-radio,
    .reg-checkbox {
        min-height: 44px;
        font-size: 16px;
    }

    .reg-checkbox {
        align-items: center;
    }
}

@media (max-width: 768px) {
    .reg-stepper {
        margin: 24px 0 28px;
    }

    .reg-step-item__label {
        font-size: 11px;
    }

    /* Gujarati sub-label stays visible, just smaller */
    .reg-step-item__label small {
        font-size: 10px;
        line-height: 1.3;
    }

    .reg-step-item__circle {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .reg-step-item__line {
        top: 16px;
    }

    .member-details-card.reg-step-panel {
        padding: 20px;
    }

    .reg-grid--2,
    .reg-grid--3,
    .reg-grid--4 {
        grid-template-columns: 1fr;
    }

    /* 16px inputs — readable, and stops iOS zooming in on focus */
    .reg-field input,
    .reg-field select,
    .reg-input-group input {
        font-size: 16px;
    }

    .reg-entry-grid--3,
    .reg-entry-grid--family,
    .reg-entry-grid--nominee {
        grid-template-columns: 1fr;
    }

    .reg-entry-grid .reg-field--btn {
        align-items: stretch;
    }

    .reg-entry-toggle {
        width: 100%;
        flex-wrap: wrap;
        white-space: normal;
        font-size: 14px;
    }

    .reg-entry-form__title {
        font-size: 16px;
    }

    .reg-table--entry th,
    .reg-table--entry td {
        font-size: 14px;
    }

    .reg-info-box__grid {
        flex-wrap: wrap;
        gap: 10px 20px;
    }

    .reg-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .reg-actions .btn {
        justify-content: center;
    }

    /* -- stepper spans the full width -- */
    .reg-stepper {
        width: 100%;
    }

    /* -- step card heading: smaller icon + title, Gujarati title on its own line -- */
    .reg-card__head {
        margin-bottom: 20px;
    }

    .reg-card__head-main {
        align-items: flex-start;
        gap: 12px;
    }

    .reg-card__icon,
    .reg-subheading--icon i {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .reg-card__icon--sm {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .reg-card__title {
        font-size: 18px;
        line-height: 1.3;
    }

    .reg-card__title .reg-card__title-native {
        display: block;
        margin-top: 2px;
        font-size: 14px;
        color: var(--text-slate);
    }

    .reg-card__subtitle {
        font-size: 14px;
        line-height: 1.5;
    }

    .reg-subheading--icon {
        font-size: 18px;
        margin-bottom: 20px;
    }

    /* -- preview step: tighter nested cards, clean section headings -- */
    .main-review-step>.member-details-card,
    .reg-review-card {
        padding: 16px;
    }

    .reg-review-grid,
    .reg-review-col {
        gap: 16px;
    }

    .reg-review-card__head {
        align-items: flex-start;
    }

    .reg-review-card__head .reg-card__head-main {
        display: block;
        min-width: 0;
        font-size: 16px;
        line-height: 1.4;
    }

    .reg-review-card__head .reg-card__icon--sm {
        display: inline-flex;
        vertical-align: middle;
        margin-right: 8px;
    }

    .reg-review-card__head .reg-card__title-native {
        display: block;
        padding-left: 38px;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-slate);
    }

    /* 44px touch area for the 36px edit button */
    .reg-edit-btn {
        position: relative;
    }

    .reg-edit-btn::after {
        content: '';
        position: absolute;
        inset: -4px;
    }

    /* -- success panel: scaled-down icon and type -- */
    .reg-success {
        padding: 32px 20px;
    }

    .reg-success__icon {
        width: 64px;
        height: 64px;
        font-size: 30px;
        margin-bottom: 12px;
    }

    .reg-success h3 {
        font-size: 20px;
        line-height: 1.3;
        margin: 12px 0 6px;
    }

    .reg-success__native {
        font-size: 18px;
        line-height: 1.4;
    }

    .reg-success__thanks {
        margin: 16px 0;
    }

    .reg-success__id {
        gap: 12px;
        padding: 14px 16px;
        margin-bottom: 20px;
    }

    .reg-success__id-icon {
        font-size: 22px;
    }

    .reg-success__id strong {
        font-size: 16px;
        line-height: 1.3;
    }

    .reg-success__id small {
        font-size: 14px;
    }

    .reg-success__id-box {
        padding: 12px 16px;
    }

    .reg-success__id-value {
        font-size: 20px;
    }

    .reg-copy-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .reg-success__note {
        gap: 12px;
        font-size: 14px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .reg-success__note-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .reg-photo-row {
        flex-direction: column-reverse;
        align-items: stretch;
        margin-top: 0;
    }

    .reg-photo-row .reg-avatar-upload {
        width: 100%;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .reg-card__head {
        flex-direction: column;
    }

    .reg-required-note {
        white-space: normal;
    }

    .reg-avatar-upload {
        align-items: center;
        width: 100%;
    }

    .reg-radio-group {
        flex-wrap: wrap;
        height: auto;
        gap: 4px 18px;
    }

    .reg-review-row {
        flex-direction: column;
        gap: 2px;
    }

    .reg-review-row strong {
        text-align: left;
    }

    .reg-success__id {
        flex-wrap: wrap;
    }

    .reg-success__id-box {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===== Member login: modern calendar (Flatpickr) — same look as the admin member form ===== */
body .flatpickr-calendar {
    border: 1px solid #e5e9f0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
    font-family: inherit;
    font-size: 14px;
    color: #344054;
    padding: 8px;
    /* inner day grid is a fixed 307.875px wide; border-box width must cover it plus 8px padding each side */
    width: 324px;
}

body .flatpickr-calendar.arrowTop::before,
body .flatpickr-calendar.arrowTop::after,
body .flatpickr-calendar.arrowBottom::before,
body .flatpickr-calendar.arrowBottom::after {
    display: none;
}

/* the visible (alt) date input opens the picker on click */
.member-login .input-field input.flatpickr-input {
    cursor: pointer;
}

body .flatpickr-months .flatpickr-month {
    height: 40px;
}

body .flatpickr-current-month {
    font-size: 15px;
    font-weight: 600;
    padding-top: 6px;
}

body .flatpickr-current-month .flatpickr-monthDropdown-months,
body .flatpickr-current-month input.cur-year {
    font-weight: 600;
    border-radius: 6px;
    height: 28px;
    line-height: 28px;
    padding: 0 8px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

body .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
body .flatpickr-current-month input.cur-year:hover {
    background: rgba(232, 93, 4, 0.08);
}

/* year dropdown (flatpickr-year-dropdown.js) replaces the numeric year input */
body .flatpickr-calendar.has-year-dropdown .flatpickr-current-month .numInputWrapper {
    display: none;
}

body .flatpickr-current-month .flatpickr-yearDropdown-years {
    width: auto;
    margin-left: 4px;
}

/* cap the year list height (Chromium 135+ customizable select; other browsers keep the native list) */
@supports (appearance: base-select) {
    body .flatpickr-current-month .flatpickr-monthDropdown-months,
    body .flatpickr-current-month .flatpickr-monthDropdown-months::picker(select) {
        appearance: base-select;
    }

    body .flatpickr-current-month .flatpickr-monthDropdown-months::picker(select) {
        max-height: 220px;
        margin-top: 4px;
        padding: 4px;
        border: 1px solid #e5e9f0;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
    }

    body .flatpickr-current-month .flatpickr-monthDropdown-months option {
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        color: #344054;
    }

    body .flatpickr-current-month .flatpickr-monthDropdown-months option:focus,
    body .flatpickr-current-month .flatpickr-monthDropdown-months option:focus-visible {
        outline: none;
    }

    body .flatpickr-current-month .flatpickr-monthDropdown-months option:hover,
    body .flatpickr-current-month .flatpickr-monthDropdown-months option:checked {
        background: rgba(232, 93, 4, 0.1);
    }
}

body .flatpickr-months .flatpickr-prev-month,
body .flatpickr-months .flatpickr-next-month {
    top: 6px;
    height: 30px;
    width: 30px;
    padding: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}

body .flatpickr-months .flatpickr-prev-month { left: 8px; }
body .flatpickr-months .flatpickr-next-month { right: 8px; }

body .flatpickr-months .flatpickr-prev-month:hover,
body .flatpickr-months .flatpickr-next-month:hover {
    background: rgba(232, 93, 4, 0.1);
}

body .flatpickr-months .flatpickr-prev-month:hover svg,
body .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--primary-color);
}

body span.flatpickr-weekday {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

body .flatpickr-day {
    border-radius: 10px;
    border: 0;
    max-width: 40px;
    height: 38px;
    line-height: 38px;
    font-weight: 500;
    color: #344054;
    transition: background-color .12s ease, color .12s ease;
}

body .flatpickr-day:hover,
body .flatpickr-day:focus {
    background: rgba(232, 93, 4, 0.1);
    border: 0;
}

body .flatpickr-day.today {
    border: 1px solid var(--primary-color);
    background: transparent;
}

body .flatpickr-day.today:hover {
    background: rgba(232, 93, 4, 0.1);
    color: #344054;
}

body .flatpickr-day.selected,
body .flatpickr-day.selected:hover,
body .flatpickr-day.selected:focus {
    background: var(--primary-color);
    border: 0;
    color: #fff;
    box-shadow: 0 4px 10px rgba(232, 93, 4, 0.35);
}

body .flatpickr-day.prevMonthDay,
body .flatpickr-day.nextMonthDay,
body .flatpickr-day.flatpickr-disabled,
body .flatpickr-day.flatpickr-disabled:hover {
    color: #d0d5dd;
    background: transparent;
}

/* Member login: inline field error under the input */
.member-login .field-error {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #dc3545;
}

.member-login .field-error[hidden] {
    display: none;
}

/* Member status badge colors — same as the admin member module (active = success, expired = dark, rejected = danger) */
.profile-badge--active {
    background-color: #198754;
    color: #fff;
}

.profile-badge--expired {
    background-color: #212529;
    color: #fff;
}

.profile-badge--rejected {
    background-color: #dc3545;
    color: #fff;
}

/* ===== Registration alert modal ===== */
.reg-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 24, 39, 0.55);
}

.reg-modal[hidden] {
    display: none;
}

.reg-modal__dialog {
    width: 100%;
    max-width: 440px;
    padding: 32px 28px 24px;
    border-radius: var(--radius-lg);
    background: var(--white-color);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.reg-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: var(--radius-full);
    background: var(--orange-color-light);
    color: var(--primary-color);
    font-size: 28px;
}

.reg-modal--error .reg-modal__icon {
    background: var(--pink-color-light);
    color: var(--pink-color);
}

.reg-modal__title {
    margin: 0 0 8px;
    color: var(--black-color);
    font-size: 20px;
    line-height: 1.3;
}

.reg-modal__message {
    margin: 0;
    color: var(--text-slate);
    font-size: 15px;
    line-height: 1.6;
}

.reg-modal__message + .reg-modal__message {
    margin-top: 8px;
}

.reg-modal__actions {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Payment success popup (member profile): receipt list */
.payment-success__icon {
    background: #E7F8EE;
    color: #12B76A;
}

.payment-success__list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.payment-success__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
}

.payment-success__label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 14px;
}

.payment-success__label small {
    font-weight: 500;
    color: var(--text-slate);
}

.payment-success__download {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 13px;
}

.reg-modal__actions .btn {
    min-width: 140px;
    justify-content: center;
}

/* Confirm checkbox highlighted after the "please tick" popup */
.reg-confirm-checkbox.is-attention {
    padding: 12px 14px;
    border: 1.5px solid var(--pink-color);
    border-radius: var(--radius-md);
    background: var(--pink-color-light);
    animation: reg-attention-shake 0.4s ease;
}

@keyframes reg-attention-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* -- Membership request status (member-login page link + request-status result card) -- */
.member-login .login-alt-link {
    margin: 18px 0 0;
    text-align: center;
    font-size: 15px;
}

.member-login .login-alt-link a {
    color: var(--primary-color, #b3261e);
    font-weight: 600;
    text-decoration: underline;
}

.request-status-card {
    width: 443px;
    max-width: 100%;
    margin: 24px auto 0;
    padding: 22px;
    border-radius: 13px;
    background: var(--white-color);
    border: 1px solid #E5E5E5;
    box-shadow: 6px 1px 16px 0px #00000042;
}

.request-status-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #E5E5E5;
}

.request-status-badge {
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

.request-status-badge.is-pending { background: #FFF4D6; color: #8A6100; }
.request-status-badge.is-approved { background: #DDF5E3; color: #1B6B35; }
.request-status-badge.is-rejected { background: #FBE0DE; color: #A1241B; }

.request-status-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
}

.request-status-list dt { font-weight: 600; }
.request-status-list dd { margin: 0; text-align: right; word-break: break-word; }

.request-status-note {
    margin: 14px 0 0;
    font-size: 15px;
}

.request-status-note a { text-decoration: underline; font-weight: 600; }

.request-status-card .request-status-ok {
    display: block;
    margin-top: 18px;
    text-align: center;
}

.request-status-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.request-status-actions .btn {
    display: block;
    width: 100%;
    text-align: center;
}

.request-status-card .request-status-actions .request-status-ok {
    margin-top: 0;
}

/* -- Pick one when a mobile number matches several members / requests -- */
.match-list-title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
}

.match-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.match-list__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: var(--white-color);
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, background-color .2s;
}

.match-list__item:hover,
.match-list__item:focus-visible {
    border-color: var(--primary-color);
    background: var(--orange-color-light);
}

.match-list__name { font-weight: 600; }
.match-list__meta { font-size: 14px; color: #666; }