/* Extracted styles from index.html to comply with CSP */
:root{
  --brand: #2aa6b8; /* sea-blue */
  --bg: #e9f8fa;
  --card: #ffffff;
  --text: #08323b;
  --muted: #5aa6ad;
  --radius: 12px;
  --container: 1100px;
}
*{box-sizing:border-box}
body{margin:0;font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", Arial; background:var(--bg); color:var(--text);} 
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;background:linear-gradient(90deg, rgba(42,166,184,0.12), rgba(42,166,184,0.06));border-radius:var(--radius)}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:56px;height:56px;border-radius:8px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px}
.brand h1{margin:0;font-size:18px}
nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* make header nav and language toggle align nicely */
.header-right { display:flex; gap:12px; align-items:center }
/* ensure nav and lang toggle align vertically */
#main-nav { display:flex; align-items:center; gap:10px; }
#main-nav a { display:flex; align-items:center; height:38px; }
nav a{padding:8px 12px;border-radius:10px;color:var(--text);font-weight:600}
nav a:hover{background:rgba(0,0,0,0.04)}

.lang-toggle{display:flex;gap:8px;align-items:center}
.lang-toggle button{padding:6px 12px;border-radius:8px;border:1px solid transparent;background:#fff;cursor:pointer;height:36px;line-height:1}
.lang-toggle button.active{background:var(--brand);color:#fff}

/* main margin-top is provided by shared-header.css using --space-section for consistent layout */
.hero{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));padding:16px;border-radius:var(--radius);display:flex;gap:14px;align-items:stretch;flex-direction:column}
@media(min-width:900px){.hero{padding:20px;gap:18px}}
.hero .left{flex:1}
.hero-image{margin-top:12px}
.hero-image img{width:100%;height:240px;object-fit:cover;border-radius:10px;box-shadow:0 8px 20px rgba(3,50,59,0.08);display:block}
@media(min-width:900px){ .hero-image img{height:360px} }
.hero h2{margin:0 0 6px;font-size:20px}
@media(min-width:900px){ .hero h2{font-size:22px} }
.hero p{margin:0;color:var(--muted)}

/* Avoid anchor targets being hidden under the sticky header on first load (#home) and when navigating via hash */
#home, #booking, #highlights, #promo, #attractions { scroll-margin-top: calc(var(--header-inner-height, 72px) + 10px); }

