/* === Booking — inline SevenRooms widget === */

/* The widget is the page's purpose, so it takes the FULL width of the content
   area — not the reading measure, and no longer a 760px cap of its own. A
   reservation form is a grid of dates, times and covers; every pixel it gets is
   another day visible without paging. It sits directly inside .wrap, so this
   is the page width less the gutters. */
.sr-embed { width: 100%; margin: var(--s-4) auto 0; }

/* Height is the whole problem with third-party booking iframes: the widget
   grows as the guest moves through date, time, covers and details, and it
   cannot tell us. min-height covers the tallest step so the form never
   scrolls inside its own frame on desktop. */
.sr-embed iframe { width: 100%; height: 85vh; min-height: 640px; border: 0; display: block; border-radius: var(--radius, 10px); background: var(--paper, #fff); }

@media (max-width: 720px) {
	/* On a phone the viewport is the frame. Fixed vh units here caused a
	   double scrollbar, the page and the widget, which is unusable on iOS. */
	/* Keeps the radius: the embed sits inside the page gutters rather than
	   bleeding to the edge, and square corners there read as a broken frame
	   next to every other rounded picture on the site. */
	.sr-embed iframe { height: auto; min-height: 720px; }
}

/* Editor-only configuration notice. Never shown to guests. */
.sr-fallback.notice-inline { margin-top: var(--sp-5, 2rem); padding: 1rem 1.25rem; border-left: 3px solid var(--brand, #8c3b2b); background: rgba(0,0,0,.04); font-size: .9rem; }
