:root {
    --brand-primary-dark: #074D31;
    --brand-primary: #1B8354;
    --brand-primary-light: #54C08A;

    --brand-green-50: #EAF8F1;
    --brand-green-100: #D3F1E1;
    --brand-green-200: #A8E4C5;
    --brand-green-300: #79D6A5;
    --brand-green-400: #54C08A;
    --brand-green-500: #1B8354;
    --brand-green-600: #106440;
    --brand-green-700: #074D31;

    --brand-neutral-0: #FFFFFF;
    --brand-neutral-50: #F9FAFB;
    --brand-neutral-100: #F3F5F7;
    --brand-neutral-200: #E9ECEF;
    --brand-neutral-300: #D5D9DD;
    --brand-neutral-400: #8B949E;
    --brand-neutral-500: #6B7280;
    --brand-neutral-600: #4B5563;
    --brand-neutral-700: #1F2937;

    --brand-gold-50: #FBF9F4;
    --brand-gold-400: #CAAC7B;
    --brand-gold-700: #AB8135;
    --brand-gold-dot: rgba(171, 129, 53, 0.35);

    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 27, 131, 84;
    --bs-success: var(--brand-primary);
    --bs-success-rgb: 27, 131, 84;
    --bs-success-bg-subtle: var(--brand-green-50);
    --bs-success-border-subtle: var(--brand-green-200);
    --bs-success-text-emphasis: var(--brand-primary-dark);
    --bs-secondary-color: var(--brand-neutral-600);

    --bs-body-font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    --bs-body-color: var(--brand-neutral-700);
    --bs-body-bg: var(--brand-neutral-50);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.65rem;
    --bs-border-radius-xl: 0.85rem;
    --bs-link-color: var(--brand-primary-dark);
    --bs-link-hover-color: var(--brand-primary);

    /* Fluid type scale — grows with viewport but stays capped, so hierarchy holds at every
       breakpoint without any single element ever depending on a non-responsive fixed size. */
    --fs-page-title: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    --fs-intro-text: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
    --fs-section-title: clamp(1.1rem, 1.02rem + 0.35vw, 1.35rem);
    --fs-question: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
    --fs-option: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    --fs-support: clamp(0.9rem, 0.86rem + 0.2vw, 1.05rem);
    --fs-button: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
    --fs-stat-value: clamp(2.5rem, 2.1rem + 2vw, 3.75rem);
}

/* Root type scale — everything expressed in rem (Bootstrap included) grows with it, so the
   whole interface gets proportionally larger on bigger screens without per-component overrides. */
html { font-size: 16px; }
@media (min-width: 576px) { html { font-size: 16.5px; } }
@media (min-width: 768px) { html { font-size: 17px; } }
@media (min-width: 992px) { html { font-size: 17.5px; } }
@media (min-width: 1200px) { html { font-size: 18px; } }
@media (min-width: 1400px) { html { font-size: 18.5px; } }

body {
    -webkit-font-smoothing: antialiased;
    background-image: radial-gradient(var(--brand-gold-dot) 1px, transparent 1px);
    background-size: 30px 30px;
    background-attachment: fixed;
}

.btn {
    font-weight: 600;
}
.btn-success {
    color: var(--brand-neutral-0);
}
.btn-lg {
    font-size: var(--fs-button);
    padding-block: 0.7rem;
    padding-inline: 1.75rem;
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.form-check-input:focus {
    border-color: var(--brand-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.18);
}

.form-label {
    font-size: var(--fs-support);
    font-weight: 600;
}
.form-control,
.form-select {
    font-size: var(--fs-support);
    min-height: 3rem;
    padding-block: 0.6rem;
}

.alert {
    font-size: var(--fs-support);
}

.skip-link {
    position: absolute;
    right: -999px;
    top: 0;
    background: var(--brand-primary-dark);
    color: var(--brand-neutral-0);
    padding: 0.75rem 1.25rem;
    z-index: 2000;
    border-radius: 0 0 0 var(--bs-border-radius);
}
.skip-link:focus {
    right: 0;
}

.site-header {
    background: var(--brand-neutral-0);
    border-bottom: 3px solid var(--brand-primary);
}

.site-navbar { padding-block: 0.9rem; }

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--brand-green-50);
    border: 1.5px solid var(--brand-green-200);
    color: var(--brand-primary-dark);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-title { font-weight: 700; color: var(--brand-primary-dark); font-size: 1.1rem; }
