/* 2. Main Background Wrapper */
.contact-bg {
    background-color: var(--countdown-section-bg) !important;
    padding-bottom: 40px;
    width: 100%;
    margin-top: -20px;
    margin-bottom: -20px;
}


/* 3. Global Variables & Main Container Configuration */
#contact {
    /*background-color: var(--contact-bg-main);*/
    color: var(--contact-text-main);
    font-family: var(--font-primary);
    background-image: url('https://forumbranzykosmetycznej.pl/wp-content/uploads/2026/05/image-4.svg'),  linear-gradient(#ff0086, #ff85c5) !important;
    overflow: hidden !important;
    background-repeat: no-repeat; /* Zapobiega powielaniu się zdjęcia */
    padding: 60px; 
    padding-bottom: 40px !important;
    box-sizing: border-box;
    /*margin-left: auto;
    margin-right: auto;
    max-width: 1400px;*/
    border-radius: 50px;
}

/* 4. Layout Architecture (Flexbox for Equal Height & Content Distribution) */
#contact .contact-section-data {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: stretch; /* Forces equal height for both columns */
    margin-bottom: 40px;
 
    
}

/* Left text column setup for top alignment with controlled spacing */
#contact .contact-section-data > div:first-child {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content directly under the description */
    gap: 40px; /* Provides consistent spacing between description and minor contact info */
    padding: 0 !important; /* Overrides native WordPress padding */
}

/* Wymuszenie pełnej szerokości dla zawartości lewej kolumny */
#contact .contact-section-data > div:first-child > .wp-block-group,
#contact .contact-section-minor {
    width: 100%;
    max-width: 100% !important; /* Nadpisanie natywnych limitów WordPressa */
}

/* Horyzontalne rozciągnięcie sekcji "KONTAKT" i "LOKALIZACJA" */
#contact .contact-section-minor-top {
    width: 100%;
    display: flex;
    justify-content: space-between !important; /* Wymusza rozsunięcie do skrajnych krawędzi */
    gap: 20px; /* Zabezpieczenie dla mniejszych ekranów, by tekst się nie zlał */
}



/* 5. Dark Section Typography */

/*HEADER*/
#contact .contact-section-header {
    color: var(--h1-text-color); 
    font-family: var(--font-primary);
    font-size: var(--mobile-h1-font-size);
    font-weight: var(--h1-font-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: var(--h1-text-transform);
    margin-bottom: 20px;
    margin-top: 0;
}

#contact .contact-section-desc {
    color: var(--contact-text-muted);
    font-size: var(--p-font-size);
    font-family: var(--font-primary);
    font-weight: var(--p-font-weight);
    line-height: var(--p-line-heght);
    margin-bottom: 20px; /* Reduced since Flexbox handles the spacing now */
}
/*Minor section: "Kontakt" & "Lokalizacja"*/
/*h3 headings - "Kontakt"," Lokalizacja"*/
#contact .contact-minor-header {
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    letter-spacing: var(--h3-letter-spacing);
    color: var(--contact-text-muted);
    margin-bottom: 5px;
    text-transform: var(--h3-text-transform);
}

#contact .contact-minor-value {
    color: var(--p-text-color);
    font-size: var(--p-font-size);
    font-family: var(--font-primary);
    font-weight: var(--p-font-weight);
    line-height: var(--p-line-heght);
    margin-bottom: 25px;
}

#contact .contact-mail-value {
    font-size: var(--contact-smaller-mail-text-size) !important ;
}

#contact .contact-minor-value:last-child {
    margin-bottom: 0; /* Prevents overflow pushing the layout */
}


#contact .title-desc-wrapper {
    /* Izolacja layoutu. Wymusza shrink-to-fit ignorując narzuty WP */
    display: table !important;
    width: 1px !important; /* Tabela skurczy się na maxa, a H1 rozepchnie ją do swoich wymiarów */
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#contact .title-desc-wrapper > .contact-section-header {
    display: table-cell !important;
    padding-bottom: 20px !important; /* Table-cell ignoruje marginesy pionowe, używamy paddingu */
    margin: 0 !important;
    vertical-align: top !important;
}

#contact .title-desc-wrapper > .contact-section-desc {
    /* Konwersja paragrafu na opis tabeli - dziedziczy wymiar z dokładnością co do piksela */
    display: table-caption !important;
    caption-side: bottom !important; 
    white-space: normal !important; /* Zezwalamy na naturalne łamanie słów w rygorystycznych granicach */
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
}

/* 6. Form Container (White Card Override) */
#contact .contact-section-form {
    flex: 1 1 300px;
    background-color: var(--contact-bg-inverted);
    border-radius: 30px;
    padding: 40px;
    box-sizing: border-box;
    
    /* Variable Scoping for Accessibility/WCAG */
    
    color: var(--contact-text-main-inverted);
    display: flex;
    flex-direction: column;
}

#contact .contact-section-heading-title {
    color: var(--contact-text-main-inverted); 
    font-family: var(--font-primary);
    font-size: var(--h3-font-size);
    font-weight: var(--h1-font-weight);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: var(--h1-text-transform);
}

