@charset "utf-8";

.close {
    width: 40px;
    height: 40px;
    opacity: 0.3;
}

.close:hover {
    opacity: 1;
}

.close:before,
.close:after {
    position: absolute;
    content: ' ';
    height: 40px;
    width: 3px;
    background-color: white;
}

.close:before {
    transform: rotate(45deg);
}

.close:after {
    transform: rotate(-45deg);
}

@media screen and (max-width: 4500px) and (min-width: 200px) {

    /* ===== RESET & BASE ===== */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        background: black;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 100vh;
    }

    /* Use to form category "Where is code" - Paragon */
    #popup_wrapper {
        display: none;
        position: absolute;
        z-index: 55000;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.74)
    }

    #popup_wrapper {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 55000;
        display: none;

    }

    #popup {
        width: 500px;
        height: 100vh;
        position: fixed;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        z-index: 10000000;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    #positive_wrapper {
        position: absolute;
        z-index: 55000;
        cursor: pointer;
    }

    #positive_wrapper {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9999;
        background: rgba(44, 44, 44, 0.7);
        display: none;
    }

    #positive_msg {
        width: 700px;
        height: auto;
        background: #0A0C10;
        position: fixed;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: calc(50% - 245px);
        z-index: 10000000;
        border-radius: 20px;
        display: block;
        cursor: pointer;
    }

    #positive_ok {
        float: right;
        margin-right: 0px;
        margin-top: 15px;
        cursor: pointer;
    }

    #positive_losowanie {
        width: 300px;
        margin: 0 auto;
    }

    #positive_title {
        height: auto;
        width: 100%;
        text-align: center;
        font-family: "Poppins-Bold";
        margin: 0 auto;
        color: white;
        font-size: 28px;
        margin-top: 55px;
    }

    #positive_text {
        width: 680px;
        font-family: "Poppins-Bold";
        color: white;
        font-size: 24px;
        text-align: center;
        margin: 0 auto;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    #positive_small {
        font-size: 11px;
        display: block;
        margin-top: 60px;
    }



    /* ===== RESET & BASE ===== */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        background: black;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 100vh;
    }

    /* ===== WRAPPER ===== */
    .wrapper {
        width: 800px;
        max-width: 100%;
        overflow: hidden;

    }

    /* ===================================================================
   HERO SECTION
   Background = fabric texture image (bg.jpg)
   Diagonal blue/green split is baked into the image.
=================================================================== */
    .hero {
        position: relative;
        min-height: 530px;
        overflow: hidden;
        /* Real fabric texture with the diagonal blue/green split */
        background-image: url('../images/bg.jpg');
        background-size: cover;
        background-position: center top;
    }

    /* ===== LOGO (top-right) ===== */
    .logo {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 10;
        width: 198px;
    }

    .logo img {
        width: 100%;
        border-radius: 4px;
        /* logo sits on a white label background – no blend needed */
    }

    /* ===== STARS ===== */
    .stars {
        position: absolute;
        top: 40px;
        left: 385px;
        /* right of WYGRAJ badge */
        z-index: 10;
        width: 200px;
        height: 90px;
        pointer-events: none;
    }

    .star {
        position: absolute;
        mix-blend-mode: multiply;
        /* removes white background from star images */
    }

    .star-1 {
        width: 80px;
        top: 10px;
        left: 0;
    }

    .star-2 {
        width: 110px;
        top: 20px;
        left: 72px;
    }

    /* ===== WYGRAJ BURST ===== */
    .burst-wrap {
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 10;
        width: 347px;
    }

    .burst-img {
        width: 100%;
        mix-blend-mode: screen;
        /* removes black background */
    }

    /* ===== CAR ===== */
    .car-wrap {
        position: absolute;
        bottom: -50px;
        left: 30px;
        z-index: 11;
        width: 732px;
        transform: rotate(-21deg);
        transform-origin: bottom left;
    }

    .car-img {
        width: 100%;
        mix-blend-mode: screen;
        /* removes black background */
    }

    /* ===== PO NITCE / DO AUTA ===== */
    .tagline {
        position: absolute;
        bottom: 16px;
        right: 10px;
        z-index: 10;
        width: 390px;
    }

    .do-auta-img {
        width: 100%;
        mix-blend-mode: screen;
        /* removes black background, keeps embroidered text */
    }

    /* ===================================================================
   FORM CONTAINER – zielone tło tkaniny wokół ramki i pod nią
=================================================================== */
    .form-container {
        background-image: url('../images/bg_manu_bottom.jpg');
        background-size: cover;
        background-position: center bottom;
        padding: 16px 16px 22px;
    }

    /* ===================================================================
   FORM OUTER – uses the embroidered frame image as border
=================================================================== */
    .form-outer {
        /* The frame image is the border itself: dark interior + green stitched edge */
        background-image: url('../images/ramka.png');
        background-size: 100% 100%;
        /* stretch to fill */
        padding: 28px;
        /* space for the embroidered border to show */
        position: relative;
    }

    /* ===== FORM INNER ===== */
    .form-section {
        background: #151515;
        padding: 28px 12px 28px;
    }

    .form-title {
        width: 254.5px;
        height: 49px;
        background: url('../images/wez-udzial_bg.png');
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 30px;
    }
    .form-subtitle {
        font-family: "Poppins-ExtraBold";
        font-size: 14px;
        font-weight: 700;
		text-transform: uppercase;
		color: white;
    }
    /* ===== ROWS & FIELDS ===== */
    form .row {
        display: flex;
        gap: 22px;
        margin-bottom: 20px;
    }

    .field {
        flex: 1;
        position: relative;
    }

    .field input {
        width: 100%;
        background: transparent;
        border: 2px solid #c89a0a;
        color: white;
        font-family: "Poppins-ExtraBold";
        font-size: 14px;
        font-weight: 700;
        padding: 21px 40px 21px 21px;
        text-transform: uppercase;
        outline: none;
        transition: border-color 0.2s;
        border-radius: 5px;
    }

    .field input::placeholder {
        color: white;
        opacity: 1;
    }

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

    #paragon2 {
        border-color: white !important;
        font-size: 12px;
        padding: 21px 40px 21px 21px;
        height: 67px;
    }

    /* info (i) button */
    .show_popup1 {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        background: url('../images/gdzie_jest_numer.png');
        color: white;
        border-radius: 50%;
        width: 27px;
        height: 27px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background 0.2s;
    }

    .field--icon input {
        padding-right: 44px;
    }

    .field--dual-placeholder {
        position: relative;
    }

    .field--dual-placeholder .placeholder-dual {
        position: absolute;
        left: 21px;
        /* dopasuj do paddingu inputa */
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #fff;
        transition: opacity 0.2s;
    }

    .field--dual-placeholder .placeholder-dual strong {
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.5px;
        font-family: "Poppins-ExtraBold";
    }

    .field--dual-placeholder .placeholder-dual span {
        font-size: 10px;
        font-weight: 400;
        font-family: "Poppins-SemiBold";
    }

    /* Ukryj gdy input ma wartość lub focus */
    .field--dual-placeholder input:focus + .placeholder-dual,
    .field--dual-placeholder input:not(:placeholder-shown) + .placeholder-dual {
        opacity: 0;
    }

    /* ===================================================================
   CHECKBOXES
   custom-check uses checkbox.png as the frame image
=================================================================== */
    .checkboxes {
        margin: 16px 0 22px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .checkbox-label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        cursor: pointer;
        user-select: none;
    }

    /* hide native checkbox */
    .checkbox-label input[type="checkbox"] {
        display: none;
    }

    /* Custom checkbox using the provided frame image */
    .custom-check {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        background-image: url('../images/checkbox.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-top: 1px;
        position: relative;
        transition: filter 0.15s;
    }

    /* Checkmark shown when checked */
    .custom-check.is-checked::after {
        content: '✓';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f0c030;
        font-size: 16px;
        font-weight: 900;
        line-height: 1;
    }

    .check-text {
        color: white;
        font-size: 12px;
        line-height: 17px;
        font-weight: 400;
        padding-top: 3px;
        font-family: "Poppins-SemiBold";

    }

    /* ===== FORM ACTIONS ===== */
    .form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 4px;
    }

    .btn-sprawdz {
        width: 179px;
        height: 76px;
        background: url('../images/button_send.png');
        background-repeat: no-repeat;
        background-size: contain;
        color: #000;
        border: 0px;
        cursor: pointer;
        border-radius: 3px;
        text-transform: uppercase;
    }

    .btn-regulamin {
        background: #ADD6F6;
        color: black;
        border: none;
        font-family: "Poppins-ExtraBold";
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1px;
        padding: 10px 16px;
        cursor: pointer;
        border-radius: 3px;
        text-transform: uppercase;
        transition: background 0.2s;
    }

    /* ===================================================================
   FOOTER
=================================================================== */
    .footer {
        background: transparent;
        padding: 60px 0px 0;
        text-align: center;
    }

    .footer p {
        color: white;
        font-size: 12px;
        font-family: "Poppins-SemiBold";
    }

    /* ===================================================================
   RESPONSIVE  600px – 799px
   Hero skalowany proporcjonalnie przez vw (800px = 100vw).
   Formularz pozostaje w układzie 2 kolumn.
=================================================================== */
    @media (max-width: 799px) {
        .wrapper {
            width: 100%;
        }

        /* Hero – proporcjonalne skalowanie: wartość_px / 800 * 100 = vw */
        .hero {
            min-height: 66vw;
        }

        .logo {
            width: 25vw;
            top: 1.5vw;
            right: 1.5vw;
        }

        .stars {
            left: 48vw;
            top: 5vw;
            width: 25vw;
            height: 11vw;
        }

        .star-1 {
            width: 10vw;
            top: 1.25vw;
            left: 0;
        }

        .star-2 {
            width: 14vw;
            top: 2.5vw;
            left: 9vw;
        }

        .burst-wrap {
            width: 43vw;
            top: 0.5vw;
            left: 0.5vw;
        }

        .car-wrap {
            width: 91vw;
            bottom: -6vw;
            left: 3vw;
        }

        .tagline {
            width: 49vw;
            bottom: 2vw;
            right: 1.25vw;
        }
    }

    /* ===================================================================
   RESPONSIVE  < 600px
   Dodatkowo: formularz zwija się do jednej kolumny.
=================================================================== */
    @media (max-width: 599px) {
        .form-outer {
            padding: 12px;
        }

        .form-section {
            padding: 20px 14px 18px;
        }

        .form-title {
            font-size: 28px;
            margin-bottom: 14px;
        }

        form .row {
            flex-direction: column;
            gap: 10px;
        }

        .btn-sprawdz {
            font-size: 18px;
            padding: 12px 22px;
        }
    }

    /* ===================================================================
   KEYFRAMES
=================================================================== */
    @keyframes screenOut {
        from {
            opacity: 1;
            transform: scale(1);
        }

        to {
            opacity: 0;
            transform: scale(0.97);
        }
    }

    @keyframes screenIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideUpIn {
        from {
            opacity: 0;
            transform: translateY(32px);
        }

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

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0.82);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes slideOutDown {
        from {
            opacity: 1;
            transform: translateY(0);
        }

        to {
            opacity: 0;
            transform: translateY(20px);
        }
    }

    /* ===================================================================
   SCREEN TRANSITIONS
=================================================================== */
    #screen-form.is-leaving {
        animation: screenOut 0.38s ease forwards;
        pointer-events: none;
    }

    /* ===================================================================
   EKRAN GRATULACJE
=================================================================== */
    .screen-gratulacje {
        background: black;
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 700px;
    }

    .screen-gratulacje[hidden] {
        display: none;
    }

    .screen-gratulacje.is-entering {
        animation: screenIn 0.4s ease forwards;
    }

    .screen-gratulacje.is-leaving {
        animation: slideOutDown 0.35s ease forwards;
        pointer-events: none;
    }

    .grat-logo {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 10;
        width: 198px;
    }

    .grat-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 90px 20px 30px;
        gap: 14px;
    }

    .grat-stars {
        position: relative;
        width: 140px;
        height: 80px;
    }

    .grat-star {
        position: absolute;
    }

    .grat-star-1 {
        width: 80px;
        top: -10px;
        left: 0px;
    }

    .grat-star-2 {
        width: 110px;
        top: 20px;
        left: 50px;
    }

    .grat-title {
        color: #fff;
        font-family: "AreteMonoRegular";
        font-size: 98px;
        text-transform: uppercase;
        text-align: center;
        line-height: 1;
    }

    .grat-subtitle {
        color: #fff;
        font-family: 'Poppins-ExtraBold';
        font-size: 30px;
        text-align: center;
        margin-top: 4px;
    }

    .grat-subtitle2 {
        width: 50%;
        color: #FFCE08;
        font-family: 'Poppins-SemiBold';
        font-size: 24px;
        text-align: center;
        margin-top: 4px;
    }

    .grat-prize {
        margin: 10px 0;
    }

    .grat-prize-img {
        max-width: 220px;
        width: 100%;
        display: block;
    }

    .btn-powrot {
        background: #FFCE08;
        color: #000;
        border: none;
        font-family: "AreteMonoRegular";
        font-size: 42px;
        padding: 10px 30px;
        cursor: pointer;
        border-radius: 5px;
        text-transform: uppercase;
        margin-top: 50px;
    }

    .grat-footer {
        padding-bottom: 24px;
    }

    /* ===================================================================
   STAGGERED ENTRY ANIMATIONS
=================================================================== */
    .screen-gratulacje.is-entering .grat-stars {
        animation: slideUpIn 0.5s 0.1s both ease-out;
    }

    .screen-gratulacje.is-entering .grat-title {
        animation: slideUpIn 0.5s 0.2s both ease-out;
    }

    .screen-gratulacje.is-entering .grat-subtitle {
        animation: slideUpIn 0.5s 0.3s both ease-out;
    }

    .screen-gratulacje.is-entering .grat-prize {
        animation: scaleIn 0.55s 0.35s both ease-out;
    }

    .screen-gratulacje.is-entering .btn-powrot {
        animation: slideUpIn 0.5s 0.5s both ease-out;
    }

    /* ===================================================================
   GRATULACJE RESPONSIVE
=================================================================== */
    @media (max-width: 799px) {
        .grat-logo {
            width: 25vw;
            top: 1.5vw;
            right: 1.5vw;
        }

        .grat-title {
            font-size: 42px;
        }

        .grat-prize-img {
            max-width: 280px;
        }
    }

    @media (max-width: 499px) {
        .grat-title {
            font-size: 32px;
            letter-spacing: 2px;
        }

        .grat-subtitle {
            font-size: 15px;
        }

        .grat-prize-img {
            max-width: 240px;
        }

        .btn-powrot {
            font-size: 18px;
            padding: 12px 32px;
        }
    }

    /* ===================================================================
   EKRAN GRAJ DALEJ
=================================================================== */
    .screen-graj-dalej {
        background: black;
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 700px;
    }

    .screen-graj-dalej[hidden] {
        display: none;
    }

    .screen-graj-dalej.is-entering {
        animation: screenIn 0.4s ease forwards;
    }

    .screen-graj-dalej.is-leaving {
        animation: slideOutDown 0.35s ease forwards;
        pointer-events: none;
    }

    .graj-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 90px 20px 30px;
        gap: 22px;
        text-align: center;
    }

    .graj-title {
        color: #fff;
        font-family: "AreteMonoRegular";
        font-size: 98px;
        text-transform: uppercase;
        line-height: 1;
        margin-top: 150px;
    }

    .graj-text {
        color: #fff;
        font-family: 'Poppins-ExtraBold';
        font-size: 30px;
        line-height: 46px;
        margin-top: 20px;
    }

    .graj-date {
        color: #f0b800;
        font-family: 'Poppins-SemiBold';
        font-size: 22px;
        line-height: 33px;
        margin-top: 30px;
    }

    /* Staggered entry */
    .screen-graj-dalej.is-entering .graj-title {
        animation: slideUpIn 0.5s 0.1s both ease-out;
    }

    .screen-graj-dalej.is-entering .graj-text {
        animation: slideUpIn 0.5s 0.25s both ease-out;
    }

    .screen-graj-dalej.is-entering .graj-date {
        animation: slideUpIn 0.5s 0.4s both ease-out;
    }

    .screen-graj-dalej.is-entering .btn-powrot {
        animation: slideUpIn 0.5s 0.55s both ease-out;
    }

    #error_wrapper {
        position: absolute;
        z-index: 55001;
        cursor: pointer;
    }

    #error_wrapper {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 55002;
        background: rgba(44, 44, 44, 0.7);
        display: none;

    }

    #errors {
        width: 500px;
        background: #bb0b20;
        border: 5px solid white;
        height: auto;
        position: fixed;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        padding: 30px;
        padding-left: 40px;
        top: calc(50% - 325px);
        border-radius: 20px;
        z-index: 10000000;
        display: block;
        cursor: pointer;
    }

    #errors h1 {
        font-family: "Poppins-Bold";
        color: white;
    }

    #errors ul {
        font-family: "Poppins-Bold";
        font-size: 18px;
        color: white;
    }

    #errors ul li {
        margin-top: 15px;
        list-style-type: disc;
    }

    #errors_ok {
        background: white;
        border-radius: 25px;
        width: 150px;
        height: 50px;
        color: #bb0b20;
        font-family: "Poppins-Bold";
        font-size: 20px;
        text-align: center;
        vertical-align: middle;
        line-height: 50px;
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 25px;
    }