/* VR ARENA booking widget — matched to the live site design (Assistant font,
   dark purple-black grounds, neon green action, neon purple accent). */
.vrab-app {
  --ground: #0B0811; --surface: #171320; --surface-2: #211B2C;
  --ink: #FFFFFF; --ink-soft: #BEB9C7; --line: #2C2438;
  --violet: #B84CFF; --violet-deep: #D28BFF; --sun: #FFC24B;
  --green: #78F500; --green-soft: #16250A; --amber-soft: #2E2610;
  --on-violet: #FFFFFF; --on-green: #FFFFFF; --glow: 0 0 22px;
  --shadow: 0 14px 44px rgba(0,0,0,.6); --shadow-sm: 0 2px 12px rgba(0,0,0,.5);
  --radius: 16px;
  box-sizing: border-box; direction: rtl; color: var(--ink);
  /* Assistant is the live-site font; the plugin enqueues it so this always matches. */
  font-family: "Assistant", "Heebo", "Segoe UI", system-ui, sans-serif;
  background: var(--ground); border-radius: 20px; padding: 20px;
  max-width: 860px; margin: 0 auto; line-height: 1.5;
}
.vrab-app[data-theme="light"] {
  --ground: #F5F2FC; --surface: #FFFFFF; --surface-2: #F1ECFA;
  --ink: #160E22; --ink-soft: #5E5570; --line: #E4DCF2;
  --violet: #7A1FD6; --violet-deep: #5F12AC; --sun: #C98A00;
  --green: #3E8E00; --green-soft: #EAF7D8; --amber-soft: #FBEECC;
  --on-violet: #fff; --on-green: #fff; --glow: none;
  --shadow: 0 8px 30px rgba(60,20,110,.10); --shadow-sm: 0 2px 8px rgba(60,20,110,.08);
}
/* Transparent embed for a pre-styled Elementor section: [vr_arena_booking chrome="off"] */
.vrab-app.vrab-bare { background: transparent; padding: 0; border-radius: 0; max-width: none; box-shadow: none; }
.vrab-app *, .vrab-app *::before, .vrab-app *::after { box-sizing: border-box; }
.vrab-loading { text-align: center; padding: 40px; color: var(--ink-soft); }

.vrab-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; margin-bottom: 14px; }
.vrab-card h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.vrab-step { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--violet); color: var(--on-violet); border-radius: 7px; font-size: 13px; font-weight: 800; }
.vrab-hint { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }

.vrab-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.vrab-track { text-align: start; cursor: pointer; border: 2px solid var(--line); background: var(--surface-2); border-radius: 14px; padding: 15px; transition: all .15s; display: flex; gap: 12px; align-items: flex-start; font: inherit; color: inherit; }
.vrab-track:hover { border-color: var(--violet); }
.vrab-track.sel { border-color: var(--violet); box-shadow: var(--glow) color-mix(in srgb, var(--violet) 30%, transparent); }
.vrab-track .em { font-size: 28px; line-height: 1; }
.vrab-track b { display: block; font-size: 15px; font-weight: 800; }
.vrab-track span { font-size: 12.5px; color: var(--ink-soft); }

/* Arrows are absolutely positioned so left:0 is ALWAYS physical-left and
   right:0 ALWAYS physical-right, independent of RTL flex ordering. */
.vrab-dates-wrap { position: relative; }
.vrab-nav { position: absolute; top: 6px; bottom: 14px; width: 36px; z-index: 2; border: 0; cursor: pointer; border-radius: 10px; background: color-mix(in srgb, var(--violet) 24%, var(--surface)); color: #fff; font-size: 22px; font-weight: 800; line-height: 1; display: grid; place-items: center; transition: background .15s, transform .1s; box-shadow: var(--shadow-sm); }
.vrab-nav-left { left: 0; }
.vrab-nav-right { right: 0; }
.vrab-nav:hover { background: var(--violet); }
.vrab-nav:active { transform: scale(.94); }
.vrab-dates { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 6px 44px 14px; scrollbar-width: thin; scrollbar-color: var(--violet) transparent; }
.vrab-dates::-webkit-scrollbar { height: 8px; }
.vrab-dates::-webkit-scrollbar-track { background: color-mix(in srgb, var(--line) 45%, transparent); border-radius: 999px; margin: 0 4px; }
.vrab-dates::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 999px; }
.vrab-dates::-webkit-scrollbar-thumb:hover { background: var(--violet-deep); }
.vrab-date { flex: none; width: 62px; text-align: center; cursor: pointer; border: 2px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 9px 0; font: inherit; color: inherit; transition: all .15s; }
.vrab-date:hover { border-color: var(--violet); }
.vrab-date.sel { border-color: var(--violet); background: var(--violet); color: var(--on-violet); box-shadow: var(--glow) color-mix(in srgb, var(--violet) 40%, transparent); }
.vrab-date .dow { font-size: 12px; color: var(--ink-soft); }
.vrab-date.sel .dow, .vrab-date.sel .mon { color: color-mix(in srgb, var(--on-violet) 80%, transparent); }
.vrab-date .dnum { font-size: 19px; font-weight: 800; }
.vrab-date .mon { font-size: 11px; color: var(--ink-soft); }