/* Room type cards */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gap-4 { gap: 1rem; }
.rounded-2xl { border-radius: 1rem; }
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.p-4 { padding: 1rem; }
.bg-white { background-color: #fff; }
.flex { display: flex; }
.w-32 { width: 8rem; }
.h-24 { height: 6rem; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.bg-slate-100 { background-color: #f1f5f9; }
.rounded-lg { border-radius: 0.5rem; }
.overflow-hidden { overflow: hidden; }
.max-w-full { max-width: 100%; }
.max-h-full { max-height: 100%; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-slate-500 { color: #64748b; }
.font-semibold { font-weight: 600; }
.grow { flex-grow: 1; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.hidden { display: none; }

/* Search form on hero card (match booking page breakpoints) */
.hero .card .search-grid{grid-template-columns:1fr}
@media(min-width:480px){
  .hero .card .search-grid{grid-template-columns:1fr 1fr;align-items:end}
  .hero .card .search-grid .actions{grid-column:1 / -1}
}
@media(min-width:720px){
  .hero .card .search-grid{grid-template-columns:1fr 1fr 1fr 1fr auto}
  .hero .card .search-grid .actions{grid-column:auto}
}

.booking-card{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
@media(min-width:800px){.booking-card{grid-template-columns:repeat(3,1fr)}}
.room{background:var(--card);border-radius:12px;padding:12px;box-shadow:0 6px 18px rgba(3,50,59,0.06);display:flex;flex-direction:column;gap:10px}
.room img{width:100%;height:150px;object-fit:cover;border-radius:8px}
.room .meta{display:flex;justify-content:space-between;align-items:center}
.room .price{font-weight:800;color:var(--brand)}
.room button{padding:8px 12px;border-radius:10px;border:none;background:var(--brand);color:#fff;cursor:pointer}
.btn{padding:8px 12px;border-radius:10px;border:none;background:var(--brand);color:#fff;cursor:pointer}

.section{margin-top:22px}
.section .card{background:var(--card);padding:12px;border-radius:12px;box-shadow:0 8px 20px rgba(3,50,59,0.04)}

.promo-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.promo-grid{grid-template-columns:repeat(2,1fr)}}

table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #eef6f7;text-align:left}
th{background:rgba(42,166,184,0.06);font-weight:700}

.muted{color:var(--muted)}

/* accessibility focus */
button:focus, a:focus, input:focus{outline:3px solid rgba(42,166,184,0.18);outline-offset:2px}
.litepicker { z-index: 10000; }
.calendar-inline-container { margin-top: 8px; grid-column: 1 / -1; }

/* ปุ่มค้นหาด้านขวา */
.hero .card .search-grid .actions {
  justify-self: end;
  align-self: end;
}
.hero .card .search-grid .actions .btn { width: auto; }

/* มือถือให้เต็มแถวเหมือนเดิม */
@media (max-width: 640px) {
  .hero .card .search-grid .actions { grid-column: 1 / -1; justify-self: stretch; }
  .hero .card .search-grid .actions .btn { width: 100%; }
}

/* Facilities and Reviews section */
.facilities{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.facilities{grid-template-columns:1fr 1fr}}
.facility{display:flex;gap:12px;align-items:flex-start;padding:8px;border:1px solid #e6f6f7;border-radius:10px;background:#fff}
.facility svg{width:28px;height:28px;fill:var(--brand)}
.facility .name{font-weight:700}
.facility .desc{color:var(--muted)}
.reviews-card{background:#fff;border:1px solid #e6f6f7;border-radius:10px;padding:12px;box-shadow:0 8px 20px rgba(3,50,59,0.04)}
.reviews-card .stars{display:flex;gap:6px;align-items:center}
.reviews-card .stars svg{width:20px;height:20px;fill:#f5a623}
.reviews-card .stars .badge{background:rgba(42,166,184,0.06);border:1px solid rgba(42,166,184,0.15);padding:4px 8px;border-radius:999px;font-weight:700;color:var(--text)}
.btn.outline{background:#fff;color:var(--text);border:1px solid #e6f6f7}

/* Tabs under Rooms section */
.tabs{display:flex;gap:6px;border-bottom:1px solid #e6f6f7}
.tabs .tab{background:#fff;border:1px solid #e6f6f7;border-bottom:none;padding:8px 12px;border-top-left-radius:10px;border-top-right-radius:10px;color:var(--text);cursor:pointer}
.tabs .tab.active{background:rgba(42,166,184,0.06);color:var(--text);font-weight:700;border-color:rgba(42,166,184,0.25)}
.tab-panel{padding-top:10px}

/* Enhanced image container styles - Updated for grid layout */
[data-cover-box] {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #f8fafc;
  overflow: hidden;
  transition: aspect-ratio 0.3s ease;
}

[data-cover-box] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: object-fit 0.3s ease;
}

/* Portrait orientation (controlled by SMART logic) */
[data-cover-box][data-orientation="portrait"] {
  aspect-ratio: 3 / 4;
}

[data-cover-box][data-orientation="portrait"] img {
  object-fit: contain;
  background-color: #f8fafc;
}

/* Room Type Grid Layout - Horizontal Display */
#roomsList, #dormList {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  gap: 32px !important;
  padding: 20px 0;
}

/* Responsive: 1 card per row on mobile */
@media (max-width: 900px) {
  #roomsList, #dormList {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 16px 0;
  }
}

/* Room Card Styling - Vertical Layout */
.room-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  border: 1px solid #f1f5f9;
}

.room-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Room Cover (Image on top) */
.room-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #f8fafc;
  overflow: hidden;
}

.room-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: object-fit 0.3s ease;
}

/* Room Info (Below image) */
.room-code {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 8px;
  font-weight: 500;
}

.room-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin: 0;
}

/* Ensure wrapper doesn't interfere with grid */
.room-card-wrapper {
  display: contents;
}