/* Podúčty (B2BKing subaccounts) v dizajne Melino.

   Plugin má vlastný sivo-modrý vzhľad (#3AB1E4 tlačidlá, #646464 hlavičky
   kariet, #ededed polia), ktorý na webe pôsobí ako cudzí prvok. Preberáme
   tokeny a tvary z pokladne a z hromadnej objednávky — biela karta so
   zaoblením 12 px, svetlozelená hlavička, polia s výškou 48 px, brandové
   tlačidlá.

   Prepisuje sa len vzhľad. Rozloženie (flex riadky, šírky polí, prepínanie
   formulára cez JS) necháva plugin na seba — inak by sa správa podúčtov po
   jeho aktualizácii rozpadla.

   VŠETKY PRAVIDLÁ MAJÚ PREDRADENÉ `body`. Plugin si svoje prvky adresuje
   podobne presne ako my (často `button.trieda`) a jeho štýl sa načíta
   neskôr, takže pri zhode presnosti by vyhral on. `body` pridá jeden stupeň
   a rozhodne to — rovnaký prístup ako pri hromadnej objednávke. */

.b2bking_subaccounts_container,
.b2bking_subaccounts_edit_account_container {
    --zz-accent: var(--awb-color5, #cafc87);
    --zz-accent-dark: var(--awb-color6, #0a3019);
    --zz-border: rgb(0 0 0 / 12%);
    --zz-border-strong: rgb(0 0 0 / 22%);
    --zz-muted: rgb(0 0 0 / 55%);
    --zz-danger: #b3261e;
    --zz-radius: 12px;
    --zz-radius-sm: 8px;

    font-family: "SeasonSansTRIAL-Regular", sans-serif;
}

/* Plugin dáva tlačidlám `line-height: 8px`, čo pri dvojriadkovom nápise
   („VYTVORIŤ PODÚČET") spôsobí prekrytie textu s ikonou. Vrátime rozumnú
   výšku riadka pre všetky tlačidlá v správe podúčtov. */
body .b2bking_subaccounts_container button,
body .b2bking_subaccounts_edit_account_container button {
    line-height: 1.2;
}

/* ── Nadpis „Podúčty" a tlačidlo „Nový podúčet" ─────────────────────── */

body .b2bking_subaccounts_container_top_title {
    font-family: "SeasonSansTRIAL-Bold", sans-serif;
    font-size: 26px;
    color: var(--zz-accent-dark);
    font-weight: 400;
}

body button.b2bking_subaccounts_container_top_button {
    background: var(--zz-accent);
    color: var(--zz-accent-dark);
    min-width: 0;
    height: auto;
    border: 0;
    border-radius: var(--zz-radius-sm);
    box-shadow: none;
    padding: 11px 18px;
    gap: 8px;
    justify-content: center;
    font-family: "SeasonSansTRIAL-Medium", sans-serif;
    font-size: 14px;
    letter-spacing: .02em;
    transition: filter .2s ease;
}

body button.b2bking_subaccounts_container_top_button:hover {
    background: var(--zz-accent);
    color: var(--zz-accent-dark);
    filter: brightness(.93);
}

body svg.b2bking_subaccounts_container_top_button_icon {
    width: 24px;
    margin: 0;
}

/* Ikony sú jednofarebné cesty s fill="#fff" priamo v SVG. CSS `fill` má
   prednosť pred atribútom, takže stačí prefarbiť na tmavozelenú. */
body button.b2bking_subaccounts_container_top_button .b2bking_subaccounts_container_top_button_icon path {
    fill: var(--zz-accent-dark);
}

/* ── Karta existujúceho podúčtu ─────────────────────────────────────── */

body .b2bking_subaccounts_account_container {
    min-height: 0;
    background: #fff;
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius);
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 22px;
}

body .b2bking_subaccounts_account_top {
    background: var(--zz-accent);
    color: var(--zz-accent-dark);
    border-radius: 0;
    min-height: 44px;
    font-family: "SeasonSansTRIAL-Medium", sans-serif;
    font-size: 15px;
    letter-spacing: .02em;
}

body svg.b2bking_subaccounts_account_top_icon path {
    fill: var(--zz-accent-dark);
}

body .b2bking_subaccounts_account_name {
    font-family: "SeasonSansTRIAL-Bold", sans-serif;
    color: var(--zz-accent-dark);
    font-size: 17px;
}

body .b2bking_subaccounts_account_title,
body .b2bking_subaccounts_account_phone_email_text {
    color: var(--zz-muted);
    font-size: 13px;
}

/* Tlačidlá „Prihlásiť sa" / „Upraviť" na karte. */
body button.b2bking_subaccounts_account_button {
    background: var(--zz-accent);
    color: var(--zz-accent-dark);
    width: auto;
    min-width: 0;
    height: auto;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    padding: 8px 16px;
    gap: 7px;
    font-family: "SeasonSansTRIAL-Medium", sans-serif;
    font-size: 13px;
    /* „Prihlásiť sa" web inde zapisuje veľkými (filter na WooCommerce
       login), takže obe tlačidlá na karte držíme veľkými, nech sú
       konzistentné. */
    text-transform: uppercase;
    letter-spacing: .03em;
    transition: filter .2s ease;
}

body button.b2bking_subaccounts_account_button.b2bking_subaccounts_account_button_login {
    width: auto;
    top: 0;
}

body button.b2bking_subaccounts_account_button:hover {
    background: var(--zz-accent);
    color: var(--zz-accent-dark);
    filter: brightness(.93);
}

body svg.b2bking_subaccounts_account_button_icon path {
    fill: var(--zz-accent-dark);
}

/* ── Karta „Nový podúčet" / „Úprava podúčtu" ────────────────────────── */

body .b2bking_subaccounts_new_account_container,
body .b2bking_subaccounts_edit_account_container {
    background: #fff;
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius);
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 26px;
}

