/* Red Lion Cromer - rooms and photo viewer
   Colours and type follow the saved site design system. */

.rl-room,
.rl-grid,
.rl-filters {
	--rl-bg: #FFFFFF;
	--rl-surface: #F5F1E9;
	--rl-ink: #283033;
	--rl-accent: #9E2435;
	--rl-blue: #374059;
	--rl-line: #D8CFC2;
	--rl-serif: "Libre Caslon Display", Georgia, serif;
	--rl-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.rl-room { background: var(--rl-bg); color: var(--rl-ink); font-family: var(--rl-sans); }
.rl-room h1, .rl-room h2, .rl-room h3, .rl-card-title { font-family: var(--rl-serif); font-weight: 400; line-height: 1.1; }
.rl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.rl-section { padding: 64px 0; }
.rl-section-alt { background: var(--rl-surface); }
.rl-centre { text-align: center; }
.rl-lede { color: #5b6467; max-width: 60ch; margin: 8px auto 0; }

/* Hero ------------------------------------------------------------ */
.rl-hero { position: relative; min-height: 52vh; display: flex; align-items: flex-end; background: var(--rl-blue); overflow: hidden; }
.rl-hero .rl-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(40,48,51,.72) 0%, rgba(40,48,51,.28) 45%, rgba(40,48,51,.08) 100%); }
.rl-hero-inner { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px 56px; color: #fff; }
.rl-hero-inner h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); margin: 0 0 12px; color: #fff; }
.rl-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; margin: 0 0 12px; color: #fff; opacity: .92; }
.rl-hero-sub { font-size: clamp(1.02rem, 1.6vw, 1.3rem); max-width: 46ch; margin: 0; color: #fff; opacity: .95; }

/* Details and booking panel --------------------------------------- */
.rl-details-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.rl-details-main h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 0 0 16px; }
.rl-details-main p { font-size: 1.05rem; line-height: 1.7; max-width: 65ch; color: #3c4649; }
.rl-features-title { font-size: 1.3rem; margin: 40px 0 16px; }
.rl-features-title-first { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 0 0 20px; }
.rl-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 20px; }
.rl-features li { display: flex; align-items: center; gap: 12px; font-size: .96rem; }
.rl-ico { display: inline-flex; width: 26px; height: 26px; flex: 0 0 26px; color: var(--rl-accent); }
.rl-ico svg { width: 100%; height: 100%; }

