/*
 * Všetky farby a font sú odvodené z témy / WooCommerce nastavení.
 * Môžeš prepísať cez .opsi-method-wrap, .opsi-cutoff-msg, .opsi-method-note atď.
 *
 * WooCommerce Block CSS premenné (WC 8+):
 *   --wc-blocks-color-success, --wc-blocks-color-text, --wc-blocks-layer-2
 *
 * WordPress Global Styles premenné (block témy):
 *   --wp--preset--color--*, --wp--preset--font-family--*, --wp--style--global--font-family
 */

/* ── Wrapper s pozíciou ─────────────────────────────────────────────── */
.opsi-method-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
.opsi-pos-before  { flex-direction: row; }
.opsi-pos-after   { flex-direction: row-reverse; }
.opsi-pos-above   { flex-direction: column; align-items: flex-start; }
.opsi-pos-below   { flex-direction: column-reverse; align-items: flex-start; }

/* ── Ikona ──────────────────────────────────────────────────────────── */
.opsi-method-icon {
    display: inline-block;
    max-width: 40px;
    max-height: 24px;
    flex-shrink: 0;
    object-fit: contain;
    vertical-align: middle;
}
.opsi-gw-icon { max-width: 48px; max-height: 28px; }

/* ── Dynamická správa (cutoff) ──────────────────────────────────────── */
.opsi-cutoff-msg {
    display: block;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 3px;
    /* Farba: WC Blocks premenná → WP Global Styles → fallback */
    color: var(
        --wc-blocks-color-success,
        var(--wp--preset--color--success,
        var(--wp--preset--color--vivid-green-cyan,
        currentColor))
    );
}

/* ── Statická poznámka ──────────────────────────────────────────────── */
.opsi-method-note {
    display: block;
    font-family: inherit;
    font-size: 0.82em;
    line-height: 1.5;
    margin-top: 2px;
    /* Mierne stlmená — stále dedí zo škály témy */
    color: var(
        --wc-blocks-color-text-dim,
        var(--wp--preset--color--secondary,
        color-mix(in srgb, currentColor 65%, transparent))
    );
    /* Fallback pre prehliadače bez color-mix */
    opacity: 0.75;
}
/* Zruš opacity ak je color-mix dostupný (moderné prehliadače) */
@supports (color: color-mix(in srgb, black 50%, white)) {
    .opsi-method-note { opacity: 1; }
}

/* ── Výber slotu — klasická pokladňa ───────────────────────────────── */
.opsi-slots-row th,
.opsi-slots-row td {
    padding: 8px 0;
    font-family: inherit;
}

/* ── Výber slotu — Block Checkout ──────────────────────────────────── */
.opsi-blocks-slots {
    margin: 12px 0 4px;
    padding: 12px 16px;
    border-radius: 4px;
    font-family: inherit;
    /* Pozadie: WC Blocks vrstva 2 → WP surface → fallback */
    background: var(
        --wc-blocks-layer-2,
        var(--wp--preset--color--base-2,
        var(--wp--preset--color--light-gray,
        rgba(0, 0, 0, 0.04)))
    );
    /* Border: odvodený z aktuálnej farby textu */
    border: 1px solid var(
        --wc-blocks-color-border,
        var(--wp--preset--color--contrast-3,
        rgba(0, 0, 0, 0.12))
    );
}

.opsi-slots-label {
    display: block;
    font-family: inherit;
    font-size: 0.875em;
    font-weight: 600;
    margin-bottom: 6px;
    color: inherit;
}

.opsi-slot-select {
    min-width: 200px;
    max-width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    /* Font plne z témy */
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    /* Border a pozadie z WC/WP premenných */
    background: var(--wc-blocks-layer-1, var(--wp--preset--color--base, #ffffff));
    border: 1px solid var(
        --wc-blocks-color-border,
        var(--wp--preset--color--contrast-3,
        rgba(0, 0, 0, 0.2))
    );
}

/* ── Block Checkout — ikona v labeli ───────────────────────────────── */
.wc-block-components-radio-control__option .opsi-method-icon {
    margin-right: 8px;
    vertical-align: middle;
}
.wc-block-components-radio-control__option .opsi-cutoff-msg,
.wc-block-components-radio-control__option .opsi-method-note {
    display: block;
    padding-left: 2px;
    margin-top: 2px;
    font-family: inherit;
}