/* Shared components of the public site */

/* Buttons */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-block-size: 44px;
	padding-inline: 1.375rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--rym-transition), transform var(--rym-duration-press) var(--rym-ease-out);
}
/* Press feedback (Signature §3.3): every pill-shaped action sinks to 97 % for 120 ms, on touch screens too. */
:is(.button, .site-header__cta, .chip):active { transform: scale(.97); }
.button--action { background-color: var(--rym-color-action); color: var(--rym-color-on-action); }
.button--action:hover, .button--action:focus-visible { background-color: var(--rym-color-action-hover); color: var(--rym-color-on-action); }
/* Cream pill on ink grounds (Wow §0: coral only for the one primary action of a view). */
.button--light { background-color: var(--rym-color-on-ink); color: var(--rym-color-ink); }
.button--light:hover, .button--light:focus-visible { background-color: var(--rym-brand-white); color: var(--rym-color-ink); }
/* Pill buttons end with an arrow that moves 2 px toward the reading end on hover (fine pointers). */
.button > .icon--flip-rtl:last-child { transition: translate var(--rym-dur-2) var(--rym-ease-out); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.button:not([aria-disabled="true"], :disabled):hover > .icon--flip-rtl:last-child { translate: 2px 0; }
	:dir(rtl) .button:not([aria-disabled="true"], :disabled):hover > .icon--flip-rtl:last-child { translate: -2px 0; }
}
.button--secondary { background-color: var(--rym-color-text); color: var(--rym-color-bg); }
.button--secondary:hover, .button--secondary:focus-visible { background-color: var(--rym-color-accent-hover); color: var(--rym-color-bg); }
/* On the content pages (listing, booking, account, help, offers, guides) */
:is(.site-main--listing, .site-main--account, .booking, .help-centre, .offers-more, .guide-article__related) .button--secondary { box-shadow: inset 0 0 0 1px var(--rym-color-border-strong); background-color: transparent; color: var(--rym-color-text); }
:is(.site-main--listing, .site-main--account, .booking, .help-centre, .offers-more, .guide-article__related) .button--secondary:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px var(--rym-color-text); background-color: var(--rym-brand-white); color: var(--rym-color-text); }

/* Header (Signature §4.1) */
.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--rym-z-header);
	pointer-events: none;
}
/* The two backgrounds cover exactly the visible bar, so they catch the clicks that miss its content. */
.site-header::before,
.site-header::after {
	content: "";
	pointer-events: auto;
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: opacity var(--rym-dur-2) var(--rym-ease-out), transform var(--rym-dur-2) var(--rym-ease-out);
}
.site-header::before { background-color: var(--rym-color-bg); }
/* Solid state (W9a): glass with one hairline, no shadow. */
.site-header::after {
	background-color: var(--rym-glass-solid);
	border-block-end: 1px solid rgb(15 36 56 / 8%);
	opacity: 0;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header::after { background-color: var(--rym-glass); -webkit-backdrop-filter: var(--rym-glass-blur); backdrop-filter: var(--rym-glass-blur); }
}
.site-header.is-scrolled::before { opacity: 0; }
.site-header.is-scrolled::after { opacity: 1; }
.site-header.is-scrolled::before,
.site-header.is-scrolled::after { transform: translateY(-12px); }
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-block-size: 4.75rem; padding-block: .9375rem; }
.site-header__inner > * { pointer-events: auto; }
/* The ride-up uses `translate`, so it never overrides the press feedback (`transform: scale`) of the buttons. */
.site-brand, .site-nav__toggle, .site-header__cta { transition: translate var(--rym-dur-2) var(--rym-ease-out), transform var(--rym-duration-press) var(--rym-ease-out); }
.site-header.is-scrolled :is(.site-brand, .site-nav__toggle, .site-header__cta) { translate: 0 -6px; }
/* 46 px: mid ride-up, a 44 px box measures 43.99. */
.site-brand { min-block-size: 2.875rem; padding-inline: 0; margin-inline-end: auto; }
.site-brand__logo { display: block; block-size: 2.25rem; inline-size: auto; transform-origin: 0 50%; transition: transform var(--rym-dur-2) var(--rym-ease-out); }
:dir(rtl) .site-brand__logo { transform-origin: 100% 50%; }
.site-header.is-scrolled .site-brand__logo { transform: scale(.9); }

/* Nav links */
/* W9a: 15 px / 500, the current page 600; a 1 px line. */
.site-header .primary-menu a { position: relative; color: var(--rym-color-text); font-size: .9375rem; font-weight: 500; letter-spacing: .005em; text-decoration: none; }
.site-header .primary-menu a::after {
	content: ""; position: absolute; inset-inline: .5rem; inset-block-end: .625rem; block-size: 1px;
	background-color: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--rym-dur-2) var(--rym-ease-out);
}
:dir(rtl) .site-header .primary-menu a::after { transform-origin: 100% 50%; }
.site-header .primary-menu a[aria-current="page"] { color: var(--rym-color-text); font-weight: 600; }
.site-header .primary-menu a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
	.site-header .primary-menu a:hover { color: var(--rym-color-accent-hover); }
	.site-header .primary-menu a:hover::after { transform: scaleX(1); }
}
.site-header__cta {
	display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 1.375rem;
	border-radius: 999px; background-color: var(--rym-color-text); color: var(--rym-color-bg);
	font-size: .9375rem; font-weight: 600; text-decoration: none;
	transition: background-color var(--rym-transition), translate var(--rym-dur-2) var(--rym-ease-out), transform var(--rym-duration-press) var(--rym-ease-out);
}
/* Wow §0: an ink pill, so the page's own primary action is the only coral one (a cream pill over ink, below). */
.site-header__cta:hover, .site-header__cta:focus-visible { background-color: var(--rym-color-accent-hover); color: var(--rym-color-bg); }