.brand-subtitle { font-size: 0.8rem; color: var(--brand-neutral-500); font-weight: 500; }

.nav-link { color: var(--brand-neutral-600) !important; font-weight: 600; font-size: 1rem; }
.nav-link:hover, .nav-link.active { color: var(--brand-primary-dark) !important; }

.site-main { min-height: 60vh; padding-block: 2.5rem; }

.site-footer {
    position: relative;
    background: var(--brand-primary-dark);
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 26px 26px;
    color: var(--brand-green-100);
    padding-block: 1.75rem;
    margin-top: 3rem;
    text-align: center;
    font-size: 0.95rem;
}
.site-footer-links a { color: var(--brand-neutral-0); font-weight: 600; }
.site-footer-links a:hover { color: var(--brand-green-200); }

/* Main content shell — noticeably wider than a plain text column on large screens, but capped
   at a professional max-width so it never stretches edge-to-edge on ultra-wide displays. */
.survey-shell { max-width: 900px; margin-inline: auto; }
@media (min-width: 768px)  { .survey-shell { max-width: 960px; } }
@media (min-width: 992px)  { .survey-shell { max-width: 1040px; } }
@media (min-width: 1200px) { .survey-shell { max-width: 1140px; } }
@media (min-width: 1400px) { .survey-shell { max-width: 1200px; } }

/* Shared spacious card padding — replaces the p-4/p-5 utility classes (which carry !important
   and can't be overridden by a plain selector) with one tunable, responsive definition. */
.card-pad {
    padding: 1.5rem;
}
@media (min-width: 576px) { .card-pad { padding: 1.75rem 2rem; } }
@media (min-width: 992px) { .card-pad { padding: 2.25rem 2.5rem; } }

.card-pad-lg {
    padding: 1.75rem 1.5rem;
}
@media (min-width: 576px) { .card-pad-lg { padding: 2.25rem 2rem; } }
@media (min-width: 992px) { .card-pad-lg { padding: 3rem; } }

.survey-intro {
    position: relative;
    background-color: var(--brand-primary-dark);
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    background-position: -8px -8px;
    color: var(--brand-neutral-0);
    border-bottom: 4px solid var(--brand-primary-light);
    overflow: hidden;
}
.survey-intro h1 {
    font-size: var(--fs-page-title);
    line-height: 1.25;
}
.survey-intro .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    color: var(--brand-green-200);
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
}
.survey-intro p { color: var(--brand-green-50); font-size: var(--fs-intro-text); line-height: 1.6; }
.survey-intro .intro-note {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--bs-border-radius);
    font-size: var(--fs-intro-text);
    line-height: 1.6;
}

