:root{

    --brand:#1268b3;

    --brand-dark:#0b4d86;

    --brand-light:#eaf4ff;

    --brand-soft:#f4f9ff;

    --background:#f4f8fc;

    --card:#ffffff;

    --text:#172033;

    --muted:#6c7b90;

    --border:#dce6f0;

    --success:#20a464;

    --success-light:#eaf8f1;

    --danger:#c94455;

    --warning:#b67b00;

    --shadow:
        0 12px 35px
        rgba(28,58,90,.07);

}



*{

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    margin:0;

    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    background:
        linear-gradient(
            180deg,
            #edf5fc 0,
            #f7faff 400px
        );

    color:var(--text);

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}



button,
input,
select{

    font-family:
        'Inter',
        sans-serif;

}



/*
HEADER
*/


.header{

    background:
        linear-gradient(
            135deg,
            #07477d,
            #1268b3
        );

    color:#ffffff;

    padding:
        20px 24px;

    box-shadow:
        0 8px 22px
        rgba(8,62,109,.18);

}


.header-inner{

    max-width:1140px;

    margin:auto;

}


.header h1{

    margin:0;

    font-size:23px;

    font-weight:800;

    letter-spacing:-.3px;

}


.header small{

    display:block;

    margin-top:5px;

    font-size:13px;

    font-weight:500;

    opacity:.88;

}



/*
LAYOUT
*/


.wrap{

    max-width:1140px;

    margin:auto;

    padding:
        28px 20px 50px;

}



/*
WELCOME
*/


.welcome-box{

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    margin-bottom:20px;

}


.welcome-box h2{

    margin:0 0 5px;

    font-size:26px;

    font-weight:800;

    letter-spacing:-.5px;

}


.welcome-box p{

    margin:0;

    color:var(--muted);

    font-size:14px;

}



/*
STEP INDICATOR
*/


.steps{

    display:flex;

    align-items:center;

    margin:
        22px 0;

}


.step{

    display:flex;

    align-items:center;

    gap:9px;

    color:#95a2b2;

    font-size:12px;

    font-weight:700;

}


.step span{

    width:30px;

    height:30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e4eaf0;

    color:#6f7d8c;

    font-size:12px;

}


.step.active{

    color:var(--brand);

}


.step.active span{

    background:var(--brand);

    color:#ffffff;

}


.step-line{

    height:1px;

    flex:1;

    background:#d8e2ec;

    margin:
        0 12px;

}



/*
CARDS
*/


.card{

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

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

    border-radius:22px;

    padding:26px;

    box-shadow:
        var(--shadow);

    margin-bottom:18px;

}



/*
SECTION HEADING
*/


.section-heading{

    margin-bottom:22px;

}


.section-heading h2{

    margin:
        0 0 7px;

    font-size:23px;

    font-weight:800;

    letter-spacing:-.45px;

}


.section-heading p{

    margin:0;

    color:var(--muted);

    font-size:14px;

}



/*
SERVICE GRID
*/


.grid{

    display:grid;

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

    gap:14px;

}



/*
SERVICE CARD
*/


.service-card{

    width:100%;

    min-height:105px;

    display:flex;

    align-items:center;

    gap:14px;

    position:relative;

    padding:
        18px 42px 18px 18px;

    background:#ffffff;

    border:
        1px solid
        #d9e4ef;

    border-radius:17px;

    cursor:pointer;

    color:var(--text) !important;

    text-align:left;

    box-shadow:
        0 3px 10px
        rgba(28,58,90,.035);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}



.service-card *{

    color:inherit;

}



.service-card:hover{

    transform:
        translateY(-3px);

    border-color:
        #8dbde6;

    box-shadow:
        0 12px 24px
        rgba(20,80,135,.09);

}



.service-card.selected{

    border:
        2px solid
        var(--brand);

    background:
        var(--brand-soft);

}



/*
SERVICE ICON
*/


.service-icon{

    width:49px;

    height:49px;

    flex:
        0 0 49px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:
        var(--brand-light);

    font-size:22px;

}



/*
SERVICE NAME
*/


.service-name{

    display:block;

    color:
        var(--text)
        !important;

    font-size:15px;

    line-height:1.35;

    font-weight:700;

    letter-spacing:-.15px;

}



/*
SERVICE ARROW
*/


.service-arrow{

    position:absolute;

    right:17px;

    top:50%;

    transform:
        translateY(-50%);

    color:
        #9aabba
        !important;

    font-size:25px;

    font-weight:400;

}



/*
STEP 2
*/


.step2-heading{

    display:flex;

    justify-content:
        space-between;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

}


.step2-heading h2{

    margin:
        4px 0 0;

    font-size:23px;

    font-weight:800;

}


.small-title{

    color:var(--brand);

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

}


.change-service{

    padding:
        9px 13px;

    border:
        1px solid
        #d6e2ed;

    border-radius:10px;

    background:#f3f7fa;

    color:
        #536476
        !important;

    cursor:pointer;

    font-size:12px;

    font-weight:700;

}