.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav__toggle {
	display: none; align-items: center; justify-content: center; inline-size: 2.875rem; block-size: 2.875rem;
	border: 0; border-radius: 999px; background-color: var(--rym-color-surface-warm); color: var(--rym-color-text); cursor: pointer;
}

@media (max-width: 79.99rem) {
	.site-nav__toggle { display: inline-flex; }
	.site-nav__panel {
		position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(22rem, 88vw); z-index: var(--rym-z-header);
		display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem 1.5rem;
		background-color: var(--rym-color-bg); box-shadow: var(--rym-shadow-3);
		transform: translateX(100%); visibility: hidden;
		transition: transform var(--rym-duration-panel) var(--rym-ease-drawer), visibility 0s linear var(--rym-duration-panel);
	}
	:dir(rtl) .site-nav__panel { transform: translateX(-100%); }
	.site-nav[data-open] .site-nav__panel { transform: none; visibility: visible; transition: transform var(--rym-duration-panel) var(--rym-ease-drawer); }
	.site-nav__panel .primary-menu ul { flex-direction: column; align-items: flex-start; }
	.site-nav__panel .primary-menu a { font-size: 1.0625rem; }
	.site-header__cta { display: none; }
}

/* The inline nav (menu, account, languages) */
@media (min-width: 80rem) {
	.site-nav__panel { display: flex; align-items: center; gap: .75rem; }
	.site-header .primary-menu__list a, .site-header .language-switcher__list a { padding-inline: .5rem; }
	.site-header__cta { flex-shrink: 0; white-space: nowrap; }
	/* The inline panel is not fixed on wide screens, so it can ride up with the rest of the bar. */
	.site-nav__panel { transition: translate var(--rym-dur-2) var(--rym-ease-out); }
	.site-header.is-scrolled .site-nav__panel { translate: 0 -6px; }
	/* W7d: the bar stays one line; the logo never shrinks. */
	.site-brand { flex-shrink: 0; }
	.site-header .primary-menu__list { flex-wrap: nowrap; }
	.site-header .primary-menu__list a { white-space: nowrap; }
}
/* W9a: 32 px between the links where the bar has room. */
@media (min-width: 90rem) { .site-header .primary-menu__list { gap: 1rem; } }
/* Where the « Book » pill shows, the search link steps aside (both open the search). Pages without the pill (search,
   listing, booking flow, header.php) keep the link. Only the fallback menu (rymotel_public_navigation) prints
   `li[data-nav]`: a menu built in the admin is left as built. */
@media (min-width: 80rem) {
	.site-header__inner:has(.site-header__cta) [data-nav="search"] { display: none; }
}

/* Over an ink band (header.js): ink glass, cream bar. */
.site-header.is-scrolled.is-over-dark::after { background-color: rgb(15 36 56 / 84%); border-block-end-color: var(--rym-color-ink-line); }
.site-header.is-scrolled.is-over-dark .site-brand__logo { filter: brightness(0) invert(1); }
.site-header.is-scrolled.is-over-dark .site-nav__toggle { background-color: rgb(255 253 248 / 14%); box-shadow: inset 0 0 0 1px rgb(255 253 248 / 24%); color: var(--rym-brand-cream); }
@media (min-width: 80rem) {
	.site-header.is-scrolled.is-over-dark :is(.primary-menu a, .primary-menu a:hover, .language-switcher__menu:not([open]) > .language-switcher__toggle) { color: var(--rym-color-on-ink); }
	.site-header.is-scrolled.is-over-dark .site-header__inner :focus-visible { outline-color: var(--rym-color-on-ink); }
	:is(.site-header.is-scrolled.is-over-dark, .home .site-header:not(.is-scrolled)) .site-header__cta { background-color: var(--rym-color-on-ink); color: var(--rym-color-ink); }
	:is(.site-header.is-scrolled.is-over-dark, .home .site-header:not(.is-scrolled)) .site-header__cta:hover { background-color: #fff; color: var(--rym-color-ink); }
}

/* Clear over the home hero at rest (§4.2), glass after 24 px as everywhere */
.home .site-header:not(.is-scrolled)::before { opacity: 0; }
.home .site-header:not(.is-scrolled) .site-brand__logo { filter: brightness(0) invert(1); }
.home .site-header:not(.is-scrolled) .site-nav__toggle { background-color: var(--rym-glass-solid); }
@media (min-width: 80rem) {
	.home .site-header:not(.is-scrolled) :is(.primary-menu a, .language-switcher__menu:not([open]) > .language-switcher__toggle) { color: var(--rym-color-on-ink); }
	.home .site-header:not(.is-scrolled) .site-header__inner :focus-visible { outline-color: var(--rym-color-on-ink); }
}
@media (min-width: 80rem) and (hover: hover) and (pointer: fine) {
	.home .site-header:not(.is-scrolled) .primary-menu a:hover { color: var(--rym-color-on-ink); }
	.home .site-header:not(.is-scrolled) .language-switcher__toggle:hover { background-color: rgb(255 253 248 / 14%); }
}

/* Language dropdown (reviewer item R2) */
.language-switcher__menu { position: relative; }
.language-switcher__toggle {
	display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px;
	padding-inline: .75rem; border-radius: var(--rym-radius); color: var(--rym-color-text);
	font-size: .9375rem; font-weight: 500; cursor: pointer; list-style: none; user-select: none;
}
.language-switcher__toggle::-webkit-details-marker { display: none; }
.language-switcher__toggle::after {
	content: ""; inline-size: .5em; block-size: .5em; border-block-end: 2px solid currentColor; border-inline-end: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg); transition: transform var(--rym-duration-small) var(--rym-ease-out);
}
.language-switcher__menu[open] > .language-switcher__toggle::after { transform: translateY(25%) rotate(225deg); }
/* The caret's borders are logical, so right to left mirrors them: turn the other way to keep it pointing down. */
:dir(rtl) .language-switcher__toggle::after { transform: translateY(-25%) rotate(-45deg); }
:dir(rtl) .language-switcher__menu[open] > .language-switcher__toggle::after { transform: translateY(25%) rotate(-225deg); }
.language-switcher__menu[open] > .language-switcher__toggle { background-color: var(--rym-color-surface); }
.language-switcher__menu .language-switcher__list { flex-direction: column; flex-wrap: nowrap; padding-block-start: .5rem; }
.language-switcher__menu .language-switcher__list a { justify-content: flex-start; inline-size: 100%; }
@media (hover: hover) and (pointer: fine) {
	.language-switcher__toggle:hover { background-color: var(--rym-color-surface); }
}
@media (prefers-reduced-motion: reduce) { .language-switcher__toggle::after { transition: none; } }
@media (min-width: 80rem) {
	.language-switcher__menu .language-switcher__list {
		position: absolute; inset-block-start: calc(100% + .25rem); inset-inline-end: 0; z-index: var(--rym-z-header);
		min-inline-size: 11rem; padding: .5rem; border: 1px solid var(--rym-color-border); border-radius: var(--rym-radius);
		background-color: var(--rym-color-bg); box-shadow: var(--rym-shadow-2);
	}
}

