/* LifeSteps Cal.com Router — modal styles. */

/* Brand colors — dark theme to match the LifeSteps site chrome.
 * Tweak the hexes here to fine-tune; the rest of the stylesheet reads these vars.
 */
:root {
    --lsf-modal-bg: #231F20;          /* matches LifeSteps site menu */
    --lsf-modal-fg: #f3f4f6;          /* near-white text */
    --lsf-modal-muted: #9ca3af;       /* muted gray for secondary text */
    --lsf-modal-brand: #60a5fa;       /* accent (used on fallback button + focus) */
    --lsf-modal-brand-fg: #ffffff;
    --lsf-modal-border: #374151;
    --lsf-modal-backdrop: rgba(0, 0, 0, 0.7);
    --lsf-modal-radius: 12px;
    --lsf-modal-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Prevent body scroll while modal is open. */
body.lsf-book-modal-open {
    overflow: hidden;
}

.lsf-book-modal[hidden] {
    display: none !important;
}

.lsf-book-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;          /* above any The7 / Elementor overlays */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.lsf-book-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--lsf-modal-backdrop);
    cursor: pointer;
}

.lsf-book-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    overflow: auto;
    background: var(--lsf-modal-bg);
    color: var(--lsf-modal-fg);
    border-radius: var(--lsf-modal-radius);
    box-shadow: var(--lsf-modal-shadow);
    /* Top padding pushes the iframe below the close button so they don't overlap. */
    padding: 56px 20px 20px;
    font-family: inherit;
}

.lsf-book-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;                       /* above the iframe in the embed area */
    width: 36px;
    height: 36px;
    border: 0;
    background: var(--lsf-modal-bg);  /* solid bg so the X stays readable on any iframe content */
    color: var(--lsf-modal-fg);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.lsf-book-modal__close:hover,
.lsf-book-modal__close:focus-visible {
    background: var(--lsf-modal-border);
    color: var(--lsf-modal-brand-fg);
    outline: none;
}

.lsf-book-modal__embed {
    width: 100%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
}

.lsf-book-modal__iframe {
    width: 100%;
    flex: 1 1 auto;
    min-height: 600px;
    border: 0;
    border-radius: 8px;
}

.lsf-book-modal__fallback,
.lsf-book-modal__error {
    text-align: center;
    padding: 24px 12px;
    color: var(--lsf-modal-muted);
}

.lsf-book-modal__fallback p {
    margin: 0 0 14px;
}

.lsf-book-modal__fallback-btn {
    display: inline-block;
    padding: 12px 20px;
    background: var(--lsf-modal-brand);
    color: var(--lsf-modal-brand-fg);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
}
.lsf-book-modal__fallback-btn:hover {
    filter: brightness(1.08);
}

/* Mobile near-fullscreen */
@media (max-width: 480px) {
    .lsf-book-modal {
        padding: 0;
    }
    .lsf-book-modal__dialog {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        padding: 56px 12px 12px;
    }
    .lsf-book-modal__embed,
    .lsf-book-modal__iframe {
        min-height: calc(100vh - 160px);
    }
}