/* Sand and Sea Beach Hotel - Custom Styles */
:root{
  --brand-50:#f0f9ff; --brand-500:#0ea5e9; --brand-700:#0369a1;
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}

/* Hero slider */
.hero-slider{position:relative;overflow:hidden}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease-in-out;
  background-size:cover;background-position:center
}
.hero-slide.active{opacity:1}
.hero-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(3,105,161,.35) 0%, rgba(12,74,110,.65) 100%)
}

.hero-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.hero-dot{width:10px;height:10px;border-radius:9999px;background:rgba(255,255,255,.45);cursor:pointer;transition:all .3s}
.hero-dot.active{background:#fff;width:32px}

/* Nice card hover */
.room-card{transition:transform .35s ease, box-shadow .35s ease}
.room-card:hover{transform:translateY(-4px);box-shadow:0 25px 50px -12px rgba(2,132,199,.25)}

/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-head{font-size:11px;font-weight:600;color:#64748b;text-align:center;padding:6px 0}
.cal-day{
  aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:#f1f5f9;
  font-size:13px;font-weight:600;color:#0f172a;transition:all .2s;
  position:relative;cursor:default
}
.cal-day.blank{background:transparent}
.cal-day.past{opacity:.35;background:#e2e8f0}
.cal-day .num{font-size:14px}
.cal-day .left{font-size:10px;font-weight:500}
.cal-day.high{background:linear-gradient(135deg,#bbf7d0,#86efac);color:#14532d}
.cal-day.mid{background:linear-gradient(135deg,#fef08a,#fde047);color:#713f12}
.cal-day.low{background:linear-gradient(135deg,#fecaca,#fca5a5);color:#7f1d1d}
.cal-day.none{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);color:#475569;text-decoration:line-through}
.cal-day.today{outline:2px solid #0ea5e9;outline-offset:1px}

/* Chat bubbles */
.chat-bubble{max-width:78%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.45}
.chat-guest{background:#0ea5e9;color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.chat-agent{background:#fff;color:#0f172a;border:1px solid #e2e8f0;border-bottom-left-radius:6px}
.chat-bot{background:#f0f9ff;color:#075985;border:1px dashed #7dd3fc;border-bottom-left-radius:6px}

/* Scrollbars */
.nice-scroll::-webkit-scrollbar{width:8px;height:8px}
.nice-scroll::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}
.nice-scroll::-webkit-scrollbar-thumb{background:#7dd3fc;border-radius:4px}
.nice-scroll::-webkit-scrollbar-thumb:hover{background:#38bdf8}

/* Pulse for live indicator */
.live-dot{
  width:10px;height:10px;border-radius:9999px;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:livePulse 1.8s infinite
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
  100%{box-shadow:0 0 0 14px rgba(34,197,94,0)}
}

/* Marquee for promo bar */
@keyframes slideInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.animate-up{animation:slideInUp .7s ease both}

/* Responsive tweak: bottom menu safe-area */
@supports (padding: env(safe-area-inset-bottom)){
  nav.fixed.bottom-0 .grid{padding-bottom:env(safe-area-inset-bottom)}
}