/* Tactile grain (Wow §2.3): a light inline-SVG noise on the ink and sand grounds, drawn at 5 % at most. */
:root { --rym-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Footer (Signature §4.1) */
.site-footer { position: relative; isolation: isolate; overflow: clip; margin-block-start: 4.5rem; background-color: var(--rym-color-ink); color: var(--rym-color-on-ink); font-size: .875rem; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--rym-grain); opacity: .05; pointer-events: none; }
.site-footer a { color: var(--rym-color-on-ink); }
.site-footer :focus-visible { outline-color: var(--rym-color-on-ink); }
/* The page's closing band (W9a): room above, the call to action on the line's last baseline. */
.site-footer__lead { display: flex; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; gap: 2rem; padding-block: clamp(5.5rem, 3rem + 7.8vw, 10rem) clamp(3rem, 2rem + 3vw, 4.5rem); }
.site-footer__line { margin: 0; max-inline-size: 13ch; color: var(--rym-color-on-ink); font-size: var(--rym-font-size-display); }
.site-footer .site-footer__cta { flex: none; min-block-size: 3.25rem; padding-inline: 1.75rem; color: var(--rym-color-on-action); font-size: 1rem; }
.site-footer__cta .icon { inline-size: 1.125rem; block-size: 1.125rem; }
/* Three columns (W9a): Explore, Information, Language; phones: two, then the languages as one row. */
.site-footer__columns {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem;
	padding-block: 3rem; border-block-start: 1px solid var(--rym-color-ink-line);
}
.footer-languages { grid-column: 1 / -1; }
.footer-languages .footer-languages__list { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }
@media (min-width: 48rem) {
	.site-footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 4rem; }
	.footer-languages { grid-column: auto; }
	.footer-languages .footer-languages__list { display: grid; }
}
.site-footer__heading { margin: 0 0 .75rem; color: rgb(255 253 248 / 56%); font-family: var(--rym-font-body); font-size: .75rem; font-weight: 600; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
:lang(ar) .site-footer__heading { letter-spacing: 0; text-transform: none; }
.site-footer__list { display: grid; margin: 0; padding: 0; list-style: none; }
.site-footer__list a { position: relative; display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; color: rgb(255 253 248 / 82%); font-size: .9375rem; text-decoration: none; transition: color var(--rym-dur-1) var(--rym-ease-out); }
.site-footer__list a[aria-current], .site-footer__list .current-lang a { color: var(--rym-color-on-ink); font-weight: 600; }
/* The copyright at the end; the logo a cream watermark at 12 % that runs off the band's foot (logos have no contrast
   requirement). */
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; }
.site-footer__wordmark { display: inline-flex; min-block-size: 44px; margin-block-end: calc(-.12 * clamp(4rem, 12vw, 10rem)); opacity: .12; transition: opacity var(--rym-dur-2) var(--rym-ease-out); }
.site-footer__wordmark:focus-visible { opacity: 1; }
.site-footer__logo { display: block; block-size: clamp(4rem, 12vw, 10rem); inline-size: auto; filter: brightness(0) invert(97%) sepia(6%); }
.site-footer__copyright { margin: 0; padding-block-end: 2rem; color: var(--rym-color-on-ink-muted); }

/* Link underline (Signature §3.3): footer and section links draw a 1 px line from the reading start on hover. */
:is(.site-footer__list, .section-head) a { text-decoration: none; }
:is(.site-footer__list, .section-head) a::after {
	content: ""; position: absolute; inset-inline: 0; inset-block-end: .625rem; block-size: 1px; background-color: currentColor;
	transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--rym-dur-2) var(--rym-ease-out);
}
:dir(rtl) :is(.site-footer__list, .section-head) a::after { transform-origin: 100% 50%; }
.section-head a { position: relative; }
.section-head:has(.section-head__text) { align-items: flex-end; }
.section-head__eyebrow { color: var(--rym-color-text-muted); }
.section-head__link .icon { inline-size: 1rem; block-size: 1rem; transition: translate var(--rym-dur-2) var(--rym-ease-out); }
.section-head a::after { transform: scaleX(1); opacity: .35; transition: transform var(--rym-dur-2) var(--rym-ease-out), opacity var(--rym-dur-2) var(--rym-ease-out); }
:is(.site-footer__list, .section-head) a:focus-visible::after { transform: scaleX(1); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
	.site-footer__list a:hover { color: var(--rym-color-on-ink); }
	:is(.site-footer__list, .section-head) a:hover::after { transform: scaleX(1); opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.section-head__link:hover .icon { translate: 2px 0; }
	:dir(rtl) .section-head__link:hover .icon { translate: -2px 0; }
}

/* Focus ring: one coral ring everywhere (main.css), cream on the ink band; it follows the rounded corners. */
:is(.button, .chip, .site-header__cta):focus-visible { outline-offset: 3px; }

/* Scroll reveal (Signature §3.3, assets/js/reveal.js) */
html.has-reveal [data-reveal]:not(.is-revealed),
html.has-reveal [data-reveal-stagger]:not(.is-revealed) > * { opacity: 0; transform: translateY(var(--rym-reveal-distance)); }
html.has-reveal [data-reveal].is-revealed,
html.has-reveal [data-reveal-stagger].is-revealed > * { animation: rym-reveal var(--rym-dur-3) var(--rym-ease-out) calc(var(--rym-reveal-i, 0) * var(--rym-reveal-stagger)) backwards; }
@keyframes rym-reveal { from { clip-path: inset(0 0 100% 0); transform: translateY(var(--rym-reveal-distance)); } }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html.has-reveal [data-reveal]:not(.is-revealed),
	html.has-reveal [data-reveal-stagger]:not(.is-revealed) > * { transform: none; }
}

