/* ============================================================
   BED — Hotel Booking System
   Distinct design: Deep teal + warm gold, organic curves
   ============================================================ */

:root{
  --bed-primary:#0f766e;
  --bed-primary-dark:#134e4a;
  --bed-primary-light:#5eead4;
  --bed-accent:#d97706;
  --bed-accent-light:#fbbf24;
  --bed-cream:#fef9f3;
  --bed-bg:#f8fafc;
  --bed-card:#ffffff;
  --bed-border:#e2e8f0;
  --bed-text:#0f172a;
  --bed-muted:#64748b;
  --bed-ok:#059669;
  --bed-warn:#d97706;
  --bed-err:#dc2626;
  --bed-info:#0891b2;
  --bed-pink:#db2777;
  --radius-sm:.5rem;
  --radius:.85rem;
  --radius-lg:1.35rem;
  --shadow-sm:0 1px 3px rgba(15,118,110,.08);
  --shadow:0 8px 24px rgba(15,118,110,.10);
  --shadow-lg:0 24px 60px rgba(15,23,42,.18);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Sarabun','Segoe UI',system-ui,sans-serif;
  background:var(--bed-bg);
  color:var(--bed-text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--bed-primary);text-decoration:none}
a:hover{color:var(--bed-primary-dark)}
img{max-width:100%;display:block}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border:1.5px solid transparent;border-radius:999px;
  font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer;
  transition:all .18s;background:transparent;color:inherit;
}
.btn-primary{background:linear-gradient(135deg,var(--bed-primary),var(--bed-primary-dark));color:#fff;box-shadow:0 6px 14px rgba(15,118,110,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(15,118,110,.42);color:#fff}
.btn-accent{background:linear-gradient(135deg,var(--bed-accent),#b45309);color:#fff;box-shadow:0 6px 14px rgba(217,119,6,.3)}
.btn-accent:hover{transform:translateY(-2px);color:#fff}
.btn-outline{border-color:var(--bed-primary);color:var(--bed-primary);background:#fff}
.btn-outline:hover{background:var(--bed-primary);color:#fff}
.btn-ghost{color:var(--bed-muted);background:transparent}
.btn-ghost:hover{background:var(--bed-bg);color:var(--bed-text)}
.btn-danger{background:var(--bed-err);color:#fff}
.btn-sm{padding:6px 12px;font-size:.78rem}
.btn-lg{padding:14px 26px;font-size:1rem}
.btn-block{width:100%}

/* ── Form ── */
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:.82rem;font-weight:700;color:#334155;margin-bottom:6px}
.form-label .req{color:var(--bed-err);margin-left:2px}
.form-control,.form-select,textarea.form-control{
  width:100%;padding:11px 14px;border:1.5px solid var(--bed-border);
  border-radius:var(--radius-sm);font-size:.9rem;font-family:inherit;
  background:#fff;color:var(--bed-text);transition:border-color .15s,box-shadow .15s;
}
.form-control:focus,.form-select:focus,textarea.form-control:focus{
  outline:none;border-color:var(--bed-primary);
  box-shadow:0 0 0 3px rgba(15,118,110,.12);
}
.input-group{display:flex;gap:0;align-items:stretch}
.input-group .form-control{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.input-group-text{
  padding:11px 14px;background:var(--bed-bg);border:1.5px solid var(--bed-border);border-left:none;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--bed-muted);
}
.form-hint{font-size:.74rem;color:var(--bed-muted);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:640px){.form-row,.form-row-3{grid-template-columns:1fr}}

/* ── Cards ── */
.card{
  background:var(--bed-card);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  border:1px solid var(--bed-border);overflow:hidden;
}
.card-body{padding:1.25rem}
.card-header{
  padding:1rem 1.25rem;border-bottom:1px solid var(--bed-border);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.card-title{font-size:1.05rem;font-weight:800;color:var(--bed-text);display:flex;align-items:center;gap:8px}
.card-title i{color:var(--bed-primary)}

/* ── Tables ── */
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th{
  text-align:left;padding:12px 14px;background:#f1f5f9;
  font-size:.74rem;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:2px solid var(--bed-border);
}
.table td{padding:12px 14px;border-bottom:1px solid var(--bed-border);color:var(--bed-text)}
.table tbody tr:hover{background:#f8fafc}
.table-hover tbody tr{cursor:pointer}
.table-empty{padding:3rem 1rem;text-align:center;color:var(--bed-muted)}
.table-empty i{font-size:2rem;display:block;margin-bottom:8px;color:#cbd5e1}
.table-wrap{overflow-x:auto;border-radius:var(--radius)}

/* ── Badges ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;
  background:#e2e8f0;color:#475569;
}
.badge-ok{background:#d1fae5;color:#065f46}
.badge-warn{background:#fef3c7;color:#92400e}
.badge-err{background:#fee2e2;color:#991b1b}
.badge-info{background:#cffafe;color:#155e75}
.badge-pink{background:#fce7f3;color:#9d174d}
.badge-grey{background:#e5e7eb;color:#4b5563}

/* ── Messages ── */
.msg{
  padding:12px 16px;border-radius:var(--radius);font-size:.88rem;font-weight:600;
  margin-bottom:1rem;display:flex;align-items:center;gap:10px;border:1.5px solid;
}
.msg-ok{background:#f0fdf4;color:#166534;border-color:#86efac}
.msg-err{background:#fef2f2;color:#991b1b;border-color:#fca5a5}
.msg-warn{background:#fffbeb;color:#92400e;border-color:#fcd34d}
.msg-info{background:#eff6ff;color:#1e40af;border-color:#93c5fd}

/* ── Stats ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.stat{
  background:var(--bed-card);border-radius:var(--radius);padding:1.25rem 1.4rem;
  border:1px solid var(--bed-border);position:relative;overflow:hidden;
  transition:transform .15s,box-shadow .15s;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat::after{
  content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;
  border-radius:50%;background:var(--stat-color,var(--bed-primary));opacity:.08;
}
.stat-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--stat-bg,#ccfbf1);color:var(--stat-color,var(--bed-primary));font-size:1.4rem;
  margin-bottom:.8rem;
}
.stat-label{font-size:.78rem;font-weight:700;color:var(--bed-muted);text-transform:uppercase;letter-spacing:.06em}
.stat-value{font-size:1.85rem;font-weight:800;color:var(--bed-text);line-height:1.1;margin-top:4px}
.stat-sub{font-size:.78rem;color:var(--bed-muted);margin-top:4px}

/* ============================================================
   ADMIN — Sidebar layout
   ============================================================ */
.admin-shell{display:flex;min-height:100vh}
.admin-sidebar{
  width:260px;flex-shrink:0;background:#0b3b39;color:#e6fffa;
  padding:0;position:fixed;left:0;top:0;bottom:0;overflow-y:auto;
  border-right:1px solid #134e4a;z-index:50;
}
.admin-sidebar .brand{
  padding:1.4rem 1.25rem 1rem;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid #134e4a;
}
.admin-sidebar .brand-logo{
  width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--bed-accent),var(--bed-accent-light));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;font-weight:800;
}
.admin-sidebar .brand-name{font-size:1.05rem;font-weight:800;color:#fff;line-height:1.1}
.admin-sidebar .brand-sub{font-size:.7rem;color:#5eead4;letter-spacing:.06em;text-transform:uppercase}
.nav{padding:.75rem .6rem 4rem;list-style:none}
.nav-section{font-size:.66rem;font-weight:800;color:#5eead4;letter-spacing:.1em;
  text-transform:uppercase;padding:1rem 1rem .4rem}
.nav-link{
  display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:10px;
  color:#a7f3d0;font-size:.88rem;font-weight:600;text-decoration:none;
  transition:all .12s;margin:1px 0;
}
.nav-link i{font-size:1.05rem;width:20px;text-align:center;color:#5eead4}
.nav-link:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-link.active{background:linear-gradient(90deg,rgba(217,119,6,.18),transparent);color:#fff;
  border-left:3px solid var(--bed-accent);padding-left:11px}
.nav-link.active i{color:var(--bed-accent-light)}

.admin-main{flex:1;margin-left:260px;min-width:0}
.admin-topbar{
  background:#fff;border-bottom:1px solid var(--bed-border);
  padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:30;
}
.admin-topbar h1{font-size:1.15rem;font-weight:800;color:var(--bed-text);display:flex;align-items:center;gap:8px}
.admin-topbar h1 i{color:var(--bed-primary)}
.user-chip{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;
  background:var(--bed-bg);border-radius:999px;cursor:pointer;position:relative}
.user-chip .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--bed-primary),var(--bed-accent));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
.user-chip-name{font-size:.85rem;font-weight:700}
.user-chip-role{font-size:.7rem;color:var(--bed-muted)}
.user-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:#fff;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid var(--bed-border);
  display:none;overflow:hidden;z-index:40}
.user-menu.open{display:block}
.user-menu a{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:.85rem;color:var(--bed-text)}
.user-menu a:hover{background:var(--bed-bg)}

.admin-content{padding:1.75rem 1.5rem 3rem;max-width:1400px}
.page-title{font-size:1.4rem;font-weight:800;color:var(--bed-text);margin-bottom:.25rem;
  display:flex;align-items:center;gap:10px}
.page-title i{color:var(--bed-primary)}
.page-subtitle{font-size:.88rem;color:var(--bed-muted);margin-bottom:1.5rem}
.page-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}

@media(max-width:900px){
  .admin-sidebar{transform:translateX(-100%);transition:transform .25s}
  .admin-sidebar.open{transform:translateX(0)}
  .admin-main{margin-left:0}
  .menu-btn{display:flex !important}
}
.menu-btn{display:none;width:38px;height:38px;border-radius:10px;background:var(--bed-bg);
  align-items:center;justify-content:center;border:none;cursor:pointer;color:var(--bed-text)}

/* ============================================================
   PUBLIC — Landing & booking
   ============================================================ */
.public-shell{display:flex;flex-direction:column;min-height:100vh}

.pub-nav{
  background:#fff;padding:.9rem 1.5rem;border-bottom:1px solid var(--bed-border);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  position:sticky;top:0;z-index:40;backdrop-filter:blur(8px);background:rgba(255,255,255,.92);
}
.pub-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;color:var(--bed-text)}
.pub-brand-logo{
  width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--bed-primary),var(--bed-primary-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;
  position:relative;overflow:hidden;
}
.pub-brand-logo::after{content:'';position:absolute;bottom:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--bed-accent),var(--bed-accent-light))}
.pub-nav-links{display:flex;align-items:center;gap:1.4rem}
.pub-nav-links a{font-size:.92rem;font-weight:600;color:#475569}
.pub-nav-links a:hover{color:var(--bed-primary)}
@media(max-width:760px){.pub-nav-links a:not(.btn){display:none}}

/* Hero with organic curve */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(circle at 80% 20%,#5eead4 0%,transparent 50%),
             linear-gradient(135deg,#0b3b39 0%,#0f766e 50%,#134e4a 100%);
  color:#fff;padding:5rem 1.5rem 7rem;
}
.hero::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:80px;
  background:var(--bed-bg);
  clip-path:ellipse(60% 100% at 50% 100%);
}
.hero-inner{max-width:1100px;margin:0 auto;position:relative;z-index:2;text-align:center}
.hero h1{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;line-height:1.15;margin-bottom:1rem;
  text-shadow:0 2px 20px rgba(0,0,0,.2)}
.hero h1 .accent{color:var(--bed-accent-light)}
.hero p{font-size:1.05rem;color:#ccfbf1;max-width:600px;margin:0 auto 2rem}

.search-card{
  background:rgba(255,255,255,.97);border-radius:var(--radius-lg);
  padding:1.4rem;box-shadow:0 20px 60px rgba(0,0,0,.25);
  max-width:920px;margin:0 auto;position:relative;z-index:2;
}
.search-card form{display:grid;grid-template-columns:.9fr 1.1fr 1.1fr .7fr auto;gap:.8rem;align-items:end}
.search-card .form-control,.search-card .form-select{padding:13px 14px;height:50px}
.search-card .form-label{font-size:.74rem;color:#475569;margin-bottom:6px}
.search-card .btn{padding:0 24px;height:50px;font-size:.95rem}
.search-card .form-group{margin:0}
@media(max-width:760px){.search-card form{grid-template-columns:1fr 1fr;gap:.7rem}.search-card .btn{grid-column:1 / -1}}

/* Section */
section.section{padding:4rem 1.5rem}
.section-inner{max-width:1200px;margin:0 auto}
.section-head{text-align:center;margin-bottom:2.5rem}
.section-eyebrow{
  display:inline-block;font-size:.74rem;font-weight:800;color:var(--bed-accent);
  letter-spacing:.14em;text-transform:uppercase;padding:4px 14px;border-radius:999px;
  background:#fef3c7;margin-bottom:.6rem;
}
.section-title{font-size:1.85rem;font-weight:800;color:var(--bed-text);margin-bottom:.4rem}
.section-sub{font-size:.95rem;color:var(--bed-muted);max-width:560px;margin:0 auto}

/* Room cards (grid) */
.room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.room-card{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--bed-border);box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;
}
.room-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.room-card .room-image{
  aspect-ratio:16/10;background:linear-gradient(135deg,#5eead4,#0f766e);
  position:relative;overflow:hidden;
}
.room-card .room-image img{width:100%;height:100%;object-fit:cover}
.room-card .room-image-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;
}
.room-card .room-image-fallback i{font-size:3rem;opacity:.6}
.room-card .room-image-fallback span{font-weight:700;margin-top:6px;opacity:.9}
.room-card .room-type-badge{
  position:absolute;top:14px;left:14px;padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.94);color:var(--bed-primary-dark);font-size:.74rem;font-weight:800;
  backdrop-filter:blur(6px);
}
.room-card .room-mode-badge{
  position:absolute;top:14px;right:14px;padding:5px 12px;border-radius:999px;
  background:var(--bed-accent);color:#fff;font-size:.72rem;font-weight:800;
}
.room-card .room-body{padding:1.1rem 1.25rem 1.25rem;flex:1;display:flex;flex-direction:column}
.room-card h3{font-size:1.05rem;font-weight:800;color:var(--bed-text);margin-bottom:4px}
.room-card .room-desc{font-size:.85rem;color:var(--bed-muted);margin-bottom:.9rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.room-card .room-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;font-size:.78rem;color:#475569}
.room-card .room-meta i{color:var(--bed-primary);margin-right:3px}
.room-card .room-meta span{display:flex;align-items:center}
.room-card .room-foot{display:flex;align-items:center;justify-content:space-between;
  padding-top:.9rem;border-top:1px dashed var(--bed-border);margin-top:auto}
.room-card .room-price{font-size:1.25rem;font-weight:800;color:var(--bed-primary)}
.room-card .room-price small{font-size:.72rem;color:var(--bed-muted);font-weight:600;margin-left:2px}

/* Features strip */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.feature{
  padding:1.25rem;border-radius:var(--radius);background:#fff;
  border:1px solid var(--bed-border);text-align:center;
}
.feature-icon{
  width:54px;height:54px;border-radius:16px;margin:0 auto .8rem;
  background:linear-gradient(135deg,#ccfbf1,#5eead4);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--bed-primary-dark);
}
.feature h4{font-size:1rem;font-weight:800;margin-bottom:4px}
.feature p{font-size:.85rem;color:var(--bed-muted)}

/* Footer */
.pub-footer{
  background:#0b3b39;color:#a7f3d0;padding:3rem 1.5rem 1.5rem;margin-top:auto;
}
.pub-footer-inner{max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
.pub-footer h5{color:#fff;font-size:1rem;font-weight:800;margin-bottom:1rem}
.pub-footer a{color:#5eead4;font-size:.85rem;display:block;padding:3px 0}
.pub-footer a:hover{color:#fff}
.pub-footer-bottom{max-width:1200px;margin:2rem auto 0;padding-top:1rem;
  border-top:1px solid #134e4a;font-size:.8rem;color:#5eead4;text-align:center}

/* Booking form layout */
.booking-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:1.5rem;max-width:1100px;margin:0 auto}
@media(max-width:880px){.booking-layout{grid-template-columns:1fr}}

.booking-summary-card{position:sticky;top:90px;height:fit-content;
  background:linear-gradient(135deg,#0f766e,#134e4a);color:#fff;border-radius:var(--radius-lg);
  padding:1.5rem;box-shadow:var(--shadow-lg)}
.booking-summary-card h3{font-size:1rem;font-weight:800;margin-bottom:1rem;color:#fff;
  padding-bottom:.7rem;border-bottom:1px dashed rgba(255,255,255,.2)}
.booking-summary-card .sum-row{display:flex;justify-content:space-between;font-size:.85rem;padding:6px 0;color:#ccfbf1}
.booking-summary-card .sum-row strong{color:#fff}
.booking-summary-card .sum-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:.8rem;border-top:1.5px dashed rgba(255,255,255,.3);margin-top:.5rem;
  font-size:1.3rem;font-weight:800;
}
.booking-summary-card .sum-total-label{font-size:.85rem;color:#ccfbf1}

/* Print receipt */
@media print{
  .admin-sidebar,.admin-topbar,.pub-nav,.pub-footer,.page-actions,.no-print{display:none !important}
  .admin-main,.admin-content{margin:0;padding:0}
  body{background:#fff}
}

/* Small utilities */
.text-muted{color:var(--bed-muted)}
.text-center{text-align:center}
.text-end{text-align:right}
.text-ok{color:var(--bed-ok)}
.text-err{color:var(--bed-err)}
.text-warn{color:var(--bed-warn)}
.fw-bold{font-weight:800}
.fw-semi{font-weight:600}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.d-flex{display:flex}.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}
.justify-between{justify-content:space-between}.align-center{align-items:center}
.flex-1{flex:1}
.hidden{display:none}
.w-100{width:100%}

/* Loader */
.loader{display:inline-block;width:16px;height:16px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Pagination */
.pager{display:flex;gap:4px;justify-content:center;margin-top:1.5rem;flex-wrap:wrap}
.pager a,.pager span{padding:7px 12px;border:1px solid var(--bed-border);border-radius:8px;font-size:.85rem;font-weight:600;color:var(--bed-text)}
.pager a:hover{background:var(--bed-primary);color:#fff;border-color:var(--bed-primary)}
.pager .current{background:var(--bed-primary);color:#fff;border-color:var(--bed-primary)}
.pager .disabled{color:#cbd5e1;cursor:not-allowed}

/* Filter bar */
.filter-bar{
  background:#fff;border-radius:var(--radius);padding:1rem 1.25rem;
  border:1px solid var(--bed-border);margin-bottom:1.25rem;
  display:flex;gap:.7rem;align-items:end;flex-wrap:wrap;
}
.filter-bar .form-group{margin:0;flex:1;min-width:160px}

/* ============================================================
   Tom Select — theme override (teal/gold)
   ============================================================ */
.ts-wrapper{
  font-family:'Sarabun','Segoe UI',sans-serif !important;
  font-size:.9rem !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  padding:0 !important;
  background:transparent !important;
  width:100% !important;
}
/* Force the original native select to be fully hidden once Tom Select wraps it */
select.tomselected,
select.ts-hidden-accessible{
  display:none !important;
}
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control{
  position:relative !important;
  border:1.5px solid var(--bed-border) !important;
  border-radius:var(--radius-sm) !important;
  padding:10px 36px 10px 14px !important;   /* right padding for caret */
  min-height:44px !important;
  background:#fff !important;
  box-shadow:none !important;
  color:var(--bed-text) !important;
  transition:border-color .15s, box-shadow .15s !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}
.ts-wrapper.single .ts-control:hover{
  border-color:var(--bed-primary-light) !important;
}
.ts-wrapper.focus .ts-control,
.ts-wrapper.single.focus .ts-control{
  border-color:var(--bed-primary) !important;
  box-shadow:0 0 0 3px rgba(15,118,110,.12) !important;
}
.ts-wrapper.disabled .ts-control{
  background-color:#f8fafc !important;
  color:#94a3b8 !important;
  cursor:not-allowed !important;
}

/* Caret triangle — reliable CSS pseudo-element approach */
.ts-wrapper.single .ts-control:after,
.ts-wrapper.multi .ts-control:after{
  display:block !important;
  content:'' !important;
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  width:0 !important;
  height:0 !important;
  margin-top:-3px !important;
  border-style:solid !important;
  border-width:7px 5px 0 5px !important;
  border-color:var(--bed-primary) transparent transparent transparent !important;
  pointer-events:none !important;
  transition:transform .2s ease !important;
  transform-origin:center 30% !important;
}
.ts-wrapper.single.dropdown-active .ts-control:after,
.ts-wrapper.multi.dropdown-active .ts-control:after{
  transform:rotate(180deg) !important;
  border-top-color:var(--bed-primary) !important;
}
.ts-wrapper.disabled .ts-control:after{
  border-top-color:#94a3b8 !important;
}

/* Internal text input (when searchable) — kill all default browser styles */
.ts-wrapper .ts-control > input{
  font-family:inherit !important;
  font-size:.9rem !important;
  color:var(--bed-text) !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  min-height:22px !important;
  padding:0 !important;
  margin:0 !important;
  width:auto !important;
  flex:1 !important;
}
.ts-wrapper .ts-control > input::placeholder{ color:#94a3b8; opacity:1 }
/* Inner item element should also be border-free */
.ts-wrapper.single .ts-control > .item{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}

/* Selected item display (single) */
.ts-wrapper.single .ts-control .item{
  color:var(--bed-text) !important;
  font-weight:600 !important;
  line-height:1.4 !important;
}
/* Placeholder when nothing selected */
.ts-wrapper.single .ts-control > input:placeholder-shown{ color:#94a3b8 }

/* Selected chips (multi) */
.ts-wrapper.multi .ts-control > .item{
  background:linear-gradient(135deg, var(--bed-primary), var(--bed-primary-dark)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:4px 12px !important;
  font-size:.78rem !important;
  font-weight:700 !important;
  margin:2px 4px 2px 0 !important;
  box-shadow:0 2px 4px rgba(15,118,110,.2) !important;
}
.ts-wrapper.multi .ts-control > .item.active{
  background:var(--bed-accent) !important;
}
.ts-wrapper.plugin-remove_button .item .remove{
  border-left:1px solid rgba(255,255,255,.3) !important;
  margin-left:6px !important;
  padding-left:6px !important;
  color:#fff !important;
}

/* Dropdown */
.ts-dropdown{
  border:1.5px solid var(--bed-border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-lg) !important;
  margin-top:6px !important;
  padding:6px !important;
  background:#fff !important;
  font-family:inherit !important;
  z-index:2000 !important;
}
.ts-dropdown .option{
  padding:9px 12px !important;
  border-radius:8px !important;
  font-size:.88rem !important;
  color:var(--bed-text) !important;
  margin:1px 0 !important;
  cursor:pointer !important;
  transition:background .12s !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active{
  background:#f0fdfa !important;
  color:var(--bed-primary-dark) !important;
}
.ts-dropdown .option.selected{
  background:linear-gradient(90deg, rgba(15,118,110,.12), transparent) !important;
  color:var(--bed-primary) !important;
  font-weight:700 !important;
}
.ts-dropdown .optgroup-header{
  font-size:.7rem !important;
  font-weight:800 !important;
  color:var(--bed-muted) !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  padding:8px 12px 4px !important;
  background:transparent !important;
  border-top:1px solid var(--bed-border) !important;
}
.ts-dropdown .optgroup-header:first-child{ border-top:none !important }
.ts-dropdown .create{
  padding:9px 12px !important;
  color:var(--bed-accent) !important;
  font-weight:700 !important;
}
.ts-dropdown-content{ max-height:320px !important }

/* ── Hero search-card: bigger, match height with date inputs ── */
.search-card .ts-wrapper.single .ts-control,
.search-card .ts-wrapper.multi .ts-control{
  background-color:#fff !important;
  border-color:#e2e8f0 !important;
  padding:0 36px 0 14px !important;
  min-height:50px !important;
  height:50px !important;
}
.search-card .ts-wrapper.single .ts-control:after,
.search-card .ts-wrapper.multi .ts-control:after{
  right:14px !important;
}

/* ── Filter bar: slightly tighter ── */
.filter-bar .ts-wrapper.single .ts-control{
  padding:9px 34px 9px 12px !important;
  min-height:42px !important;
  background-position:right 12px center !important;
}

/* Booking summary card readability */
.booking-summary-card .ts-control{ color:var(--bed-text) !important }

/* Original select is hidden via the rule near .ts-wrapper above */

/* ============================================================
   Thai Date Picker (TDP) — teal/gold theme
   ============================================================ */
.tdp-wrapper{position:relative}
.tdp-display{
  cursor:pointer;
  padding-right:36px !important;
}
.tdp-wrapper:after{
  content:'';
  position:absolute;
  right:14px;
  top:50%;
  width:0;
  height:0;
  margin-top:-3px;
  border-style:solid;
  border-width:7px 5px 0 5px;
  border-color:var(--bed-primary) transparent transparent transparent;
  pointer-events:none;
  transition:transform .2s ease;
}
.tdp-wrapper:has(.tdp-popup.open):after{
  transform:rotate(180deg);
}
.tdp-popup{
  position:absolute;top:calc(100% + 6px);left:0;
  background:#fff;border:1px solid var(--bed-border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:1rem;min-width:300px;z-index:2000;display:none;
  animation:tdpFade 160ms ease-out;
}
.tdp-popup.open{display:block}
@keyframes tdpFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.tdp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;gap:.25rem}
.tdp-nav{
  background:transparent;border:0;width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--bed-muted);transition:all .15s;
}
.tdp-nav:hover{background:#f0fdfa;color:var(--bed-primary-dark)}
.tdp-nav i{font-size:1rem;line-height:1}
.tdp-title{
  font-weight:700;cursor:pointer;flex:1;text-align:center;
  padding:.4rem .75rem;border-radius:8px;transition:background .15s;
  color:var(--bed-text);
}
.tdp-title:hover{background:#f0fdfa;color:var(--bed-primary-dark)}
.tdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.tdp-dow{
  text-align:center;font-size:.72rem;font-weight:800;
  color:var(--bed-muted);padding:.4rem 0;text-transform:uppercase;
}
.tdp-day{
  text-align:center;padding:.5rem 0;font-size:.88rem;font-weight:500;
  cursor:pointer;border-radius:8px;transition:all .12s;color:var(--bed-text);
}
.tdp-day:hover{background:#f0fdfa;color:var(--bed-primary-dark)}
.tdp-day.muted{color:#cbd5e1}
.tdp-day.today{color:var(--bed-primary);font-weight:800;box-shadow:inset 0 0 0 1.5px var(--bed-primary)}
.tdp-day.selected{background:linear-gradient(135deg,var(--bed-primary),var(--bed-primary-dark));color:#fff;font-weight:800;box-shadow:0 4px 10px rgba(15,118,110,.32)}
.tdp-day.disabled{color:#cbd5e1;cursor:not-allowed;opacity:.4}
.tdp-day.disabled:hover{background:transparent}
.tdp-footer{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--bed-border);
}
.tdp-footer button{
  background:transparent;border:0;color:var(--bed-primary);font-weight:700;
  font-size:.85rem;cursor:pointer;padding:.4rem .8rem;border-radius:6px;font-family:inherit;
}
.tdp-footer button:hover{background:#f0fdfa}
.tdp-months,.tdp-years{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tdp-mo,.tdp-yr{
  text-align:center;padding:.75rem 0;border-radius:8px;cursor:pointer;
  font-size:.88rem;font-weight:600;transition:all .12s;color:var(--bed-text);
}
.tdp-mo:hover,.tdp-yr:hover{background:#f0fdfa;color:var(--bed-primary-dark)}
.tdp-mo.selected,.tdp-yr.selected{background:linear-gradient(135deg,var(--bed-primary),var(--bed-primary-dark));color:#fff;font-weight:800}
.tdp-time-bar{
  display:flex;align-items:center;gap:.4rem;
  padding-top:.75rem;margin-top:.75rem;border-top:1px solid var(--bed-border);
}
.tdp-time-label{
  flex:1;color:var(--bed-muted);font-size:.82rem;font-weight:700;
  display:inline-flex;align-items:center;gap:.3rem;
}
.tdp-time-input{
  width:56px;text-align:center;
  border:1.5px solid var(--bed-border);border-radius:8px;
  padding:.4rem .3rem;font-size:1rem;font-weight:800;font-family:inherit;
  background:#fff;color:var(--bed-text);appearance:textfield;-moz-appearance:textfield;
}
.tdp-time-input::-webkit-outer-spin-button,
.tdp-time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tdp-time-input:focus{
  border-color:var(--bed-primary);outline:0;
  box-shadow:0 0 0 3px rgba(15,118,110,.12);
}
.tdp-time-colon{font-weight:800;color:var(--bed-text);padding:0 .15rem}
.tdp-done-btn{background:var(--bed-primary) !important;color:#fff !important;padding:.4rem .9rem !important}
.tdp-done-btn:hover{background:var(--bed-primary-dark) !important}

/* On hero search-card keep popup above the section */
.search-card .tdp-popup{box-shadow:0 30px 80px rgba(0,0,0,.3)}

/* Step indicator */
.steps{display:flex;justify-content:center;gap:0;margin-bottom:2rem;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;padding:8px 18px;font-size:.82rem;color:#94a3b8;font-weight:700}
.step .step-num{width:28px;height:28px;border-radius:50%;background:#e2e8f0;color:#64748b;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem}
.step.active{color:var(--bed-primary)}
.step.active .step-num{background:var(--bed-primary);color:#fff}
.step.done .step-num{background:var(--bed-ok);color:#fff}
.step + .step::before{content:'';width:30px;height:2px;background:#e2e8f0;margin-right:8px}
.step.done + .step::before{background:var(--bed-ok)}

/* ============================================================
   Dialogs (bedConfirm / bedAlert) + Toasts — shared admin & site
   ============================================================ */
.bed-dialog{margin:auto;border:0;padding:0;background:transparent;max-width:calc(100vw - 32px);overflow:visible}
.bed-dialog::backdrop{background:rgba(8,20,19,.5);backdrop-filter:blur(3px)}
.bed-dialog[open] .bed-dialog-box{animation:bedDlg .22s cubic-bezier(.2,.9,.3,1.25)}
@keyframes bedDlg{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.bed-dialog-box{width:400px;max-width:100%;background:#fff;border-radius:20px;padding:28px 26px 22px;text-align:center;
  box-shadow:0 30px 70px -20px rgba(8,20,19,.45);font-family:inherit;color:#0e1d1b}
.bed-dialog-icon{width:60px;height:60px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:1.55rem;
  background:var(--dlg-bg,#edfaf6);color:var(--dlg-c,var(--bed-primary,#0f766e));box-shadow:0 0 0 8px var(--dlg-ring,rgba(15,118,110,.07))}
.bed-dialog.tone-danger{--dlg-bg:#fef1f1;--dlg-c:#dc2626;--dlg-ring:rgba(220,38,38,.07)}
.bed-dialog.tone-error{--dlg-bg:#fef1f1;--dlg-c:#dc2626;--dlg-ring:rgba(220,38,38,.07)}
.bed-dialog.tone-warning{--dlg-bg:#fff6e6;--dlg-c:#d97706;--dlg-ring:rgba(217,119,6,.08)}
.bed-dialog.tone-success{--dlg-bg:#ebfbf1;--dlg-c:#16a34a;--dlg-ring:rgba(22,163,74,.08)}
.bed-dialog-title{font-size:1.12rem;font-weight:700;margin:0 0 6px}
.bed-dialog-msg{font-size:.92rem;color:#566966;line-height:1.6;margin:0;white-space:pre-line}
.bed-dialog-actions{display:flex;gap:10px;margin-top:22px}
.bed-dialog-btn{flex:1;height:44px;border-radius:12px;border:1px solid transparent;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;transition:filter .15s,background .15s}
.bed-dialog-btn.primary{background:var(--bed-primary,#0f766e);color:#fff}
.bed-dialog-btn.danger{background:#dc2626;color:#fff}
.bed-dialog-btn.primary:hover,.bed-dialog-btn.danger:hover{filter:brightness(.92)}
.bed-dialog-btn.ghost{background:#fff;border-color:#d3dcd9;color:#0e1d1b}
.bed-dialog-btn.ghost:hover{background:#f4f7f6}
.bed-dialog-btn:focus-visible{outline:3px solid rgba(15,118,110,.3);outline-offset:2px}

.bed-toasts{position:fixed;top:18px;right:18px;z-index:3000;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.bed-toast{pointer-events:auto;display:flex;align-items:center;gap:11px;min-width:260px;max-width:380px;padding:12px 12px 12px 16px;
  background:#0f1f1d;color:#fff;border-radius:14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.4);font-size:.9rem;
  animation:bedToastIn .28s cubic-bezier(.2,.9,.3,1.2)}
.bed-toast>i{font-size:1.1rem;flex-shrink:0}
.bed-toast.tone-success>i{color:#4ade80}
.bed-toast.tone-info>i{color:#67e8f9}
.bed-toast span{flex:1;line-height:1.45}
.bed-toast-x{width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#cbd5d3;cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.bed-toast-x:hover{background:rgba(255,255,255,.16);color:#fff}
.bed-toast.out{opacity:0;transform:translateX(20px);transition:all .25s}
@keyframes bedToastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(max-width:560px){.bed-toasts{left:12px;right:12px;top:12px}.bed-toast{max-width:none}}