/* --- SEKCJA: form_text (kontakt) --- */

.form-text-group {
    background: #ffffff;
    color: #111827;
    padding: clamp(48px, 7vw, 84px) clamp(20px, 5vw, 72px) clamp(64px, 8vw, 104px);
    font-family: 'Chivo Mono', monospace;
    .module-title{
        .container{
            max-width: 1230px;
            width: 100%;
            .module-title-text{
                text-align: left;
                font-size: 12px;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                color: #9397ab;
                font-family: 'Chivo Mono', monospace;
                font-weight: 400;
                display: flex;
                align-items: center;
                gap:10px;
                margin-bottom: 28px;
                &::before{
                    content: "";
                    display: block;
                    width: 28px;
                    height: 2px;
                    background-color: #b2b6ca;
                }
            }
        }
        padding-top:0;
        padding-bottom: 0;
    }
}

.form-text-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.form-text {
    width: 100%;
    font-family: 'Chivo Mono', monospace;

    /* Ukrywamy sekcję tekstową, ponieważ formularz ma być na całą szerokość */
    .text {
        display: none !important;
    }

    /* Formularz zajmuje pełną szerokość i centruje się */
    .form {
        width: 100%;
        display: flex;
        justify-content: center;

        .container-block {
            width: 100%;
            max-width: 590px;
            margin: 0 auto;
            padding-top:0;
            padding-bottom: 0;
            &.right{
                padding-left: 0;
            }
        }
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Nagłówek sekcji z kreską (analogicznie do wzorca) */
    .form-text-wrapper::before {
        content: "";
        /* Jeśli potrzebujesz linii nad nagłówkiem */
    }

    /* Stylizacja głównego nagłówka i opisu */
    .title {
        margin-bottom: 8px;
        text-align: center;

        h3 {
            font-family: 'Chivo Mono', monospace;
            font-weight: 500;
            font-size: clamp(24px, 2.6vw, 32px);
            letter-spacing: -0.012em;
            color: #292b31;
            margin: 0px 0px 8px;
            text-align: center;
            text-transform: uppercase;
            scale: 1.549;
            transform-origin: center bottom;
            will-change: scale;
            line-height: 1.12;
        }
    }

    p[role="heading"] {
        margin: 0 0 28px;
        text-align: center;
        font-size: 14px;
        font-family: 'Chivo Mono', monospace;
        font-weight: 400;
        color: #4b5563;
    }

    /* Układ pól formularza */
    form {
        display: grid;
        gap: 14px;
        width: 100%;

        .row {
            display: contents;
        }

        .field, .form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
            width: 100%;
            margin: 0;

            label {
                font-size: 12px;
                font-family: 'Chivo Mono', monospace;
                font-weight: 400;
                line-height: 1.55;
                color: #374151;
            }

            .input, input[type="text"], input[type="email"], input[type="tel"], textarea {
                width: 100%;
                padding: 6px 10px;
                border: 1px solid #d1d5db;
                border-radius: 8px;
                background: #ffffff;
                font-size: 14px;
                font-family: 'Chivo Mono', monospace;
                font-weight: 400;
                color: #111827;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
                line-height: 1.5;
                height: 36px;
                &:focus {
                    outline: 2px solid oklch(0.63 0.21 27);
                    outline-offset: 0;
                }

                &::placeholder {
                    color: #9ca3af;
                }
            }

            textarea {
                resize: vertical;
                min-height: 130px;
            }
        }

        /* Checkbox regulaminu */
        .checkbox-label {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            cursor: pointer;
            font-size: 12px;
            font-family: 'Chivo Mono', monospace;
            font-weight: 400;
            color: #4b5563;

            input[type="checkbox"] {
                position: absolute;
                opacity: 0;
                cursor: pointer;

                &:checked ~ .checkbox-styled {
                    background-color: #111827;
                    border-color: #111827;
                    
                    span {
                        opacity: 1;
                    }
                }
            }

            .checkbox-styled {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 18px;
                height: 18px;
                border: 1px solid #9ca3af;
                border-radius: 4px;
                background-color: #ffffff;
                margin-top: 2px;
                flex-shrink: 0;
                transition: all 0.2s ease;

                span {
                    opacity: 0;
                    color: #ffffff;
                    font-size: 12px;
                    font-weight: 700;
                    line-height: 1;
                }
            }

            .regulamin {
                display: inline-block;
            }
        }

    .btn-secondary, input[type="submit"] {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                width: auto;
                margin: 12px auto 0;
                border-radius: 999px;
                padding: 12px 32px;
                
                background-color: transparent;
                background-image: linear-gradient(oklch(0.54 0.19 27), oklch(0.54 0.19 27));
                background-repeat: no-repeat;
                background-size: 0% 100%;
                background-position: left;
                
                color: oklch(0.54 0.19 27);
                border: 1.5px solid oklch(0.54 0.19 27);
                border-radius: 30px;
                font-size: 15px;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                font-family: 'Chivo Mono', monospace;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.4s ease;

                &:hover {
                    background-size: 100% 100%;
                    color: #ffffff;
                }
                i{
                    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
                    animation: sendNudge 2.2s ease-in-out infinite;
                }

            }
            button[type="submit"]:hover{
                color: white !important;
                box-shadow: 0 10px 30px color-mix(in srgb, oklch(0.54 0.19 27) 35%, transparent);
                transform: scale(1);
                
                background-color: transparent !important;
                background-image: linear-gradient(oklch(0.54 0.19 27), oklch(0.54 0.19 27)) !important;
                background-repeat: no-repeat !important;
                background-size: 100% 100% !important;
            }
        }

}
@keyframes sendNudge {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}
   @media (max-width: 575.5px) {
    .form-text{
        .title{
            h3{
                font-size: 18px;
            }
        }
    }
    }

    @media (min-width: 576px) and (max-width: 767.5px) {
    }

    @media (min-width: 768px) and (max-width: 991.5px) {
    }

    @media (min-width: 992px) and (max-width: 1199.5px) {

    }

    @media (min-width: 1200px) and (max-width: 1579.5px) {

    }