/* Images fade in over their placeholder tone once loaded (reveal.js marks the lazy ones still loading). */
img.is-loading { opacity: 0; }
img.is-loaded { animation: rym-fade-in 300ms var(--rym-ease-out); }
@keyframes rym-fade-in { from { opacity: 0; } }

/* Page transitions (Signature §3.3) */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root),
	::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: var(--rym-ease-out); }
}

/* Compact titles keep the text face */
:is(.account-panel__title, .booking-summary__title, .help-centre__next-title) {
	font-family: var(--rym-font-body); font-weight: 700; letter-spacing: normal; line-height: var(--rym-line-height-tight);
}

/* Listing card (§4.3, components.md 18.2) */
.listing-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .875rem; border-radius: var(--rym-radius-photo); }
.listing-card:has(.listing-card__link:focus-visible) { outline: 3px solid var(--rym-color-focus); outline-offset: 6px; }
.listing-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: inherit; background-color: var(--rym-color-surface-strong); }
/* A subtle inner border keeps light photos off the cream ground. */
.listing-card__media::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--rym-hairline); pointer-events: none; }
.listing-card__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--rym-dur-zoom) var(--rym-ease-out); }
.listing-card__badges { position: absolute; inset-block-start: .75rem; inset-inline-start: .75rem; z-index: 2; max-inline-size: calc(100% - 4.5rem); }
.listing-card__body { display: flex; flex-direction: column; gap: .375rem; padding-inline: .125rem; }
.listing-card__title {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
	margin: 0; font-family: var(--rym-font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
}
.listing-card__link { color: var(--rym-color-text); text-decoration: underline 1px transparent; text-underline-offset: 4px; }
.listing-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.listing-card__link:focus-visible { outline: none; }
/* Meta line: a dot before each item, clipped at line starts (the list starts 1 em early). */
.listing-card__facts { display: flex; flex-wrap: wrap; margin: 0; margin-inline: -1em 0; padding: 0; list-style: none; color: var(--rym-color-text-muted); font-size: .9375rem; overflow-wrap: anywhere; clip-path: inset(0 0 0 1em); }
:dir(rtl) .listing-card__facts { clip-path: inset(0 1em 0 0); }
.listing-card__facts li::before { content: "·"; float: inline-start; inline-size: 1em; text-align: center; }
.listing-card__facts .listing-card__place { color: var(--rym-color-text); }
.listing-card__supplier { margin: 0; color: var(--rym-color-text-muted); font-size: .9375rem; overflow-wrap: anywhere; }
.listing-card__supplier bdi { color: var(--rym-color-text); }
/* Facts under the photo (Wow §0): small icon + word, one line that wraps. */
.listing-card__traits { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .125rem 0 0; padding: 0; list-style: none; color: var(--rym-color-text); font-size: .875rem; }
.listing-card__trait { display: inline-flex; align-items: center; gap: .375rem; overflow-wrap: anywhere; }
.listing-card__trait .icon { inline-size: 1rem; block-size: 1rem; color: var(--rym-color-text-muted); }
.listing-card__trait--label .icon { color: var(--rym-color-text); }
.listing-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .5rem; min-inline-size: 0; margin: .375rem 0 0; overflow-wrap: anywhere; }
/* Serif numerals for prices (Latin; Arabic keeps its face through --rym-font-display). */
.listing-card__amount { color: var(--rym-color-price); font-family: var(--rym-font-display); font-size: 1.5rem; font-weight: var(--rym-font-weight-serif); letter-spacing: var(--rym-letter-spacing-serif); line-height: 1.1; }
.listing-card__price-note { color: var(--rym-color-text-muted); font-size: .875rem; }
.listing-card__placeholder { display: grid; place-items: center; block-size: 100%; color: var(--rym-color-text-muted); }
.listing-card__placeholder .icon { inline-size: 3rem; block-size: 3rem; }
/* Map sync (search page). */
:is(.listing-card.is-active, .listing-card.is-selected) .listing-card__media { box-shadow: 0 0 0 3px var(--rym-color-text), var(--rym-shadow-2); }
/* Hover (W9a): the title stays ink and takes its underline, the photo zooms inside its frame; no lift, no shadow. */
@media (hover: hover) and (pointer: fine) {
	.listing-card:hover .listing-card__media img { transform: scale(1.03); }
	.listing-card:hover .listing-card__link { color: var(--rym-color-text); text-decoration-color: currentColor; }
}