body .b2bking_subaccounts_new_account_container_top {
    background: var(--zz-accent);
    color: var(--zz-accent-dark);
    height: auto;
    border-radius: 0;
    padding: 16px 22px;
    font-family: "SeasonSansTRIAL-Medium", sans-serif;
    font-size: 16px;
}

body .b2bking_subaccounts_new_account_container_top_title {
    font-weight: 400;
}

/* Tlačidlo „Zavrieť ✕" v hlavičke formulára. */
body .b2bking_subaccounts_new_account_container_top_close,
body .b2bking_subaccounts_edit_account_container_top_close {
    background: rgb(10 48 25 / 10%);
    color: var(--zz-accent-dark);
    border-radius: 999px;
    padding: 4px 14px;
    font-family: "SeasonSansTRIAL-Medium", sans-serif;
    font-size: 13px;
    font-weight: 400;
    transition: background-color .2s ease;
}

body .b2bking_subaccounts_new_account_container_top_close:hover,
body .b2bking_subaccounts_edit_account_container_top_close:hover {
    background: rgb(10 48 25 / 18%);
}

body .b2bking_subaccounts_new_account_container_content {
    background: #fff;
    padding: 24px 22px;
}

/* Nadpisy sekcií (Prihlasovacie údaje / Osobné údaje / Oprávnenia). */
body .b2bking_subaccounts_new_account_container_content_large_title {
    color: var(--zz-accent-dark);
    font-family: "SeasonSansTRIAL-Medium", sans-serif;
    font-size: 16px;
}

body svg.b2bking_subaccounts_new_account_container_content_large_title_icon path {
    fill: var(--zz-accent-dark);
}

/* Popisky polí. */
body .b2bking_subaccounts_new_account_container_content_element_label {
    font-family: "SeasonSansTRIAL-Medium", sans-serif;
    font-size: 13px;
    letter-spacing: .02em;
    color: var(--zz-muted);
}

/* Textové polia. Šírku a okraje (fill-available, margin) drží plugin —
   meníme len výšku, pozadie, rámik a stav zamerania. */
body .b2bking_subaccounts_new_account_container_content_element input.b2bking_subaccounts_new_account_container_content_element_text {
    height: 48px;
    background: #fff;
    border: 1px solid var(--zz-border-strong);
    border-radius: var(--zz-radius-sm);
    padding: 0 16px;
    color: var(--zz-accent-dark);
    font-family: "SeasonSansTRIAL-Regular", sans-serif;
    font-size: 15px;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

body .b2bking_subaccounts_new_account_container_content_element input.b2bking_subaccounts_new_account_container_content_element_text::placeholder {
    color: var(--zz-muted);
}

body .b2bking_subaccounts_new_account_container_content_element input.b2bking_subaccounts_new_account_container_content_element_text:focus {
    outline: none;
    background: #fff;
    border-color: var(--zz-accent-dark);
    box-shadow: 0 0 0 3px rgb(202 252 135 / 45%);
}

body .b2bking_subaccount_horizontal_line {
    border-bottom: 1px solid var(--zz-border);
}

/* ── Oprávnenia (riadky s checkboxom) ───────────────────────────────── */

body .b2bking_subaccounts_new_account_container_content_element_checkbox {
    background: rgb(10 48 25 / 4%);
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius-sm);
    min-height: 48px;
    padding: 8px 16px;
    margin-top: 10px;
}