#contact .contact-section-heading-desc {
    color: var(--contact-text-main-inverted) !important; 
    color: var(--p-text-color);
    font-size: var(--p-font-size);
    font-family: var(--font-primary);
    font-weight: var(--p-font-weight);
    line-height: var(--p-line-heght);
    margin-bottom: 20px;
}

/* 7. Forminator Overrides & Padding Removal */
#contact .forminator-custom-form {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

#contact .forminator-row {
    margin-bottom: 20px !important; /* Reduced margin to tighten the form */
}

#contact .forminator-row-last {
    margin-bottom: 0 !important;
}

#contact .forminator-field {
    margin-bottom: 0 !important; /* Stripped to prevent double margins */
    position: relative;
}

/* Zaktualizowany kontener pola dla pozycjonowania etykiety */
#footer .forminator-field {
    position: relative;
    padding-top: 20px; /* Przestrzeń na ewentualne uniesienie etykiety */
}

/* Cofnięcie ukrycia WCAG i stylizacja na wewnątrz-polowy placeholder */
#footer .forminator-label {
    position: absolute !important;
    top: 30px !important; /* Wyrównanie wewnątrz inputa */
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    
    color: var(--p-text-color);
    font-size: var(--p-font-size);
    font-family: var(--font-primary);
    font-weight: var(--p-font-weight);
    line-height: var(--p-line-heght);
    
    /* Zabezpieczenie UX: kliknięcie w tekst aktywuje input pod spodem */
    pointer-events: none !important; 
    transition: all var(--fbk-transition) !important;
}

/* Unifikacja koloru wymaganej gwiazdki (*) */
#footer .forminator-required {
    color: inherit !important;
}

/* * Opcjonalna logika Material Design (nowoczesne przeglądarki): 
 * Uniesienie etykiety, gdy pole jest aktywne.
 */
#footer .forminator-field:focus-within .forminator-label {
    top: 0 !important;
    color: var(--p-text-color);
    font-size: var(--p-font-size);
    font-family: var(--font-primary);
    font-weight: var(--p-font-weight);
    line-height: var(--p-line-heght);
    opacity: 1 !important;
}

/* Input Elements - Main Styling */
#contact .forminator-input,
#contact .forminator-textarea {
    width: 100%;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--contact-line-default) !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease;
    
    /* Font styles */
    font-size: var(--p-font-size);
    font-family: var(--font-primary);
    font-weight: var(--p-font-weight);
    line-height: var(--p-line-heght);

    /* Updated Text Color for user input */
    color: var(--contact-text-main-inverted) !important;
}

#contact .forminator-textarea {
    resize: vertical;
}

#contact .forminator-input:focus,
#contact .forminator-textarea:focus {
    outline: none !important;
    border-bottom-color: var(--contact-line-focus) !important;
}

/* WebKit Autocomplete Override (UI Consistency & Security Fix) */
#contact .forminator-input:-webkit-autofill,
#contact .forminator-input:-webkit-autofill:hover, 
#contact .forminator-input:-webkit-autofill:focus, 
#contact .forminator-textarea:-webkit-autofill,
#contact .forminator-textarea:-webkit-autofill:hover,
#contact .forminator-textarea:-webkit-autofill:focus {
    /* Enforce the correct text color during browser autofill */
    -webkit-text-fill-color: var(--contact-text-main-inverted) !important;
    
    /* Delay the background color change to maintain the transparent background */
    transition: background-color 5000s ease-in-out 0s !important;
    
    /* Keep typography consistent */
    font-size: var(--p-font-size) !important;
    font-family: var(--font-primary) !important;
}

/* Required asterisk color */
#contact .forminator-required {
    color: var(--contact-error-color) !important;
}

/* 8. Error States (Security/UI Handling) */
#contact .forminator-has_error .forminator-input,
#contact .forminator-has_error .forminator-textarea {
    border-bottom-color: var(--contact-error-color) !important;
}

#contact .forminator-has_error .forminator-label {
    color: var(--contact-error-color) !important;
}

#contact .forminator-error-message {
    color: var(--contact-error-color) !important;
    font-size: var(--p-font-size);
    font-family: var(--font-primary);
    font-weight: var(--p-font-weight);
    line-height: var(--p-line-heght);
    margin-top: 8px;
    display: block;
}

/* 9. CTA Button */
#contact .forminator-button-submit {
    /*background-color: var(--button-action-bg-color) ;
    color: var(--button-default-color) ;
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    border: var(--button-border);
    font-weight: var(--button-font-weight);
    text-decoration: var(--button-text-decoration);
    transition: var(--button-transition);
    cursor: var(--button-cursor);
    white-space: var(--button-white-space);*/
}

#contact .forminator-button-submit:hover {
   /* background-color: var(--button-cta-hover-bg) !important;
}

#contact .forminator-button-submit:active {
    transform: scale(0.98) !important;*/
}

/* 10. Map Container */
#contact .contact-section-map {
    width: 100%;
    border-radius: 50px;
    overflow: hidden;
    margin-top: 20px;
}

