/* =====================================================
   VARIABLES
===================================================== */

:root {

    --primary: #153D77;
    --primary-light: #eef4fb;

    --green: #20B385;
    --orange: #FF7A1A;
    --yellow: #FDEFB0;

    --background: #f3f7fa;

    --text: #172033;
    --muted: #758196;

    --border: #e3e9f0;

    --white: #ffffff;

    --radius: 18px;

    --shadow:
        0 10px 35px rgba(21, 61, 119, .08);
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(32,179,133,.09),
            transparent 34%
        ),
        radial-gradient(
            circle at 0% 0%,
            rgba(255,122,26,.055),
            transparent 32%
        ),
        radial-gradient(ellipse at 50% 100%, rgba(21,61,119,.045), transparent 44%),
        linear-gradient(150deg, #f7f9fc 0%, var(--background) 58%, #edf4f8 100%);

    color: var(--text);

    font-family:
        'Alexandria',
        Tahoma,
        Arial,
        sans-serif;

    line-height: 1.7;
}


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

header {

    position: sticky;

    top: 0;

    z-index: 1000;

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 28px;

    background:
        linear-gradient(110deg, rgba(255,255,255,.97), rgba(246,250,253,.94));

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid rgba(190,211,228,.75);

    box-shadow: 0 5px 20px rgba(21,61,119,.045);
}

header img {

    width: 120px;

    max-height: 48px;

    object-fit: contain;
}

header a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 38px;

    padding: 9px 17px;

    border:
        1px solid #d5e1ec;

    border-radius: 10px;

    color: var(--primary);

    background: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    box-shadow: 0 2px 7px rgba(21,61,119,.04);

    transition: .2s ease;
}

header a:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 5px 14px rgba(21,61,119,.16);
}


/* =====================================================
   MAIN
===================================================== */

main {

    width:
        min(850px, calc(100% - 32px));

    margin:
        0 auto;

    padding:
        38px 0 60px;
}


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

.hero {

    position: relative;

    overflow: hidden;

    padding:
        28px 32px;

    margin-bottom:
        20px;

    border-radius:
        26px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #153D77 0%,
            #1c528e 62%,
            #20B385 100%
        );

    box-shadow:
        0 18px 45px
        rgba(21,61,119,.18);
}

