/* ===== Theme variables ===== */
:root{
  --rbat-bg:#ffffff;
  --rbat-text:#1f2937;
  --rbat-muted:#6b7280;
  --rbat-border:#e5e7eb;
  --rbat-panel:#ffffff;
  --rbat-shadow:0 8px 24px rgba(0,0,0,.08);
  --rbat-primary:#0f62fe;
  --rbat-primary-600:#0b4ed1;
  --rbat-primary-soft:#eef5ff;
  --rbat-success:#16a34a;
  --rbat-danger:#dc2626;
  --rbat-amber:#f59e0b;
}

/* ===== Theme Variants (extendable) ===== */
/* Light (default) is implicit via :root variables */
/* Warm (soft orange / amber) */
.rbat-wrap[data-theme="warm"]{
  --rbat-bg:#fffaf4;
  --rbat-panel:#ffffff;
  --rbat-text:#3a2d21;
  --rbat-muted:#7a6655;
  --rbat-border:#ead9cc;
  --rbat-primary:#d06427;
  --rbat-primary-600:#a54d18;
  --rbat-primary-soft:#ffe8d7;
  --rbat-success:#14804a;
  --rbat-danger:#c03531;
  --rbat-amber:#d97706;
}
.rbat-wrap[data-theme="warm"] .rbat-panel{background:var(--rbat-panel);} /* ensure override wins */
.rbat-wrap[data-theme="warm"] .rbat-cal .grid .day{background:#fff3e8;}
.rbat-wrap[data-theme="warm"] .rbat-cal .grid .day:hover{background:#ffe7d4;}
.rbat-wrap[data-theme="warm"] .rbat-cal .grid .day.selected{background:var(--rbat-primary-soft); box-shadow:0 0 0 2px var(--rbat-primary) inset;}
.rbat-wrap[data-theme="warm"] #rbat-bordplan{background:#fff2e2; background-image:linear-gradient(to right, rgba(208,100,39,.18) 1px, transparent 1px),linear-gradient(to bottom, rgba(208,100,39,.18) 1px, transparent 1px);} 
.rbat-wrap[data-theme="warm"] .rbat-btn{border-color:var(--rbat-border);}
.rbat-wrap[data-theme="warm"] .rbat-btn.primary{background:var(--rbat-primary); border-color:var(--rbat-primary);}
.rbat-wrap[data-theme="warm"] .rbat-btn.is-active{background:#fff; box-shadow:0 0 0 2px var(--rbat-primary) inset;}
.rbat-wrap[data-theme="warm"] #rbat-times-list .rbat-btn{background:#fff;}
.rbat-wrap[data-theme="warm"] #rbat-times-list .rbat-btn.is-active{background:var(--rbat-primary-soft); color:var(--rbat-primary);}

/* Green (fresh, calm) */
.rbat-wrap[data-theme="green"]{
  --rbat-bg:#f3faf6;
  --rbat-panel:#ffffff;
  --rbat-text:#183b2b;
  --rbat-muted:#4b6b5b;
  --rbat-border:#d4e7dc;
  --rbat-primary:#1b7f4a;
  --rbat-primary-600:#136039;
  --rbat-primary-soft:#dff5ea;
  --rbat-success:#1b7f4a;
  --rbat-danger:#c4382e;
  --rbat-amber:#d97706;
}
.rbat-wrap[data-theme="green"] .rbat-panel{background:var(--rbat-panel);} 
.rbat-wrap[data-theme="green"] .rbat-cal .grid .day{background:#ecf8f1;}
.rbat-wrap[data-theme="green"] .rbat-cal .grid .day:hover{background:#e2f4ea;}
.rbat-wrap[data-theme="green"] .rbat-cal .grid .day.selected{background:var(--rbat-primary-soft); box-shadow:0 0 0 2px var(--rbat-primary) inset;}
.rbat-wrap[data-theme="green"] #rbat-bordplan{background:#e6f5ef; background-image:linear-gradient(to right, rgba(27,127,74,.15) 1px, transparent 1px),linear-gradient(to bottom, rgba(27,127,74,.15) 1px, transparent 1px);} 
.rbat-wrap[data-theme="green"] .rbat-btn{border-color:var(--rbat-border);}
.rbat-wrap[data-theme="green"] .rbat-btn.primary{background:var(--rbat-primary); border-color:var(--rbat-primary);}
.rbat-wrap[data-theme="green"] .rbat-btn.is-active{background:#fff; box-shadow:0 0 0 2px var(--rbat-primary) inset;}
.rbat-wrap[data-theme="green"] #rbat-times-list .rbat-btn{background:#fff;}
.rbat-wrap[data-theme="green"] #rbat-times-list .rbat-btn.is-active{background:var(--rbat-primary-soft); color:var(--rbat-primary);}

/* Sage (muted neutral green/gray) */
.rbat-wrap[data-theme="sage"]{
  --rbat-bg:#f6f9f7;
  --rbat-panel:#ffffff;
  --rbat-text:#25332c;
  --rbat-muted:#56685f;
  --rbat-border:#d7e4dc;
  --rbat-primary:#4f7c65;
  --rbat-primary-600:#3e6250;
  --rbat-primary-soft:#e3f0ea;
  --rbat-success:#357a55;
  --rbat-danger:#cb3d39;
  --rbat-amber:#d97706;
}
.rbat-wrap[data-theme="sage"] .rbat-panel{background:var(--rbat-panel);} 
.rbat-wrap[data-theme="sage"] .rbat-cal .grid .day{background:#edf4f1;}
.rbat-wrap[data-theme="sage"] .rbat-cal .grid .day:hover{background:#e6f0ec;}
.rbat-wrap[data-theme="sage"] .rbat-cal .grid .day.selected{background:var(--rbat-primary-soft); box-shadow:0 0 0 2px var(--rbat-primary) inset;}
.rbat-wrap[data-theme="sage"] #rbat-bordplan{background:#edf3f0; background-image:linear-gradient(to right, rgba(79,124,101,.14) 1px, transparent 1px),linear-gradient(to bottom, rgba(79,124,101,.14) 1px, transparent 1px);} 
.rbat-wrap[data-theme="sage"] .rbat-btn{border-color:var(--rbat-border);}
.rbat-wrap[data-theme="sage"] .rbat-btn.primary{background:var(--rbat-primary); border-color:var(--rbat-primary);}
.rbat-wrap[data-theme="sage"] .rbat-btn.is-active{background:#fff; box-shadow:0 0 0 2px var(--rbat-primary) inset;}
.rbat-wrap[data-theme="sage"] #rbat-times-list .rbat-btn{background:#fff;}
.rbat-wrap[data-theme="sage"] #rbat-times-list .rbat-btn.is-active{background:var(--rbat-primary-soft); color:var(--rbat-primary);}

/* Sunset (soft orange/pink) */
.rbat-wrap[data-theme="sunset"]{
  --rbat-bg:#fff7f3;
  --rbat-panel:#ffffff;
  --rbat-text:#402218;
  --rbat-muted:#77574d;
  --rbat-border:#f1d5c8;
  --rbat-primary:#d14f2e;
  --rbat-primary-600:#a83d22;
  --rbat-primary-soft:#ffe1d7;
  --rbat-success:#1d7c4c;
    --rbat-danger:#c03531;
  --rbat-amber:#d97706;
}
.rbat-wrap[data-theme="sunset"] .rbat-panel{background:var(--rbat-panel);} 
.rbat-wrap[data-theme="sunset"] .rbat-cal .grid .day{background:#ffefe9;}
.rbat-wrap[data-theme="sunset"] .rbat-cal .grid .day:hover{background:#ffe3d8;}
.rbat-wrap[data-theme="sunset"] .rbat-cal .grid .day.selected{background:var(--rbat-primary-soft); box-shadow:0 0 0 2px var(--rbat-primary) inset;}
.rbat-wrap[data-theme="sunset"] #rbat-bordplan{background:#ffebe3; background-image:linear-gradient(to right, rgba(209,79,46,.18) 1px, transparent 1px),linear-gradient(to bottom, rgba(209,79,46,.18) 1px, transparent 1px);} 
.rbat-wrap[data-theme="sunset"] .rbat-btn{border-color:var(--rbat-border);}
.rbat-wrap[data-theme="sunset"] .rbat-btn.primary{background:var(--rbat-primary); border-color:var(--rbat-primary);}
.rbat-wrap[data-theme="sunset"] .rbat-btn.is-active{background:#fff; box-shadow:0 0 0 2px var(--rbat-primary) inset;}
.rbat-wrap[data-theme="sunset"] #rbat-times-list .rbat-btn{background:#fff;}
.rbat-wrap[data-theme="sunset"] #rbat-times-list .rbat-btn.is-active{background:var(--rbat-primary-soft); color:var(--rbat-primary);}

/* Minimal (neutral, no red accents) */
.rbat-wrap[data-theme="minimal"]{
  --rbat-bg:#ffffff;
  --rbat-panel:#ffffff;
  --rbat-text:#1f2937;
  --rbat-muted:#6b7280;
  --rbat-border:#e5e7eb;
  --rbat-primary:#3b82f6; /* calm blue */
  --rbat-primary-600:#2563eb;
  --rbat-primary-soft:#eef2ff;
  --rbat-success:#16a34a;
  --rbat-danger:#6b7280; /* neutralize red to muted gray */
  --rbat-amber:#a3a3a3; /* neutral amber as gray */
}
.rbat-wrap[data-theme="minimal"] .rbat-panel{background:var(--rbat-panel);} 
.rbat-wrap[data-theme="minimal"] .rbat-cal .grid .day{background:#fafafa;}
.rbat-wrap[data-theme="minimal"] .rbat-cal .grid .day:hover{background:#f3f4f6;}
.rbat-wrap[data-theme="minimal"] .rbat-cal .grid .day.selected{background:var(--rbat-primary-soft); box-shadow:0 0 0 2px var(--rbat-primary) inset;}
.rbat-wrap[data-theme="minimal"] #rbat-bordplan{background:#fafafa; background-image:linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);} 
.rbat-wrap[data-theme="minimal"] .rbat-btn{border-color:var(--rbat-border);}
.rbat-wrap[data-theme="minimal"] .rbat-btn.primary{background:var(--rbat-primary); border-color:var(--rbat-primary);}
.rbat-wrap[data-theme="minimal"] .rbat-btn.is-active{background:#fff; box-shadow:0 0 0 2px var(--rbat-primary) inset;}
.rbat-wrap[data-theme="minimal"] #rbat-times-list .rbat-btn{background:#fff;}
.rbat-wrap[data-theme="minimal"] #rbat-times-list .rbat-btn.is-active{background:var(--rbat-primary-soft); color:var(--rbat-primary);} 

/* Dark already implemented below; ensure buttons adapt automatically via variables */

/* ===== Layout ===== */
.rbat-wrap {
  display: block !important; /* ensure wrapper is visible even if a builder/theme injects display:none */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--rbat-text);
  /* Center the booking UI on the page */
  max-width: 1400px; /* allow wider desktop layout */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 12px;
  float: none;          /* neutralize floating parents */
  text-align: left;     /* override right-aligned text containers */
  align-self: center;   /* center inside flex parents */
  justify-self: center; /* center inside grid parents */
}
.rbat-head { margin-bottom: 12px; }
.rbat-front-title { margin:0; font-weight:700; font-size:24px; letter-spacing:.2px; }
/* Small back button for simple mode */
.rbat-head { display:flex; align-items:center; gap:8px; }
.rbat-back-btn{ padding:8px 10px; border-radius:10px; font-size:14px; background:#fff; border:1px solid var(--rbat-border); color:var(--rbat-text); }
.rbat-back-btn:hover{ background:#f6f6f6 }

.rbat-ui {
  display:grid;
  /* Desktop: 50/50 split between calendar and content */
  grid-template-columns: 1fr 1fr;
  gap:12px;
  /* Center the two-column layout within the wrapper so it doesn't feel right-heavy on wide screens */
  width: 100%;
  max-width: 1200px; /* allow a wider two-column layout on desktop */
  margin-left: auto;
  margin-right: auto;
}
.rbat-ui > * { min-width: 0; }
@media (max-width: 900px){
  .rbat-ui { grid-template-columns: 1fr; }
}

/* Desktop: make the actual two-column UI fill ~70% of page width, centered */
@media (min-width: 1024px){
  .rbat-wrap{
    width: 100% !important;
    max-width: none !important;
  }
  .rbat-ui{
    width: 70vw !important; /* ~70% of viewport width */
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* If the widget is placed inside a Full width container (Gutenberg .alignfull) or a helper wrapper
   with class .rbat-fullwidth, use 100% width instead of the default 70vw cap on desktop */
@media (min-width: 1024px){
  .alignfull .rbat-wrap,
  .rbat-wrap.alignfull,
  .rbat-fullwidth .rbat-wrap{
    max-width: none !important;
    width: 100% !important;
  }
  .alignfull .rbat-wrap .rbat-ui,
  .rbat-wrap.alignfull .rbat-ui,
  .rbat-fullwidth .rbat-wrap .rbat-ui{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Guardrails against overly restrictive theme containers on desktop */
@media (min-width: 1024px){
  .rbat-wrap, .rbat-wrap .rbat-ui{
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
}

/* ===== Panel ===== */
.rbat-panel {
  background: var(--rbat-panel);
  border:1px solid var(--rbat-border);
  border-radius:14px;
  padding:14px;
  box-shadow: var(--rbat-shadow);
}
.rbat-panel h4 { margin:0 0 8px 0; font-size:15px; font-weight:600; }

/* ===== Kalender ===== */
.rbat-cal { user-select:none; }
.rbat-cal .cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.rbat-cal .cal-head .ttl { font-weight:700; letter-spacing:.2px; }
.rbat-cal .cal-head .nav { display:flex; gap:6px; }

.rbat-cal { overflow: hidden; box-sizing: border-box; }
.rbat-cal .dow, .rbat-cal .grid {
  display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap:4px; box-sizing: border-box; min-width:0;
}

/* On very small widths, tighten gaps a bit more to avoid squashing */
@media (max-width: 380px){
  .rbat-cal .dow, .rbat-cal .grid { gap:3px; }
  .rbat-cal .grid .day { padding:0; min-height:42px; }
}
.rbat-cal .dow { margin-bottom:4px; font-size:12px; color:#666; }
.rbat-cal .dow { margin-bottom:8px; font-size:12px; color:#666; text-transform: lowercase; }
.rbat-cal .grid .day {
  border:1px solid var(--rbat-border);
  border-radius:9999px; /* circular */
  padding:0;
  aspect-ratio: 1 / 1;
  min-height:52px;
  position:relative;
  cursor:pointer;
  background: #f6f7f9;
  transition: background .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease;
  display:block;
}
/* (duplicate rule removed) */
.rbat-cal .grid .day.other { opacity:.45; }
.rbat-cal .grid .day.today { box-shadow: 0 0 0 2px #cfe3ff inset; }
.rbat-cal .grid .day.disabled { pointer-events:none; opacity:.35; }
.rbat-cal .grid .day.selected {
  background: var(--rbat-primary-soft);
  border-color: var(--rbat-primary);
  box-shadow: 0 0 0 2px var(--rbat-primary) inset;
}
.rbat-cal .grid .day:hover { background:#f4f7ff; }
.rbat-cal .grid .day:active { transform: scale(.98); }
.rbat-cal .grid .day .num {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: #111;
  pointer-events: none;
}
.rbat-cal .grid .day.closed { background:#edd1d1; border-color:#e1bcbc; box-shadow:none; }
.rbat-cal .grid .day.closed .num{ color:#8b0000; }

/* Booking horizon note */
.rbat-horizon-note{
  margin: 6px 0 8px 0;
  font-size: 12px;
  color: #555;
}
/* Badge shown inside day cells (e.g., Lukket/Helligdag) */
.rbat-badge{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 9999px;
  pointer-events: none;
  font-weight: 600;
  letter-spacing: .1px;
  text-align: center;
  white-space: nowrap;
}
.rbat-badge-closed{
  background: #fdecec;
  color: #8b0000;
  box-shadow: 0 0 0 1px #f3b0b0 inset;
}
/* Legend row removed; keep badge styles only */

/* ===== Mobile refinements ===== */
@media (max-width: 640px){
  .rbat-wrap{ padding: 0 10px; }
  .rbat-ui{ gap:10px; }
  .rbat-panel{ padding:12px; }
  .rbat-cal .cal-head{ margin-bottom: 4px; }
  .rbat-cal .cal-head .ttl{ font-size:18px; text-align:center; text-transform: lowercase; }
  .rbat-cal .dow{ margin-bottom:6px; font-size:12px; }
  .rbat-cal .grid{ gap:6px; }
  .rbat-cal .grid .day{ min-height:48px; padding:0; border-radius:9999px; }
  .rbat-cal .grid .day .num{ font-size:13px; }
  .rbat-cal-legend{ justify-content: center; }

  /* Tap targets */
  .rbat-btn{ min-height:44px; padding:12px 14px; }
  #rbat-times-list .rbat-btn{ min-height:40px; padding:10px 12px; font-size:14px; border-radius:9999px; }
  .rbat-qty-chips{ gap:8px; }
  .rbat-chip{ min-width:36px; min-height:36px; padding:8px 12px; font-size:14px; }

  /* Inputs: avoid iOS zoom */
  .rbat-select,
  .rbat-form input,
  .rbat-form textarea{ font-size:16px; padding:12px; border-radius:12px; }

  /* Mini-steps: scrollable row */
  .rbat-mini-steps{ overflow-x:auto; -webkit-overflow-scrolling: touch; padding-left:12px; padding-right:12px; }
  .rbat-mini-step{ white-space: nowrap; padding:6px 10px; }
}

/* Medium-width desktops/tablets (e.g. split-screen) – avoid calendar overflowing its panel */
@media (min-width: 641px) and (max-width: 1140px){
  .rbat-cal{ overflow: hidden; }
  .rbat-cal .grid{ gap:5px; }
  /* Allow day cells to shrink a bit more by reducing the minimum height */
  .rbat-cal .grid .day{ min-height:44px; }
}

@media (max-width: 380px){
  /* Keep circular day cells on very small devices */
  .rbat-cal .grid{ gap:5px; }
  .rbat-cal .grid .day{ min-height:44px; padding:0; border-radius:9999px; }
  /* Hide mini-step labels if too narrow, show icons only */
  .rbat-mini-step .label{ display:none; }
  .rbat-mini-step .icon{ font-size:14px; }
}

/* Desktop tuning: make month view more compact so entire calendar fits easily */
@media (min-width: 1024px){
  .rbat-ui{ max-width: 1100px; }
  .rbat-cal .dow, .rbat-cal .grid{ gap: 6px; }
  /* Constrain calendar panel width on desktop to avoid oversized day cells */
  .rbat-panel:has(.rbat-cal){ max-width: 520px; overflow: hidden; }
  /* Slightly smaller day cells and text */
  .rbat-cal .grid .day{ min-height: 46px; }
  .rbat-cal .grid .day .num{ top:6px; font-size: 12px; }
  .rbat-badge{ bottom: 6px; font-size: 9px; padding: 2px 5px; }
}

/* Days beyond booking horizon (light theme) */
.rbat-cal .grid .day.future-locked{
  background: #fff3f3;
  border-color: #f3b0b0;
  box-shadow: 0 0 0 2px rgba(220,38,38,.25) inset;
  opacity: 1; /* override disabled dimming */
}
.rbat-cal .grid .day.future-locked .num{ color:#8b0000; }
/* Ensure future-locked wins over other disabled styling */
.rbat-cal .grid .day.disabled.future-locked{ background:#fff3f3; border-color:#f3b0b0; box-shadow: 0 0 0 2px rgba(220,38,38,.25) inset; opacity:1; }
.rbat-cal .grid .day.disabled.future-locked .num{ color:#8b0000; }

/* ===== Inputs / knapper ===== */
.rbat-select { width:100%; max-width:100%; box-sizing: border-box; padding:10px 12px; border:1px solid #dcdcdc; border-radius:10px; background:#fff; transition: box-shadow .15s ease, border-color .15s ease; }
.rbat-select:focus { outline:none; border-color: var(--rbat-primary); box-shadow: 0 0 0 3px rgba(15,98,254,.15); }
.rbat-btn {
  appearance:none; border:1px solid #dcdcdc; background:#fff; padding:10px 12px; border-radius:12px;
  cursor:pointer; font:inherit; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.rbat-btn:hover { background:#f6f6f6; }
.rbat-btn:active { transform: translateY(1px); }
.rbat-btn.primary { border-color: var(--rbat-primary); background: var(--rbat-primary); color:#fff; }
.rbat-btn.primary:hover { filter: brightness(0.98); box-shadow: 0 4px 12px rgba(15,98,254,.18); }
.rbat-btn.is-active { border-color: var(--rbat-primary); box-shadow: 0 0 0 2px var(--rbat-primary) inset; background:#fff; }

/* Make the "Se ledige tider" button match other UI buttons in size */
#rbat-show-times-btn{ padding:8px 12px; border-radius:10px; font-size:14px; }

/* Time chips */
#rbat-times-list .rbat-btn{ border-radius:9999px; padding:8px 12px; }
#rbat-times-list .rbat-btn.is-active{ border-color: var(--rbat-primary); box-shadow: 0 0 0 2px var(--rbat-primary) inset; color: var(--rbat-primary); background: var(--rbat-primary-soft); }

/* Party quick chips */
.rbat-qty-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px 0; }
.rbat-chip{ appearance:none; border:1px solid var(--rbat-border); background:#fff; color:var(--rbat-text); border-radius:9999px; padding:6px 10px; cursor:pointer; font:inherit; font-size:13px; transition: background .15s ease, box-shadow .15s ease, border-color .15s ease; }
.rbat-chip:hover{ background:#f5f7fb; }
.rbat-chip.is-active{ border-color: var(--rbat-primary); box-shadow: 0 0 0 2px var(--rbat-primary) inset; color: var(--rbat-primary); background: var(--rbat-primary-soft); }

/* Time panel responsive grid: party on left/top, time on right/bottom */
.rbat-time-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; align-items:start; }
@media (max-width: 640px){
  .rbat-time-grid{ grid-template-columns: 1fr; gap:10px; }
  /* Hide the select label+control on mobile since chips are primary */
  .rbat-qty-select{ display:none !important; }
  /* Give bottom space for actions */
  #rbat-times-list{ margin-top: 10px !important; }
}

/* ===== Noter / succes ===== */
.rbat-note { font-size:13px; color:#555; margin-top:6px; }
.rbat-note.rbat-note-danger {
  color: var(--rbat-danger);
  font-size: 14px;
  font-weight: 600;
}
.rbat-success {
  border:1px solid #ccebdc; background:#f2fbf7; color:#1f6c4d;
  border-radius:10px; padding:12px; line-height:1.45;
}
.rbat-success-title{ font-weight:700; font-size:16px; margin-bottom:6px; }
.rbat-success-body{ font-size:13px; color:#215f48; }

/* ===== Toast ===== */
#rbat-toast {
  position:fixed; right:12px; bottom:12px; width:min(360px, calc(100vw - 24px));
  background:#fff; border:1px solid #e7e7e7; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:12px; display:none; z-index:999999;
}
#rbat-toast.show { display:block; }
#rbat-toast .rbat-toast-title { font-weight:600; margin-bottom:4px; }
#rbat-toast .rbat-toast-body { color:#333; }
.rbat-toast-sub { margin:0; color:#6b7280; font-size:12px; }
#rbat-toast .rbat-toast-close {
  border:none; background:transparent; font-size:18px; position:absolute; top:6px; right:8px; cursor:pointer;
}

/* ===== Bordplan (“bokse med ikon”) ===== */
#rbat-bordplan {
  position:relative; width:100%; min-height:360px;
  background: #fafafa;
  background-image: linear-gradient(to right, rgba(0,0,0,.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius:12px; overflow:auto; /* allow horizontal/vertical scroll instead of widening the page */
}

/* Gør AL tekst ikke-markerbar + skjul caret fuldstændigt */
#rbat-bordplan, #rbat-bordplan * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  caret-color: transparent;
}

.bp-table {
  position:absolute;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  /* Remove surrounding box so icon stands alone */
  border: none;
  border-radius:0;
  background-color: transparent; /* icon graphics define appearance */
  overflow:visible;
  cursor:pointer;
  transition: box-shadow .15s ease, transform .05s ease, border-color .15s ease, background .15s ease, filter .15s ease;
  outline: none;
}

/* Statusindikator på kundesiden: ingen farvet baggrundsflade bag ikonerne */
.bp-table.available,
.bp-table.unavailable,
.bp-table.combo { background-color: transparent; }

/* Tydelig valgt tilstand */
.bp-table.sel {
  /* Keep a clear selected state visual but without the surrounding hard box */
  box-shadow: 0 6px 18px rgba(15,98,254,.18), 0 0 0 4px rgba(15,98,254,0.06) inset;
  transform: translateZ(0);
}
.bp-table.sel::after{
  content:"✓";
  position:absolute; top:6px; left:8px;
  font-weight:700; font-size:14px; color:#0f62fe;
  background:#fff; border-radius:50%; width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px #0f62fe inset;
  animation: rbat-pop .18s ease;
}

@keyframes rbat-pop{ from{ transform: scale(.9); opacity:.6 } to{ transform: scale(1); opacity:1 } }

/* Label inde i boksen: hidden by default, shown on hover or when selected (for touch) */
.bp-caption {
  width:100%;
  text-align:center;
  font-size:12px;
  color:#333;
  margin-top:6px;
  pointer-events:none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Show caption when hovering a table (desktop) or when a table is selected (.sel used for touch/keyboard) */
.bp-table:hover .bp-caption,
.bp-table.sel .bp-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Make unavailable (rød) borde ikke-klikbare på kundesiden */
.bp-table.unavailable{
  pointer-events: none;
  cursor: not-allowed;
  filter: saturate(0.9) opacity(0.9);
}

/* Icon wrapper inside table */
.bp-box{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; pointer-events:none; }
/* Let icons scale to the table box size (JS sets box from backend w/h) */
.bp-box svg{ display:block; width:100%; height:100%; max-width:none; max-height:none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)); }

/* Bordnummer (centreret over ikonet) */
.bp-number{
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  font-weight:700; color:#0f2a57; font-size:14px;
  pointer-events:none; /* clicks pass through to .bp-table */
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Scrollable canvas wrapper for floor sections so large plans can be scrolled
   instead of being scaled down. Also provide basic scrollbar styling. */
.rbat-floor-canvas {
  position:relative;
  width:100%;
  height:auto; /* let canvas grow naturally within panel */
  min-height:360px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding:12px; /* spacing inside the canvas */
  box-sizing: border-box;
  background: transparent;
}

.rbat-floor-canvas::-webkit-scrollbar { width:10px; height:10px; }
.rbat-floor-canvas::-webkit-scrollbar-track { background: transparent; }
.rbat-floor-canvas::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:10px; border:2px solid transparent; background-clip: padding-box; }
.rbat-floor-canvas { scrollbar-width: thin; scrollbar-color: #e0e0e0 transparent; }

/* Ensure transforms (scale/translate) originate from the element center */
.bp-table { transform-origin: center center; }

/* Allow touch panning and pinch gestures inside the canvas */
.rbat-floor-canvas { touch-action: pan-x pan-y pinch-zoom; }
.rbat-floor-view { transform-origin: 0 0; }

/* Floor section navigation */
.rbat-floor-nav{ position:relative; display:flex; align-items:center; gap:8px; padding:8px; }
.rbat-floor-nav-title{ flex:1; text-align:center; font-weight:700; }
.rbat-floor-nav-btn{ appearance:none; border:1px solid #ddd; background:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; transition: background .15s ease, box-shadow .15s ease }
.rbat-floor-nav-btn:hover{ background:#f6f6f6 }
.rbat-floor-nav-btn:disabled{ opacity:0.45; cursor:default }

/* Formular */
.rbat-form { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.rbat-form .full { grid-column: 1 / -1; }
.rbat-form label { font-size:12px; color:#444; display:block; margin-bottom:4px; }
.rbat-form input, .rbat-form textarea {
  width:100%; max-width:100%; box-sizing: border-box; padding:10px 12px; border:1px solid #dcdcdc; border-radius:10px; font:inherit; background:#fff; transition: box-shadow .15s ease, border-color .15s ease;
}
.rbat-form input:focus, .rbat-form textarea:focus{ outline:none; border-color: var(--rbat-primary); box-shadow: 0 0 0 3px rgba(15,98,254,.15); }
.rbat-form textarea { min-height:84px; resize:vertical; }
.rbat-form .actions { display:flex; gap:8px; align-items:center; }
.rbat-link { color:#0f62fe; text-decoration:none; }
.rbat-link:hover { text-decoration:underline; }

/* ===== Wizard mode ===== */
.rbat-mode-wizard .rbat-ui{ grid-template-columns: 1fr; max-width: 720px; margin-top: 8px; }
.rbat-wizard-head{ margin: 4px 0 8px 0; text-align: left; }
.rbat-wizard-title{ font-size: 22px; font-weight: 700; letter-spacing: .2px; }
.rbat-wizard-subtitle{ font-size: 13px; color:#6b7280; margin-top: 2px; }
.rbat-wizard-steps{ display:flex; gap:8px; align-items:center; justify-content:space-between; margin: 8px 0 12px 0; }
.rbat-wizard-step{ flex:1; text-align:center; padding:10px 8px; border:1px solid var(--rbat-border); border-radius:9999px; background:#fff; font-size:13px; color:#666; transition: box-shadow .15s ease, background .15s ease, color .15s ease; }
.rbat-wizard-step.is-active{ border-color: var(--rbat-primary); box-shadow: 0 0 0 2px var(--rbat-primary) inset; background: var(--rbat-primary-soft); color:#111; font-weight:600; }
.rbat-wizard-step.is-done{ background:#f6f6f6; color:#333; }
.rbat-wizard-nav{ display:flex; gap:8px; align-items:center; margin-top:12px; }
.rbat-wizard-spacer{ flex:1; }
/* In wizard mode, hide inline submit button in the form area to avoid duplicate primary action */
.rbat-mode-wizard #rbat-form .actions{ display:none; }

/* Optional subtle transitions between steps */
.rbat-mode-wizard .rbat-panel{ transition: opacity .18s ease, transform .18s ease; }
.rbat-mode-wizard.rbat-step-1 .rbat-panel{ opacity:1; transform: translateY(0); }
.rbat-mode-wizard.rbat-step-2 .rbat-panel{ opacity:1; transform: translateY(0); }
.rbat-mode-wizard.rbat-step-3 .rbat-panel{ opacity:1; transform: translateY(0); }
.rbat-mode-wizard.rbat-step-4 .rbat-panel{ opacity:1; transform: translateY(0); }

/* ===== Mini steps (single mode) ===== */
.rbat-mini-steps{ display:flex; gap:8px; align-items:center; justify-content:flex-start; margin: 6px auto 8px auto; width:100%; max-width: 1200px; padding: 0 12px; }
.rbat-mini-step{ display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--rbat-border); border-radius:9999px; background:#fff; color:#444; font-size:12px; }
.rbat-mini-step .icon{ font-size:12px; }
.rbat-mini-step.is-active{ box-shadow: 0 0 0 2px var(--rbat-primary) inset; background: var(--rbat-primary-soft); color:#111; font-weight:600; border-color: var(--rbat-primary); }
.rbat-mini-step.is-done{ background:#f6f6f6; color:#333; }

/* Dark theme variants for mini steps and badge */
.rbat-wrap[data-theme="dark"] .rbat-badge-closed{ background: rgba(255,87,87,.16); color:#ffaaaa; box-shadow: 0 0 0 1px rgba(255,87,87,.35) inset; }
.rbat-wrap[data-theme="dark"] .rbat-mini-step{ background:#0f172a; border-color:#2a3a58; color:#cbd5e1; }
.rbat-wrap[data-theme="dark"] .rbat-mini-step.is-active{ background: rgba(127,178,255,.14); color:#eaf2ff; border-color: var(--rbat-primary); }
.rbat-wrap[data-theme="dark"] .rbat-mini-step.is-done{ background:#152548; color:#e6edf3; }

/* Dark theme tweaks for wizard */
.rbat-wrap[data-theme="dark"] .rbat-wizard-step{ background:#0f172a; border-color:#2a3a58; color:#cbd5e1; }
.rbat-wrap[data-theme="dark"] .rbat-wizard-step.is-active{ background: rgba(127,178,255,.14); color:#eaf2ff; }
.rbat-wrap[data-theme="dark"] .rbat-wizard-title{ color:#e6edf3; }
.rbat-wrap[data-theme="dark"] .rbat-wizard-subtitle{ color:#a7b0bf; }

/* Inline validation styling for required fields */
.rbat-input-error{ border-color: var(--rbat-danger) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important; }
.rbat-error-inline{ color: var(--rbat-danger); font-size: 12px; margin-top: 4px; }

/* ===== Dark theme overrides (scoped to wrapper) ===== */
.rbat-wrap[data-theme="dark"]{
  --rbat-bg:#0d1424; /* slightly brighter to help contrast */
  --rbat-text:#f1f5f9; /* lighter text for better legibility */
  --rbat-muted:#a7b0bf;
  --rbat-border:#2a3a58;
  --rbat-panel:#162238; /* lighten panel a bit more so widget isn't too dark */
  --rbat-shadow: 0 8px 24px rgba(0,0,0,.5);
  --rbat-primary:#7fb2ff; /* a touch brighter */
  --rbat-primary-600:#6a9be4;
  --rbat-primary-soft: rgba(127,178,255,.16);
  --rbat-success:#2dd170;
  --rbat-danger:#ff5757;
  --rbat-amber:#ffb020;
}

.rbat-wrap[data-theme="dark"] .rbat-panel{ background: var(--rbat-panel); border-color: var(--rbat-border); }
.rbat-wrap[data-theme="dark"] .rbat-cal .grid .day{ background: rgba(255,255,255,0.06); border-color: #334766; }
.rbat-wrap[data-theme="dark"] .rbat-cal .grid .day:hover{ background: rgba(127,178,255,0.18); }
.rbat-wrap[data-theme="dark"] .rbat-cal .grid .day.selected{ box-shadow: 0 0 0 2px var(--rbat-primary) inset; }
.rbat-wrap[data-theme="dark"] #rbat-bordplan{ background: #223b5e; background-image: linear-gradient(to right, rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.14) 1px, transparent 1px); }
.rbat-wrap[data-theme="dark"] .bp-caption{ color:#e2e8f0; }
.rbat-wrap[data-theme="dark"] .rbat-floor-nav-title{ color:#e6edf3; }
.rbat-wrap[data-theme="dark"] .rbat-floor-nav-btn{ background:#0f172a; border-color:#2a3a58; color:#e6edf3; }
.rbat-wrap[data-theme="dark"] .rbat-floor-nav-btn:hover{ background:#152548; }
.rbat-wrap[data-theme="dark"] .rbat-select, .rbat-wrap[data-theme="dark"] .rbat-form input, .rbat-wrap[data-theme="dark"] .rbat-form textarea{ background:#0f172a; color:#f1f5f9; border-color:#2a3a58; }
.rbat-wrap[data-theme="dark"] .rbat-form label{ color:#e6edf3; }
.rbat-wrap[data-theme="dark"] .rbat-form input::placeholder,
.rbat-wrap[data-theme="dark"] .rbat-form textarea::placeholder{ color:#a7b0bf; }
.rbat-wrap[data-theme="dark"] .rbat-note{ color:#a7b0bf; }

/* Make icons read a bit brighter in dark mode without washing out colors */
.rbat-wrap[data-theme="dark"] .bp-box svg{ filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)) brightness(1.06) contrast(1.05); }

/* Additional dark theme polish */
.rbat-wrap[data-theme="dark"] .rbat-cal .dow { color:#94a3b8; }
.rbat-wrap[data-theme="dark"] .rbat-cal .grid .day .num { color:#cbd5e1; }
.rbat-wrap[data-theme="dark"] .rbat-cal .grid .day.today { box-shadow: 0 0 0 2px rgba(127,178,255,.35) inset; }
/* Closed day highlight (dark theme) */
.rbat-wrap[data-theme="dark"] .rbat-cal .grid .day.closed {
  background: rgba(255,87,87,.14);
  border-color: #7a2a2a;
  box-shadow: 0 0 0 2px rgba(255,87,87,.35) inset;
}
.rbat-wrap[data-theme="dark"] .rbat-cal .grid .day.closed .num{ color:#ffaaaa; }

.rbat-wrap[data-theme="dark"] .rbat-horizon-note{ color:#a7b0bf; }

/* Days beyond booking horizon (dark theme) */
.rbat-wrap[data-theme="dark"] .rbat-cal .grid .day.future-locked{
  background: rgba(255,87,87,.14);
  border-color: #7a2a2a;
  box-shadow: 0 0 0 2px rgba(255,87,87,.35) inset;
  opacity: 1; /* override disabled dimming */
}
.rbat-wrap[data-theme="dark"] .rbat-cal .grid .day.future-locked .num{ color:#ffaaaa; }
/* Ensure future-locked wins over other disabled styling in dark */
.rbat-wrap[data-theme="dark"] .rbat-cal .grid .day.disabled.future-locked{ background: rgba(255,87,87,.14); border-color:#7a2a2a; box-shadow: 0 0 0 2px rgba(255,87,87,.35) inset; opacity:1; }
.rbat-wrap[data-theme="dark"] .rbat-cal .grid .day.disabled.future-locked .num{ color:#ffaaaa; }

/* Buttons and chips */
.rbat-wrap[data-theme="dark"] .rbat-btn { background:#0f172a; border-color:#2a3a58; color:#f1f5f9; }
.rbat-wrap[data-theme="dark"] .rbat-btn:hover { background:#152548; }
.rbat-wrap[data-theme="dark"] .rbat-btn.primary { background: var(--rbat-primary); border-color: var(--rbat-primary); color:#0b1220; }
.rbat-wrap[data-theme="dark"] .rbat-btn.primary:hover { filter: brightness(1.02); box-shadow: 0 6px 18px rgba(127,178,255,.25); }
.rbat-wrap[data-theme="dark"] .rbat-btn.is-active { background: rgba(127,178,255,.14); border-color: var(--rbat-primary); box-shadow: 0 0 0 2px var(--rbat-primary) inset; color:#e8f1ff; }
.rbat-wrap[data-theme="dark"] #rbat-times-list .rbat-btn { background:#0f172a; border-color:#2a3a58; color:#e6edf3; }
.rbat-wrap[data-theme="dark"] #rbat-times-list .rbat-btn:hover { background:#152548; }
.rbat-wrap[data-theme="dark"] #rbat-times-list .rbat-btn.is-active { background: rgba(127,178,255,.18); color:#eaf2ff; border-color: var(--rbat-primary); }

/* Inputs focus rings */
.rbat-wrap[data-theme="dark"] .rbat-select:focus,
.rbat-wrap[data-theme="dark"] .rbat-form input:focus,
.rbat-wrap[data-theme="dark"] .rbat-form textarea:focus {
  border-color: var(--rbat-primary);
  box-shadow: 0 0 0 3px rgba(127,178,255,.23);
}

/* Links */
.rbat-wrap[data-theme="dark"] .rbat-link { color:#97c4ff; }
.rbat-wrap[data-theme="dark"] .rbat-link:hover { color:#c5dcff; }

/* Toast */
.rbat-wrap[data-theme="dark"] #rbat-toast { background:#111c34; border-color:#2a3a58; color:#e2e8f0; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.rbat-wrap[data-theme="dark"] #rbat-toast .rbat-toast-body { color:#cad3e0; }
.rbat-wrap[data-theme="dark"] #rbat-toast .rbat-toast-close { color:#cbd5e1; }

/* Success and alerts */
.rbat-wrap[data-theme="dark"] .rbat-success { border-color: rgba(45,209,112,.35); background: rgba(45,209,112,.12); color:#b8f3d1; }
.rbat-wrap[data-theme="dark"] .rbat-success-body{ color:#a4e6c1; }
.rbat-wrap[data-theme="dark"] .rbat-note.rbat-note-danger { color:#ff8a8a; }

/* Floor labels and selection badge */
.rbat-wrap[data-theme="dark"] .bp-number{ color:#e2e8f0; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.rbat-wrap[data-theme="dark"] .bp-table.sel::after{
  background:#0f172a; color: var(--rbat-primary);
  box-shadow:0 0 0 1px var(--rbat-primary) inset, 0 2px 8px rgba(0,0,0,.35);
}

/* Scrollbars (canvas) */
.rbat-wrap[data-theme="dark"] .rbat-floor-canvas::-webkit-scrollbar-thumb { background:#23324f; border:2px solid #111c34; }
.rbat-wrap[data-theme="dark"] .rbat-floor-canvas { scrollbar-color: #23324f #111c34; }

/* ===== Consent checkbox layout (mobile-friendly) ===== */
.rbat-consent{ display:flex; align-items:flex-start; gap:6px; margin:0; }
.rbat-consent input[type="checkbox"]{ flex:0 0 auto; margin:3px 0 0 0; }
.rbat-consent-text{ flex:1 1 auto; min-width:0; line-height:1.4; word-break:break-word; overflow-wrap:anywhere; }
.rbat-form .rbat-consent-wrap.full{ grid-column: 1 / -1; }
@media (max-width: 600px){
  .rbat-consent{ gap:6px; }
}