/* COMPACT-EMBED-WIDGET-20261012 - the booking box a restaurant pastes into its own website.

   Every rule below is scoped to html.embedCompact, which exists ONLY on the visible /embed/<slug> path (stamped by
   the edge function and by /assets/embed-mode.js). /r/<slug> and r.html never carry the class, so this file is
   inert there - the one unscoped rule hides the embed-only "full page" link, which /r must never show (it also
   ships with the hidden attribute, so /r stays clean even if this stylesheet failed to load).

   Kept intact: the whole booking card (#resvCard) - the Reserve/Special events tabs, every step, the time and
   table pickers, consent and notices, the confirmation - and the venue's theme colours (body theme class, PR499).
   Hidden: the TableTango bar, the venue hero (the restaurant's own page already says who they are), the AI chat
   strip while it is idle, Find us / opening hours, and Powered by.
   The chat is hidden only while COLLAPSED: "Manage or cancel", a ?c= manage link and an interrupted-booking recovery
   all open it, and those flows must stay usable, so the card reappears whenever guest.js expands it.
   Sizing: html/body take the content's height (no viewport floor), so the parent can fit the iframe to it. */

.embedFullWrap{display:none}

html.embedCompact{overflow-x:hidden}
html.embedCompact,html.embedCompact body{height:auto;min-height:0}
html.embedCompact body{margin:0}

html.embedCompact #ttBar,
html.embedCompact #guestView>.hero,
html.embedCompact #findUs,
html.embedCompact #guestView>footer.guestPoweredBy{display:none!important}
/* idle AI strip: the static shell ships aria-expanded="false", so this holds from the first frame */
html.embedCompact #chatCard:has(#chatHead[aria-expanded="false"]){display:none!important}
/* the same, for a browser without :has() once guest.js has collapsed it */
html.embedCompact #chatCard.collapsed{display:none!important}

html.embedCompact #guestView>.guestGrid{margin:0 auto;padding:8px 8px 0;gap:12px;max-width:600px}
html.embedCompact #resvCard{padding:22px 18px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
/* the hero is gone, so the card names the venue: one line under "Book a table" (guest.js fills #resvName) */
html.embedCompact #rStep1 .resvRest{display:flex;justify-content:flex-start;gap:8px;margin:-12px 0 18px;font-size:clamp(17px,4.6vw,21px);line-height:1.2;text-align:left;overflow-wrap:anywhere}
html.embedCompact #rStep1 .resvRest .rIc{width:18px;height:18px;flex-shrink:0;color:var(--accent2)}
html.embedCompact #rStep1 .resvEyebrow{margin-bottom:18px}
html.embedCompact #notFound{min-height:0}

html.embedCompact .embedFullWrap{display:block;margin:4px 0 0;padding:0 8px 6px;text-align:center;font-size:13px;line-height:1.5}
html.embedCompact #embedFull{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 6px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
html.embedCompact #embedFull:hover{color:var(--accent2)}
html.embedCompact #embedFull:focus-visible{outline:3px solid var(--accent2);outline-offset:2px;border-radius:4px}

/* Narrow frames (the snippet caps the box at 520px). On the full page these pickers become bottom sheets fixed to
   the viewport; inside an iframe that viewport's bottom can be far below what the guest is looking at, so the
   sheet would open off-screen. Keep them anchored under their field instead; the height reporter grows the frame
   to fit an open picker. The calendar hangs from the date field's right edge, which in this layout is the card's
   right edge, so it never runs out of the frame. */
@media(max-width:560px){
  html.embedCompact #resvCard{padding:20px 14px}
  html.embedCompact .calPop{position:absolute;left:auto;right:0;transform:none;top:calc(100% + 7px);bottom:auto;width:min(300px,calc(100vw - 24px));max-width:none;max-height:none;overflow:visible}
  /* square 44px days need 352px; keep the 44px-tall touch target and let the width share the box */
  html.embedCompact .calPop .calDay{aspect-ratio:auto}
  html.embedCompact .ttCtyPop{position:absolute;left:0;right:auto;transform:none;top:calc(100% + 7px);bottom:auto;width:min(320px,calc(100vw - 24px));max-width:none;max-height:none;overflow:visible}
  html.embedCompact .ttCtyPopUp{top:auto;bottom:calc(100% + 7px)}
  /* a fixed ceiling (not vh) for the country list; core.js still shortens it to the room it finds */
  html.embedCompact .ttCtyList{max-height:296px}
}