/**
 * IBAN ACF Field Styles
 * Pure Vanilla CSS - Li Theme Design Standards
 */

.li-iban-wrap {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0;
}

.li-iban-blocks {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 760px;
}

.li-iban-block {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

/* Hohe Spezifität gegen globale ACF- und Formular-Resets */
.af-form .af-input .li-iban-box,
.af-form .acf-input .li-iban-box,
.acf-field input[type="text"].li-iban-box,
.acf-field .li-iban-box,
.li-iban-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 42px !important;
    min-width: 0 !important;
    max-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-family: var(--liFo-inputFont, inherit) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Chrome, Safari, Edge, Opera: Spinbuttons entfernen */
.li-iban-box::-webkit-outer-spin-button,
.li-iban-box::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Gesperrte / Schreibgeschützte Boxen (AT und Sternchen) */
.acf-field .li-iban-box--readonly,
.li-iban-box--readonly {
    background-color: #f0f0f1 !important;
    border: 1px solid #dcdcde !important;
    color: #50575e !important;
    cursor: default !important;
    user-select: none !important;
}

.acf-field .li-iban-box--country,
.li-iban-box--country {
    font-weight: 700 !important;
    color: #1d2327 !important;
}

.acf-field .li-iban-box--masked,
.li-iban-box--masked {
    font-size: 20px !important;
    color: #8c8f94 !important;
    letter-spacing: 0 !important;
}

/* Aktive, editierbare Eingabeboxen */
.af-form .acf-input input.li-iban-box--editable,
.acf-field input[type="text"].li-iban-box--editable,
.li-iban-box--editable {
    background-color: #ffffff !important;
    border: 1.5px solid var(--e-global-color-primary, #00727d) !important;
    color: #1d2327 !important;
    cursor: text !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.af-form .acf-input input.li-iban-box--editable:hover,
.acf-field input[type="text"].li-iban-box--editable:hover {
    border-color: #004d55 !important;
}

.af-form .acf-input input.li-iban-box--editable:focus,
.af-form .acf-input input.li-iban-box--editable:focus-visible,
.acf-field input[type="text"].li-iban-box--editable:focus,
.acf-field input[type="text"].li-iban-box--editable:focus-visible {
    border-color: var(--e-global-color-primary, #00727d) !important;
    box-shadow: 0 0 0 3px rgba(0, 114, 125, 0.25) !important;
    outline: none !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Responsives Verhalten für mobile Endgeräte */
@media (max-width: 680px) {
    .li-iban-blocks {
        flex-wrap: wrap !important;
        gap: 8px !important;
        row-gap: 8px !important;
    }

    .li-iban-block {
        gap: 3px !important;
    }

    .af-form .af-input .li-iban-box,
    .af-form .acf-input .li-iban-box,
    .acf-field input[type="text"].li-iban-box,
    .acf-field .li-iban-box,
    .li-iban-box {
        width: 28px !important;
        height: 38px !important;
        max-width: 28px !important;
        font-size: 15px !important;
    }

    .li-iban-box--masked {
        font-size: 17px !important;
    }
}