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

:root {

    --blue: #168bea;

    --blue-light: #4ba9f5;

    --black: #080b10;

    --dark: #0d1117;

    --dark-light: #151b23;

    --white: #ffffff;

    --grey: #69717d;

    --light-grey: #f4f6f8;

    --border: #dce2e7;

}


/* ==========================================
   GLOBAL
   ========================================== */

* {

    box-sizing: border-box;

}


body {

    margin: 0;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    background: var(--light-grey);

    color: var(--black);

}


/* ==========================================
   NAVBAR
   ========================================== */

.navbar {

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 5%;

    background: white;

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

}


.logo {

    width: 250px;

    max-height: 70px;

    object-fit: contain;

}


.back-button {

    position: relative;

    color: black;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

}


.back-button::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -7px;

    width: 0;

    height: 2px;

    background: var(--blue);

    transition: width 0.2s;

}


.back-button:hover::after {

    width: 100%;

}


/* ==========================================
   ORDER PAGE
   ========================================== */

.order-page {

    min-height:
        calc(100vh - 100px);

    display: grid;

    grid-template-columns:
        minmax(350px, 0.85fr)
        minmax(500px, 1.15fr);

}


/* ==========================================
   LEFT SIDE
   ========================================== */

.order-info {

    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: center;

    padding:
        90px
        9%;

    background:
        linear-gradient(
            145deg,
            #080b10,
            #111923
        );

    color: white;

}


.order-info::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    left: -250px;

    bottom: -250px;

    border-radius: 50%;

    background:
        rgba(22, 139, 234, 0.15);

    filter: blur(20px);

}


.info-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 570px;

}


.page-label {

    margin-bottom: 30px;

    color: #68b9fa;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.order-info h1 {

    margin: 0;

    font-size:
        clamp(50px, 5vw, 80px);

    line-height: 0.95;

    letter-spacing: -4px;

}


.order-info h1 span {

    display: block;

    color: var(--blue);

}


.intro {

    max-width: 500px;

    margin:
        35px
        0
        65px;

    color: #aeb7c3;

    font-size: 16px;

    line-height: 1.8;

}


/* ==========================================
   STEPS
   ========================================== */

.steps {

    border-top:
        1px solid #28313c;

}


.step {

    display: grid;

    grid-template-columns:
        45px 1fr;

    gap: 20px;

    padding: 27px 0;

    border-bottom:
        1px solid #28313c;

}


.step > span {

    color: var(--blue);

    font-size: 12px;

    font-weight: 800;

}


.step h3 {

    margin:
        0
        0
        7px;

    font-size: 13px;

    letter-spacing: 1px;

}


.step p {

    margin: 0;

    color: #8994a0;

    font-size: 13px;

    line-height: 1.6;

}


/* ==========================================
   RIGHT SIDE
   ========================================== */

.form-side {

    padding:
        75px
        8%;

    background: white;

}


.form-container {

    width: 100%;

    max-width: 680px;

    margin: auto;

}


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

.form-header {

    margin-bottom: 50px;

}


.form-header > span {

    display: block;

    margin-bottom: 12px;

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.form-header h2 {

    margin: 0;

    font-size:
        clamp(32px, 3vw, 48px);

    letter-spacing: -2px;

}


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

form {

    display: flex;

    flex-direction: column;

    gap: 32px;

}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.form-group > label {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.3px;

}


.form-group > label span {

    color: var(--blue);

}


.form-group > label em {

    margin-left: 7px;

    color: #9ca4ad;

    font-size: 9px;

    font-style: normal;

    font-weight: 600;

}


.form-group small {

    color: #8a929c;

    font-size: 11px;

}


/* ==========================================
   INPUTS
   ========================================== */

input,
select,
textarea {

    width: 100%;

    padding: 17px 18px;

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

    border-radius: 0;

    outline: none;

    background: #fafbfc;

    color: var(--black);

    font-family: inherit;

    font-size: 14px;

    transition:
        border 0.2s,
        background 0.2s,
        box-shadow 0.2s;

}


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

    background: white;

    border-color: var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(22, 139, 234, 0.08);

}