/* Badges */
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.5; background-color: #fff; color: var(--rym-color-text); }
.badge--network { background-color: var(--rym-color-network-bg); color: var(--rym-color-network-text); }
.badge--marketplace { background-color: var(--rym-color-marketplace-bg); color: var(--rym-color-marketplace-text); }
/* The one badge on the photo: the participation mode, a quiet cream label (W9a). */
.listing-card__badges .badge { padding: .375rem .625rem; background-color: rgb(255 253 248 / 92%); color: var(--rym-color-text); font-size: .75rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.listing-card__badges .badge--network .icon { color: var(--rym-color-network-text); }
/* Card heart (W9a): no disc over a photo, a cream stroke on a 44 px target, ink over the placeholder. Over a photo a tight
   ink outline under the stroke keeps 3:1 on white linen (WCAG 1.4.11), a soft shadow on top. */
.listing-card .favorite-toggle { position: absolute; inset-block-start: .25rem; inset-inline-end: .25rem; z-index: 2; }
.listing-card .favorite-toggle__button { border: 0; background-color: transparent; box-shadow: none; }
.listing-card__media:has(img) .favorite-toggle__button { color: var(--rym-brand-cream); filter: drop-shadow(0 0 1px rgb(15 36 56 / 90%)) drop-shadow(0 1px 3px rgb(15 36 56 / 45%)); }
.listing-card__media:has(img) .favorite-toggle__button[aria-pressed="true"] { color: var(--rym-brand-cream); }
.listing-card__media:has(img) .favorite-toggle__button[aria-pressed="true"] .favorite-toggle__icon { fill: var(--rym-color-action); }
.listing-card .favorite-toggle__icon { inline-size: 1.5rem; block-size: 1.5rem; }
.listing-card .favorite-toggle__button:focus-visible { outline-color: var(--rym-brand-cream); outline-offset: -2px; }
.listing-card__media:not(:has(img)) .favorite-toggle__button:focus-visible { outline-color: var(--rym-color-focus); }
/* Heart pop on save (favorites.js sets .is-popped). */
.favorite-toggle__button.is-popped .favorite-toggle__icon { animation: rym-heart-pop 280ms var(--rym-ease-out); }
@keyframes rym-heart-pop { 45% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
	.listing-card:hover .listing-card__media img { transform: none; }
}

/* Chips */
.chip-list { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.chip {
	display: inline-flex; align-items: center; gap: .25rem; flex: none; min-block-size: 2.75rem; padding-inline: 1rem;
	border: 1px solid var(--rym-color-border); border-radius: 999px; background-color: #fff;
	color: var(--rym-color-text); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
	scroll-snap-align: start; transition: background-color var(--rym-transition), border-color var(--rym-transition);
}
.chip:hover { border-color: var(--rym-color-border-strong); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background-color: var(--rym-color-text); border-color: var(--rym-color-text); color: #fff; }

/* Fields */
input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea { border-color: var(--rym-color-border-strong); border-radius: var(--rym-radius); }
@media (max-width: 63.99rem) {
	input, select, textarea { font-size: 1rem; }
}

/* Skeleton: a light band sweeps in the reading direction (transform only; the spec's one infinite loop). */
.skeleton { position: relative; display: block; overflow: hidden; border-radius: var(--rym-radius); background-color: var(--rym-color-surface-strong); opacity: .6; }
.skeleton::after {
	content: ""; position: absolute; inset: 0; transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgb(255 253 248 / 70%), transparent);
	animation: rym-shimmer 1.6s var(--rym-ease-in-out) infinite;
}
:dir(rtl) .skeleton::after { animation-direction: reverse; }
@keyframes rym-shimmer { to { transform: translateX(100%); } }


/* Search pill (home hero, 404; W9a): one solid cream bar, hairline dividers, the coral action inset 8 px all round. */
.search-pill { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 0; min-block-size: 4.75rem; padding: .5rem; border-radius: 999px; background-color: var(--rym-color-bg); box-shadow: 0 1px 2px rgb(15 36 56 / 6%), 0 24px 60px -24px rgb(15 36 56 / 45%); color: var(--rym-color-text); }
.search-pill .stay-search__fields { display: contents; }
.search-pill .search-pill__field { position: relative; display: grid; grid-column: auto; align-content: center; align-self: stretch; gap: .125rem; margin: 0; padding: .25rem 1.25rem; border-radius: 999px; }
/* Dividers: 32 px hairlines, hidden beside the hovered or focused field. */
.search-pill .search-pill__field + .search-pill__field::before { content: ""; position: absolute; inset-block-start: calc(50% - 1rem); inset-inline-start: 0; inline-size: 1px; block-size: 2rem; background-color: var(--rym-hairline-strong); transition: opacity var(--rym-dur-1) var(--rym-ease-out); }
.search-pill .search-pill__field:focus-within::before,
.search-pill .search-pill__field:focus-within + .search-pill__field::before { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
	.search-pill .search-pill__field:hover { background-color: rgb(15 36 56 / 4%); }
	.search-pill .search-pill__field:hover::before,
	.search-pill .search-pill__field:hover + .search-pill__field::before { opacity: 0; }
}
.search-pill__field label { color: var(--rym-color-text-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
:lang(ar) .search-pill__field label { font-size: .8125rem; letter-spacing: 0; text-transform: none; }
.search-pill__field :is(input, select) { min-block-size: 2rem; padding: 0; border: 0; background: transparent; color: var(--rym-color-text); font-size: 1rem; font-weight: 500; }
.search-pill .picker-value { font-weight: 500; }
.search-pill .picker-value.is-empty { font-weight: 400; }
.search-pill .search-pill__submit { grid-column: auto; gap: .5rem; min-inline-size: 3.75rem; min-block-size: 3.75rem; padding-inline: 1.75rem; font-size: .9375rem; font-weight: 600; }
.search-pill__submit .icon { inline-size: 1.125rem; block-size: 1.125rem; }
/* City first (reviewers' item R1): the city is a fifth field of the bar on large screens. */
@media (min-width: 64rem) { .search-pill:has(.stay-search__field--city) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)) auto; } }
/* The neighbourhood page's pill asks the dates and travelers only (its neighbourhood is a hidden field). */
@media (min-width: 64rem) { .search-pill:not(:has(.stay-search__field--where)) { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; } }
/* Below 64 rem: one cream card, rows of 60 px between hairlines, the action full width. Rows wrap like text: city
   and neighbourhood share the first row in proportion to their values, the two dates the second, travelers the third. */
@media (max-width: 63.99rem) {
	.search-pill { display: flex; flex-wrap: wrap; min-block-size: 0; border-radius: var(--rym-radius-panel); }
	.search-pill .search-pill__field { flex: 1 1 auto; min-block-size: 3.75rem; padding: .375rem .875rem; border-radius: 0; border-block-end: 1px solid var(--rym-hairline); }
	.search-pill .search-pill__field:has(input[type="date"]) { flex-basis: 40%; }
	.search-pill .stay-search__field--guests { flex-basis: 100%; border-block-end: 0; }
	.search-pill .search-pill__field + .search-pill__field::before { content: none; }
	.search-pill .search-pill__field:nth-of-type(even) { border-inline-start: 1px solid var(--rym-hairline); }
	.search-pill .search-pill__submit { flex: 1 1 100%; min-block-size: 3.5rem; margin-block-start: .5rem; }
}
/* Below 22.5 rem (320 px, 400 % zoom) one field per row: a date field cannot shrink below its text (WCAG 1.4.10). */
@media (max-width: 22.4375rem) {
	.search-pill .search-pill__field { flex-basis: 100%; }
	.search-pill .search-pill__field:nth-of-type(even) { border-inline-start: 0; }
}

/* Theme photos printed by rymotel_picture(): the <picture> fills its frame like the image did. */
.picture { display: block; inline-size: 100%; block-size: 100%; }

/* Neighbourhood card with a photo (home, neighbourhoods index). */
.neighborhood-card { overflow: hidden; padding: 0 0 1.5rem; border: 0; border-radius: var(--rym-radius-card); background-color: #fff; box-shadow: 0 0 0 1px var(--rym-hairline); }
.neighborhood-card > :not(.neighborhood-card__photo) { margin-inline: 1.5rem; }
.neighborhood-card:not(:has(.neighborhood-card__photo)) { padding-block-start: 1.5rem; }
.neighborhood-card__photo { aspect-ratio: 3 / 2; background-color: var(--rym-color-surface); }
.neighborhood-card__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Cover variant (home bento): text on a scrim over the full photo; hover zoom (fine pointers). */
.neighborhood-card--cover {
	display: grid; align-content: end; gap: .5rem; min-block-size: 18rem; padding: 2rem;
	border-radius: var(--rym-radius-photo); background-color: var(--rym-color-ink); color: var(--rym-color-on-ink); isolation: isolate; box-shadow: none;
}
.neighborhood-card--cover > :not(.neighborhood-card__photo) { margin-inline: 0; }
.neighborhood-card--cover .neighborhood-card__photo { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
/* The warm grade (a sand multiply layer), then the scrim with the frame's inner hairline. */
/* One photo grade for every neighbourhood photo, cards and page hero alike (final fixes): a sand multiply layer and
   calmer colour, so a busy street (the Quartier des Arts murals) sits as quietly as the others. */
:is(.neighborhood-card--cover .neighborhood-card__photo, .page-hero__photo)::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: #f4e3c8; mix-blend-mode: multiply; opacity: .2; pointer-events: none; }
:is(.neighborhood-card--cover .neighborhood-card__photo, .page-hero__photo) img { filter: saturate(.55) contrast(1.02); }
.neighborhood-card--cover .neighborhood-card__photo::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(to top, rgb(15 36 56 / 72%) 0%, rgb(15 36 56 / 34%) 28%, rgb(15 36 56 / 0%) 50%); box-shadow: inset 0 0 0 1px rgb(15 36 56 / 6%); opacity: .9; transition: opacity 700ms var(--rym-ease-out); }
.neighborhood-card--cover .neighborhood-card__photo img { transition: transform 700ms var(--rym-ease-out); }
.neighborhood-card--cover .neighborhood-card__name { font-size: 2.25rem; text-shadow: 0 1px 16px rgb(15 36 56 / 35%); }
.neighborhood-card--cover .neighborhood-card__link, .neighborhood-card--cover .neighborhood-card__description { color: var(--rym-color-on-ink); }
.neighborhood-card--cover .neighborhood-card__description { max-inline-size: 34ch; font-size: .9375rem; line-height: 1.5; text-shadow: 0 1px 10px rgb(15 36 56 / 40%); }
.neighborhood-card--cover .neighborhood-card__count { display: inline-flex; align-items: center; gap: .375rem; justify-self: start; margin-block-start: .25rem; color: rgb(255 253 248 / 86%); font-size: .875rem; font-weight: 500; }
.neighborhood-card--cover .neighborhood-card__count .icon { inline-size: 1rem; block-size: 1rem; transition: translate var(--rym-dur-2) var(--rym-ease-out); }
.neighborhood-card--cover:focus-within { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
	.neighborhood-card--cover:hover .neighborhood-card__photo img { transform: scale(1.04); }
	.neighborhood-card--cover:hover .neighborhood-card__photo::after { opacity: 1; }
	.neighborhood-card--cover:hover .neighborhood-card__count .icon { translate: 2px 0; }
	:dir(rtl) .neighborhood-card--cover:hover .neighborhood-card__count .icon { translate: -2px 0; }
}
@media (prefers-reduced-motion: reduce) {
	.neighborhood-card--cover:hover .neighborhood-card__photo img { transform: none; }
	.neighborhood-card--cover:hover .neighborhood-card__count .icon { translate: none; }
}

/* Photo hero of a page */
.page-hero { position: relative; display: grid; align-items: end; min-block-size: clamp(22rem, 15rem + 24vw, 38rem); margin: .75rem var(--rym-gutter) 0; border-radius: 1.75rem; overflow: hidden; background-color: var(--rym-color-surface-warm); isolation: isolate; }
.page-hero__photo { position: absolute; inset: 0; z-index: -1; background-color: var(--rym-color-ink); }
.page-hero__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; animation: rym-hero-settle var(--rym-dur-hero-photo) var(--rym-ease-out) both; }
/* The home hero's soft scrim: from the foot and from the text's side; the far top corner keeps its colour. */
.page-hero__photo { --page-scrim-side: to right; }
:dir(rtl) .page-hero__photo { --page-scrim-side: to left; }
.page-hero__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(var(--page-scrim-side), rgb(15 36 56 / 55%), rgb(15 36 56 / 0%) 65%), var(--rym-scrim-strong); }
.page-hero__content { display: grid; justify-items: start; gap: 1rem; inline-size: 100%; max-inline-size: calc(var(--rym-container-max) - 2 * var(--rym-gutter)); margin-inline: auto; padding: clamp(1.75rem, 1rem + 4vw, 4.5rem) clamp(1.25rem, .75rem + 3vw, 3.5rem); }
.page-hero h1 { margin: 0; max-inline-size: 16ch; font-size: var(--rym-font-size-display); animation: rym-reveal var(--rym-dur-3) var(--rym-ease-out) 120ms backwards; }
.page-hero:has(.page-hero__photo) { color: var(--rym-color-on-ink); }
.page-hero:has(.page-hero__photo) h1 { color: var(--rym-color-on-ink); }
.page-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .375rem .875rem; border-radius: 999px; background-color: var(--rym-glass-solid); color: var(--rym-color-text); font-size: .875rem; font-weight: 700; }
.page-hero__eyebrow .icon { color: var(--rym-color-text-muted); }
.page-hero__lead { margin: 0; max-inline-size: 52ch; color: var(--rym-color-on-ink); font-size: var(--rym-font-size-lead); line-height: 1.55; }
.page-hero:not(:has(.page-hero__photo)) .page-hero__lead { color: var(--rym-color-text-muted); }
/* Shared with the home hero (home.css). */
@keyframes rym-hero-settle { from { transform: scale(1.08); } }
@keyframes rym-hero-rise { from { transform: translateY(105%); } }
@media (max-width: 39.99rem) {
	.page-hero { min-block-size: clamp(24rem, 70svh, 32rem); margin-inline: .5rem; border-radius: 1.5rem; }
}

