/* ==========================================================================
   1. STYLE PODSTAWOWE I POLA TEKSTOWE
   ========================================================================== */
/* Zaokrąglone narożniki dla wszystkich pól tekstowych */
input.form-control {
    border-radius: 6px !important;
}

/* Dedykowane style dla inputów w sekcji parametrów wymiarowych */
input.form-control.custom-input {
    border-radius: 6px !important;    
    text-align: center;                /* Wyśrodkowanie wpisywanych liczb */
    height: 42px !important;           
    width: 100% !important;            
    max-width: 60px !important;        /* Blokada szerokości okienka na sztywno */
    display: inline-block;
    padding: 6px 2px;                  
    -moz-appearance: textfield;        /* Ukrycie strzałek góra/dół w Firefox */
}

/* Ukrycie strzałek góra/dół w przeglądarkach Chrome/Safari/Edge */
input.custom-input::-webkit-outer-spin-button,
input.custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Styl dla pól tekstowych i textarea w sekcji kontaktowej */
.custom-contact-input,
.custom-contact-textarea {
    border-radius: 6px !important;    
    width: 100% !important;
    max-width: 100% !important;       
    box-sizing: border-box !important;
}

.custom-contact-input {
    height: 42px !important;           
}

.custom-contact-textarea {
    resize: none;                      
}

/* ==========================================================================
   2. UKŁAD GÓRNY (OBRAZEK + PARAMETRY OBOK SIEBIE)
   ========================================================================== */
/* Centrowanie obrazka i pól formularza w pionie i poziomie */
.v-center-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;     
    justify-content: center; 
}

/* Wyrównanie elementów (etykieta, input, jednostka mm) w jednym wierszu */
.row-flex {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* Wyrównanie etykiet tekstowych wymiarów do prawej strony bliżej inputów */
.text-right-custom {
    text-align: right;
    padding-right: 10px;
}

/* Oczyszczenie domyślnych ramek i marginesów fieldsetu */
.sidebar-parameters fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.form-main-heading {
    text-align: center;
}

/* Specjalne dopasowanie dla pola długości pasa i jednostki obok siebie */
.measurement-flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* ==========================================================================
   3. LINIA ROZDZIELAJĄCA (HR)
   ========================================================================== */
hr.red-dashed {
    border: none;                  
    border-top: 2px dashed red;    /* Przerywana, czerwona linia podglądu */
    opacity: 1;                    
    max-width: 950px !important;   
    width: 100% !important;        
    margin: 30px auto !important;  
}
/* ==========================================================================
   4. KONTENERY (USTAWIENIA RAMKI I DESIGNU)
   ========================================================================== */
/* Kontener tworzący elegancką ramkę wokół sekcji formularza */
.table-box-container, 
.final-contact-section {
    max-width: 950px !important;       
    width: 100% !important;
    margin: 35px auto !important;      
    padding: 25px !important;          
    background-color: #ffffff !important; 
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important; /* Nowoczesne zaokrąglenie */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efekt delikatnego uniesienia kontenera po najechaniu myszką */
.table-box-container:hover, 
.final-contact-section:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.03) !important;
}

/* ==========================================================================
   5. MENU ROZWIJANE (CUSTOM DROPDOWN)
   ========================================================================== */
.custom-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-trigger {
    background-color: #fff;
    color: #333;
    padding: 6px 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    height: 42px;
    text-align: left;
    line-height: 28px; /* Centrowanie tekstu w pionie */
    box-sizing: border-box;
}

/* Ukryta lista opcji */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    min-width: 200px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15); /* Miękki, nowoczesny cień */
    z-index: 999999 !important; /* Absolutny priorytet warstwy */
    border-radius: 6px;
    border: 1px solid #ddd;
    top: 100%;
    left: 0;
    margin-top: 2px; 
    padding: 4px 0;
}

/* Niewidzialny mostek powietrzny (Zabezpiecza przed uciekaniem kursora i zamykaniem menu) */
.dropdown-content::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

/* Wyświetlanie listy po najechaniu myszką */
.custom-dropdown:hover .dropdown-content {
    display: block !important;
}

.dropdown-content a {
    color: #333;
    padding: 10px 12px; /* Wygodna strefa kliknięcia */
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 13px;
    transition: background-color 0.15s ease;
}

.dropdown-content a:hover {
    background-color: #f5f5f5;
    color: #f60b0b; /* Podświetlenie wybranego tekstu na czerwono */
}

/* ==========================================================================
   6. PRZYCISK WYSYŁANIA
   ========================================================================== */
.custom-final-submit {
    padding: 12px 40px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 6px !important;    
    background-color: #f60b0b !important; /* Czerwony kolor przewodzący strony */
    border-color: #f60b0b !important;
    transition: all 0.2s ease-in-out;
    display: inline-block;
    color: #ffffff !important;
}

.custom-final-submit:hover {
    background-color: #d60505 !important;
    border-color: #d60505 !important;
    transform: scale(1.03);            /* Efekt mikro-powiększenia */
}

/* ==========================================================================
   7. RESPONSYWNOŚĆ MOBILNA I ZABEZPIECZENIA WARSTW
   ========================================================================== */
.sidebar-parameters .row-flex {
    position: relative !important;
    overflow: visible !important;
}

.measurement-flex-container {
    position: relative !important;
    overflow: visible !important;
    z-index: 9999 !important;
}

#contact-form fieldset,
fieldset {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .v-center-row {
        flex-direction: column;
    }
    .v-center-row img {
        max-width: 100% !important;
        height: auto !important;
        margin-bottom: 20px;
    }
}

@media (max-width: 575.98px) {
    .v-center-row img {
        max-width: 100% !important;   
        height: auto !important;      
        display: block;
        margin: 0 auto 15px auto;     
    }
    
    .v-center-row {
        align-items: center;
    }
    .row-flex {
        flex-direction: row;    
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;               
    }
    .text-right-custom {
        text-align: center;     
        padding-right: 0;
        width: 100%;            
        margin-bottom: 4px;
    }
    .table-box-container, 
    .final-contact-section {
        margin: 15px auto !important; 
        padding: 12px !important;     
        border-radius: 6px !important;
    }
    hr.red-dashed {
        margin: 20px auto !important;
    }
    .dropdown-content a {
        padding: 12px 14px;            /* Większa strefa dotykowa na smartfonie */
        font-size: 14px;               
    }
    .custom-contact-input,
    .custom-contact-textarea {
        font-size: 16px !important;    /* Zapobiega zoomowi ekranu na telefonach iOS/iPhone */
    }
    .custom-final-submit {
        width: 100% !important;        /* Przycisk na pełną szerokość ekranu telefonu */
        padding: 14px 20px !important; 
        font-size: 17px !important;
    }
    .custom-final-submit:hover {
        transform: none !important;    
    }
}