/* ============================================
   Cloudy Inn Resort — Optimized mobile-first styles
   ============================================ */

/* Prevent horizontal scroll & zoom bounce everywhere */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: hidden; overscroll-behavior-x: none; max-width: 100vw; }

.img-ph { background: linear-gradient(135deg, #2d4a5f 0%, #3E95FB 50%, #29415E 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; text-align: center; padding: 12px; }
.img-ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.3), transparent 55%), radial-gradient(circle at 80% 80%, rgba(15,30,45,.5), transparent 60%); pointer-events: none; }
.img-ph > span { position: relative; z-index: 1; }

.hero-overlay { background: linear-gradient(to top, rgba(15,30,45,.85) 5%, rgba(15,30,45,.55) 45%, rgba(15,30,45,.25) 85%); }
.h1-hero { font-family: 'Outfit', system-ui, sans-serif; font-size: clamp(2rem, 6vw, 4rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }

.booking-glass { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 20px 60px rgba(15,30,45,0.25); }

/* HEADER: default solid */
#site-header { background: rgba(255,255,255,0.97); backdrop-filter: blur(10px); box-shadow: 0 2px 12px rgba(15,30,45,0.08); transition: background .3s ease; }
#site-header #hd-logo, #site-header #hd-nav a, #site-header #hd-acc { color: #0F1E2D; }
#site-header #hd-nav a:hover, #site-header #hd-acc:hover { color: #3E95FB; }
#site-header #hd-cart, #site-header #menu-open { background: #E4EAF3; color: #0F1E2D; }

/* Dual logo swap — default state (solid header) shows the solid logo */
#site-header .logo-transparent, #site-header .logo-transparent-fallback { display: none; }
#site-header .logo-solid, #site-header .logo-solid-fallback { display: inline-block; }

/* HOME PAGE: transparent header until scroll */
body.page-home #site-header { background: transparent; box-shadow: none; backdrop-filter: none; }
body.page-home #site-header #hd-logo, body.page-home #site-header #hd-nav a, body.page-home #site-header #hd-acc { color: white; }
body.page-home #site-header #hd-cart, body.page-home #site-header #menu-open { background: rgba(255,255,255,0.18); color: white; }
body.page-home #site-header #hd-cart:hover, body.page-home #site-header #menu-open:hover { background: rgba(255,255,255,0.28); }
body.page-home #site-header.scrolled { background: rgba(255,255,255,0.97); backdrop-filter: blur(10px); box-shadow: 0 2px 12px rgba(15,30,45,0.08); }
body.page-home #site-header.scrolled #hd-logo, body.page-home #site-header.scrolled #hd-nav a, body.page-home #site-header.scrolled #hd-acc { color: #0F1E2D; }
body.page-home #site-header.scrolled #hd-cart, body.page-home #site-header.scrolled #menu-open { background: #E4EAF3; color: #0F1E2D; }

/* Dual logo swap — on home page: transparent header uses transparent logo, scrolled uses solid */
body.page-home #site-header:not(.scrolled) .logo-transparent,
body.page-home #site-header:not(.scrolled) .logo-transparent-fallback { display: inline-block; }
body.page-home #site-header:not(.scrolled) .logo-solid,
body.page-home #site-header:not(.scrolled) .logo-solid-fallback { display: none; }

/* ========== MOBILE TITLE BAR (app-like) ========== */
#mobile-title-bar { display: none; }
@media (max-width: 768px) {
  #mobile-title-bar { display: flex; position: fixed; top: 64px; left: 0; right: 0; z-index: 40; background: white; border-bottom: 1px solid #E4EAF3; padding: 10px 16px; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; color: #0F1E2D; letter-spacing: 0.3px; box-shadow: 0 1px 3px rgba(15,30,45,0.04); }
  body.page-home #mobile-title-bar { display: none; }
  /* push content below title bar */
  body:not(.page-home) main { padding-top: 44px; }
}

/* ========== STICKY CART BAR (full-width, bordered top) ========== */
#sticky-cart-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: white; border-top: 2px solid #3E95FB; box-shadow: 0 -6px 24px rgba(15,30,45,0.14); padding: 12px 20px; align-items: center; justify-content: space-between; gap: 12px; }
#sticky-cart-bar .info { display: flex; flex-direction: column; min-width: 0; }
#sticky-cart-bar .info .label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #7A8698; font-weight: 700; white-space: nowrap; }
#sticky-cart-bar .info .total { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px; color: #0F1E2D; white-space: nowrap; }
#sticky-cart-bar .actions { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }
#sticky-cart-bar.visible { display: flex; }
body.has-sticky-cart { padding-bottom: 88px; }
@media (max-width: 640px) {
  #sticky-cart-bar { padding: 10px 14px; gap: 8px; }
  #sticky-cart-bar .info .total { font-size: 17px; }
  #sticky-cart-bar .actions .btn-primary, #sticky-cart-bar .actions .btn-ghost-dark { padding: 10px 14px; font-size: 13px; }
}

/* Card */
.card { background: white; border-radius: 16px; box-shadow: 0 2px 6px rgba(15,30,45,0.05); transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(15,30,45,0.1); }

.chip { display: inline-flex; align-items: center; gap: 4px; background: #E8F1FE; color: #29415E; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.chip-success { background: rgba(52,199,89,.14); color: #1c8f45; }
.chip-warn { background: rgba(245,166,35,.18); color: #b7791f; }
.chip-dark { background: rgba(0,0,0,.55); color: white; }
.chip-danger { background: rgba(229,57,53,.14); color: #b03230; }

/* Buttons — bigger tap on mobile */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #3E95FB; color: white; padding: 12px 20px; border-radius: 12px; font-weight: 600; transition: all .2s; border: none; cursor: pointer; text-decoration: none; min-height: 44px; touch-action: manipulation; }
.btn-primary:hover { background: #2b7ee0; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(62,149,251,.3); }
.btn-primary:active { transform: scale(0.97); }
.btn-ghost-light { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.7); color: white; font-weight: 600; text-decoration: none; min-height: 44px; touch-action: manipulation; }
.btn-ghost-light:hover { background: rgba(255,255,255,.15); }
.btn-ghost-dark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; border: 1.5px solid #0F1E2D; color: #0F1E2D; font-weight: 600; text-decoration: none; background: transparent; cursor: pointer; min-height: 44px; touch-action: manipulation; }
.btn-ghost-dark:hover { background: #0F1E2D; color: white; }

.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; color: #3E95FB; }
.section { padding-block: clamp(40px, 6vw, 80px); }
.h2-section { font-family: 'Outfit', system-ui, sans-serif; font-size: clamp(1.4rem, 3.5vw, 2.25rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }

@keyframes ping-slow { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(1.6); opacity: 0; } }
.play-pulse::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: rgba(255,255,255,.5); animation: ping-slow 2s cubic-bezier(0,0,.2,1) infinite; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* MOBILE optimizations */
@media (max-width: 768px) {
  img { max-width: 100%; height: auto; }
  input[type="date"], input[type="time"], select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea { font-size: 16px; }
  .h1-hero { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .section { padding-block: 40px; }
  a, button { touch-action: manipulation; }
}

input[type="date"]::-webkit-datetime-edit { color: #0F1E2D; padding: 0; }
input[type="date"]::-webkit-inner-spin-button { display: none; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; }

:focus-visible { outline: 2px solid #3E95FB; outline-offset: 3px; border-radius: 6px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C3D0DF; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.aspect-\[4\/5\] { aspect-ratio: 4/5; }
.aspect-\[4\/3\] { aspect-ratio: 4/3; }
.aspect-\[16\/9\] { aspect-ratio: 16/9; }

/* ROOM CARD (used on home + rooms listing) */
.room-card { background: white; border-radius: 20px; box-shadow: 0 2px 8px rgba(15,30,45,0.06); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.room-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15,30,45,0.12); }
.room-cat-badge { background: rgba(15,30,45,0.85); color: white; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); }
.room-tile { display: flex; align-items: center; gap: 8px; background: #F8FAFD; border-radius: 12px; padding: 8px 10px; min-width: 0; }
.room-tile .ico { width: 26px; height: 26px; border-radius: 8px; background: white; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.room-tile .lbl { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #7A8698; font-weight: 700; }
.room-tile .val { font-size: 11px; color: #0F1E2D; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ADMIN TAB SYSTEM */
.tab-btn { padding: 10px 18px; border-radius: 12px; font-weight: 600; font-size: 14px; color: #4A5866; cursor: pointer; background: transparent; transition: all .2s; white-space: nowrap; border: 0; }
.tab-btn:hover { background: #E4EAF3; color: #0F1E2D; }
.tab-btn.active { background: #3E95FB; color: white; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }