/*
 * Envio24 Order Form - SECTION 4 (Envio com contra reembolso / COD)
 *
 * @version 3.1.5
 * @package envio24-core/assets/css/order-form/
 *
 * ZMIANY 3.1.5 (PL):
 * - FIX UI: Wyraźne "osłabienie" nieaktywnych pól IBAN i PayPal wewnątrz włączonej sekcji.
 *   Gdy metoda płatności jest inna, nieaktywne pole dostaje opacity 0.4 i szare tło,
 *   aby odróżnić je od aktywnego pola. Dotyczy tylko IBAN/PayPal w tej sekcji.
 */

/* TOKENY (bez zmian) */
#e24-order-form{
    --e24-sec4-grid-cols: 5;
    --e24-sec4-grid-gap: 44px;
    --e24-sec4-row-gap: 10px;
    --e24-sec4-row-min-height: 72px;

    --e24-sec4-off-opacity: 0.35;
}

/* TOP ROW */

.e24-section4-inner{
    position: relative;
}

.e24-section4-top-row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.e24-section4-toggle-block .e24-input,
.e24-section4-top-method .e24-input{
    margin-bottom: 0;
}

.e24-section4-toggle-label{
    margin-bottom: 6px;
}

/* =========================================================
 * KOMUNIKAT KRAJOWY (PT only)
 * ======================================================= */
#e24-order-form #e24-cod-country-notice {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    
    /* FIX: display flex lepiej centruje się marginem auto niż inline-flex */
    display: flex; 
    max-width: 100%;
}

/* =========================================================
 * IKONA COD ACTIVATION – styl "wiszący" (jak Inserir)
 * ======================================================= */
#e24-order-form .e24-cod-toggle {
    /* Przywracamy podstawowe style przycisku (nie resetujemy tła/cienia) */
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    outline: none !important;
    
    /* FIX (PL): Powiększenie do 64px (zgodność z Inserir) */
    width: 64px;
    height: 64px;
    border-radius: 8px !important;
    
    /* Styl wizualny (tło + cień) */
    background: transparent !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.16) !important;
    border: none !important;

    /* FIX (PL): skalowanie wrapperem (anty-pikseloza) */
    transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
    transform-origin: center;
    will-change: transform;
}

/* Hover: uniesienie + mocniejszy cień */
#e24-order-form .e24-cod-toggle:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 3px 8px rgba(0,0,0,0.18) !important;
}

/* Stan aktywny (wciśnięty/ON): lekko mniejszy */
#e24-order-form .e24-cod-toggle.is-on {
    transform: scale(0.96);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
}

/* Wnętrze przycisku */
#e24-order-form .e24-cod-toggle .e24-iconbtn__icon {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    overflow: visible !important;
}

/* SVG w środku */
#e24-order-form .e24-cod-toggle .e24-iconbtn__svg {
    /* FIX (PL): SVG też musi mieć 64px, żeby wypełnić wrapper */
    width: 64px;
    height: 64px;
    display: block;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;

    transition: opacity 0.12s;
    
    /* Poprawa renderingu */
    shape-rendering: geometricPrecision;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Wiersz: ikona + warning */
.e24-section4-toggle-row{
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
#e24-order-form #e24-cod-warning{
    margin-top: 0;
}

/* Prawy blok – metoda płatności */
.e24-section4-top-method{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}
.e24-section4-top-method .e24-input{
    max-width: 420px;
}
#e24-order-form .e24-section4-method-options{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    padding-top: 4px;
}
#e24-order-form .e24-section4-method-option{
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
}
#e24-order-form .e24-section4-method-label{
    line-height: 1.3;
}
#e24-order-form .e24-section4-method-radio{
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--e24-orange);
}

/* GRID 5×1 */

.e24-section4-grid{
    display: grid;
    grid-template-columns: repeat(var(--e24-sec4-grid-cols), minmax(0, 1fr));
    column-gap: var(--e24-sec4-grid-gap);
    row-gap: var(--e24-sec4-row-gap);
    align-items: start;
    margin-top: 24px;
}
.e24-section4-field{
    min-height: var(--e24-sec4-row-min-height);
}
.e24-section4-field--amount{ grid-column: 1 / 2; }
.e24-section4-field--iban{   grid-column: 2 / 4; }
.e24-section4-field--paypal{ grid-column: 4 / 6; }

#e24-order-form .e24-section4-grid .e24-input{
    margin-top: 0;
    margin-bottom: 0;
}

/* Kwota – tylko powiększenie symbolu €, reszta bierze się z base.css */
#e24-order-form .e24-section4-field--amount .e24-input__unit{
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* STANY OFF / ON */

.e24-section4-body--off .e24-section4-grid{
    opacity: var(--e24-sec4-off-opacity);
    pointer-events: none;
}
.e24-section4-body--off .e24-section4-grid .e24-input__value{
    cursor: default;
}
.e24-section4-body--on .e24-section4-grid{
    opacity: 1;
    pointer-events: auto;
}

/* =========================================================
 * FIX: WYRAŹNE WYSZARZENIE PÓL IBAN/PAYPAL
 * - dotyczy tylko pól włączonej sekcji, gdy input ma klasę disabled
 * ======================================================= */
#e24-order-form .e24-section4-body--on .e24-section4-field--iban .e24-input--disabled,
#e24-order-form .e24-section4-body--on .e24-section4-field--paypal .e24-input--disabled {
    opacity: 0.4; /* Mocne wyszarzenie */
}

/* Dodatkowo wyszarzenie samego pola inputa */
#e24-order-form .e24-section4-body--on .e24-section4-field--iban .e24-input--disabled .e24-input__field,
#e24-order-form .e24-section4-body--on .e24-section4-field--paypal .e24-input--disabled .e24-input__field {
    background-color: #F7F7F7 !important; /* Szare tło */
    border-color: #E0E0E0 !important; /* Jasna ramka */
}

/* RWD */

@media (max-width: 1024px) {
    .e24-section4-top-row{
        gap: 24px;
    }
    .e24-section4-top-method{
        justify-content: flex-start;
    }
    .e24-section4-grid{
        grid-template-columns: 1fr 1fr;
        column-gap: var(--e24-gap-3);
        row-gap: var(--e24-sec4-row-gap);
    }
    .e24-section4-field--amount{ grid-column: 1; }
    .e24-section4-field--iban{   grid-column: 2; }
    .e24-section4-field--paypal{ grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .e24-section4-top-row{
        flex-direction: column;
        gap: 12px;
    }
    .e24-section4-top-method{
        justify-content: flex-start;
    }
    .e24-section4-grid{
        display: block;
        margin-top: 18px;
    }
    .e24-section4-field{
        min-height: 0;
        margin-bottom: 18px;
    }
}