.vrab-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px,1fr)); gap: 8px; }
.vrab-slot { cursor: pointer; border: 2px solid var(--line); background: var(--surface-2); border-radius: 11px; padding: 10px 6px; text-align: center; font: inherit; color: inherit; transition: all .12s; }
.vrab-slot .t { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vrab-slot .s { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.vrab-slot.free:hover { border-color: var(--green); }
.vrab-slot.sel { border-color: var(--violet); background: var(--violet); color: var(--on-violet); box-shadow: var(--glow) color-mix(in srgb, var(--violet) 45%, transparent); }
.vrab-slot.sel .s { color: color-mix(in srgb, var(--on-violet) 78%, transparent); }
.vrab-slot.span { border-color: var(--green); background: var(--green-soft); }
.vrab-slot.booked { opacity: .5; cursor: not-allowed; }
.vrab-slot.booked .s { color: #ff7676; }
.vrab-slot.pending { cursor: not-allowed; border-color: var(--sun); background: var(--amber-soft); }
.vrab-slot.closed { opacity: .4; cursor: not-allowed; background: transparent; border-style: dashed; }

.vrab-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--ink-soft); }
.vrab-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vrab-dot { width: 11px; height: 11px; border-radius: 4px; border: 2px solid; }

.vrab-party { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vrab-stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 12px; padding: 5px; }
.vrab-stepper button { width: 40px; height: 40px; border: 0; border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 24px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-sm); display: grid; place-items: center; line-height: 1; padding: 0; }
.vrab-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.vrab-stepper .val { min-width: 52px; text-align: center; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vrab-range { font-size: 13px; color: var(--ink-soft); }
.vrab-price { margin-inline-start: auto; text-align: end; background: var(--green-soft); border-radius: 13px; padding: 11px 18px; }
.vrab-price .amt { font-size: 28px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.vrab-price .per { font-size: 12.5px; color: var(--ink-soft); }

.vrab-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.vrab-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; }
.vrab-fields label.full { grid-column: 1 / -1; }
.vrab-fields input { font: inherit; padding: 11px 13px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); }
.vrab-fields input:focus { outline: 2px solid var(--violet); border-color: var(--violet); }

.vrab-cta { width: 100%; margin-top: 4px; border: 0; border-radius: 12px; cursor: pointer; background: var(--green); color: var(--on-green); font: inherit; font-weight: 800; font-size: 18px; padding: 15px; box-shadow: var(--shadow), var(--glow) color-mix(in srgb, var(--green) 40%, transparent); transition: transform .1s, filter .15s; }
.vrab-cta:hover { filter: brightness(1.08); }
.vrab-cta:active { transform: translateY(1px); }
.vrab-cta:disabled { opacity: .5; cursor: not-allowed; }

