/*  ReBBu Unified Web: the start page (index_new.php). Below the title and the login two corners of hotel rooms float
    on the sky like in the hotel view: the classic one in warm wood with the green stripe, the modern one at night with
    violet light; in each the start avatar in that hotel's look, between them the key card of the one account. On
    phones the rooms become a row to swipe through. Then the two hotels, what counts in both, the news and the way to
    an account. */

/* title and login ---------------------------------------------------------------------------------------------------- */

.sp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 40px 72px; align-items: center; }
.sp-title { margin: 0; font: 700 76px/1.02 var(--uw-font-display); letter-spacing: -.02em; color: var(--uw-night); text-shadow: 0 3px 0 rgba(255, 255, 255, .45); text-wrap: balance; }
.sp-lead { max-width: 34em; margin: 22px 0 0 0; font-size: 20px; line-height: 1.5; color: #1d3550; }
.sp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 30px 0 0 0; }
.sp-hero-actions span { font-size: 15px; color: #1d3550; }

.sp-login { padding: 28px 30px 24px 30px; }
.sp-login-title { margin: 0 0 18px 0; font: 700 24px/1.2 var(--uw-font-display); }
.sp-login .uw-field { margin-bottom: 16px; }
.sp-captcha { display: block; margin: 0 0 8px 0; border-radius: 10px; background: #fff; }
.sp-login-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 18px 0 0 0; }
.sp-login-new { margin: 18px 0 0 0; padding: 16px 0 0 0; border-top: 1px solid var(--uw-line); font-size: 15px; color: var(--uw-muted); }

/* the two rooms ----------------------------------------------------------------------------------------------------- */

.sp-scene-wrap { margin: 48px 0 0 0; }
.sp-scene { display: flex; justify-content: center; align-items: center; }
.sp-room { flex: 0 1 440px; min-width: 0; margin: 0; }
.sp-room-art { position: relative; }
.sp-room-art svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 22px rgba(21, 48, 80, .28)); }
.sp-room-art image { image-rendering: pixelated; }
.sp-floor-grid { fill: none; stroke-width: 1.5; }
.sp-shadow { fill: rgba(21, 28, 43, .3); }
.sp-window-frame { fill: none; stroke-width: 5; stroke-linejoin: round; }
.sp-door { stroke-width: 4; stroke-linejoin: round; }
.sp-door-knob { fill: var(--uw-gold); }