.rl-booking { border: 1px solid var(--rl-line); border-radius: 10px; padding: 28px; background: #fff; position: sticky; top: 140px; }
.rl-facts { list-style: none; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--rl-line); display: grid; gap: 14px; }
.rl-facts li { display: flex; align-items: center; gap: 12px; font-size: 1rem; }
.rl-booking-price { font-size: 1.05rem; margin: 0 0 6px; }
.rl-booking-price strong { font-family: var(--rl-serif); font-size: 1.7rem; }
.rl-booking-note { font-size: .88rem; color: #5b6467; line-height: 1.6; margin: 0 0 18px; }
.rl-booking-phone { font-size: .9rem; margin: 14px 0 0; color: #5b6467; }
.rl-booking-phone a { color: var(--rl-ink); }

.rl-btn { display: inline-block; background: var(--rl-accent); color: #fff; text-decoration: none; padding: 15px 30px; border-radius: 4px; font-size: .95rem; letter-spacing: .02em; width: 100%; text-align: center; box-sizing: border-box; transition: background .2s ease; }
.rl-btn:hover, .rl-btn:focus { background: #851c2b; color: #fff; }
.rl-btn-light { background: #fff; color: var(--rl-ink); width: auto; padding-left: 40px; padding-right: 40px; }
.rl-btn-light:hover, .rl-btn-light:focus { background: var(--rl-surface); color: var(--rl-ink); }

/* Gallery grid ---------------------------------------------------- */
.rl-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.rl-thumb { padding: 0; border: 1px solid var(--rl-line); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; display: block; line-height: 0; }
.rl-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .35s ease; }
.rl-thumb:hover img, .rl-thumb:focus-visible img { transform: scale(1.04); }
.rl-thumb-lead { grid-column: span 2; grid-row: span 2; }
.rl-thumb-lead img { aspect-ratio: 4 / 3; }

/* Standing sections ----------------------------------------------- */
.rl-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.rl-split-text h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 0 0 16px; }
.rl-split-text p { font-size: 1.02rem; line-height: 1.75; color: #3c4649; }
.rl-split-media img { width: 100%; height: auto; border-radius: 10px; display: block; }
.rl-split-reverse .rl-split-media { order: -1; }

.rl-cta { background: var(--rl-accent); color: #fff; padding: 64px 0; }
.rl-cta h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 24px; }

.rl-more-link { margin-top: 36px; }

/* Cards ----------------------------------------------------------- */
.rl-grid { display: grid; gap: 32px; font-family: var(--rl-sans); color: var(--rl-ink); }
.rl-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rl-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rl-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rl-card { border: 1px solid var(--rl-line); border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.rl-card.is-hidden { display: none; }
.rl-card-media { display: block; position: relative; overflow: hidden; line-height: 0; background: var(--rl-surface); }
.rl-card-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .4s ease; }
.rl-card:hover .rl-card-media img { transform: scale(1.04); }
.rl-badge { position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,.94); color: var(--rl-ink); border-radius: 4px; padding: 6px 10px; font-size: .74rem; line-height: 1; display: inline-flex; align-items: center; gap: 6px; letter-spacing: .04em; text-transform: uppercase; }
.rl-badge svg { width: 15px; height: 15px; color: var(--rl-accent); }
.rl-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.rl-card-type { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--rl-accent); margin: 0 0 8px; }
.rl-card-title { font-size: 1.5rem; margin: 0 0 8px; }
.rl-card-title a { color: var(--rl-ink); text-decoration: none; }
.rl-card-title a:hover { color: var(--rl-accent); }
.rl-card-summary { font-size: .95rem; line-height: 1.65; color: #5b6467; margin: 0 0 16px; }
.rl-card-meta { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .88rem; color: #3c4649; }
.rl-card-meta li { display: flex; align-items: center; gap: 8px; }
.rl-card-meta svg { width: 19px; height: 19px; color: var(--rl-accent); }
.rl-card-foot { margin: auto 0 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rl-price { font-family: var(--rl-serif); font-size: 1.1rem; }
.rl-link { color: var(--rl-accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; font-size: .92rem; }
.rl-link:hover { color: #851c2b; }

/* Filters --------------------------------------------------------- */
.rl-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 36px; }
.rl-filter { font-family: var(--rl-sans); font-size: .88rem; background: #fff; color: var(--rl-ink); border: 1px solid var(--rl-line); border-radius: 4px; padding: 10px 20px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.rl-filter:hover { border-color: var(--rl-accent); color: var(--rl-accent); }
.rl-filter.is-active { background: var(--rl-accent); border-color: var(--rl-accent); color: #fff; }

/* Photo viewer ---------------------------------------------------- */
.rl-viewer { position: fixed; inset: 0; z-index: 99999; background: rgba(20,24,26,.96); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.rl-viewer.is-open { opacity: 1; visibility: visible; }
.rl-viewer-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px 72px 12px; min-height: 0; }
.rl-viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; opacity: 0; transition: opacity .25s ease; }
.rl-viewer-stage img.is-ready { opacity: 1; }
.rl-viewer-bar { color: #fff; text-align: center; padding: 0 24px 10px; font-family: var(--rl-sans, sans-serif); font-size: .88rem; min-height: 22px; }
.rl-viewer-caption { opacity: .85; }
.rl-viewer-count { opacity: .6; letter-spacing: .08em; }
.rl-viewer-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 24px 22px; scrollbar-width: thin; }
.rl-viewer-strip button { flex: 0 0 92px; height: 68px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: none; cursor: pointer; opacity: .55; transition: opacity .2s ease, border-color .2s ease; }
.rl-viewer-strip button.is-current { opacity: 1; border-color: var(--rl-accent, #9E2435); }
.rl-viewer-strip button:hover { opacity: 1; }
.rl-viewer-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-viewer-nav, .rl-viewer-close { position: absolute; background: rgba(255,255,255,.1); border: 0; color: #fff; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.rl-viewer-nav:hover, .rl-viewer-close:hover { background: rgba(255,255,255,.22); }
.rl-viewer-nav { top: 44%; width: 52px; height: 52px; }
.rl-viewer-nav svg { width: 24px; height: 24px; }
.rl-viewer-prev { left: 14px; }
.rl-viewer-next { right: 14px; }
.rl-viewer-close { top: 16px; right: 16px; width: 46px; height: 46px; font-size: 26px; line-height: 1; }
body.rl-viewer-open { overflow: hidden; }

/* Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
	.rl-details-grid { grid-template-columns: 1fr; gap: 40px; }
	.rl-booking { position: static; }
	.rl-split-grid { gap: 40px; }
	.rl-cols-3, .rl-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rl-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.rl-section { padding: 48px 0; }
	.rl-hero { min-height: 44vh; }
	.rl-hero-inner { padding-bottom: 36px; }
	.rl-split-grid { grid-template-columns: 1fr; }
	.rl-split-reverse .rl-split-media { order: 0; }
	.rl-cols-2, .rl-cols-3, .rl-cols-4 { grid-template-columns: 1fr; }
	.rl-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.rl-thumb-lead { grid-column: span 2; grid-row: span 1; }
	.rl-viewer-stage { padding: 56px 12px 8px; }
	.rl-viewer-nav { width: 44px; height: 44px; top: auto; bottom: 138px; }
	.rl-viewer-strip button { flex-basis: 68px; height: 52px; }
}

/* Room photo mosaic (25 Sep 2026) ----------------------------------
   One large photo and four smaller ones. If a room has more than five
   photos, the fifth tile shows "+9 more" and every photo is still in the
   full screen viewer. The theme's default button styling (pink border,
   padding and pink hover) is cleared here so the photos sit edge to edge. */
.rl-room .rl-gallery {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 36px;
}

.rl-room .rl-gallery .rl-thumb,
.rl-room .rl-gallery .rl-thumb:hover,
.rl-room .rl-gallery .rl-thumb:focus {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--rl-surface);
	color: inherit;
	box-shadow: none;
	overflow: hidden;
	line-height: 0;
	cursor: zoom-in;
}

.rl-room .rl-gallery .rl-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	transition: transform .4s ease;
}

.rl-room .rl-gallery .rl-thumb:hover img {
	transform: scale(1.03);
}

.rl-room .rl-gallery .rl-thumb:focus-visible {
	outline: 3px solid var(--rl-blue);
	outline-offset: 3px;
}

/* the large photo fills exactly two rows, so its top and bottom line up with the small ones */
.rl-room .rl-gallery .rl-thumb-lead {
	grid-column: span 2;
	grid-row: span 2;
}

.rl-room .rl-gallery .rl-thumb-lead img {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

/* only the first five photos show on the page */
.rl-room .rl-gallery .rl-thumb:nth-child(n+6) {
	display: none;
}

/* "+9 more" on the fifth photo */
.rl-room .rl-gallery .rl-thumb[data-more]::after {
	content: attr(data-more);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(40, 48, 51, .55);
	color: #FFFFFF;
	font-family: var(--rl-sans);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .02em;
	transition: background .3s ease;
}

.rl-room .rl-gallery .rl-thumb[data-more]:hover::after {
	background: rgba(40, 48, 51, .65);
}

/* phones: large photo across the top, then the four smaller ones two by two */
@media (max-width: 767px) {
	.rl-room .rl-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.rl-room .rl-gallery .rl-thumb-lead {
		grid-column: span 2;
		grid-row: span 1;
	}

	.rl-room .rl-gallery .rl-thumb-lead img {
		position: static;
		aspect-ratio: 3 / 2;
	}

	.rl-room .rl-gallery .rl-thumb[data-more]::after {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rl-room .rl-gallery .rl-thumb img { transition: none; }
	.rl-room .rl-gallery .rl-thumb:hover img { transform: none; }
}
/* Viewer buttons, theme reset cleared (25 Sep 2026) -----------------
   The theme gives every button a pink border, padding and a pink hover.
   These rules win over it so the viewer's arrows, close button and
   thumbnail strip keep their intended look. */
.rl-viewer .rl-viewer-nav,
.rl-viewer .rl-viewer-close,
.rl-viewer .rl-viewer-nav:focus,
.rl-viewer .rl-viewer-close:focus {
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #FFFFFF;
}

.rl-viewer .rl-viewer-nav:hover,
.rl-viewer .rl-viewer-close:hover {
	background: rgba(255, 255, 255, .22);
	color: #FFFFFF;
}

.rl-viewer .rl-viewer-strip button,
.rl-viewer .rl-viewer-strip button:hover,
.rl-viewer .rl-viewer-strip button:focus {
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	background: none;
}

.rl-viewer .rl-viewer-strip button.is-current {
	border-color: var(--rl-accent, #9E2435);
}

.rl-viewer .rl-viewer-nav:focus-visible,
.rl-viewer .rl-viewer-close:focus-visible,
.rl-viewer .rl-viewer-strip button:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}
/* viewer button sizes (the theme also forces width: auto on buttons) */
.rl-viewer .rl-viewer-nav { width: 52px; height: 52px; }
.rl-viewer .rl-viewer-close { width: 46px; height: 46px; }

@media (max-width: 767px) {
	.rl-viewer .rl-viewer-nav { width: 44px; height: 44px; }
}
/* Hero height, matched to every other page (25 Sep 2026) ------------
   All page heroes use 52% of the screen height on desktop, 52% on tablet\n   and 44% on phones. Elementor pages set this in each Hero container. */
.rl-room .rl-hero { min-height: 52vh; }

@media (max-width: 1024px) {
	.rl-room .rl-hero { min-height: 52vh; }
}

@media (max-width: 767px) {
	.rl-room .rl-hero { min-height: 44vh; }
}

/* Rooms page: room type cards and "your stay" section (28 Sep 2026) ----
   The four cards sit in an Elementor grid container (class rl-type-cards):
   4 across on desktop, 2 by 2 on tablet and phone. Set in Elementor under
   the container's Layout > Grid. This block only styles the cards. */
.rl-type-cards .rl-type-card {
	background: #FFFFFF;
	border: 1px solid rgba(40, 48, 51, .12);
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.rl-type-cards .rl-type-card:hover,
.rl-type-cards .rl-type-card:focus-within {
	border-color: rgba(158, 36, 53, .35);
	box-shadow: 0 12px 30px rgba(40, 48, 51, .12);
	transform: translateY(-3px);
}
.rl-type-cards .rl-type-card .elementor-widget-image { width: 100%; margin: 0; }
.rl-type-cards .rl-type-card .elementor-widget-image a { display: block; overflow: hidden; }
.rl-type-cards .rl-type-card .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	transition: transform .5s ease;
}
.rl-type-cards .rl-type-card:hover .elementor-widget-image img { transform: scale(1.03); }
.rl-type-cards .rl-type-card .elementor-heading-title a { color: inherit; }
.rl-type-cards .rl-type-card .elementor-heading-title::after {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin: 10px auto 0;
	background: #9E2435;
	transition: width .3s ease;
}
.rl-type-cards .rl-type-card:hover .elementor-heading-title::after { width: 48px; }
.rl-type-cards .rl-type-card a:focus-visible { outline: 2px solid #1A5FB4; outline-offset: -2px; }

.rl-stay .rl-stay-photo { width: 100%; aspect-ratio: 4 / 3; }
.rl-stay .rl-stay-photo .elementor-widget-container { height: 100%; }
.rl-stay .rl-stay-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 767px) {
	.rl-stay > .e-con-inner > .e-con { flex-shrink: 0; }
}
.rl-hero-caption p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.rl-type-cards .rl-type-card,
	.rl-type-cards .rl-type-card .elementor-widget-image img { transition: none; }
	.rl-type-cards .rl-type-card:hover { transform: none; }
	.rl-type-cards .rl-type-card:hover .elementor-widget-image img { transform: none; }
}
/* Room card photo scroller (28 Sep 2026) -----------------------------
   Each room card in the [redlion_rooms] grid shows all of that room's
   photos. Swipe on phones, or use the round arrow buttons. The photo
   order is the order set in the room's photo picker. Buttons use two
   classes so the theme's pink button reset can't restyle them. */
.rl-card-media .rl-card-track { display: block; }
.rl-card-slider .rl-card-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}
.rl-card-slider .rl-card-track::-webkit-scrollbar { display: none; }
.rl-card-slider .rl-card-track img {
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.rl-card:hover .rl-card-slider img { transform: none; }

.rl-card-slider .rl-slide-btn,
.rl-card-slider .rl-slide-btn:hover,
.rl-card-slider .rl-slide-btn:focus {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #283033;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}
.rl-card-slider .rl-slide-btn:hover { background: #9E2435; color: #FFFFFF; }
.rl-card-slider .rl-slide-btn svg { width: 20px; height: 20px; }
.rl-card-slider .rl-slide-prev { left: 10px; }
.rl-card-slider .rl-slide-next { right: 10px; }
.rl-card-slider .rl-slide-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 4px #1A5FB4; }

.rl-card-slider .rl-slide-count {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 5px 9px;
	border-radius: 999px;
	background: rgba(20, 20, 20, .62);
	color: #FFFFFF;
	font-size: .75rem;
	line-height: 1;
	letter-spacing: .03em;
	pointer-events: none;
}

/* Desktop with a mouse: arrows are softer until the card is hovered.
   Touch screens always show them at full strength. */
@media (hover: hover) and (pointer: fine) {
	.rl-card-slider .rl-slide-btn { opacity: .8; }
	.rl-card:hover .rl-card-slider .rl-slide-btn,
	.rl-card-slider .rl-slide-btn:focus-visible { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.rl-card-slider .rl-card-track { scroll-behavior: auto; }
}
/* Rates & availability (added 5 Oct 2026) ---------------------------------
   The live rates calendar from the booking system, set per room in
   Rooms > Edit Room > Booking rates widget. It sits in a white card so it
   reads as part of the page, and grows to fit its content (see rooms.js). */
.rl-rates-section { scroll-margin-top: 90px; } /* no top rule: the sections alternate cream / white instead (6 Oct 2026) */
.rl-rates-section h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 0; }
/* 760px wide: below about 900px the booking calendar switches from one long row of days to a month grid, week by week */
.rl-rates-card { max-width: 760px; margin: 32px auto 0; background: #fff; border: 1px solid var(--rl-line); border-radius: 8px; padding: 16px; box-shadow: 0 2px 16px rgba(40, 48, 51, .05); overflow: hidden; }
.rl-rates-frame { display: block; width: 100%; min-height: 100px; border: 0; background: transparent; transition: height .2s ease; }
.rl-rates-help { margin: 18px 0 0; font-size: .95rem; color: #5b6467; }
.rl-rates-help a { color: var(--rl-ink); }
@media (max-width: 767px) {
	.rl-rates-section { scroll-margin-top: 72px; }
	.rl-rates-card { margin-top: 24px; padding: 8px; border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) { .rl-rates-frame { transition: none; } }

/* Rates calendar switch (added 5 Oct 2026) ----------------------------------
   For rooms with more than one calendar, e.g. Room 16 as a Double or a Twin.
   A segmented switch above the card picks which calendar shows.
   Two-class selectors and explicit width/padding/border/background, because
   the theme's reset.css restyles every button. */
.rl-rates-switch { margin: 28px 0 0; text-align: center; }
.rl-rates-switch-label { margin: 0 0 10px; font-size: .9rem; color: #5b6467; }
.rl-rates-switch .rl-rates-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--rl-line); border-radius: 8px; }
.rl-rates-tabs .rl-rates-tab { width: auto; min-width: 120px; min-height: 44px; margin: 0; padding: 10px 24px; border: 0; border-radius: 5px; background: transparent; color: var(--rl-ink); font-family: var(--rl-sans); font-size: .95rem; font-weight: 600; line-height: 1.2; letter-spacing: .01em; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.rl-rates-tabs .rl-rates-tab:hover { background: var(--rl-surface); color: var(--rl-ink); }
.rl-rates-tabs .rl-rates-tab.is-active,
.rl-rates-tabs .rl-rates-tab.is-active:hover { background: var(--rl-accent); color: #fff; }
.rl-rates-tabs .rl-rates-tab:focus { outline: none; }
.rl-rates-tabs .rl-rates-tab:focus-visible { outline: 2px solid var(--rl-blue); outline-offset: 2px; }
.rl-rates-switch + .rl-rates-card { margin-top: 16px; }
.rl-rates-panel[hidden] { display: none; }
@media (max-width: 767px) {
	.rl-rates-switch .rl-rates-tabs { display: flex; width: 100%; box-sizing: border-box; }
	.rl-rates-tabs .rl-rates-tab { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .rl-rates-tabs .rl-rates-tab { transition: none; } }