/* ==========================================================================
   Kapcsolat-buborék (contact_widget modul) — themes/_shared/includes/contact-widget.php
   Tokenek: FRONTEND_APPLE_PLAYBOOK.md (--sp-*, --fs-*, --clr-*, --r-*, --ease-*) var()
   fallbackkel, mert nem minden tenant-téma definiálja mindet. A két harmadik-fél
   márka-szín (WhatsApp / Messenger) komponens-szintű token — NEM téma-szín, ezért
   nem a tenant-palettából jön (a §9 hardcoded-hex tilalom a téma-színekre vonatkozik).
   ========================================================================== */

.bh-cw {
    --cw-wa: #25D366;   /* WhatsApp hivatalos márka-zöld */
    --cw-ms: #0084FF;   /* Meta Messenger hivatalos márka-kék */
    position: fixed;
    right: var(--sp-5, 20px);
    bottom: var(--sp-5, 20px);
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-3, 12px);
    font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* ── FAB ───────────────────────────────────────────────────────────────── */
.bh-cw-fab {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: var(--r-pill, 999px);
    background: var(--clr-accent, #0071E3);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.08));
    transition: transform var(--t-fast, 150ms) var(--ease-system, cubic-bezier(0.4, 0, 0.2, 1)),
        box-shadow var(--t-fast, 150ms) var(--ease-system, cubic-bezier(0.4, 0, 0.2, 1));
}

.bh-cw-fab:hover {
    transform: scale(1.06);
    box-shadow: var(--shadow-xl, 0 16px 40px rgba(0, 0, 0, 0.1));
}

.bh-cw-fab:active {
    transform: scale(0.97);
}

.bh-cw-fab-ic {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    transition: opacity var(--t-fast, 150ms) var(--ease-system, cubic-bezier(0.4, 0, 0.2, 1)),
        transform var(--t-base, 250ms) var(--ease-system, cubic-bezier(0.4, 0, 0.2, 1));
}

.bh-cw-fab-ic--close { opacity: 0; transform: rotate(-45deg); }
.bh-cw[data-open="1"] .bh-cw-fab-ic--chat { opacity: 0; transform: rotate(45deg); }
.bh-cw[data-open="1"] .bh-cw-fab-ic--close { opacity: 1; transform: rotate(0); }

/* ── Panel ─────────────────────────────────────────────────────────────── */
.bh-cw-panel {
    width: 320px;
    max-width: calc(100vw - 2 * var(--sp-4, 16px));
    background: var(--clr-surface-elevated, #fff);
    color: var(--clr-text, #1D1D1F);
    border-radius: var(--r-lg, 16px);
    box-shadow: var(--shadow-modal, 0 25px 50px rgba(0, 0, 0, 0.15));
    overflow: hidden;
    opacity: 0;
    transform: translateY(var(--sp-2, 8px)) scale(0.98);
    pointer-events: none;
    transition: opacity var(--t-base, 250ms) var(--ease-system, cubic-bezier(0.4, 0, 0.2, 1)),
        transform var(--t-base, 250ms) var(--ease-system, cubic-bezier(0.4, 0, 0.2, 1));
}

.bh-cw[data-open="1"] .bh-cw-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.bh-cw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3, 12px);
    padding: var(--sp-5, 20px);
    background: var(--clr-accent, #0071E3);
    color: #fff;
}

.bh-cw-head strong {
    display: block;
    font-size: var(--fs-lg, 18px);
    font-weight: var(--fw-semibold, 600);
    letter-spacing: var(--ls-tight, -0.022em);
}

.bh-cw-head span {
    display: block;
    margin-top: var(--sp-1, 4px);
    font-size: var(--fs-sm, 14px);
    opacity: 0.85;
    line-height: var(--lh-normal, 1.5);
}

.bh-cw-close {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: var(--sp-1, 4px);
    border-radius: var(--r-sm, 8px);
    opacity: 0.8;
    transition: opacity var(--t-fast, 150ms) var(--ease-system, cubic-bezier(0.4, 0, 0.2, 1));
}

.bh-cw-close:hover { opacity: 1; }

.bh-cw-body {
    padding: var(--sp-3, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1, 4px);
    max-height: min(60vh, 480px);
    overflow-y: auto;
}

/* ── Csatorna-sorok ────────────────────────────────────────────────────── */
.bh-cw-opt {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    width: 100%;
    padding: var(--sp-3, 12px);
    border: 0;
    border-radius: var(--r-md, 12px);
    background: transparent;
    color: inherit;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-base, 16px);
    transition: background var(--t-fast, 150ms) var(--ease-system, cubic-bezier(0.4, 0, 0.2, 1));
}

.bh-cw-opt:hover { background: var(--clr-surface, #F5F5F7); }

.bh-cw-opt-ic {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill, 999px);
    background: var(--clr-surface, #F5F5F7);
    color: var(--clr-accent, #0071E3);
}

.bh-cw-opt--wa .bh-cw-opt-ic { background: var(--cw-wa); color: #fff; }
.bh-cw-opt--ms .bh-cw-opt-ic { background: var(--cw-ms); color: #fff; }

.bh-cw-opt-txt strong {
    display: block;
    font-size: var(--fs-sm, 14px);
    font-weight: var(--fw-semibold, 600);
    color: var(--clr-text, #1D1D1F);
}

.bh-cw-opt-txt span {
    display: block;
    font-size: var(--fs-xs, 12px);
    color: var(--clr-text-muted, #6B7785);
    margin-top: 1px;
    word-break: break-word;
}

/* ── Visszahívás-űrlap ─────────────────────────────────────────────────── */
.bh-cw-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 8px);
    padding: var(--sp-2, 8px) var(--sp-3, 12px) var(--sp-3, 12px);
}

.bh-cw-form input[type="text"],
.bh-cw-form input[type="tel"] {
    width: 100%;
    padding: var(--sp-3, 12px);
    border: 1px solid var(--clr-border, #D2D2D7);
    border-radius: var(--r-sm, 8px);
    font-family: inherit;
    font-size: var(--fs-base, 16px);
    color: var(--clr-text, #1D1D1F);
    background: var(--clr-bg, #fff);
    transition: border-color var(--t-fast, 150ms) var(--ease-system, cubic-bezier(0.4, 0, 0.2, 1));
}

.bh-cw-form input:focus {
    outline: none;
    border-color: var(--clr-accent, #0071E3);
}

.bh-cw-submit {
    padding: var(--sp-3, 12px);
    border: 0;
    border-radius: var(--r-md, 12px);
    background: var(--clr-accent, #0071E3);
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-base, 16px);
    font-weight: var(--fw-semibold, 600);
    cursor: pointer;
    transition: background var(--t-fast, 150ms) var(--ease-system, cubic-bezier(0.4, 0, 0.2, 1)),
        opacity var(--t-fast, 150ms) var(--ease-system, cubic-bezier(0.4, 0, 0.2, 1));
}

.bh-cw-submit:hover { background: var(--clr-accent-hover, #0077ED); }
.bh-cw-submit[disabled] { opacity: 0.6; cursor: default; }

.bh-cw-privacy {
    margin: 0;
    font-size: var(--fs-xs, 12px);
    color: var(--clr-text-muted, #6B7785);
    line-height: var(--lh-normal, 1.5);
}

.bh-cw-msg {
    margin: 0;
    font-size: var(--fs-sm, 14px);
    line-height: var(--lh-normal, 1.5);
}

.bh-cw-msg[data-state="success"] { color: var(--clr-success, #1B9E75); }
.bh-cw-msg[data-state="error"] { color: var(--clr-error, #D9534F); }

/* ── Mobil + accessibility ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .bh-cw { right: var(--sp-4, 16px); bottom: var(--sp-4, 16px); }
    .bh-cw-panel { width: calc(100vw - 2 * var(--sp-4, 16px)); }
}

@media (prefers-reduced-motion: reduce) {
    .bh-cw-fab, .bh-cw-fab-ic, .bh-cw-panel, .bh-cw-opt, .bh-cw-submit { transition: none; }
}

@media print {
    .bh-cw { display: none; }
}