textarea {

    min-height: 230px;

    resize: vertical;

    line-height: 1.6;

}


/* ==========================================
   FILE UPLOAD
   ========================================== */

.upload-box {

    min-height: 110px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 20px;

    border:
        1px dashed #aeb7c0;

    background: #fafbfc;

    cursor: pointer;

    transition:
        border 0.2s,
        background 0.2s;

}


.upload-box:hover {

    border-color: var(--blue);

    background: #f4faff;

}


.upload-icon {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--blue);

    color: white;

    font-size: 27px;

    font-weight: 300;

}


.upload-box strong {

    display: block;

    margin-bottom: 6px;

    font-size: 12px;

    letter-spacing: 0.5px;

}


.upload-box p {

    margin: 0;

    color: #8b949e;

    font-size: 11px;

    line-height: 1.5;

}


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

.submit-button {

    min-height: 64px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0
        25px;

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

    background: var(--blue);

    color: white;

    font-family: inherit;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition:
        background 0.2s,
        transform 0.2s;

}


.submit-button:hover {

    background: var(--blue-light);

    border-color: var(--blue-light);

    transform:
        translateY(-2px);

}


.submit-arrow {

    font-size: 23px;

    transition:
        transform 0.2s;

}


.submit-button:hover
.submit-arrow {

    transform:
        translateX(6px);

}


/* ==========================================
   ORDER NOTIFICATION
   ========================================== */

.order-notification {

    position: fixed;

    top: 25px;

    left: 50%;

    transform:
        translateX(-50%);

    z-index: 9999;


    display: flex;

    align-items: center;

    gap: 12px;


    min-width: 300px;

    max-width:
        calc(100% - 40px);


    padding:
        16px
        22px;


    color: white;


    border-radius: 8px;


    font-size: 14px;

    font-weight: 700;


    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.22);


    animation:
        notification-in
        0.4s
        ease;

}


/* SUCCESS */

.success-notification {

    background: #20a65a;

}


/* ERROR */

.error-notification {

    background: #d83b3b;

}


/* NOTIFICATION ICON */

.notification-icon {

    width: 27px;

    height: 27px;

    flex-shrink: 0;


    display: flex;

    align-items: center;

    justify-content: center;


    border-radius: 50%;


    background:
        rgba(255, 255, 255, 0.20);


    color: white;


    font-size: 15px;

    font-weight: 800;

}


/* ==========================================
   NOTIFICATION ENTER
   ========================================== */

@keyframes notification-in {

    from {

        opacity: 0;

        transform:
            translate(-50%, -25px);

    }


    to {

        opacity: 1;

        transform:
            translate(-50%, 0);

    }

}


/* ==========================================
   NOTIFICATION LEAVE
   ========================================== */

.order-notification.hide {

    opacity: 0;

    transform:
        translate(-50%, -25px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;

}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 950px) {

    .order-page {

        grid-template-columns: 1fr;

    }


    .order-info {

        padding:
            70px
            8%;

    }


    .intro {

        margin-bottom: 40px;

    }


    .steps {

        max-width: 600px;

    }


    .form-side {

        padding:
            70px
            8%;

    }

}


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

@media (max-width: 600px) {

    .navbar {

        height: 80px;

        padding:
            0
            20px;

    }


    .logo {

        width: 170px;

        max-height: 55px;

    }


    .back-button {

        font-size: 9px;

    }


    .order-page {

        min-height:
            calc(100vh - 80px);

    }


    .order-info {

        padding:
            60px
            25px;

    }


    .order-info h1 {

        font-size: 50px;

        letter-spacing: -3px;

    }


    .form-side {

        padding:
            55px
            25px;

    }


    .form-header {

        margin-bottom: 40px;

    }


    .upload-box {

        align-items: flex-start;

    }


    .order-notification {

        top: 15px;

        min-width: 0;

        width:
            calc(100% - 30px);

    }

}

/* Anti-bot honeypot: intentionally invisible to real users */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }