/* Branike CRM — Subscribe Widget Frontend */

/*
 * ══ TMAVÝ REŽIM ═══════════════════════════════════════════════════════════
 *
 * 🔴🔴 Žiadny holý hex vo farebnej deklarácii. Farba ide cez
 * `var( --wp--preset--color--…, #fallback )`, lebo tmavý režim témy tie
 * premenné prepisuje na `<body>` — čokoľvek natvrdo v noci ostane v dennej
 * hodnote a rozíde sa s textom okolo.
 *
 * 🔴 Modrá `#2271b1` tu bola administrátorská modrá WordPressu na webe
 * NÁVŠTEVNÍKA. Prihlasovací formulár patrí značke klienta, nie WordPressu —
 * preto akcent z palety.
 *
 * Stráži to `_devtest/harness/harness-dark-mode-css.php`.
 * ═════════════════════════════════════════════════════════════════════════
 */

.bcrm-subscribe-wrap {
    max-width: 480px;
}

.bcrm-subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bcrm-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bcrm-label {
    font-size: 14px;
    font-weight: 600;
    color: currentColor;
}

/*
 * 🔴 Pole má `surface`, nie `base`: v noci je `base` aj pozadie stránky, takže
 * pole s `base` by v ploche zmizlo. `surface` je o stupeň vedľa v oboch režimoch.
 */
.bcrm-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    border: 1px solid var( --wp--preset--color--contrast-three, #d0d0d0 );
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    background: var( --wp--preset--color--surface, #fff );
    /* 🔴 Pozadie a text VŽDY v páre. */
    color: var( --wp--preset--color--contrast, #333 );
}

.bcrm-input:focus {
    /* 🔴 `outline: none` len preto, že hneď nasleduje viditeľná náhrada. */
    outline: none;
    border-color: var( --wp--preset--color--accent, #7C3AED );
    box-shadow: 0 0 0 2px color-mix( in srgb, var( --wp--preset--color--accent, #7C3AED ) 35%, transparent );
}

.bcrm-input.bcrm-error { border-color: var( --wp--preset--color--error, #D10020 ); }

/* GDPR */
.bcrm-gdpr-field { margin-top: 4px; }

/*
 * 🔴🔴 FARBA SA DEDÍ, NEBERIE SA Z PALETY (nález 2026-08-05, hlásil Brani)
 *
 * Predtým tu bolo `var( --wp--preset--color--contrast-two, #4B5563 )` — teda
 * tmavosivá z palety témy. Paleta je ale navrhnutá pre SVETLÉ pozadie stránky.
 * Keď blok pristál v tmavej sekcii (Braniho hero na `liecivasilaprirody.sk`),
 * text súhlasu GDPR sa stratil: tmavosivá na tmavomodrej.
 *
 * `currentColor` dedí farbu textu z bloku, ktorú si používateľ nastaví v paneli
 * Farby (`supports.color.text` v `block.json`). Na svetlom pozadí vyzerá rovnako
 * ako predtým, na tmavom sa prispôsobí.
 *
 * 🔴 `opacity` a nie svetlejšia farba: pri dedení nevieme, či ideme svetlejšie
 * alebo tmavšie. Priehľadnosť funguje v oboch smeroch a kontrast drží.
 * Text súhlasu je právne dôležitý, takže 0.85 — nie 0.6, ako býva pri
 * pomocných popiskách. [[feedback_pagespeed_standards]]
 */
.bcrm-gdpr-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    color: currentColor;
    opacity: .85;
}

.bcrm-gdpr-label input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var( --wp--preset--color--accent, #7C3AED );
}

/* Tlačidlo */
.bcrm-subscribe-btn {
    /* 44 px dotykový cieľ. */
    min-block-size: 44px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    background: var( --wp--preset--color--accent, #7C3AED );
    color: var( --wp--preset--color--base, #fff );
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, transform .1s;
    align-self: flex-start;
}

.bcrm-subscribe-btn:hover {
    background: var( --wp--preset--color--accent-strong, #5B21B6 );
    color: var( --wp--preset--color--base, #fff );
}
.bcrm-subscribe-btn:active { transform: scale(.98); }
.bcrm-subscribe-btn:focus-visible {
    outline: 2px solid var( --wp--preset--color--accent-strong, #5B21B6 );
    outline-offset: 2px;
}
/*
 * 🔴 Zablokované tlačidlo sa stlmí PRIEHĽADNOSŤOU, nie šedou farbou. Šedá
 * `#a0b8cc` bola svetlá — v noci by z tlačidla urobila svetlý blok na tmavom,
 * teda výraznejší než keď je aktívne. Priehľadnosť tlmí v oboch režimoch.
 */
.bcrm-subscribe-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* Správa */
.bcrm-sub-msg {
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 5px;
    display: none;
}

/*
 * 🔴 Nádych sa počíta zo semantickej farby a pozadia. Text je `--contrast`,
 * nie zelená/červená: odmerané cez všetky palety, semantická farba na vlastnom
 * nádychu padne na 4,01 (AA je 4,5), `--contrast` drží 11,58. Význam nesie
 * rámik a pozadie, čitateľnosť text.
 */
.bcrm-sub-msg.bcrm-msg--success {
    display: block;
    background: color-mix( in srgb, var( --wp--preset--color--success, #00845A ) 12%, var( --wp--preset--color--base, #fff ) );
    color: var( --wp--preset--color--contrast, #1F2937 );
    border: 1px solid var( --wp--preset--color--success, #00845A );
}

.bcrm-sub-msg.bcrm-msg--error {
    display: block;
    background: color-mix( in srgb, var( --wp--preset--color--error, #D10020 ) 12%, var( --wp--preset--color--base, #fff ) );
    color: var( --wp--preset--color--contrast, #1F2937 );
    border: 1px solid var( --wp--preset--color--error, #D10020 );
}

/*
 * Po odoslaní: blok drží výšku formulára (JS `keepHeight`, Brani 12. 10.) a správa
 * stojí v jeho strede — pod blokom nič neskočí nahor.
 */
.bcrm-subscribe-wrap--done {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bcrm-subscribe-wrap--done .bcrm-sub-msg:focus {
    outline: none;
}

.bcrm-subscribe-wrap--done .bcrm-sub-msg:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Validačná chyba pod poľom */
.bcrm-field-error {
    font-size: 12px;
    color: var( --wp--preset--color--error, #D10020 );
    margin: 0;
}