/* ====== Theme tokens ====== */
:root{
  --cbl-bg:#0b0b0d;
  --cbl-surface:#121216;
  --cbl-text:#e7e7ea;
  --cbl-muted:#a1a1aa;
  --cbl-border:rgba(255,255,255,.08);
  --cbl-ring:rgba(255,255,255,.25);
  --cbl-accent:#ffffff;
  --cbl-radius:16px;
  --cbl-shadow:0 10px 30px rgba(0,0,0,.45);
  --cbl-shadow-lg:0 24px 60px rgba(0,0,0,.55);
}

/* ====== Container & steps ====== */
.cbl-form{
  background:var(--cbl-surface);
  color:var(--cbl-text);
  border:1px solid var(--cbl-border);
  border-radius:var(--cbl-radius);
  padding:22px;
  box-shadow:var(--cbl-shadow);
}
.cbl-steps .cbl-step{ display:none; }
.cbl-steps .cbl-step.active{ display:block; animation:cblFade .25s ease }
@keyframes cblFade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.cbl-step h3{ margin:0 0 14px; font-size:clamp(20px,3vw,28px); letter-spacing:.2px; }

/* ====== Inputs ====== */
.cbl-form label{ display:block; margin:10px 0; color:var(--cbl-muted); }
.cbl-form input[type="text"],
.cbl-form input[type="email"],
.cbl-form input[type="date"],
.cbl-form input[type="number"],
.cbl-form select,
.cbl-form textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  background:#0f0f12; border:1px solid var(--cbl-border);
  color:var(--cbl-text); outline:none;
  transition: box-shadow .15s, border-color .15s, transform .05s;
}
.cbl-form input:focus, .cbl-form select:focus, .cbl-form textarea:focus{
  border-color:var(--cbl-accent); box-shadow:0 0 0 4px var(--cbl-ring);
}