.sp-room-classic .sp-wall-left { fill: #f1e6cf; }
.sp-room-classic .sp-wall-right { fill: #dfcfae; }
.sp-room-classic .sp-wall-top { fill: var(--uw-classic-green); }
.sp-room-classic .sp-floor { fill: #c28d58; }
.sp-room-classic .sp-floor-grid { stroke: #a9773f; }
.sp-room-classic .sp-floor-side-left { fill: #95663a; }
.sp-room-classic .sp-floor-side-right { fill: #7d542e; }
.sp-room-classic .sp-window { fill: var(--uw-sky); }
.sp-room-classic .sp-window-frame { stroke: #fffaf0; }
.sp-room-classic .sp-door { fill: #9a6b3f; stroke: #fffaf0; }
.sp-rug { fill: #3f8f36; stroke: #7cc96f; stroke-width: 3; }
.sp-pot { fill: #b5652f; }
.sp-pot-top { fill: #7d4220; }
.sp-leaf { fill: #2f7a25; }
.sp-leaf-light { fill: #4caf3f; }

.sp-room-modern .sp-wall-left { fill: #3a3f72; }
.sp-room-modern .sp-wall-right { fill: #2d315d; }
.sp-room-modern .sp-wall-top { fill: var(--uw-modern-purple); }
.sp-room-modern .sp-floor { fill: #23274a; }
.sp-room-modern .sp-floor-grid { stroke: #393e6e; }
.sp-room-modern .sp-floor-side-left { fill: #1a1d39; }
.sp-room-modern .sp-floor-side-right { fill: #14172e; }
.sp-light-0 { fill: #a052df; opacity: .75; }
.sp-light-1 { fill: #5b2a9a; opacity: .8; }
.sp-window-night { fill: #18214d; }
.sp-room-modern .sp-window-frame { stroke: #c9b5ff; }
.sp-moon { fill: #fff3c4; }
.sp-star { fill: #fff; }
.sp-room-modern .sp-door { fill: #202446; stroke: #c9b5ff; }
.sp-neon { fill: none; stroke: #e2b8ff; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px #b86bff); }

/* the chat bubble above the head, like the hotels' bubbles */
.sp-bubble { position: absolute; left: 50%; bottom: 72%; transform: translateX(-50%); width: max-content; max-width: 92%; margin: 0; padding: 7px 12px;
	box-sizing: border-box; background: #fff; color: #182032; border: 2px solid #182032; border-radius: 10px; font-size: 14px; line-height: 1.35;
	box-shadow: 0 3px 0 rgba(24, 32, 50, .3); }
.sp-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 9px; margin: -4px 0 0 -6px; background: #fff;
	border: solid #182032; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* the sign under a room: the hotel and how many guests are in it right now */
.sp-sign { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: max-content; max-width: 100%; margin: 18px auto 0 auto;
	padding: 8px 18px; box-sizing: border-box; border-radius: 999px; background: var(--uw-night); box-shadow: 0 6px 14px rgba(8, 18, 38, .25); }
.sp-sign strong { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.sp-sign strong::before { content: ""; width: 18px; height: 10px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--uw-classic-green); }
.sp-room-modern .sp-sign strong::before { background: var(--uw-modern-purple); }
.sp-sign span { font-size: 14px; color: var(--uw-muted); }

/* the key card of the one account, tilted between the rooms, a dashed line to each */
.sp-key { position: relative; flex: 0 0 200px; display: grid; place-items: center; align-self: stretch; }
.sp-key::before { content: ""; position: absolute; left: 0; right: 0; top: 46%; border-top: 3px dashed rgba(21, 28, 43, .35); }
.sp-keycard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 168px; box-sizing: border-box; margin-top: -8%;
	padding: 16px 16px 14px 16px; border-radius: 14px; background: linear-gradient(150deg, #ffe07a, var(--uw-gold) 60%, #f0a800); color: #3a2600;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 14px 26px rgba(21, 48, 80, .3); transform: rotate(-7deg); }
.sp-keycard::after { content: ""; position: absolute; right: 16px; top: 18px; width: 26px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, #fff2c2, #d9a400); box-shadow: inset 0 0 0 1px rgba(58, 38, 0, .25); }
.sp-keycard img { width: 72px; height: auto; margin: 0 0 8px 0; }
.sp-keycard strong { font: 700 18px/1.15 var(--uw-font-display); }
.sp-keycard span { font-size: 13px; font-weight: 500; }

.sp-dots { display: none; justify-content: center; gap: 10px; margin: 16px 0 0 0; }
.sp-dots button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: rgba(21, 28, 43, .55); cursor: pointer; }
.sp-dots button[aria-current="true"] { width: 30px; border-radius: 999px; background: var(--uw-night); }

/* the two hotels and what counts in both -------------------------------------------------------------------------- */

.sp-hotels { margin: 88px 0 0 0; }
.sp-section-title { margin: 0 0 24px 0; font: 700 40px/1.15 var(--uw-font-display); letter-spacing: -.01em; color: var(--uw-night); }
.sp-hotel-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uw-gap); }
/* the grid's gap is the space between the cards (not the space panels keep below one another) */
.sp-hotel-cards > .uw-panel, .sp-news-list > .uw-panel { margin-top: 0; }
.sp-hotel { --sp-color: var(--uw-classic-green); --sp-title: #7bd96d; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sp-hotel-modern { --sp-color: var(--uw-modern-purple); --sp-title: #cfa2f5; }
.sp-hotel img { display: block; width: 100%; height: 280px; object-fit: cover; border-bottom: 5px solid var(--sp-color); }
.sp-hotel-body { padding: 28px 32px 32px 32px; }
.sp-hotel-title { margin: 0; font: 700 30px/1.2 var(--uw-font-display); color: var(--sp-title); }
.sp-hotel-lead { margin: 8px 0 0 0; color: var(--uw-muted); font-size: 17px; }
.sp-features { list-style: none; display: grid; gap: 10px; margin: 20px 0 0 0; padding: 0; }
.sp-features li { display: flex; align-items: baseline; gap: 12px; }
/* a floor tile as the bullet */
.sp-features li::before { content: ""; flex: none; width: 16px; height: 9px; background: var(--sp-color); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: translateY(-1px); }

.sp-shared { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; margin: var(--uw-gap) 0 0 0; }
.sp-shared-copy { flex: 1 1 260px; }
.sp-shared-title { margin: 0; font: 700 24px/1.2 var(--uw-font-display); }
.sp-shared-copy p { margin: 6px 0 0 0; color: var(--uw-muted); }
.sp-shared-list { flex: 2 1 420px; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sp-shared-list li { padding: 8px 16px; border-radius: 999px; background: var(--uw-panel-raised); font-weight: 500; font-size: 15px; }

/* news and the way to an account ------------------------------------------------------------------------------------ */

.sp-news { margin: 88px 0 0 0; }
.sp-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.uw-page a.sp-more { padding: 8px 18px; border-radius: 999px; background: var(--uw-night); color: #fff; font-size: 14px; }
.uw-page a.sp-more:hover { background: var(--uw-panel-raised); color: #fff; }
.sp-news-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--uw-gap); margin: 0; padding: 0; list-style: none; }
.sp-news-item { padding: 0; overflow: hidden; }
.sp-news-item a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 0 0 22px 0; text-decoration: none; }
.uw-page .sp-news-item a { color: var(--uw-text); }
.sp-news-item img, .sp-news-blank { display: block; width: 100%; height: 170px; object-fit: cover; margin: 0 0 12px 0; background: var(--uw-night) url(../../img/bg/pattern.png); }
.sp-news-item time { padding: 0 24px; font-size: 13px; color: var(--uw-muted); }
.sp-news-item strong { padding: 0 24px; font: 700 18px/1.3 var(--uw-font-display); }
.sp-news-item a:hover strong { color: var(--uw-link); }

.sp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin: 88px 0 0 0; padding: 36px 40px;
	border-left: 6px solid var(--uw-gold); }
.sp-cta-title { margin: 0; font: 700 30px/1.2 var(--uw-font-display); }
.sp-cta p { margin: 6px 0 0 0; color: var(--uw-muted); font-size: 17px; }

/* narrow screens ---------------------------------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.sp-hero { grid-template-columns: minmax(0, 1fr); }
	.sp-login { max-width: 560px; }
	.sp-title { font-size: 60px; }
	.sp-key { flex-basis: 150px; }
	.sp-keycard { width: 140px; padding: 14px 12px 12px 12px; }
	.sp-keycard::after { display: none; }
}
/* the rooms as a row to swipe through, one at a time, with dots under them */
@media (max-width: 860px) {
	.sp-scene { justify-content: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
		margin: 0 calc(-1 * var(--uw-gutter)); padding: 0 var(--uw-gutter) 6px var(--uw-gutter); scroll-padding: 0 var(--uw-gutter); }
	.sp-scene::-webkit-scrollbar { display: none; }
	.sp-room { flex: 0 0 min(440px, 88%); scroll-snap-align: center; }
	.sp-key { display: none; }
	.sp-dots { display: flex; }
	.sp-hotel-cards, .sp-news-list { grid-template-columns: minmax(0, 1fr); }
	.sp-hotel img { height: 220px; }
}
@media (max-width: 640px) {
	.sp-title { font-size: 44px; }
	.sp-lead { font-size: 17px; margin-top: 16px; }
	.sp-hero-actions { margin-top: 22px; }
	.sp-hero-actions .uw-button { flex: 1 1 100%; }
	.sp-login { padding: 22px 20px 20px 20px; }
	.sp-login-actions .uw-button { flex: 1 1 100%; }
	.sp-scene-wrap { margin-top: 36px; }
	.sp-bubble { font-size: 13px; padding: 6px 10px; }
	.sp-sign { padding: 7px 14px; }
	.sp-hotels, .sp-news, .sp-cta { margin-top: 56px; }
	.sp-section-title { font-size: 30px; }
	.sp-hotel-body { padding: 22px 20px 24px 20px; }
	.sp-hotel-title, .sp-cta-title { font-size: 26px; }
	.sp-cta { padding: 26px 22px; }
	.sp-cta .uw-button { flex: 1 1 100%; }
}

/* parts only the script uses stay hidden without it */
.sp-page [hidden] { display: none; }