/* ═══════════════════════════════════════════════════════════════════════
   Froppy Billing Type v1.5.0 – Sora design
   Põhineb mockupil: kompaktne, sinised aktsendid, Esindaja divider
═══════════════════════════════════════════════════════════════════════ */

/* ── Font ──────────────────────────────────────────────────────────── */
.woocommerce-billing-fields,
.woocommerce-billing-fields * {
    font-family: 'Sora', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════════════
   FLEX LAYOUT – WC kasutab float-i, asendame flexiga
   Siin targitame kõige levinumaid WC checkout wrapper-klasse.
══════════════════════════════════════════════════════════════════════ */
.woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 12px !important;
    align-items: flex-start !important;
}

/* Kõik form-row read: float eemaldada */
.woocommerce-billing-fields__field-wrapper .form-row {
    float: none !important;
    clear: none !important;
    margin-bottom: 14px !important;
    margin-right: 0 !important;
}

/* Täislaius */
.woocommerce-billing-fields__field-wrapper .form-row-wide {
    flex: 0 0 100% !important;
    width: 100% !important;
}

/* 50/50 kõrvutised väljad */
.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row-last {
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 75% Tänav */
.woocommerce-billing-fields__field-wrapper #billing_address_1_field.fbt-addr-street {
    flex: 0 0 calc(75% - 6px) !important;
    width: calc(75% - 6px) !important;
}

/* 25% Korter */
.woocommerce-billing-fields__field-wrapper #billing_address_2_field.fbt-addr-unit {
    flex: 0 0 25% !important;
    width: 25% !important;
}