#contact .contact-section-map iframe {
    width: 100%;
    display: block;
}
/* ==========================================================================
   Mobile Layout Override (Resolutions < 1191px)
   Architecture: Flexbox Column Stack & Strict Overflow Prevention
   ========================================================================== */
@media (max-width: 1190px) {
    
    /* 1. Main Background & Container Resizing */
    /* Breakout container to full viewport width */
    .contact-bg {
        padding: 30px 0;
        overflow-x: hidden;
        width: 100vw !important; 
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important; 
        margin-right: calc(50% - 50vw) !important; 
        box-sizing: border-box;
    }

    /* Disable native WordPress constraints */
    .contact-bg.is-layout-constrained > *,
    #contact.is-layout-constrained > * {
        max-width: 100% !important;
    }

    #contact {
        padding: 30px 20px; 
        border-radius: 30px; 
        margin-left: 0px !important;
        margin-right: 0px !important;
        width: 100% !important; 
        box-sizing: border-box; 
    }

    /* 2. Layout Reconfiguration (Stacking columns) */
    #contact .contact-section-data {
        flex-direction: column;
        gap: 40px;
        align-items: center; 
    }

    /* Left column full width */
    #contact .contact-section-data > div:first-child {
        width: 100%;
        flex: 1 1 auto;
    }

    /* Stack minor sections vertically and force strict left alignment */
    #contact .contact-section-minor-top {
        flex-direction: column;
        gap: 30px;
        justify-content: flex-start !important;
        align-items: flex-start !important; 
    }

    /* Override WordPress native flex properties and rogue margins for children */
    #contact .contact-section-minor-top > .wp-block-group {
        align-items: flex-start !important;
        text-align: left !important;
        margin-left: 0 !important; 
        margin-right: auto !important; 
        width: 100%;
    }

    /* 3. Typography Adjustments & Full Width Stretching Override */
    
    /* Override desktop table layout to allow full-width stretching */
    #contact .title-desc-wrapper {
        display: block !important;
        width: 100% !important;
    }

    /* Force full width and block display for the H2 header */
    #contact .title-desc-wrapper > .contact-section-header,
    #contact .contact-section-header {
        display: block !important;
        width: 100% !important;
    font-size: var(--mobile-scaled-h1-font-size) !important;
        word-wrap: break-word;
        overflow-wrap: break-word; 
        hyphens: auto;
    }

    /* Force full width and block display for the paragraph description */
    #contact .title-desc-wrapper > .contact-section-desc,
    #contact .contact-section-desc {
        display: block !important;
        width: 100% !important;
        font-size: var(--p-mobile-font-size);
    }

    #contact .contact-minor-header {
        font-size: var(--mobile-h3-font-size);
    }

    #contact .contact-minor-value {
        font-size: var(--p-mobile-font-size);
    }

    #contact .contact-section-heading-title {
        font-size: var(--mobile-h3-font-size);
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    #contact .contact-section-heading-desc {
        font-size: var(--p-mobile-font-size);
    }

    #contact .forminator-error-message {
        font-size: var(--p-mobile-font-size);
    }

    /* 4. Form Container Sub-layout */
    #contact .contact-section-form {
        width: 100%;
        padding: 24px 20px; 
        border-radius: 20px;
        flex: 1 1 auto;
    }

    /* 5. Inputs & Security Layout Boundaries */
    #contact .forminator-custom-form,
    #contact .forminator-input,
    #contact .forminator-textarea {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: var(--p-mobile-font-size);
    }

    /* Ensure labels don't get pushed out of bounds on mobile focus */
    #footer .forminator-label {
        max-width: calc(100% - 10px) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--p-mobile-font-size);
    }

    /* Focus state label adjustment */
    #footer .forminator-field:focus-within .forminator-label {
        font-size: var(--p-mobile-font-size);
    }

    /* 6. Map Resizing */
    #contact .contact-section-map {
        border-radius: 30px; 
        margin-top: 30px;
        width: 100%;
    }
    
    /* Ensure iframe scales properly and provides touch target area */
    #contact .contact-section-map iframe {
        min-height: 350px; 
        max-width: 100%;
    }
    /* 1. Odblokowanie wszystkich kontenerów nadrzędnych w lewej kolumnie */
    #contact .contact-section-data > div:first-child,
    #contact .contact-section-data > div:first-child > .wp-block-group {
        flex: 1 1 100% !important; /* Wymuszenie zajęcia 100% szerokości we Flexboxie */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important; /* Zapobiega kurczeniu się kontenera (shrink) */
        display: block !important; 
        box-sizing: border-box !important;
    }
    #contact .title-desc-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Wymuszenie pełnej szerokości i reset agresywnego łamania słów na nagłówku */
    #contact .title-desc-wrapper > .contact-section-header,
    #contact .contact-section-header {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        
        /* Nadpisanie potencjalnego break-all i przywrócenie naturalnego zachowania tekstu */
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
        hyphens: none !important;
    }

    /* 4. Wymuszenie pełnej szerokości dla opisu */
    #contact .title-desc-wrapper > .contact-section-desc,
    #contact .contact-section-desc {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
}