.vrab-error { color: #ff7676; font-size: 13px; margin-top: 8px; min-height: 1em; }
.vrab-confirm { text-align: center; padding: 26px 18px; }
.vrab-confirm .big { font-size: 48px; }
.vrab-confirm h3 { justify-content: center; font-size: 22px; margin: 10px 0 6px; }
.vrab-confirm p { color: var(--ink-soft); max-width: 430px; margin: 0 auto 16px; }
.vrab-summary { text-align: start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; max-width: 440px; margin: 0 auto; font-size: 14px; }
.vrab-summary .row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.vrab-summary .row:last-child { border: 0; }

/* Responsive: viewport media queries. (Container queries were dropped — the
   container-type property caused a large empty gap under the widget on mobile.) */
@media (max-width: 560px) {
  .vrab-tracks, .vrab-fields { grid-template-columns: 1fr; }
  .vrab-price { margin-inline-start: 0; width: 100%; text-align: start; }
}
@media (max-width: 430px) {
  .vrab-app { padding: 14px; }
  .vrab-card { padding: 14px; }
  .vrab-party { gap: 10px; }
  .vrab-price .amt { font-size: 24px; }
  .vrab-stepper button { width: 36px; height: 36px; font-size: 20px; }
  .vrab-slots { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* ============================================================
   Site-embed overrides. When the widget sits inside the Elementor
   page, the theme paints a purple→green gradient on every <button>.
   We take explicit control so text stays readable and the selected
   date/slot (green) is clearly distinct from the unselected (purple).
   ============================================================ */
.vrab-app {
  --grad-cta: linear-gradient(120deg, #B84CFF 0%, #78F500 135%);
  --grad-green: linear-gradient(135deg, #57BB00 0%, #8BE81E 100%);
  --grad-purple: linear-gradient(135deg, #7A2CB6 0%, #A63EF0 100%);
  --on-grad-green: #0A1A00;
  --tshadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* Track cards: dark + readable when unselected, green when selected. */
.vrab-app .vrab-track { background: var(--surface-2) !important; background-image: none !important; }
.vrab-app .vrab-track b { color: var(--ink); }
.vrab-app .vrab-track span { color: var(--ink-soft); }
.vrab-app .vrab-track.sel { background: var(--grad-green) !important; border-color: transparent !important; }
.vrab-app .vrab-track.sel b { color: var(--on-grad-green); }
.vrab-app .vrab-track.sel span { color: rgba(10, 26, 0, .78); }

/* Dates: unselected purple, selected green — both readable. */
.vrab-app .vrab-date { background: var(--grad-purple) !important; color: #fff !important; border-color: transparent !important; text-shadow: var(--tshadow); }
.vrab-app .vrab-date .dow, .vrab-app .vrab-date .mon { color: rgba(255, 255, 255, .85) !important; }
.vrab-app .vrab-date.sel { background: var(--grad-green) !important; color: var(--on-grad-green) !important; text-shadow: none; box-shadow: 0 0 0 2px #fff, var(--glow) color-mix(in srgb, #78F500 55%, transparent); }
.vrab-app .vrab-date.sel .dow, .vrab-app .vrab-date.sel .mon { color: rgba(10, 26, 0, .82) !important; }

/* Slots: available purple, selected green, statuses stay muted + readable. */
.vrab-app .vrab-slot.free { background: var(--grad-purple) !important; color: #fff !important; border-color: transparent !important; text-shadow: var(--tshadow); }
.vrab-app .vrab-slot.free .s { color: rgba(255, 255, 255, .85) !important; }
.vrab-app .vrab-slot.span { background: color-mix(in srgb, #78F500 20%, var(--surface)) !important; background-image: none !important; color: var(--ink) !important; }
.vrab-app .vrab-slot.sel { background: var(--grad-green) !important; color: var(--on-grad-green) !important; text-shadow: none; box-shadow: 0 0 0 2px #fff, var(--glow) color-mix(in srgb, #78F500 55%, transparent); }
.vrab-app .vrab-slot.sel .s { color: rgba(10, 26, 0, .8) !important; }
.vrab-app .vrab-slot.pending { background: var(--amber-soft) !important; background-image: none !important; color: var(--ink) !important; }
.vrab-app .vrab-slot.pending .s { color: var(--sun) !important; }
.vrab-app .vrab-slot.booked { background: rgba(255, 118, 118, .12) !important; background-image: none !important; }
.vrab-app .vrab-slot.booked .s { color: #ff7676 !important; }
.vrab-app .vrab-slot.closed { background: transparent !important; background-image: none !important; }

/* Stepper +/- : brand-violet tint with white glyph, centered. */
.vrab-app .vrab-stepper button { background: color-mix(in srgb, var(--violet) 22%, var(--surface)) !important; background-image: none !important; color: #fff !important; }
.vrab-app .vrab-stepper button:hover:not(:disabled) { background: var(--violet) !important; }
.vrab-app .vrab-stepper button:disabled { color: var(--ink-soft) !important; }
.vrab-app .vrab-step { background: var(--violet) !important; background-image: none !important; color: #fff !important; }

/* Main CTA: the site's purple→green gradient with readable white text. */
.vrab-app .vrab-cta { background: var(--grad-cta) !important; color: #fff !important; text-shadow: var(--tshadow); }
.vrab-app .vrab-cta:disabled { opacity: .55; }