body .b2bking_subaccounts_new_account_container_content_element_checkbox_name {
    font-family: "SeasonSansTRIAL-Regular", sans-serif;
    font-size: 14px;
    color: var(--zz-accent-dark);
}

/* Natívny checkbox prekresľujeme na brandový (rovnaká technika ako pri
   newsletteri): skryjeme systémový vzhľad a nakreslíme vlastné políčko.
   Riadok je flexový s `align-items:center`, takže zvislé zarovnanie rieši
   plugin — netreba doťahovať margin ako pri plávajúcom labeli. */
body .b2bking_subaccounts_new_account_container_content_element_checkbox input.b2bking_subaccounts_new_account_container_content_element_checkbox_input {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 0 0 14px;
    padding: 0;
    border: 1.5px solid var(--zz-border-strong);
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

body .b2bking_subaccounts_new_account_container_content_element_checkbox input.b2bking_subaccounts_new_account_container_content_element_checkbox_input:checked {
    background: var(--zz-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%230a3019' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.3 5 8.6 9.5 3.8'/%3E%3C/svg%3E") center / 12px no-repeat;
    border-color: var(--zz-accent);
}

body .b2bking_subaccounts_new_account_container_content_element_checkbox input.b2bking_subaccounts_new_account_container_content_element_checkbox_input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgb(202 252 135 / 45%);
}

/* ── Spodná lišta formulára ─────────────────────────────────────────── */

body .b2bking_subaccounts_new_account_container_content_bottom {
    margin-top: 28px;
    gap: 12px;
}

/* Vytvoriť podúčet / Uložiť zmeny — brandové zelené tlačidlo. */
body button.b2bking_subaccounts_new_account_container_content_bottom_button,
body button.b2bking_subaccounts_edit_account_container_content_bottom_button {
    background: var(--zz-accent);
    color: var(--zz-accent-dark);
    min-width: 0;
    height: auto;
    border: 0;
    border-radius: var(--zz-radius);
    box-shadow: none;
    padding: 15px 26px;
    gap: 10px;
    justify-content: center;
    font-family: "SeasonSansTRIAL-Medium", sans-serif;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: filter .2s ease;
}

body button.b2bking_subaccounts_new_account_container_content_bottom_button:hover,
body button.b2bking_subaccounts_edit_account_container_content_bottom_button:hover {
    background: var(--zz-accent);
    color: var(--zz-accent-dark);
    filter: brightness(.93);
}

body button.b2bking_subaccounts_new_account_container_content_bottom_button .b2bking_subaccounts_new_account_container_content_bottom_button_icon path,
body button.b2bking_subaccounts_edit_account_container_content_bottom_button .b2bking_subaccounts_new_account_container_content_bottom_button_icon path {
    fill: var(--zz-accent-dark);
}

/* Zmazať podúčet — deštruktívna akcia, preto tlmená červená (obrys, nie
   plná plocha), nech nekričí, ale je jasne odlíšená. */
body button.b2bking_subaccounts_edit_account_container_content_bottom_button_delete {
    background: transparent;
    color: var(--zz-danger);
    min-width: 0;
    height: auto;
    border: 1px solid rgb(179 38 30 / 35%);
    border-radius: var(--zz-radius);
    box-shadow: none;
    padding: 15px 26px;
    gap: 10px;
    justify-content: center;
    font-family: "SeasonSansTRIAL-Medium", sans-serif;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background-color .2s ease;
}

body button.b2bking_subaccounts_edit_account_container_content_bottom_button_delete:hover {
    background: rgb(179 38 30 / 6%);
    color: var(--zz-danger);
}

body button.b2bking_subaccounts_edit_account_container_content_bottom_button_delete .b2bking_subaccounts_new_account_container_content_bottom_button_icon path {
    fill: var(--zz-danger);
}

body .b2bking_subaccounts_new_account_container_content_bottom_validation_errors {
    color: var(--zz-danger);
    font-size: 13px;
}

/* ── Mobil ──────────────────────────────────────────────────────────── */

@media only screen and (max-width: 640px) {
    body .b2bking_subaccounts_new_account_container_content {
        padding: 18px 16px;
    }

    body .b2bking_subaccounts_new_account_container_content_bottom {
        flex-direction: column-reverse;
    }

    body button.b2bking_subaccounts_new_account_container_content_bottom_button,
    body button.b2bking_subaccounts_edit_account_container_content_bottom_button,
    body button.b2bking_subaccounts_edit_account_container_content_bottom_button_delete {
        width: 100%;
    }
}