.hero::before {

    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    left: -90px;

    bottom: -120px;

    border-radius: 50%;

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

.hero::after {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    right: 7%;

    top: -70px;

    border-radius: 50%;

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

.hero-content {

    position: relative;

    z-index: 2;
}

.hero-badge {

    display: inline-flex;

    padding:
        4px 10px;

    margin-bottom:
        8px;

    border:
        1px solid
        rgba(255,255,255,.2);

    border-radius:
        30px;

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

    font-size:
        11px;

    font-weight:
        600;
}

.hero h1 {

    margin:
        0 0 5px;

    font-size:
        clamp(20px, 2.5vw, 26px);

    font-weight:
        800;
}

.hero p {

    margin:
        0;

    color:
        rgba(255,255,255,.86);

    font-size:
        13px;
}


/* =====================================================
   PROGRESS
===================================================== */

.progress-wrap {

    position: sticky;

    top: 82px;

    z-index: 90;

    padding: 15px 18px;

    margin-bottom: 20px;

    border: 1px solid #e5eaf1;

    border-radius: 16px;

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

    backdrop-filter: blur(12px);

    box-shadow:
        0 8px 25px rgba(21,61,119,.07);
}

.progress-info {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 12px;
}

.progress-title {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #153D77;
}

.progress-title strong {

    display: block;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.4;
}

.progress-title small {

    display: block;

    margin-top: 1px;

    color: #8792a4;

    font-size: 10px;

    font-weight: 500;
}

.progress-icon {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    background: #eef4fb;

    color: #153D77;

    font-size: 15px;

    font-weight: 800;
}

.progress-status {

    padding: 6px 11px;

    border-radius: 20px;

    background: #edf9f5;

    color: #20B385;

    font-size: 10px;

    font-weight: 800;

    white-space: nowrap;
}

.progress-bar {

    position: relative;

    width: 100%;

    height: 7px;

    overflow: hidden;

    border-radius: 20px;

    background: #edf1f6;
}

.progress-fill {

    position: absolute;

    top: 0;

    right: 0;

    width: 20%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #153D77 0%,
            #20B385 100%
        );

    box-shadow:
        0 2px 6px rgba(32,179,133,.18);

    transition:
        width .45s ease;
}


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

.alert {

    padding:
        13px 16px;

    margin-bottom:
        20px;

    border:
        1px solid #ffd1d1;

    border-radius:
        13px;

    background:
        #fff2f2;

    color:
        #b42318;

    font-size:
        13px;

    font-weight:
        700;
}


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

.card {

    padding:
        26px;

    margin-bottom:
        18px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        #fff;

    box-shadow:
        var(--shadow);
}

.card-header {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding-bottom:
        17px;

    margin-bottom:
        24px;

    border-bottom:
        1px solid #edf0f4;
}

.section-number {

    flex:
        0 0 40px;

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        800;
}

.card h2 {

    margin:
        0;

    color:
        var(--primary);

    font-size:
        17px;

    font-weight:
        800;
}

.card-description {

    margin-top:
        1px;

    color:
        var(--muted);

    font-size:
        11px;
}


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

label:not(.choice):not(.rating-option) {

    display:
        block;

    margin-bottom:
        21px;

    color:
        #263449;

    font-size:
        13px;

    font-weight:
        700;
}

em {

    color:
        var(--orange);

    font-style:
        normal;
}

select,
textarea,
input[type="text"],
input[type="tel"] {

    width:
        100%;

    padding:
        13px 14px;

    margin-top:
        7px;

    border:
        1px solid #dce3eb;

    border-radius:
        12px;

    outline:
        none;

    background:
        #fbfcfe;

    color:
        var(--text);

    font:
        inherit;

    transition:
        .2s ease;
}

select:focus,
textarea:focus,
input:focus {

    border-color:
        var(--primary);

    background:
        #fff;

    box-shadow:
        0 0 0 4px
        rgba(21,61,119,.08);
}

textarea {

    min-height:
        115px;

    resize:
        vertical;
}


/* =====================================================
   PHONE INPUT
===================================================== */

.phone-input {

    display:
        flex;

    direction:
        ltr;

    margin-top:
        7px;
}

.country-code {

    min-width:
        88px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 10px;

    border:
        1px solid #dce3eb;

    border-right:
        0;

    border-radius:
        12px 0 0 12px;

    background:
        #eef4fb;

    color:
        var(--primary);

    font-size:
        14px;

    font-weight:
        800;
}

.country-code span {

    font-size:
        17px;
}

.phone-input input {

    flex:
        1;

    margin:
        0;

    border-radius:
        0 12px 12px 0;

    direction:
        ltr;

    text-align:
        left;

    letter-spacing:
        1px;

    font-size:
        15px;

    font-weight:
        600;
}

.input-hint {

    margin-top:
        5px;

    color:
        #8a96a8;

    font-size:
        11px;

    font-weight:
        500;
}


/* =====================================================
   FIELDSET
===================================================== */

fieldset {

    padding:
        0;

    margin:
        0 0 25px;

    border:
        0;
}

legend {

    width:
        100%;

    margin-bottom:
        11px;

    color:
        #263449;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.8;
}


/* =====================================================
   NORMAL RADIO CHOICES
===================================================== */

.choice {

    position:
        relative;

    display:
        inline-flex;

    width:
        auto;

    margin:
        0 7px 7px 0 !important;

    cursor:
        pointer;
}

.choice input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}

.choice-content {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        43px;

    padding:
        8px 15px;

    border:
        1px solid #dfe5ed;

    border-radius:
        11px;

    background:
        #fff;

    color:
        #4a5568;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        .2s ease;
}

.choice:hover .choice-content {

    border-color:
        #b9cbe0;

    background:
        #f8fbff;
}

.radio {

    position:
        relative;

    width:
        16px;

    height:
        16px;

    flex:
        0 0 16px;

    border:
        2px solid #c7d1dd;

    border-radius:
        50%;
}

.choice input:checked + .choice-content {

    border-color:
        var(--primary);

    background:
        var(--primary-light);

    color:
        var(--primary);
}

.choice input:checked
+ .choice-content
.radio {

    border-color:
        var(--primary);
}

.choice input:checked
+ .choice-content
.radio::after {

    content:
        "";

    position:
        absolute;

    width:
        7px;

    height:
        7px;

    top:
        50%;

    left:
        50%;

    border-radius:
        50%;

    background:
        var(--primary);

    transform:
        translate(-50%, -50%);
}


/* =====================================================
   HINT
===================================================== */