/* Editorial page head */
/* Wow §0 (W7d): more air above and below the title, a slate eyebrow, the hairline under the band. */
.page-head { padding-block: clamp(3.5rem, 1.5rem + 7vw, 8.5rem) clamp(2.5rem, 1.25rem + 4vw, 5.5rem); background: var(--rym-gradient-sun); border-block-end: 1px solid var(--rym-hairline); }
.page-head__inner { display: grid; justify-items: start; gap: 1.25rem; }
.page-head__eyebrow { margin: 0; color: var(--rym-color-text-muted); }
.page-head__title { margin: 0; max-inline-size: 16ch; font-size: var(--rym-font-size-display); animation: rym-reveal var(--rym-dur-3) var(--rym-ease-out) 80ms backwards; }
.page-head__title--compact { font-size: var(--rym-font-size-h1); max-inline-size: 24ch; }
.page-head__lead { max-inline-size: 60ch; color: var(--rym-color-text-muted); font-size: var(--rym-font-size-lead); line-height: 1.6; }
.page-head__lead > * { margin-block: 0; }
.page-head__lead > * + * { margin-block-start: .75rem; }
/* Wide screens: the title on the start side, the lead beside it on the end side, on the title's baseline. */
@media (min-width: 64rem) {
	.page-head__inner:has(> .page-head__lead > *, > p.page-head__lead) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 1rem + 4vw, 6rem); align-items: end; }
	.page-head__inner:has(> .page-head__lead > *, > p.page-head__lead) > * { grid-column: 1; }
	.page-head__inner:has(> .page-head__lead > *, > p.page-head__lead) > .page-head__lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; padding-block-end: .5rem; }
}
/* An empty editorial intro (a wrapper with no element in it) takes no room. */
.page-head__lead:empty, div.page-head__lead:not(:has(> *)) { display: none; }
/* The page that follows a head starts with the page rhythm, not glued to the band. */
.page-head + .container, .page-hero + .container { padding-block-start: clamp(3rem, 1.5rem + 4vw, 6rem); }
/* Content pages end with the same air before the footer (its own margin is 4.5 rem). */
.site-main:is(:has(.page-head), :has(.page-hero)) { padding-block-end: clamp(0rem, -2rem + 6vw, 4rem); }

