/* ══════════════════════════════════════════════════════════════════════
   OpenTable Embed Widget
   ══════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ─────────────────────────────────────────────────── */
.ot-embed-wrap {
    position: relative;
    display: flex;
    width: 100%;
    overflow: visible;
}

/* ── Label overlay ─────────────────────────────────────────────────── */
.ot-label-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 38px;
    max-height: 40px;
    line-height: 38px;
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── Loader container ──────────────────────────────────────────────── */
.ot-loader {
    display: contents;
}

/* ── Neutralize Elementor's global iframe reset ────────────────────── */
.ot-embed-wrap iframe {
    display: block !important;
    border: none !important;
    flex-shrink: 0 !important;
    max-width: none !important;
}

/* ── Responsive dual-embed for wide type ──────────────────────────── */
.ot-desktop-only {
    display: flex;
}

.ot-mobile-only {
    display: none;
}

@media ( max-width: 840px ) {
    .ot-desktop-only {
        display: none;
    }
    .ot-mobile-only {
        display: flex;
    }
}

.ot-mobile-only {
    justify-content: center;
}

@media ( max-width: 380px ) {
    .ot-mobile-only {
        overflow-x: auto;
        overflow-y: visible;
    }
}

/* ── Compact spacing ───────────────────────────────────────────────── */
/* Collapse the iframe down to just the search bar so following content
   (e.g. an accordion) can sit tight against it. The iframe keeps its
   natural OT height inside; only the WRAPPER is clipped. On interaction
   the wrapper expands (in normal flow) so the in-iframe calendar shows
   and remains clickable, then collapses again on blur. No z-index needed. */
.ot-embed-wrap.is-compact {
    overflow: hidden;
    height: var( --ot-collapsed-h, 70px );
    transition: height .18s ease;
}

.ot-embed-wrap.is-compact.is-active {
    /* --ot-full-h is set by JS to the iframe's natural height. */
    height: var( --ot-full-h, 350px );
}