html { scroll-padding-top: 6rem; }
[x-cloak] { display: none !important; }
.public-hero { isolation: isolate; }
.public-hero > div:first-child img { opacity: .5; object-position: center 58%; }
.public-hero > div:first-child .bg-gradient-to-t { background: linear-gradient(90deg, rgba(11, 18, 26, .92), rgba(11, 18, 26, .64) 55%, rgba(11, 18, 26, .55)); }
.public-hero h1 { text-wrap: balance; letter-spacing: -.045em; }
.public-hero p { text-wrap: pretty; }
.public-search { box-shadow: 0 24px 70px rgba(0, 0, 0, .32); }
.public-search { max-width: none; }
.public-listing, .public-step-nav { max-width: none; }
.public-detail { max-width: 85rem; }
.public-hero { padding-top: 3.5rem; padding-bottom: 5rem; }
.public-room-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
.public-room-card { min-width: 0; height: 100%; }
.public-room-media { height: 14.5rem; width: 100%; }
.public-room-content { flex: 1; min-width: 0; }
.public-room-content > div:first-child { display: flex; flex-direction: column; gap: .85rem; }
.public-room-content h3 { font-size: 1.45rem; line-height: 1.2; }
.public-room-facts { gap: .4rem; }
.public-room-facts > span { padding: .3rem .55rem; }
.public-room-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.public-room-content .public-room-footer .text-3xl { font-size: 1.75rem; line-height: 1.1; }
.public-room-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-room-actions > :first-child { grid-column: 1 / -1; }
.public-room-actions > button { min-width: 0; padding: .65rem .6rem; border-radius: .75rem; }
.public-room-quantity { width: fit-content; box-shadow: none; }
.public-room-empty { grid-column: 1 / -1; }
.public-listing .public-room-card { box-shadow: 0 8px 30px rgba(31, 36, 37, .055); }
.public-listing .public-room-card:hover { box-shadow: 0 18px 42px rgba(31, 36, 37, .12); transform: translateY(-2px); }
.public-detail .sticky { top: 6.5rem; }
@media (min-width: 640px) { .sm\:h-18 { height: 4.5rem; } .public-hero { padding-top: 5rem; padding-bottom: 6rem; } }
@media (min-width: 760px) { .public-room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } }
@media (min-width: 1280px) { .public-room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
@media (max-width: 640px) {
    .public-hero > div:first-child img { object-position: 62% center; }
    .public-hero h1 { line-height: 1.07; }
    .public-listing .public-room-card { border-radius: 1.25rem; }
    .public-room-media { height: 13.5rem; }
}
@media (hover: none) { .public-room-media > div:nth-of-type(2) { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .public-room-card, .public-room-card img { transition-duration: .01ms !important; transform: none !important; }
}

/* Multi-hub's quiet surfaces, emerald accents, and contained sections. */
:root { --hotel-border: #e3e8f0; --hotel-surface: #fff; --hotel-accent: #047857; }
body { background: #f3f5fb; color: #0f172a; font-family: Inter, system-ui, sans-serif; }
h1, h2, h3, h4, .font-serif, .font-luxury-serif { font-family: Inter, system-ui, sans-serif; letter-spacing: -.025em; }
body > header { background: #fff; color: #0f172a; border-color: var(--hotel-border); backdrop-filter: none; }
body > header > div, body > footer > div { max-width: 90rem; margin-inline: auto; }
body > header a:not([href*="#search-rooms"]), body > header a span { color: #334155; }
body > header a[href*="#search-rooms"] { background: var(--hotel-accent); color: #fff; border-radius: .625rem; box-shadow: none; }
body > header a[href*="#search-rooms"] span { color: #fff; }
body > header a > div:first-child { border-color: #d1fae5; background: #ecfdf5; box-shadow: none; border-radius: .625rem; }
body > footer { background: #0f1928; margin-top: 3rem; padding-block: 3rem 2rem; }
.public-hero { max-width: 90rem; margin: 1.5rem auto; border-radius: 1rem; padding-block: 3rem; }
.public-hero > div:first-child { border-radius: inherit; overflow: hidden; }
.public-hero h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
.public-search { border-radius: .875rem; box-shadow: 0 4px 12px #0f172a14; border-color: #475569; backdrop-filter: none; }
.public-listing, .public-step-nav { max-width: 90rem; margin-inline: auto; }
.public-step-nav { padding-block: 1rem; }
.public-listing { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.public-room-card, main .bg-white { border-color: var(--hotel-border); box-shadow: 0 1px 3px #0f172a08; }
.public-room-card { border-radius: .875rem; }
.public-listing .public-room-card:hover { transform: none; box-shadow: 0 4px 12px #0f172a0d; border-color: #a7f3d0; }
.public-room-content h3 { font-size: 1.15rem; }
.public-room-content { padding: 1.25rem; }
main :is(.shadow-xl, .shadow-2xl, .shadow-lg) { box-shadow: 0 2px 8px #0f172a0a; }
main :is(button, a)[class*="bg-[#059669]"], main button[class*="from-[#059669]"] { background: #047857; color: #fff; box-shadow: none; }
main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border: 1px solid #cbd5e1; border-radius: .625rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #10b981; outline-offset: 3px; }
main { min-width: 0; }
main > div:not([wire\:id]) { max-width: 90rem; margin-inline: auto; }
.public-room-facts > span { border-radius: .375rem; }
@media (max-width: 1480px) { .public-hero { margin-inline: 1rem; } }
@media (max-width: 640px) { .public-hero { margin: .75rem; padding: 2rem 1rem; } .public-listing .public-room-card { border-radius: .875rem; } body > footer { margin-top: 2rem; } }