/* Arrow link: a quiet text link with a chevron that slides 3 px on hover (fine pointers); mirrored in Arabic. */
.arrow-link { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; color: var(--rym-color-text); font-weight: 700; text-decoration: none; }
.arrow-link::after {
	content: ""; flex: none; inline-size: 1rem; block-size: 1rem; background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--rym-dur-2) var(--rym-ease-out);
}
:dir(rtl) .arrow-link::after { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
	.arrow-link:hover::after { transform: translateX(3px); }
	:dir(rtl) .arrow-link:hover::after { transform: translateX(-3px) scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) { .arrow-link:hover::after { transform: none; } :dir(rtl) .arrow-link:hover::after { transform: scaleX(-1); } }

/* Form fields of the booking and account pages (Signature §4.6) */
:is(.booking-field__control, .account-field__control) {
	inline-size: 100%; min-block-size: 3rem; padding: .625rem .875rem; border: 1px solid var(--rym-color-border-strong); border-radius: .75rem;
	background-color: #fff; color: var(--rym-color-text); font: inherit;
}
:is(textarea.booking-field__control, textarea.account-field__control) { min-block-size: 7.5rem; resize: vertical; line-height: 1.5; }
:is(.booking-field__control, .account-field__control):hover { border-color: var(--rym-color-text); }
:is(.booking-field__control, .account-field__control):focus-visible { border-color: var(--rym-color-text); outline-offset: 1px; }
:is(.booking-field__control, .account-field__control)[aria-invalid="true"] { border-color: var(--rym-color-danger-text); box-shadow: 0 0 0 1px var(--rym-color-danger-text); }
/* E-mail addresses, phone numbers and passwords read left to right in Arabic too: aligned with the text. */
:is(.booking-field__control, .account-field__control)[dir="ltr"] { text-align: start; }
:root[dir="rtl"] :is(.booking-field__control, .account-field__control)[dir="ltr"] { text-align: end; }
:is(.booking-field__label, .account-field__label) { font-size: .9375rem; font-weight: 600; }
:is(.booking-field__marker, .account-field__required) { color: var(--rym-color-text-muted); font-size: .8125rem; font-weight: 400; }
:is(.booking-field__hint, .account-field__hint) { margin: 0; color: var(--rym-color-text-muted); font-size: .875rem; line-height: 1.5; }
:is(.booking-field__error, .account-field__error) { font-size: .875rem; font-weight: 700; }
:is(.booking-field__error, .account-field__error) p { margin: 0; }

/* Content of editorial pages (legal pages, plain pages, guides): a calm reading column. */
.prose { max-inline-size: var(--rym-measure); font-size: 1.0625rem; line-height: 1.75; }
.prose > * + * { margin-block-start: 1rem; }
.prose :is(h2, h3) { margin-block: 3rem 0; }
.prose h2 { font-size: var(--rym-font-size-h2-compact); }
.prose h3 { font-family: var(--rym-font-body); font-size: 1.1875rem; font-weight: 700; }
.prose :is(h2, h3) + * { margin-block-start: .75rem; }
.prose :is(ul, ol) { padding-inline-start: 1.25em; }
.prose li + li { margin-block-start: .5rem; }
.prose blockquote { margin-inline: 0; padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--rym-color-action); font-family: var(--rym-font-display); font-size: 1.5rem; line-height: 1.35; }