.hint {

    padding:
        9px 12px;

    margin:
        0 0 14px;

    border:
        1px solid #f3e4ad;

    border-radius:
        9px;

    background:
        #fff9e8;

    color:
        #76621e;

    font-size:
        12px;
}


/* =====================================================
   NPS QUESTION
===================================================== */

.nps-question legend {

    font-size:
        14px;

    line-height:
        1.8;
}

.nps-question legend strong {

    color:
        var(--primary);
}


/* =====================================================
   NPS SCALE
===================================================== */

.rating-scale {

    padding:
        18px;

    margin-top:
        18px;

    border:
        1px solid #e7edf4;

    border-radius:
        16px;

    background:
        #f8fafc;
}

.rating-stars {

    display:
        grid;

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

    gap:
        6px;

    margin-bottom:
        8px;

    direction:
        rtl;
}

.rating-stars span {

    text-align:
        center;

    color:
        #f4b740;

    font-size:
        19px;

    line-height:
        1;
}

.rating-numbers {

    display:
        grid;

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

    gap:
        6px;

    direction:
        rtl;
}

.rating-option {

    position:
        relative;

    display:
        block;

    width:
        100%;

    margin:
        0 !important;

    cursor:
        pointer;
}

.rating-option input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}

.rating-option span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        44px;

    border:
        1px solid #dce3eb;

    border-radius:
        10px;

    background:
        #fff;

    color:
        #536174;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        .2s ease;
}

.rating-option:hover span {

    border-color:
        var(--primary);

    color:
        var(--primary);

    transform:
        translateY(-2px);
}

.rating-option input:checked + span {

    border-color:
        var(--primary);

    background:
        var(--primary);

    color:
        #fff;

    box-shadow:
        0 5px 15px
        rgba(21,61,119,.22);

    transform:
        translateY(-2px);
}

.rating-labels {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        9px;

    color:
        #7b8798;

    font-size:
        11px;

    font-weight:
        600;
}


/* =====================================================
   VALIDATION ERRORS
===================================================== */

.field-error {
    display: none;
    margin-top: 8px;
    padding: 8px 11px;
    border-radius: 9px;
    background: #fff2f2;
    color: #b42318;
    font-size: 12px;
    font-weight: 700;
}

.field-error.show {
    display: block;
}

.field-invalid > select,
.field-invalid > textarea,
.field-invalid .phone-input input,
.field-invalid .choice-content,
.field-invalid .rating-option span {
    border-color: #d92d20 !important;
    background: #fff8f7 !important;
}

.field-invalid .rating-scale {
    border-color: #d92d20 !important;
    background: #fff8f7 !important;
}

.field-invalid > legend {
    color: #b42318;
}

.validation-summary {
    display: none;
    padding: 13px 16px;
    margin-bottom: 20px;
    border: 1px solid #ffd1d1;
    border-radius: 13px;
    background: #fff2f2;
    color: #b42318;
    font-size: 13px;
    font-weight: 700;
}

.validation-summary.show {
    display: block;
}


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

.submit {

    width:
        100%;

    min-height: 44px;

    padding:
        11px 18px;

    border:
        0;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #1d568f
        );

    color:
        #fff;

    font:
        inherit;

    font-size:
        15px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 6px 16px
        rgba(21,61,119,.16);

    transition:
        .2s ease;
}

.submit:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(21,61,119,.25);
}

.submit:active {

    transform:
        translateY(0);
}


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

.success {

    padding:
        60px 30px;

    text-align:
        center;

    border:
        1px solid var(--border);

    border-radius:
        26px;

    background:
        #fff;

    box-shadow:
        var(--shadow);
}

.success-icon {

    width:
        75px;

    height:
        75px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 20px;

    border-radius:
        50%;

    background:
        #e9f9f3;

    color:
        var(--green);

    font-size:
        34px;

    font-weight:
        800;
}

.success h1 {

    margin:
        0 0 8px;

    color:
        var(--primary);

    font-size:
        24px;
}

.success p {

    max-width:
        450px;

    margin:
        0 auto 25px;

    color:
        var(--muted);

    font-size:
        14px;
}

.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height: 36px;

    padding:
        7px 14px;

    border-radius:
        11px;

    background:
        var(--primary);

    color:
        #fff;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        700;
}


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

footer {

    padding:
        0 20px 30px;

    text-align:
        center;

    color:
        #8995a6;

    font-size:
        12px;
}


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