/*
NOTICE
*/


.notice{

    padding:
        14px 16px;

    border-radius:13px;

    border:
        1px solid
        #d7e8f7;

    background:
        #f5faff;

    color:#36536d;

    font-size:13px;

    line-height:1.55;

}


.notice.error{

    background:#fff0f2;

    border-color:#efbec5;

    color:#9d2b3a;

}



/*
FORM
*/


.form-section{

    margin-top:18px;

}


label{

    display:block;

    margin-bottom:7px;

    font-size:13px;

    font-weight:700;

    color:#304050;

}


input,
select{

    width:100%;

    height:50px;

    padding:
        0 15px;

    border:
        1px solid
        #ccd8e4;

    border-radius:12px;

    background:#ffffff;

    color:var(--text);

    outline:none;

    font-size:15px;

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

}


input:focus,
select:focus{

    border-color:
        var(--brand);

    box-shadow:
        0 0 0 4px
        rgba(18,104,179,.09);

}



/*
OR
*/


.or-divider{

    display:flex;

    align-items:center;

    gap:12px;

    margin:
        18px 0 4px;

}


.or-divider::before,
.or-divider::after{

    content:"";

    height:1px;

    flex:1;

    background:#e2e9ef;

}


.or-divider span{

    font-size:10px;

    color:#95a0ac;

    font-weight:800;

}



/*
CHECKBOX
*/


.checkbox-row{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:19px;

    cursor:pointer;

    font-size:13px;

    font-weight:500;

}


.checkbox-row input{

    width:17px;

    height:17px;

    flex:
        0 0 17px;

}



/*
BUTTONS
*/


.form-actions{

    margin-top:20px;

}


.generate-button,
.new-token-button{

    border:0;

    min-height:48px;

    padding:
        0 22px;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #1268b3,
            #2385db
        );

    color:
        #ffffff
        !important;

    cursor:pointer;

    font-size:14px;

    font-weight:700;

    box-shadow:
        0 8px 18px
        rgba(18,104,179,.18);

    transition:
        transform .15s ease,
        box-shadow .15s ease;

}


.generate-button:hover,
.new-token-button:hover{

    transform:
        translateY(-1px);

    box-shadow:
        0 11px 22px
        rgba(18,104,179,.23);

}



/*
TOKEN RESULT
*/


.token-result{

    text-align:center;

    padding-top:35px;

    padding-bottom:35px;

}


.success-icon{

    width:55px;

    height:55px;

    margin:
        0 auto 15px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        var(--success-light);

    color:
        var(--success);

    font-size:26px;

    font-weight:800;

}


.token-label{

    color:var(--muted);

    font-size:11px;

    font-weight:800;

    letter-spacing:1.3px;

}


.token-big{

    margin:
        8px 0;

    color:
        var(--brand);

    font-size:68px;

    line-height:1;

    font-weight:800;

    letter-spacing:2px;

}


.token-result h2{

    margin:
        13px 0 22px;

    font-size:20px;

}


.queue-info{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:200px;

    padding:
        14px 22px;

    border-radius:14px;

    background:#f5f8fb;

    border:
        1px solid
        #e2e9ef;

}


.queue-number{

    display:block;

    font-size:28px;

    font-weight:800;

    color:var(--text);

}


.queue-text{

    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:11px;

    font-weight:600;

}


.wait-message{

    max-width:520px;

    margin:
        22px auto;

    padding:15px;

    border-radius:13px;

    background:#f5faff;

    color:#39546b;

    font-size:13px;

}


.wait-message p{

    margin:
        4px 0 0;

    color:var(--muted);

}



/*
COMMON
*/


.hidden{

    display:none !important;

}


.center{

    text-align:center;

}


.muted{

    color:var(--muted);

}



/*
TABLET
*/


@media(
    max-width:950px
){

    .grid{

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

    }

}



/*
MOBILE
*/


@media(
    max-width:600px
){

    .header{

        padding:
            16px;

    }


    .header h1{

        font-size:19px;

    }


    .wrap{

        padding:
            18px 12px 40px;

    }


    .welcome-box h2{

        font-size:22px;

    }


    .steps{

        margin:
            18px 2px;

    }


    .step{

        font-size:0;

    }


    .step span{

        font-size:12px;

    }


    .step-line{

        margin:
            0 8px;

    }


    .card{

        padding:18px;

        border-radius:18px;

    }


    .section-heading h2{

        font-size:20px;

    }


    .grid{

        grid-template-columns:
            1fr;

        gap:10px;

    }


    .service-card{

        min-height:82px;

        padding:
            14px 40px 14px 14px;

    }


    .service-icon{

        width:44px;

        height:44px;

        flex-basis:44px;

        font-size:20px;

    }


    .service-name{

        font-size:14px;

    }


    .step2-heading{

        align-items:flex-start;

    }


    .change-service{

        white-space:nowrap;

    }


    .token-big{

        font-size:54px;

    }


    .generate-button,
    .new-token-button{

        width:100%;

    }

}