/* Osariigi väli peidame (EE/LV/LT/FI) */
.fbt-hidden-state { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   VÄLJA LABELS
══════════════════════════════════════════════════════════════════════ */
.woocommerce-billing-fields .form-row label:not(.checkbox):not(.fbt-radio-btn):not(.fbt-type-label) {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .45px !important;
    color: #64748b !important;
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   SISENDVÄLJAD
══════════════════════════════════════════════════════════════════════ */
.woocommerce-billing-fields .form-row .input-text,
.woocommerce-billing-fields .form-row input[type="text"],
.woocommerce-billing-fields .form-row input[type="email"],
.woocommerce-billing-fields .form-row input[type="tel"],
.woocommerce-billing-fields .form-row select {
    height: auto !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    font-family: 'Sora', sans-serif !important;
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .18s, box-shadow .18s, background .18s !important;
    width: 100% !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.woocommerce-billing-fields .form-row .input-text:focus,
.woocommerce-billing-fields .form-row input:focus,
.woocommerce-billing-fields .form-row select:focus {
    border-color: #1d5fa8 !important;
    box-shadow: 0 0 0 3px rgba(29,95,168,.10) !important;
    background: #ffffff !important;
    outline: none !important;
}

/* Placeholder */
.woocommerce-billing-fields .form-row input::placeholder { color: #94a3b8 !important; font-size: 13px !important; }

/* Korteriväli – tsentreeritud tekst, väiksem */
#billing_address_2 { text-align: center !important; }

/* ══════════════════════════════════════════════════════════════════════
   AUTOFILL VISUAAL (sinine = täidetud automaatselt)
══════════════════════════════════════════════════════════════════════ */
.form-row.fbt-autofilled .input-text,
.form-row.fbt-autofilled input[type="text"] {
    border-color: #b8d4f0 !important;
    background: #eaf2fd !important;
}

.form-row.fbt-overwritten .input-text,
.form-row.fbt-overwritten input[type="text"] {
    border-color: #fbbf24 !important;
    background: #fffbeb !important;
}

.form-row.fbt-registry-filled .input-text,
.form-row.fbt-registry-filled input[type="text"] {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   RADIO NUPUD – mockupi järgi (card buttons)
══════════════════════════════════════════════════════════════════════ */
.fbt-radio-row { margin-bottom: 18px !important; }

.fbt-type-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .45px !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.fbt-radio-group {
    display: flex !important;
    gap: 8px !important;
}

/* Card-stiilis nupp */
.fbt-radio-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #64748b !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all .18s !important;
    user-select: none !important;
    font-family: 'Sora', sans-serif !important;
}
.fbt-radio-btn:hover {
    border-color: #93c5fd !important;
    background: #f8fbff !important;
}
.fbt-radio-btn.is-active {
    border-color: #1d5fa8 !important;
    background: #eaf2fd !important;
    color: #1d5fa8 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 3px rgba(29,95,168,.10) !important;
}

/* Kohandatud ring */
.fbt-radio-dot {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 2px solid #cbd5e1 !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .18s !important;
    position: relative !important;
}
.fbt-radio-btn.is-active .fbt-radio-dot {
    border-color: #1d5fa8 !important;
    background: #1d5fa8 !important;
}
.fbt-radio-btn.is-active .fbt-radio-dot::after {
    content: '' !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #fff !important;
    display: block !important;
}

/* Peitame natiivsed radio sisendit */
.fbt-radio-btn input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   ETTEVÕTTE VÄLJAD
   Peida vaikimisi, näita kui JS lisab .fbt-visible klassi.
   NB: Kasutame :not(.fbt-visible) mitte lihtsalt display:none !important,
   sest !important lükkab jQuery inline stiili üle – klassi-põhine töötab.
══════════════════════════════════════════════════════════════════════ */
.fbt-company-field:not(.fbt-visible) { display: none !important; }

/* Näita kui .fbt-visible klass on lisatud (JS lisab) */
.fbt-company-field.fbt-visible {
    display: block !important;
    animation: fbt-fade-in .2s ease-out;
}
/* Flex-konteineri lapsed peavad olema flex-item, mitte block */
.woocommerce-billing-fields__field-wrapper .fbt-company-field.fbt-visible.form-row-first,
.woocommerce-billing-fields__field-wrapper .fbt-company-field.fbt-visible.form-row-last {
    display: flex !important;
    flex-direction: column !important;
}
@keyframes fbt-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════════════════
   VALIKULINE TEKST, KOHUSTUSLIK TÄRN, KORTERI LABEL
══════════════════════════════════════════════════════════════════════ */

/* "(VALIKULINE)" / "(optional)" tekst – eemaldame täielikult */
.woocommerce-billing-fields .optional,
.woocommerce-address-fields .optional { display: none !important; }

/* Kohustuslik tärn (*) – punane, selge */
.woocommerce-billing-fields label .required,
.woocommerce-address-fields label .required {
    color: #dc2626 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    margin-left: 1px !important;
}

/* Korteri välja label – peidame teksti aga säilitame kõrguse
   et "Tänav" ja "Korter" sisendid oleksid vertikaalselt joondatud */
#billing_address_2_field > label {
    opacity: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   "ESINDAJA" SEKTSIOONI DIVIDER – mockupi järgi väiksem pealkiri
══════════════════════════════════════════════════════════════════════ */
.fbt-heading-row { margin-top: 6px !important; margin-bottom: 2px !important; }

.fbt-esindaja-divider {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 0 !important;
}
.fbt-esindaja-divider::before,
.fbt-esindaja-divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: #e2e8f0 !important;
}
.fbt-esindaja-divider span {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════════════════════════
   IN-AKS WIDGET STIILI OVERRIDE
   Widget renderdab oma UI .fbt-inaks-wrap konteinerisse.
   Kirjutame tema vaikestiili üle et sobitada Sora kujundusega.
══════════════════════════════════════════════════════════════════════ */
.fbt-inaks-wrap {
    font-family: 'Sora', sans-serif !important;
    position: relative !important;
}

/* Widgeti peamine tekstisisend */
.fbt-inaks-wrap input[type="text"],
.fbt-inaks-wrap input[type="search"],
.fbt-inaks-wrap .in-ads-search-input,
.fbt-inaks-wrap .in-aks-search-input {
    font-family: 'Sora', sans-serif !important;
    font-size: 13.5px !important;
    color: #0f172a !important;
    background: #eaf2fd !important;
    border: 1.5px solid #b8d4f0 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .18s, box-shadow .18s !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.fbt-inaks-wrap input[type="text"]:focus,
.fbt-inaks-wrap input[type="search"]:focus {
    border-color: #1d5fa8 !important;
    box-shadow: 0 0 0 3px rgba(29,95,168,.10) !important;
    background: #f0f7ff !important;
}

/* Tulemusloend */
.fbt-inaks-wrap ul,
.fbt-inaks-wrap .in-ads-results,
.fbt-inaks-wrap .in-aks-results {
    list-style: none !important;
    margin: 4px 0 0 !important;
    padding: 4px 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.10) !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    font-family: 'Sora', sans-serif !important;
}

/* Tulemuse kirjed */
.fbt-inaks-wrap ul li,
.fbt-inaks-wrap .in-ads-result,
.fbt-inaks-wrap .in-aks-result,
.fbt-inaks-wrap [class*="result-item"] {
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f8fafc !important;
    list-style: none !important;
    transition: background .1s !important;
}
.fbt-inaks-wrap ul li:last-child { border-bottom: none !important; }
.fbt-inaks-wrap ul li:hover,
.fbt-inaks-wrap ul li.active,
.fbt-inaks-wrap ul li[class*="selected"],
.fbt-inaks-wrap [class*="result-item"]:hover { background: #eaf2fd !important; }

/* Peida kaart, toolbar, footers */
.fbt-inaks-wrap [class*="map"],
.fbt-inaks-wrap [class*="Map"],
.fbt-inaks-wrap [class*="toolbar"],
.fbt-inaks-wrap [class*="footer"],
.fbt-inaks-wrap [class*="logo"],
.fbt-inaks-wrap canvas,
.fbt-inaks-wrap .ol-viewport { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   AADRESSI OTSING
══════════════════════════════════════════════════════════════════════ */
.fbt-addr-row {
    flex: 0 0 100% !important;
    width: 100% !important;
    position: relative !important;
    margin-bottom: 14px !important;
}

.fbt-addr-label {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .45px !important;
    color: #64748b !important;
    margin-bottom: 5px !important;
}

.fbt-search-icon { width: 14px; height: 14px; flex-shrink: 0; color: #1d5fa8; }

.fbt-input-wrap { position: relative; }

.fbt-addr-input {
    width: 100% !important;
    padding: 10px 40px 10px 12px !important;
    font-size: 13.5px !important;
    font-family: 'Sora', sans-serif !important;
    color: #0f172a !important;
    background: #eaf2fd !important;
    border: 1.5px solid #b8d4f0 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all .18s !important;
}
.fbt-addr-input:focus {
    border-color: #1d5fa8 !important;
    box-shadow: 0 0 0 3px rgba(29,95,168,.10) !important;
    background: #f0f7ff !important;
}
.fbt-addr-input::placeholder { color: #94a3b8 !important; }

.fbt-clear-btn {
    position: absolute !important; right: 8px !important; top: 50% !important;
    transform: translateY(-50%) !important; background: none !important;
    border: none !important; color: #94a3b8 !important; cursor: pointer !important;
    font-size: 13px !important; padding: 4px 6px !important; line-height: 1 !important;
    transition: color .15s !important;
}
.fbt-clear-btn:hover { color: #334155 !important; }

/* ── Spinner ────────────────────────────────────────────────────────── */
.fbt-spinner,
.fbt-co-spinner {
    width: 13px !important; height: 13px !important;
    border: 2px solid #dde4ee !important; border-top-color: #1d5fa8 !important;
    border-radius: 50% !important;
}
.fbt-spinner { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; animation: fbt-spin .7s linear infinite !important; }
.fbt-co-spinner { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; animation: fbt-spin-co .7s linear infinite !important; }

@keyframes fbt-spin    { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes fbt-spin-co { to { transform: translateY(-50%) rotate(360deg); } }

/* ── Dropdown (aadressi + ettevõtte) ────────────────────────────────── */
.fbt-dropdown,
.fbt-co-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important; left: 0 !important; right: 0 !important;
    z-index: 9999 !important; list-style: none !important;
    margin: 0 !important; padding: 4px 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.10) !important;
    max-height: 260px !important; overflow-y: auto !important;
    animation: fbt-dd-in .13s ease-out !important;
}
@keyframes fbt-dd-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

.fbt-item {
    padding: 9px 14px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f8fafc !important;
    transition: background .1s !important;
    outline: none !important;
    list-style: none !important;
}
.fbt-item:last-child { border-bottom: none !important; }
.fbt-item:hover, .fbt-item:focus { background: #eaf2fd !important; }

.fbt-item-main {
    display: block !important; font-size: 13px !important;
    font-weight: 600 !important; color: #0f172a !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.fbt-item-sub {
    display: block !important; font-size: 11px !important;
    color: #94a3b8 !important; margin-top: 2px !important;
}
.fbt-no-results {
    padding: 10px 14px !important; font-size: 12px !important;
    color: #94a3b8 !important; font-style: italic !important; list-style: none !important;
}

/* Ettevõtte dropdown: relative parent on billing_company_field */
#billing_company_field { position: relative !important; }
.fbt-co-dropdown { top: calc(100% + 2px) !important; }

/* ══════════════════════════════════════════════════════════════════════
   KORTERIVALIKU PANEEL
══════════════════════════════════════════════════════════════════════ */
.fbt-apt-panel {
    margin-top: 8px !important;
    padding: 12px 14px !important;
    background: #eaf2fd !important;
    border: 1.5px solid #b8d4f0 !important;
    border-radius: 8px !important;
    animation: fbt-dd-in .15s ease-out !important;
}

.fbt-apt-title {
    font-size: 10.5px !important; font-weight: 700 !important;
    color: #1d5fa8 !important; text-transform: uppercase !important;
    letter-spacing: .6px !important; margin-bottom: 10px !important;
}

.fbt-apt-grid {
    display: flex !important; flex-wrap: wrap !important;
    gap: 5px !important; margin-bottom: 8px !important;
}

.fbt-apt-btn {
    padding: 5px 11px !important;
    border: 1.5px solid #b8d4f0 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 12.5px !important; font-weight: 500 !important;
    cursor: pointer !important; font-family: 'Sora', sans-serif !important;
    transition: all .15s !important;
}
.fbt-apt-btn:hover {
    border-color: #1d5fa8 !important;
    background: #1d5fa8 !important;
    color: #ffffff !important;
}
.fbt-apt-none {
    display: block !important; width: 100% !important;
    text-align: center !important; color: #94a3b8 !important;
    border-color: #e2e8f0 !important; font-size: 11.5px !important;
    padding: 5px !important; margin-top: 2px !important;
}
.fbt-apt-loading { font-size: 12px !important; color: #64748b !important; }

/* ══════════════════════════════════════════════════════════════════════
   VIES FEEDBACK
══════════════════════════════════════════════════════════════════════ */
.fbt-vat-feedback {
    display: block !important; margin-top: 5px !important;
    font-size: 11.5px !important; font-weight: 600 !important;
    line-height: 1.4 !important; min-height: 1.4em !important;
}
.fbt-vat-feedback.fbt-checking { color: #64748b !important; }
.fbt-vat-feedback.fbt-checking::before {
    content: '' !important; display: inline-block !important;
    width: 9px !important; height: 9px !important; margin-right: 5px !important;
    border: 2px solid #cbd5e1 !important; border-top-color: #1d5fa8 !important;
    border-radius: 50% !important; animation: fbt-spin .7s linear infinite !important;
    vertical-align: middle !important;
}
.fbt-vat-feedback.fbt-valid   { color: #16a34a !important; }
.fbt-vat-feedback.fbt-invalid { color: #dc2626 !important; }
.fbt-vat-feedback.fbt-unknown { color: #d97706 !important; }
.fbt-vat-hint { display: block !important; margin-top: 4px !important; font-size: 11px !important; color: #94a3b8 !important; font-style: italic !important; }

/* ══════════════════════════════════════════════════════════════════════
   ADMIN
══════════════════════════════════════════════════════════════════════ */
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   MOBIIL
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .woocommerce-billing-fields__field-wrapper .form-row-first,
    .woocommerce-billing-fields__field-wrapper .form-row-last {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .woocommerce-billing-fields__field-wrapper #billing_address_1_field.fbt-addr-street {
        flex: 0 0 calc(70% - 6px) !important;
        width: calc(70% - 6px) !important;
    }
    .woocommerce-billing-fields__field-wrapper #billing_address_2_field.fbt-addr-unit {
        flex: 0 0 30% !important;
        width: 30% !important;
    }
    .fbt-radio-group { flex-direction: column !important; }
    .fbt-dropdown, .fbt-co-dropdown { max-height: 220px !important; }
    .fbt-apt-grid { gap: 4px !important; }
}