.participation-stat {
    position: relative;
    background: var(--brand-neutral-0);
    background-image: radial-gradient(var(--brand-gold-dot) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: -4px -4px;
    border: 1px solid var(--brand-green-200);
    border-top: 4px solid var(--brand-primary);
    border-radius: var(--bs-border-radius-lg);
}
.participation-stat .stat-label {
    color: var(--brand-neutral-600);
    font-weight: 600;
    font-size: var(--fs-intro-text);
    letter-spacing: 0.01em;
}
.participation-stat .stat-value {
    color: var(--brand-primary-dark);
    font-weight: 800;
    font-size: var(--fs-stat-value);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.participation-stat .stat-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--brand-green-50);
    color: var(--brand-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.participation-stat .stat-label h1 {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin: 0;
}

.section-title {
    font-size: var(--fs-section-title);
    font-weight: 700;
}

.question-card {
    background: var(--brand-gold-50);
    border: 1px solid var(--brand-gold-400);
    border-inline-start: 4px solid var(--brand-gold-700);
    box-shadow: none;
}

.text-bg-question {
    background: var(--brand-gold-700);
    color: var(--brand-neutral-700);
    border: none;
    font-weight: 700;
    padding: 0.42em 0.7em;
}

.question-header {
    row-gap: 0.75rem;
}
.question-title {
    font-size: var(--fs-question);
    font-weight: 700;
    line-height: 1.45;
}

.btn-clear-answer {
    background-color: var(--brand-gold-50);
    border: 1.5px solid var(--brand-gold-700);
    color: var(--brand-gold-700);
    font-size: var(--fs-support);
    font-weight: 700;
    padding: 0.5rem 1rem;
    min-height: 2.75rem;
    border-radius: var(--bs-border-radius);
    white-space: nowrap;
}
.btn-clear-answer:hover, .btn-clear-answer:focus {
    background-color: var(--brand-gold-700);
    border-color: var(--brand-gold-700);
    color: var(--brand-neutral-0);
}

.option-list {
    display: grid;
    gap: 0.65rem;
}
@media (min-width: 992px) { .option-list { gap: 0.85rem; } }

.option-list .btn-check + label.option-btn {
    display: flex;
    align-items: center;
    text-align: start;
    font-weight: 500;
    font-size: var(--fs-option);
    line-height: 1.5;
    min-height: 3.4rem;
    padding-block: 0.75rem;
    padding-inline-start: 1.25rem;
    padding-inline-end: 1rem;
    color: var(--brand-neutral-700);
    border: 1.5px solid var(--brand-neutral-300);
    background: var(--brand-neutral-0);
}
@media (min-width: 992px) {
    .option-list .btn-check + label.option-btn {
        min-height: 3.8rem;
        padding-inline-start: 1.5rem;
    }
}
.option-list .btn-check + label.option-btn:hover {
    border-color: var(--brand-neutral-500);
    color: var(--brand-neutral-700);
    background: var(--brand-neutral-50);
}
.option-list .btn-check:checked + label.option-btn {
    background-color: var(--brand-neutral-200);
    border: 2px solid var(--brand-neutral-600);
    color: var(--brand-neutral-700);
    font-weight: 700;
}
.option-list .btn-check:focus-visible + label.option-btn {
    outline: 3px solid var(--brand-neutral-400);
    outline-offset: 1px;
}

.validation-summary-valid {
    display: none;
}

.hp-field {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.status-card { max-width: 680px; margin-inline: auto; border-top: 4px solid var(--brand-primary); }
.status-card .icon-circle {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--brand-green-100);
    color: var(--brand-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
}
.status-title {
    font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.6rem);
}
.status-text {
    font-size: var(--fs-support);
    line-height: 1.6;
}

.cookie-consent-bar {
    z-index: 1080;
    background: var(--brand-neutral-0);
    border-top: 3px solid var(--brand-primary);
    box-shadow: 0 -4px 16px rgba(7, 77, 49, 0.12);
    color: var(--brand-neutral-700);
}
.cookie-consent-bar p {
    font-size: var(--fs-support);
    line-height: 1.6;
}
.cookie-consent-bar .btn {
    font-size: var(--fs-support);
}

.progress-thick {
    height: 12px;
}
.progress-thin {
    height: 8px;
}
.progress-label {
    font-size: var(--fs-support);
}
.progress-step-label {
    font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(7, 77, 49, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.page-loader.is-visible {
    opacity: 1;
}
.page-loader:not(.is-visible) {
    pointer-events: none;
}
.page-loader-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 90vw;
    text-align: center;
    background: var(--brand-gold-50);
    border: 1px solid var(--brand-gold-400);
    border-radius: var(--bs-border-radius-lg);
    padding: 2rem 2.5rem;
    box-shadow: 0 10px 30px rgba(7, 77, 49, 0.25);
}
.page-loader-spinner {
    --bs-spinner-width: 3rem;
    --bs-spinner-height: 3rem;
    --bs-spinner-border-width: 0.3em;
    color: var(--brand-primary);
}
.page-loader-text {
    font-weight: 700;
    color: var(--brand-primary-dark);
    font-size: var(--fs-support);
}

/* Select2 (bootstrap-5 theme) generates its own markup outside our form-control/form-select
   rules, so its sizing needs explicit, matching overrides to stay in step with the rest of the
   larger typography scale. */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 3rem;
    font-size: var(--fs-support);
}
.select2-container--bootstrap-5 .select2-selection__rendered {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.select2-container--bootstrap-5 .select2-selection__placeholder {
    font-size: inherit;
}
.select2-container--bootstrap-5 .select2-results__option {
    font-size: var(--fs-support);
    padding: 0.6rem 0.9rem;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    font-size: var(--fs-support);
    padding: 0.5rem 0.75rem;
}

@media (max-width: 576px) {
    body { background-size: 22px 22px; }
    .page-loader-panel { padding: 1.5rem 1.75rem; }
}