@media (max-width: 650px) {

    header {

        height:
            64px;

        padding:
            0 16px;
    }

    header img {

        width:
            100px;
    }

    header a {

        padding:
            7px 10px;

        font-size:
            11px;
    }

    main {

        width:
            calc(100% - 20px);

        padding:
            18px 0 45px;
    }

    .hero {

        padding:
            22px 18px;

        border-radius:
            20px;
    }

    .hero h1 {

        font-size:
            20px;
    }

    .hero p {

        font-size:
            12px;
    }

    .card {

        padding:
            20px 16px;

        border-radius:
            16px;
    }

    .card-header {

        margin-bottom:
            20px;
    }

    .card h2 {

        font-size:
            15px;
    }

    .card-description {

        font-size:
            10px;
    }

    .choice {

        width:
            100%;

        margin:
            0 0 7px !important;
    }

    .choice-content {

        width:
            100%;

        min-height:
            44px;
    }

    .phone-input {

        width:
            100%;
    }

    .country-code {

        min-width:
            78px;
    }

    .rating-scale {

        padding:
            13px 9px;
    }

    .rating-stars,
    .rating-numbers {

        gap:
            4px;
    }

    .rating-stars span {

        font-size:
            15px;
    }

    .rating-option span {

        height:
            40px;

        border-radius:
            8px;

        font-size:
            12px;
    }

    .rating-labels {

        font-size:
            10px;
    }

    .success {

        padding:
            45px 20px;
    }

    .success h1 {

        font-size:
            22px;
    }
}

/* =====================================================
   Shared palette alignment and comfortable responsive sizing
===================================================== */
:root {
    --primary: #075A99;
    --primary-light: #E5F1FD;
    --green: #176F55;
    --orange: #E17C00;
    --yellow: #FBF0DE;
    --background: #F5F5F5;
    --text: #151515;
    --muted: #616C75;
    --border: #E5E5E5;
    --white: #fff;
    --radius: 16px;
    --shadow: 0 5px 20px rgba(6, 47, 80, .055);
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
    background: #F5F5F5;
    color: #151515;
    font-family: Alexandria, "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
}
header {
    min-height: 72px;
    height: auto;
    background: #fff;
    border-bottom: 1px solid #E5E5E5;
    box-shadow: 0 1px 5px rgba(6,47,80,.04);
}
main { width: min(100% - 32px, 920px); }
.hero {
    background: #062F50;
    border: 1px solid #084B7D;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(6,47,80,.10);
}
.hero p { color: #E5F1FD; font-size: 14px; }
.card,.response-card,.success {
    border-color: #E5E5E5;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(6,47,80,.045);
}
.card h2 { color: #062F50; font-size: 19px; }
label,legend { color: #151515; font-size: 14px; }
input,select,textarea {
    min-height: 48px;
    border-color: #E5E5E5;
    color: #151515;
    font-size: 14px;
}
input::placeholder,textarea::placeholder { color: #69747E; opacity: 1; }
input:focus,select:focus,textarea:focus { outline: 3px solid rgba(7,90,153,.14); border-color: #075A99; }
.phone b { background: #E5F1FD; color: #075A99; }
.hero h1 { color: #fff; }
.hero .hero-content p { color: #fff; }
.choice { background: transparent; border: 0; color: #151515; min-height: 44px; font-size: 14px; }
.choice input { accent-color: #075A99; }
.submit,.button { background: #075A99; border-radius: 9px; min-height: 42px; }
.submit:hover,.button:hover { background: #084B7D; }
.hint,footer,.hero p,.title p { color: #616C75; }
.alert { background: #FBE9E7; color: #B72720; }
.success h1 { color: #176F55; }
.hero h1 { color: #fff; }
@media(max-width:760px) {
    main { width: min(100% - 24px, 920px); padding-inline: 0; }
    .hero { padding: 22px; border-radius: 16px; }
    .hero h1 { font-size: clamp(21px, 6vw, 26px); }
    .card { padding: clamp(16px, 4vw, 22px); }
    .choice { display:flex; width:100%; margin:7px 0; }
    .response-card summary { grid-template-columns:1fr auto; }
}
@media(max-width:480px) {
    body { font-size:14px; }
    header { padding:10px 14px; }
    header img { width:130px; }
    main { width:calc(100% - 20px); margin:16px auto; }
    .hero { padding:18px; margin-bottom:14px; }
    .hero span,.party { font-size:36px; }
    .hero p { font-size:13px; }
    .card { margin:12px 0; }
    label,legend { font-size:13px; }
    footer { padding:18px 10px; font-size:11px; }
}