/* State notice (Signature W3, shared since W5) */
.notice--state { display: grid; justify-items: center; gap: 1rem; padding: 3rem 1.5rem; border: 0; border-radius: 1.5rem; background: var(--rym-gradient-sun); color: var(--rym-color-text); text-align: center; }
.notice--state .notice__icon { box-sizing: content-box; margin: .75rem; padding: 1.125rem; border-radius: 50%; background-color: #fff; box-shadow: 0 0 0 1px var(--rym-hairline), 0 0 0 .625rem rgb(255 255 255 / 55%), 0 0 0 1.375rem rgb(255 255 255 / 28%); }
.notice--state .notice__body { display: grid; justify-items: center; gap: .5rem; max-inline-size: 30rem; }
.notice--state .notice__body > * { margin: 0; }
.notice--state .notice__title { font: var(--rym-font-weight-serif) 1.75rem/var(--rym-line-height-display) var(--rym-font-display); }
.notice--state .notice__actions { justify-content: center; margin-block-start: .75rem; }
/* Wow §0: one filled pill per state; a second action is a hairline pill. */
.notice--state .notice__actions .button + .button { box-shadow: inset 0 0 0 1px var(--rym-hairline-strong); background-color: transparent; color: var(--rym-color-text); }
.notice--state .notice__actions .button + .button:hover { background-color: var(--rym-brand-white); }

/* Status pills and alerts of the booking, stay and account pages (W5): one shape, the tone from the state. */
:is(.booking-status-badge, .booking-badge, .account-badge, .stay-status, .stay-identity__state, .stay-conditions__state) { display: inline-flex; align-items: center; padding: .25rem .75rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; }
:is(.booking-alert, .account-alert) { margin: 0; padding: .875rem 1.125rem; border-radius: .875rem; font-weight: 600; line-height: 1.55; max-inline-size: none; }
:is(.booking-alert, .account-alert) :is(p, a:not(.button)) { margin: 0; max-inline-size: none; color: inherit; }
:is(.booking-alert, .account-alert) p + p { margin-block-start: .75rem; }
:is(.booking-alert__title, .account-alert__title, .booking-alert a:not(.button)) { font-weight: 700; }
:is(.booking-alert--info, .stay-status, .stay-identity__state) { background-color: var(--rym-color-info-bg); color: var(--rym-color-info-text); }
:is(.booking-alert--success, .account-alert--success, .account-badge--success, .booking-status-badge--confirmed, .booking-status-badge--checked_in, .booking-status-badge--checked_out, .stay-status--accepted, .stay-status--fulfilled, .stay-status--resolved, .stay-status--closed, .stay-identity__state--verified, .stay-conditions__item--met .stay-conditions__state) { background-color: var(--rym-color-success-bg); color: var(--rym-color-success-text); }
:is(.booking-alert--warning, .account-alert--warning, .account-alert--error, .account-badge--warning, .stay-status--requested, .stay-status--open, .stay-status--escalated, .stay-conditions__item--missing .stay-conditions__state) { background-color: var(--rym-color-warning-bg); color: var(--rym-color-warning-text); }
:is(.booking-alert--error, .booking-status-badge--cancelled, .booking-status-badge--expired, .stay-status--declined, .stay-identity__state--rejected, .stay-identity__state--expired) { background-color: var(--rym-color-danger-bg); color: var(--rym-color-danger-text); }