/*
 * Live Chat / Phone / Video buttons — one look on the public site and the dashboard
 * (App\Frontend\SessionCta). Green = you can start it now; red = the advisor is in a
 * session; grey = not available (offline, or the recording notice isn't ticked yet).
 */
:root {
    --lpc-cta-ready: #16a34a;
    --lpc-cta-ready-hover: #15803d;
    --lpc-cta-busy: #dc2626;
    --lpc-cta-busy-hover: #b91c1c;
    --lpc-cta-off-bg: #e9ecef;
    --lpc-cta-off-text: #6c757d;
}

[data-bs-theme="dark"] {
    --lpc-cta-off-bg: #343a40;
    --lpc-cta-off-text: #adb5bd;
}

.btn.lpc-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    border: 0;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
    white-space: nowrap;
    transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.btn.lpc-cta:focus-visible {
    outline: 3px solid rgba(22, 163, 74, .35);
    outline-offset: 2px;
}

.btn.lpc-cta--ready {
    background: var(--lpc-cta-ready);
    box-shadow: 0 4px 12px rgba(22, 163, 74, .25);
}

.btn.lpc-cta--ready:hover,
.btn.lpc-cta--ready:active {
    background: var(--lpc-cta-ready-hover);
    color: #fff;
    box-shadow: 0 4px 16px rgba(22, 163, 74, .35);
}

.btn.lpc-cta--busy {
    background: var(--lpc-cta-busy);
    box-shadow: 0 4px 12px rgba(220, 38, 38, .25);
}

.btn.lpc-cta--busy:hover,
.btn.lpc-cta--busy:active {
    background: var(--lpc-cta-busy-hover);
    color: #fff;
}

.btn.lpc-cta--off,
.btn.lpc-cta:disabled,
.btn.lpc-cta.disabled {
    background: var(--lpc-cta-off-bg);
    color: var(--lpc-cta-off-text);
    box-shadow: none;
}

.btn.lpc-cta--off:hover {
    background: var(--lpc-cta-off-bg);
    color: var(--lpc-cta-off-text);
}

.btn.lpc-cta:disabled {
    cursor: not-allowed;
    pointer-events: auto;
    opacity: 1;
}

/* A busy button stays red even when it can't be pressed. */
.btn.lpc-cta--busy:disabled {
    background: var(--lpc-cta-busy);
    color: #fff;
    opacity: .85;
}

/* "· Busy" after the label, so the state isn't shown by colour alone. */
.lpc-cta-note {
    font-size: .85em;
    font-weight: 500;
    opacity: .9;
}