/* ====== Buttons (shared) ====== */
.cbl-next, .cbl-prev, .cbl-submit,
.cbl-approve-btn, .cbl-decline-btn,
.cbl-view-invoice, .cbl-view-details{
  appearance:none; border:1px solid var(--cbl-border);
  background:linear-gradient(180deg,#19191f,#121216);
  color:var(--cbl-text);
  padding:10px 16px; border-radius:999px; cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, border-color .15s ease;
}
.cbl-next:hover, .cbl-prev:hover, .cbl-submit:hover,
.cbl-approve-btn:hover, .cbl-decline-btn:hover,
.cbl-view-invoice:hover, .cbl-view-details:hover{
  transform:translateY(-1px); border-color:var(--cbl-accent);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
/* Decline accent */
.cbl-decline-btn{ border-color:rgba(255,88,88,.35); }
.cbl-decline-btn:hover{ border-color:#ff5858; box-shadow:0 6px 16px rgba(255,88,88,.22); }

/* ====== Slots ====== */
.cbl-slots{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 18px; }
.cbl-slot-btn{
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--cbl-border); background:#0f0f12; color:var(--cbl-text);
  transition: all .15s ease;
}
.cbl-slot-btn:hover{ border-color:var(--cbl-accent); transform:translateY(-1px); }
.cbl-slot-btn.selected{ border-color:var(--cbl-accent); box-shadow:0 0 0 4px var(--cbl-ring); }
.cbl-slot-btn.disabled{ background:#0d0d10; color:#6b6b74; cursor:not-allowed; opacity:.6; }

/* ====== Food add-ons ====== */
.cbl-foods h4{ margin:6px 0 10px; font-weight:600; color:var(--cbl-text); }
.cbl-food-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.cbl-food-item{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--cbl-border); border-radius:12px;
  padding:10px 12px; background:#0f0f12; transition:border-color .15s, transform .06s;
}
.cbl-food-item:hover{ border-color:var(--cbl-accent); transform:translateY(-1px); }
.cbl-food-item .title{ color:var(--cbl-text); }
.cbl-food-item .price{ color:var(--cbl-muted); }

/* ====== Summary ====== */
.cbl-summary{
  background:linear-gradient(180deg,#14141a,#0f0f12);
  border:1px solid var(--cbl-border); border-radius:14px;
  padding:12px 14px; color:var(--cbl-text);
}

/* ====== Tables (customer + staff) ====== */
.cbl-table{
  width:100%; border-collapse:separate; border-spacing:0;
  color:var(--cbl-text); background:var(--cbl-surface);
  border:1px solid var(--cbl-border); border-radius:var(--cbl-radius);
  overflow:hidden; box-shadow:var(--cbl-shadow);
}
.cbl-table th{
  text-align:left; font-weight:600; color:var(--cbl-muted);
  background:#0f0f12; border-bottom:1px solid var(--cbl-border); padding:12px 14px;
}
.cbl-table td{ padding:12px 14px; border-bottom:1px solid var(--cbl-border); }
.cbl-table tr:hover td{ background:#111116; }
/* Neutralize theme “faded”/zebra styles */
.cbl-table tr, .cbl-table tr td, .cbl-table tr th{ opacity:1 !important; color:var(--cbl-text) !important; filter:none !important; }
.cbl-table tr:nth-child(even) td, .cbl-table tr:nth-child(odd) td{ background:#0f0f12 !important; }

/* ====== Modal ====== */
.cbl-modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.65); backdrop-filter:blur(6px);
  z-index:99999;
}
.cbl-modal-content{
  background:rgba(18,18,22,.92);
  border:1px solid var(--cbl-border);
  border-radius:16px;
  width:min(900px,92vw);
  max-height:84vh; overflow:auto; padding:16px;
  box-shadow:var(--cbl-shadow-lg);
}
.cbl-modal-content.cbl-wide{ width:min(1200px,96vw); max-height:92vh; }
.cbl-modal-content.cbl-wide embed{ width:100%; height:84vh; }
.cbl-modal-content.cbl-wide img{ max-width:100%; max-height:100vh; height:auto; display:block; margin:0 auto; }
.cbl-close{ float:right; cursor:pointer; font-size:24px; line-height:1; opacity:.75 }
.cbl-close:hover{ opacity:1 }

/* ====== Utilities ====== */
.cbl-message{ margin-top:10px; }
table tbody tr:nth-child(odd){ background-color:#111116 !important; }

/* === Staff table generic overrides (class-based) === */
.cbl-staff .cbl-table tr,
.cbl-staff .cbl-table td,
.cbl-staff .cbl-table th{
  opacity:1 !important;
  color:var(--cbl-text) !important;
  filter:none !important;
}
.cbl-staff .cbl-table tr::before,
.cbl-staff .cbl-table tr::after{
  content:none !important;
  display:none !important;
}
.cbl-staff .cbl-table tr td{ background:#0f0f12 !important; }
.cbl-staff .cbl-table tr:hover td{ background:#111116 !important; }
.cbl-staff .cbl-table button.cbl-view-details,
.cbl-staff .cbl-table button.cbl-view-invoice{
  appearance:none;
  border:1px solid var(--cbl-border) !important;
  background:linear-gradient(180deg,#19191f,#121216) !important;
  color:var(--cbl-text) !important;
  padding:10px 16px !important;
  border-radius:999px !important;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, border-color .15s ease;
  pointer-events:auto !important;
}
.cbl-staff .cbl-table button.cbl-view-details:hover,
.cbl-staff .cbl-table button.cbl-view-invoice:hover{
  transform:translateY(-1px);
  border-color:var(--cbl-accent) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}

/* =========================================================
   Customer Dashboard (page-id-4057) — STATUS cell + VIEW popover
   ========================================================= */
body.page-id-4057 .cbl-table,
body.page-id-4057 .cbl-table tbody,
body.page-id-4057 .cbl-table tr{
  overflow:visible !important; /* allow floating panel to escape row */
}
/* ensure no odd theme background behind STATUS/VIEW */
body.page-id-4057 .cbl-table td{ background:#0f0f12 !important; }
body.page-id-4057 .cbl-table tr:hover td{ background:#111116 !important; }
/* anchor the View column; keep row height fixed */
body.page-id-4057 .cbl-table td:last-child{
  position:relative;
  white-space:nowrap;
  text-align:left;
}
/* show the summary toggle as a button and make it clickable */
body.page-id-4057 details{ display:inline-block !important; position:relative; z-index:60; }
body.page-id-4057 .cbl-table details > summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:10px 16px;
  border:1px solid var(--cbl-border);
  background:linear-gradient(180deg,#19191f,#121216);
  color:var(--cbl-text);
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  z-index:60;
  pointer-events:auto !important;
}
body.page-id-4057 .cbl-table details > summary::-webkit-details-marker{ display:none; }
/* floating details panel (no row expansion) */
body.page-id-4057 .cbl-table details .cbl-view{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:min(360px,70vw);
  background:#111116;
  border:1px solid var(--cbl-border);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  z-index:50;
  display:none;
}
body.page-id-4057 .cbl-table details[open] .cbl-view{ display:block; }

/* =========================================================
   Staff dashboard (page-id-4059) — page-specific overrides
   ========================================================= */

/* kill dimming/filters and force text color */
body.page-id-4059 .cbl-table tr,
body.page-id-4059 .cbl-table td,
body.page-id-4059 .cbl-table th{
  opacity:1 !important;
  filter:none !important;
  color:var(--cbl-text) !important;
}
/* nuke any ::before/::after overlays used by theme rows */
body.page-id-4059 .cbl-table tr::before,
body.page-id-4059 .cbl-table tr::after{
  content:none !important;
  display:none !important;
}
/* stable row backgrounds + hover */
body.page-id-4059 .cbl-table tr td{ background:#0f0f12 !important; }
body.page-id-4059 .cbl-table tr:hover td{ background:#111116 !important; }
/* make links (incl. Cloudflare email-protect anchors) readable */
body.page-id-4059 .cbl-table a{
  color:var(--cbl-text) !important;
  opacity:1 !important;
}
/* make action buttons consistent and clickable */
body.page-id-4059 .cbl-table button.cbl-view-details,
body.page-id-4059 .cbl-table button.cbl-view-invoice,
body.page-id-4059 .cbl-table button.cbl-approve-btn,
body.page-id-4059 .cbl-table button.cbl-decline-btn{
  appearance:none !important;
  border:1px solid var(--cbl-border) !important;
  background:linear-gradient(180deg,#19191f,#121216) !important;
  color:var(--cbl-text) !important;
  padding:10px 16px !important;
  border-radius:999px !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  transition:transform .06s, box-shadow .2s, border-color .15s;
}
body.page-id-4059 .cbl-table button.cbl-view-details:hover,
body.page-id-4059 .cbl-table button.cbl-view-invoice:hover,
body.page-id-4059 .cbl-table button.cbl-approve-btn:hover,
body.page-id-4059 .cbl-table button.cbl-decline-btn:hover{
  transform:translateY(-1px);
  border-color:var(--cbl-accent) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
/* invoice modal stays wide */
.cbl-modal-content.cbl-wide{
  width:min(1200px,96vw);
  max-height:92vh;
}
.cbl-modal-content.cbl-wide embed{ width:100%; height:84vh; }
.cbl-modal-content.cbl-wide img{ max-width:100%; max-height:84vh; height:auto; display:block; margin:0 auto; }

/* -------- Room cards layout (fixed) -------- */
.cbl-room-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  margin:14px 0;
  box-sizing: border-box;
}

@media (max-width: 1024px){
  .cbl-room-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .cbl-room-grid{ grid-template-columns: 1fr; }
}

.cbl-room-card{
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:#121317;
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cbl-room-card:hover{ transform: translateY(-2px); }
.cbl-room-card.selected{
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}

/* --- uniform image size --- */
.cbl-room-media{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;        /* keeps all cards identical; use height if you prefer */
  overflow:hidden;
}
.cbl-room-media img{
  width:100% !important;
  height:100% !important;      /* override theme “height:auto” */
  object-fit:cover;
  display:block;
}

.cbl-room-badge{
  position:absolute; top:10px; right:10px;
  padding:6px 10px; font-size:12px; color:#fff;
  background: rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
}
.cbl-room-title{
  position:absolute; left:10px; bottom:10px; right:10px;
  margin:0; padding:6px 10px; font-size:18px; color:#fff; font-weight:600;
  background: rgba(0,0,0,.45); border-radius:8px;
}

.cbl-room-meta{ padding:12px 14px; }
.cbl-room-meta-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.cbl-room-price{ font-weight:700; color:#e5e7eb; }
.cbl-room-note{ font-size:12px; color:#9ca3af; }

.cbl-room-more{
  display:inline-block; text-decoration:none;
  padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:#1f2430; color:#fff; font-weight:600; font-size:14px;
}

.cbl-message.error{ color:#ef4444; margin-top:8px; }
.cbl-message.success{ color:#10b981; margin-top:8px; }

.cbl-summary-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:6px 0; border-bottom:1px dashed var(--cbl-border);
}
.cbl-summary-row:last-child{ border-bottom:none; }

/* Status badges */
.cbl-badge{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.25rem .6rem; border-radius:999px;
  font-size:.85rem; line-height:1; border:1px solid var(--cbl-border);
  background:#111116; color:#ddd;
}
.cbl-badge--pending_payment_verification{ color:#fbbf24; border-color:#8b6b00; }
.cbl-badge--confirmed{ color:#10b981; border-color:#0b6; }
.cbl-badge--declined{ color:#f87171; border-color:#a11; }

/* Points card */
.cblp-card { padding: 0; }

/* header row */
.cblp-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--cbl-border);
}
.cblp-title{ margin:0; font-size:1.05rem; color:var(--cbl-text); }
.cblp-earned{ font-size:.95rem; color:var(--cbl-muted, #a0a0aa); }
.cblp-earned-value{ color:var(--cbl-accent); font-weight:600; }

/* balance line */
.cblp-balance{ padding:12px 16px; color:var(--cbl-text); }

/* list + rows */
.cblp-list{ padding:6px 8px 12px; }
.cblp-row{
  display:flex; align-items:center; justify-content:space-between;
  background:#0f0f12; border:1px solid var(--cbl-border);
  border-radius:12px; padding:10px 12px; margin:8px 0;
}
.cblp-row--empty{ justify-content:center; color:#9aa; }
.cblp-left{ display:flex; flex-direction:column; gap:2px; }
.cblp-date{ font-weight:600; color:#eaeaf2; }
.cblp-meta{ font-size:.9rem; color:#9aa; }
.cblp-right{ font-weight:700; font-size:1.05rem; }
.cblp-delta--pos{ color:#10b981; }       /* green */
.cblp-delta--neg{ color:#ef4444; }       /* red */

.cblp-actions{ padding:8px 16px 14px; }

/* Food dropdown */
.cbl-food-menu {
  display:block;
  position:absolute;
  z-index: 40;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 6px;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  padding: 6px;
}

.cbl-food-option {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.cbl-food-option:hover,
.cbl-food-option:focus {
  outline: none;
  background: rgba(255,255,255,0.06);
}

.cbl-food-thumb {
  width: 36px; height: 36px;
  object-fit: cover;
  border-radius: 8px;
  background: #1b1b21;
  border: 1px solid rgba(255,255,255,0.06);
}

.cbl-food-name {
  flex: 1 1 auto;
  font-weight: 500;
}

.cbl-food-price {
  margin-left: 12px;
  white-space: nowrap;
  opacity: .9;
  font-variant-numeric: tabular-nums;
}

.cbl-food-empty {
  padding: 12px;
  opacity: .7;
  text-align: center;
}

/* Make dropdown position nicely under the input */
#cbl-food-results, #sb_food_results { position: relative; }
#cbl-food-results, #sb_food_results { display:none; } /* we show/hide via JS */

/* Pending (soft hold) slot – orange */
.cbl-slot-btn.pending:not(.disabled) {
  background: #ffb74d;           /* orange */
  color: #1a1a1a;
  border-color: rgba(255,183,77,.4);
  box-shadow: 0 0 0 1px rgba(255,183,77,.25) inset;
}

/* Optional hover focus for pending */
.cbl-slot-btn.pending:not(.disabled):hover,
.cbl-slot-btn.pending:not(.disabled):focus {
  filter: brightness(0.95);
}

/* Red alert bar shown above the grid when a pending slot is clicked */
.cbl-slot-alert {
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border-left: 4px solid #ef4444;
  background: rgba(239,68,68,.1);
  color: #ef4444;
  font-weight: 700;
  border-radius: 8px;
}

/* front.css */
.cbl-submit.is-busy { opacity: .6; pointer-events: none; }
.cbl-submit[disabled] { cursor: not-allowed; }