/* Demo hotel "Asteri Bay": a light seaside hotel site around the JetBookIn widgets. */

body.jbs-demo {
	--demo-sea: #12395c;
	--demo-sea-2: #1f5a86;
	--demo-sand: #f3ece0;
	--demo-ink: #1c2530;
	--demo-muted: #5d6874;
	--demo-line: #e2d9c9;
	background: #fbf8f3;
	color: var(--demo-ink);
	font-family: "Fira Sans", system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
}
.jbs-demo ::selection { background: #cfe3f2; }
.jbs-demo :focus-visible { outline: 2px solid var(--demo-sea-2); outline-offset: 3px; }
.jbs-demo h1, .jbs-demo h2, .jbs-demo h3 { font-family: "Fira Sans Extra Condensed", "Fira Sans", sans-serif; font-weight: 800; letter-spacing: 0; color: var(--demo-sea); text-wrap: balance; }

/* Ribbon: this is a demo */
.jbs-demo-ribbon {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 1.25rem;
	padding: 0.55rem 1rem; background: #1c1a17; color: #efeae0; font-size: 0.85rem; text-align: center;
}
.jbs-demo-ribbon strong { color: #ffd84a; font-weight: 600; }
.jbs-demo-ribbon a { color: #efeae0; text-underline-offset: 0.2em; }

.jbs-demo-header { position: sticky; top: 0; z-index: 40; background: rgba(251, 248, 243, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--demo-line); }
.admin-bar .jbs-demo-header { top: 32px; }
.jbs-demo-header__inner, .jbs-demo-footer__inner { max-width: 76rem; margin: 0 auto; padding: 0.85rem clamp(1rem, 4vw, 3rem); display: flex; align-items: center; gap: 1.5rem; }
.jbs-demo-logo { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 900; font-size: 1.7rem; letter-spacing: 0.01em; color: var(--demo-sea) !important; text-decoration: none; margin: 0; }
.jbs-demo-nav { display: flex; gap: 1.4rem; margin-left: auto; }
.jbs-demo-nav a { color: var(--demo-muted); text-decoration: none; }
.jbs-demo-nav a:hover { color: var(--demo-sea); }
.jbs-demo .jbs-lang-menu summary { color: var(--demo-ink); border-color: var(--demo-line); }
.jbs-demo .jbs-lang-menu__list a[aria-current] { background: var(--demo-sea); color: #fff; }
.jbs-demo-book { background: var(--demo-sea); color: #fff !important; text-decoration: none; padding: 0.6rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; }
.jbs-demo-book:hover { background: var(--demo-sea-2); }
@media (max-width: 860px) { .jbs-demo-nav { display: none; } .jbs-demo-langs { margin-left: auto; } }

/* Hero over the property photo */
.jbs-demo .e-con.jbs-demo-hero { min-height: min(82vh, 760px); justify-content: flex-end; }
.jbs-demo .jbs-demo-hero h1 { color: #fff; font-size: clamp(3.2rem, 8vw, 6rem); line-height: 0.92; margin: 0; }
.jbs-demo .jbs-demo-hero .jbs-demo-sub, .jbs-demo .jbs-demo-hero .jbs-demo-sub p { color: #f2f5f8; font-size: clamp(1.1rem, 1.8vw, 1.35rem); max-width: 36em; margin: 0; }
.jbs-demo .jbs-demo-hero h1, .jbs-demo .jbs-demo-hero .jbs-demo-sub p { text-shadow: 0 2px 18px rgba(5, 20, 35, 0.75), 0 1px 3px rgba(5, 20, 35, 0.6); }
.jbs-demo .jbs-demo-hero .jbi-search { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6); }

.jbs-demo .e-con.jbs-demo-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.jbs-demo .jbs-demo-section h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1; margin: 0; }
.jbs-demo .jbs-demo-lead, .jbs-demo .jbs-demo-lead p { color: var(--demo-muted); max-width: 40em; margin: 0; }
.jbs-demo .e-con.jbs-demo-sand { background: var(--demo-sand); }

/* "Try these" card for people testing the demo */
.jbs-demo .e-con.jbs-demo-try { background: #fff; border: 1px solid var(--demo-line); border-radius: 14px; padding: clamp(1.25rem, 3vw, 2rem); }
.jbs-demo .jbs-demo-try ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.45rem; }
.jbs-demo .jbs-demo-try code { background: #ffd84a; color: #1c1a17; padding: 0.05rem 0.4rem; border-radius: 4px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.9em; }

.jbs-demo-footer { background: var(--demo-sea); color: #dbe6ef; margin-top: 0; }
.jbs-demo-footer__inner { flex-wrap: wrap; padding-block: 2.5rem; gap: 0.75rem 2rem; }
.jbs-demo-footer p { margin: 0; }
.jbs-demo-footer .jbs-demo-logo { color: #fff !important; }
.jbs-demo-footer a { color: #fff; }

/* Room-type pages (JetBookIn single template inside Hello) */
.jbs-demo.single-jbi_room_type .site-main, .jbs-demo.single-jbi_property .site-main { max-width: 76rem; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 3rem) 4rem; }
.jbs-demo.single-jbi_room_type .page-header .entry-title, .jbs-demo.single-jbi_property .page-header .entry-title { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0.5rem 0 1.5rem; }