/* 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); }

/* 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}