/*
 * VR Point – Booking Widget styles
 * White-card design. Scoped to .vrp-calendar-widget at the root.
 */

/* ── Widget root ────────────────────────────────────────────────────────────── */
.vrp-calendar-widget {
  --vrp-calendar-cyan:     #00d4ff;
  --vrp-calendar-green:    #22c55e;
  --vrp-calendar-text:     #07111f;
  --vrp-calendar-soft:     #475569;
  --vrp-calendar-muted:    #64748b;
  --vrp-calendar-border:   rgba(7,17,31,0.14);

  box-sizing:  border-box;
  width:       100%;
  font-family: Inter, Manrope, Sora, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:   16px;
  line-height: 1.6;
  color:       var(--vrp-calendar-text);
}

.vrp-calendar-widget *,
.vrp-calendar-widget *::before,
.vrp-calendar-widget *::after {
  box-sizing: border-box;
}

/* ── Form card ──────────────────────────────────────────────────────────────── */
.vrp-calendar-form {
  width:         100%;
  padding:       18px;
  border:        1px solid rgba(3,16,24,0.12);
  border-radius: 8px;
  overflow:      hidden;
  color:         #07111f;
  background:    linear-gradient(180deg, #ffffff, #e9f0f8);
  box-shadow:    0 24px 70px rgba(0,0,0,0.34);
}

/* ── Step blocks ────────────────────────────────────────────────────────────── */
.vrp-calendar-step {
  display:       grid;
  gap:           10px;
  margin-bottom: 16px;
  min-width:     0;
}

.vrp-calendar-step-label {
  color:          #07111f;
  font-size:      13px;
  font-weight:    900;
  text-transform: uppercase;
}

/* ── Month tabs ─────────────────────────────────────────────────────────────── */
.vrp-calendar-month-tabs {
  display:         flex;
  gap:             8px;
  overflow-x:      auto;
  padding-bottom:  2px;
  scrollbar-width: none;
}

.vrp-calendar-month-tabs::-webkit-scrollbar { display: none; }

.vrp-calendar-month-tabs button {
  flex:          0 0 auto;
  min-height:    44px;
  border:        1px solid rgba(7,17,31,0.14);
  border-radius: 999px;
  padding:       0 18px;
  color:         #07111f;
  background:    rgba(255,255,255,0.74);
  cursor:        pointer;
  font-weight:   900;
  white-space:   nowrap;
  transition:    background 160ms ease, border-color 160ms ease;
}

.vrp-calendar-month-tabs button.is-selected {
  color:        #031018;
  border-color: transparent;
  background:   linear-gradient(135deg, var(--vrp-calendar-cyan), #9af2ff);
}

/* ── Weekday header ─────────────────────────────────────────────────────────── */
.vrp-calendar-weekdays {
  display:               grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap:                   6px;
  color:                 #64748b;
  font-size:             12px;
  font-weight:           900;
  text-align:            center;
  text-transform:        uppercase;
}

/* ── Date grid ──────────────────────────────────────────────────────────────── */
.vrp-calendar-date-grid {
  display:               grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap:                   6px;
}

.vrp-calendar-date-grid button,
.vrp-calendar-date-empty {
  min-height:    54px;
  border:        1px solid rgba(7,17,31,0.13);
  border-radius: 8px;
  background:    #eef6ff;
}

.vrp-calendar-date-grid button {
  display:    grid;
  gap:        2px;
  padding:    8px 4px;
  color:      #07111f;
  cursor:     pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.vrp-calendar-date-grid button strong {
  font-size:   14px;
  font-weight: 900;
  line-height: 1;
}

.vrp-calendar-date-grid button small {
  color:     #64748b;
  font-size: 10px;
}

.vrp-calendar-date-grid button.is-selected {
  color:        #031018;
  border-color: transparent;
  background:   linear-gradient(135deg, var(--vrp-calendar-cyan), #9af2ff);
}

.vrp-calendar-date-grid button.is-selected small {
  color: rgba(3,16,24,0.65);
}

.vrp-calendar-date-grid button.is-closed {
  color:        #94a3b8;
  border-color: rgba(7,17,31,0.08);
  background:   #e9eef5;
  cursor:       not-allowed;
}

.vrp-calendar-date-grid button:not(.is-closed):not(.is-selected):hover {
  border-color: rgba(0,212,255,0.5);
  background:   #d8f4ff;
}

/* ── Slot groups ────────────────────────────────────────────────────────────── */
.vrp-calendar-slot-groups { min-width: 0; }

.vrp-calendar-slot-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.vrp-calendar-slot-label {
  display:        block;
  margin-top:     12px;
  color:          #64748b;
  font-size:      12px;
  font-weight:    900;
  text-transform: uppercase;
}

/* ── Time chip ──────────────────────────────────────────────────────────────── */
.vrp-calendar-time-chip {
  display:         inline-flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2px;
  min-width:       86px;
  min-height:      50px;
  padding:         0 12px;
  border:          1px solid rgba(7,17,31,0.13);
  border-radius:   8px;
  color:           #07111f;
  background:      #eef6ff;
  cursor:          pointer;
  transition:      background 140ms ease, border-color 140ms ease, transform 120ms ease;
}

.vrp-calendar-time-chip:not(.is-taken):not(.is-selected):hover {
  border-color: rgba(0,212,255,0.5);
  background:   #d8f4ff;
  transform:    translateY(-1px);
}

.vrp-calendar-chip-start {
  font-size:   14px;
  font-weight: 900;
  line-height: 1.1;
}

.vrp-calendar-chip-end {
  color:       #64748b;
  font-size:   10px;
  line-height: 1.1;
}

.vrp-calendar-time-chip.is-late-night:not(.is-taken):not(.is-selected) {
  border-color: rgba(139,92,246,0.25);
  background:   #f3edff;
  color:        #6d28d9;
}

.vrp-calendar-time-chip.is-selected {
  color:        #031018;
  border-color: transparent;
  background:   linear-gradient(135deg, var(--vrp-calendar-cyan), #9af2ff);
}

.vrp-calendar-time-chip.is-selected .vrp-calendar-chip-end {
  color: rgba(3,16,24,0.68);
}

.vrp-calendar-time-chip.is-taken {
  color:          #94a3b8;
  background:     #e9eef5;
  border-color:   rgba(7,17,31,0.07);
  cursor:         not-allowed;
  opacity:        0.55;
  pointer-events: none;
}

.vrp-calendar-time-chip.is-taken .vrp-calendar-chip-start {
  text-decoration:       line-through;
  text-decoration-color: rgba(148,163,184,0.7);
}

/* ── Empty / loading states ─────────────────────────────────────────────────── */
.vrp-calendar-slots-hint,
.vrp-calendar-empty-slots {
  margin:    0;
  color:     #64748b;
  font-size: 13px;
}

.vrp-calendar-slots-loading {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.vrp-calendar-slots-loading span {
  width:           86px;
  min-height:      50px;
  border-radius:   8px;
  background:      linear-gradient(90deg, rgba(7,17,31,0.04), rgba(0,151,209,0.14), rgba(7,17,31,0.04));
  background-size: 220% 100%;
  animation:       vrp-calendar-shimmer 1.2s infinite;
}

@keyframes vrp-calendar-shimmer {
  to { background-position: -220% 0; }
}

/* ── Player quantity ────────────────────────────────────────────────────────── */
.vrp-calendar-qty {
  display:               grid;
  grid-template-columns: 42px 1fr 42px;
  align-items:           center;
  height:                64px;
  border:                1px solid rgba(0,149,205,0.38);
  border-radius:         8px;
  overflow:              hidden;
  background:            rgba(255,255,255,0.84);
}

.vrp-calendar-qty button {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          100%;
  border:          0;
  background:      #dff4ff;
  color:           #06202a;
  font-size:       28px;
  font-weight:     900;
  line-height:     1;
  cursor:          pointer;
  transition:      background 140ms ease;
  user-select:     none;
}

#vrp-calendar-minus { border-right: 1px dashed rgba(0,149,205,0.55); }
#vrp-calendar-plus  { border-left:  1px dashed rgba(0,149,205,0.55); }

.vrp-calendar-qty button:hover  { background: #c0eaff; }
.vrp-calendar-qty button:active { background: #9de0ff; }

.vrp-calendar-qty output {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #07111f;
  font-size:       22px;
  font-weight:     900;
  line-height:     1;
  text-align:      center;
}

/* ── Price hint ─────────────────────────────────────────────────────────────── */
.vrp-calendar-price-hint {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:                   8px;
  margin:                10px 0 12px;
}

.vrp-calendar-price-hint-row {
  display:       grid;
  gap:           2px;
  padding:       10px 12px;
  border:        1px solid rgba(7,17,31,0.08);
  border-radius: 8px;
  background:    rgba(255,255,255,0.72);
}

.vrp-calendar-price-hint-icon { font-size: 14px; line-height: 1; }

.vrp-calendar-price-hint-label {
  color:       #64748b;
  font-size:   12px;
  font-weight: 400;
}

.vrp-calendar-price-hint-label small { color: #94a3b8; font-size: 11px; }

.vrp-calendar-price-hint-val {
  color:       #07111f;
  font-size:   13px;
  font-weight: 900;
  white-space: nowrap;
}

/* ── Privacy hint ───────────────────────────────────────────────────────────── */
.vrp-calendar-privacy-hint {
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
  padding:       10px 13px;
  border:        1px solid rgba(7,17,31,0.08);
  border-left:   2px solid rgba(0,149,205,0.55);
  border-radius: 6px;
  background:    rgba(255,255,255,0.6);
}

.vrp-calendar-privacy-hint-icon { font-size: 14px; line-height: 1.5; flex-shrink: 0; }

.vrp-calendar-privacy-hint p {
  margin:      0;
  color:       #64748b;
  font-size:   12px;
  line-height: 1.55;
}

/* ── Contact fields ─────────────────────────────────────────────────────────── */
.vrp-calendar-contact-grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:                   10px;
}

/*
 * display:grid !important — prevents theme label rules (e.g. .entry-content label)
 * from collapsing grid to block and breaking gap-based spacing.
 * align-content:start — labels always anchor to top, inputs stay aligned
 * when the two columns differ in height.
 */
.vrp-calendar-field {
  display:       grid !important;
  align-content: start;
  gap:           7px;
  margin-bottom: 18px;
}

.vrp-calendar-field > span {
  color:       #07111f;
  font-size:   14px;
  font-family: inherit !important;
  font-weight: 800;
  line-height: 1.3;
}

/*
 * height:50px on all input types (text, tel, email) ensures identical
 * box height regardless of browser UA styles for specific input types.
 */
.vrp-calendar-field input,
.vrp-calendar-field textarea {
  width:              100%;
  height:             50px;
  border:             1px solid rgba(7,17,31,0.16);
  border-radius:      8px;
  padding:            0 14px;
  color:              #07111f;
  background:         rgba(255,255,255,0.9);
  outline:            none;
  font:               inherit;
  font-family:        inherit !important; /* prevent theme rules from overriding the widget font */
  font-size:          15px;
  line-height:        50px;
  transition:         border-color 160ms ease, box-shadow 160ms ease;
  appearance:         none;
  -webkit-appearance: none;
}

.vrp-calendar-field textarea {
  height:      auto;
  min-height:  68px;
  line-height: 1.5;
  padding:     10px 14px;
  resize:      vertical;
}

.vrp-calendar-field input::placeholder,
.vrp-calendar-field textarea::placeholder {
  font-family: inherit;
}

.vrp-calendar-field input:focus,
.vrp-calendar-field textarea:focus {
  border-color: rgba(0,212,255,0.75);
  box-shadow:   0 0 0 3px rgba(0,212,255,0.12);
}

/* ── Labels / helpers ───────────────────────────────────────────────────────── */
.vrp-calendar-required     { color: rgba(0,149,205,0.8); font-size: 13px; font-weight: 700; margin-left: 2px; }
.vrp-calendar-field-optional { color: #94a3b8; font-size: 11px; font-weight: 400; margin-left: 3px; }
.vrp-calendar-microcopy    { margin: 0; color: #64748b; font-size: 13px; }

.vrp-calendar-error {
  display:    block;
  min-height: 16px;
  color:      #ff8ba1;
  font-size:  12px;
  line-height: 1.3;
}

/* ── Submit button ──────────────────────────────────────────────────────────── */
.vrp-calendar-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-height:      56px;
  padding:         0 22px;
  border:          1px solid transparent;
  border-radius:   999px;
  font:            inherit;
  font-weight:     900;
  font-size:       15px;
  line-height:     1.1;
  white-space:     nowrap;
  cursor:          pointer;
  text-decoration: none;
  transition:      transform 180ms ease, box-shadow 180ms ease;
}

.vrp-calendar-btn:hover { transform: translateY(-2px); }

.vrp-calendar-btn-submit {
  width:      100%;
  color:      #031018;
  background: linear-gradient(135deg, var(--vrp-calendar-cyan), #9af2ff);
  box-shadow: 0 0 24px rgba(0,212,255,0.28);
}

.vrp-calendar-btn-submit:hover    { box-shadow: 0 0 34px rgba(0,212,255,0.42); }
.vrp-calendar-btn-submit:disabled { cursor: wait; opacity: 0.72; }

.vrp-calendar-btn-outline {
  color:        #e2e8f0;
  background:   transparent;
  border-color: rgba(255,255,255,0.22);
}
.vrp-calendar-btn-outline:hover { background: rgba(255,255,255,0.07); }

.vrp-calendar-btn-whatsapp {
  color:      #06110b;
  background: linear-gradient(135deg, #1fd869, #9ef6bd);
  box-shadow: 0 0 18px rgba(34,197,94,0.18);
}

/* ── Under-CTA ──────────────────────────────────────────────────────────────── */
.vrp-calendar-under-cta {
  margin-top: 12px;
  color:      #64748b;
  font-size:  13px;
  text-align: center;
}

.vrp-calendar-under-cta a {
  color:                 #0089bd;
  font-weight:           800;
  text-decoration:       underline;
  text-underline-offset: 4px;
}

/* ── Success modal ──────────────────────────────────────────────────────────── */
.vrp-calendar-modal {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  display:         grid;
  place-items:     center;
  padding:         20px;
  background:      rgba(5,7,13,0.72);
  backdrop-filter: blur(12px);
}

.vrp-calendar-modal:not(.is-open) { display: none !important; }

.vrp-calendar-modal-card {
  position:      relative;
  width:         min(520px, 100%);
  padding:       28px;
  border:        1px solid rgba(0,212,255,0.36);
  border-radius: 8px;
  background:    #0b1020;
  box-shadow:    0 0 60px rgba(0,212,255,0.22);
  color:         #ffffff;
}

.vrp-calendar-modal-card h3 { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.15; color: #ffffff; }
.vrp-calendar-modal-card p  { color: #b8c2d6; }

.vrp-calendar-eyebrow {
  margin:         0 0 10px;
  color:          var(--vrp-calendar-cyan);
  font-size:      12px;
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vrp-calendar-modal-close {
  position:      absolute;
  top:           14px;
  right:         14px;
  width:         34px;
  height:        34px;
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color:         #b8c2d6;
  background:    rgba(255,255,255,0.05);
  cursor:        pointer;
  font-size:     16px;
  line-height:   1;
}

.vrp-calendar-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vrp-calendar-modal-actions .vrp-calendar-btn { min-width: 200px; }

/* ── Dark theme ─────────────────────────────────────────────────────────────── */
.vrp-calendar-theme-dark {
  --vrp-calendar-text:   #e2e8f0;
  --vrp-calendar-soft:   #94a3b8;
  --vrp-calendar-muted:  #64748b;
  --vrp-calendar-border: rgba(255,255,255,0.1);
  color: #e2e8f0;
}

.vrp-calendar-theme-dark .vrp-calendar-form {
  color:      #e2e8f0;
  background: linear-gradient(180deg, #07111f, #030a12);
  border:     1px solid rgba(0,212,255,0.15);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}

/* Step label */
.vrp-calendar-theme-dark .vrp-calendar-step-label { color: #e2e8f0; }
.vrp-calendar-theme-dark .vrp-calendar-microcopy  { color: #64748b; }

/* Month tabs */
.vrp-calendar-theme-dark .vrp-calendar-month-tabs button {
  background:   rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color:        #e2e8f0;
}
.vrp-calendar-theme-dark .vrp-calendar-month-tabs button.is-selected { color: #031018; }

/* Weekday header */
.vrp-calendar-theme-dark .vrp-calendar-weekdays { color: #475569; }

/* Date grid */
.vrp-calendar-theme-dark .vrp-calendar-date-grid button,
.vrp-calendar-theme-dark .vrp-calendar-date-empty {
  background:   rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.09);
}
.vrp-calendar-theme-dark .vrp-calendar-date-grid button         { color: #e2e8f0; }
.vrp-calendar-theme-dark .vrp-calendar-date-grid button small   { color: #475569; }
.vrp-calendar-theme-dark .vrp-calendar-date-grid button.is-closed {
  background:   rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.05);
  color:        #334155;
}
.vrp-calendar-theme-dark .vrp-calendar-date-grid button:not(.is-closed):not(.is-selected):hover {
  background:   rgba(0,212,255,0.1);
  border-color: rgba(0,212,255,0.35);
}
.vrp-calendar-theme-dark .vrp-calendar-date-grid button.is-selected         { color: #031018; }
.vrp-calendar-theme-dark .vrp-calendar-date-grid button.is-selected small   { color: rgba(3,16,24,0.65); }

/* Slot label */
.vrp-calendar-theme-dark .vrp-calendar-slot-label     { color: #475569; }
.vrp-calendar-theme-dark .vrp-calendar-slots-hint,
.vrp-calendar-theme-dark .vrp-calendar-empty-slots    { color: #64748b; }

/* Time chips */
.vrp-calendar-theme-dark .vrp-calendar-time-chip {
  background:   rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.09);
  color:        #e2e8f0;
}
.vrp-calendar-theme-dark .vrp-calendar-time-chip:not(.is-taken):not(.is-selected):hover {
  background:   rgba(0,212,255,0.1);
  border-color: rgba(0,212,255,0.35);
}
.vrp-calendar-theme-dark .vrp-calendar-time-chip.is-selected         { color: #031018; }
.vrp-calendar-theme-dark .vrp-calendar-time-chip.is-selected .vrp-calendar-chip-end { color: rgba(3,16,24,0.68); }
.vrp-calendar-theme-dark .vrp-calendar-time-chip.is-taken            { background: rgba(255,255,255,0.02); }
.vrp-calendar-theme-dark .vrp-calendar-chip-end                      { color: #475569; }
.vrp-calendar-theme-dark .vrp-calendar-time-chip.is-late-night:not(.is-taken):not(.is-selected) {
  background:   rgba(109,40,217,0.18);
  border-color: rgba(139,92,246,0.28);
  color:        #a78bfa;
}

/* Shimmer skeleton */
.vrp-calendar-theme-dark .vrp-calendar-slots-loading span {
  background:      linear-gradient(90deg, rgba(255,255,255,0.03), rgba(0,212,255,0.09), rgba(255,255,255,0.03));
  background-size: 220% 100%;
}

/* Player qty */
.vrp-calendar-theme-dark .vrp-calendar-qty {
  background:   rgba(255,255,255,0.04);
  border-color: rgba(0,149,205,0.28);
}
.vrp-calendar-theme-dark .vrp-calendar-qty button         { background: rgba(0,212,255,0.09); color: #e2e8f0; }
.vrp-calendar-theme-dark .vrp-calendar-qty button:hover   { background: rgba(0,212,255,0.17); }
.vrp-calendar-theme-dark .vrp-calendar-qty button:active  { background: rgba(0,212,255,0.24); }
.vrp-calendar-theme-dark .vrp-calendar-qty output         { color: #e2e8f0; }
.vrp-calendar-theme-dark #vrp-calendar-minus              { border-right-color: rgba(0,149,205,0.28); }
.vrp-calendar-theme-dark #vrp-calendar-plus               { border-left-color:  rgba(0,149,205,0.28); }

/* Price hint */
.vrp-calendar-theme-dark .vrp-calendar-price-hint-row    { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); }
.vrp-calendar-theme-dark .vrp-calendar-price-hint-label  { color: #64748b; }
.vrp-calendar-theme-dark .vrp-calendar-price-hint-label small { color: #475569; }
.vrp-calendar-theme-dark .vrp-calendar-price-hint-val    { color: #e2e8f0; }

/* Privacy hint */
.vrp-calendar-theme-dark .vrp-calendar-privacy-hint {
  background:  rgba(255,255,255,0.03);
  border-color:      rgba(255,255,255,0.06);
  border-left-color: rgba(0,149,205,0.38);
}
.vrp-calendar-theme-dark .vrp-calendar-privacy-hint p { color: #64748b; }

/* Contact fields */
.vrp-calendar-theme-dark .vrp-calendar-field > span { color: #e2e8f0; }
.vrp-calendar-theme-dark .vrp-calendar-field input,
.vrp-calendar-theme-dark .vrp-calendar-field textarea {
  background:   rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color:        #e2e8f0;
}
.vrp-calendar-theme-dark .vrp-calendar-field input::placeholder,
.vrp-calendar-theme-dark .vrp-calendar-field textarea::placeholder { color: #475569; }
.vrp-calendar-theme-dark .vrp-calendar-field input:focus,
.vrp-calendar-theme-dark .vrp-calendar-field textarea:focus {
  border-color: rgba(0,212,255,0.55);
  box-shadow:   0 0 0 3px rgba(0,212,255,0.09);
}

/* Under-CTA */
.vrp-calendar-theme-dark .vrp-calendar-under-cta   { color: #64748b; }
.vrp-calendar-theme-dark .vrp-calendar-under-cta a { color: #38b2e0; }

/* ── Font families ──────────────────────────────────────────────────────────── */
/* Inter is the default (set on .vrp-calendar-widget), no extra class needed.           */
.vrp-calendar-font-sora       { font-family: 'Sora',        system-ui, -apple-system, sans-serif !important; }
.vrp-calendar-font-montserrat { font-family: 'Montserrat',  system-ui, -apple-system, sans-serif !important; }
.vrp-calendar-font-poppins    { font-family: 'Poppins',     system-ui, -apple-system, sans-serif !important; }
.vrp-calendar-font-system     { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }

/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .vrp-calendar-form            { padding: 16px; }
  .vrp-calendar-contact-grid    { grid-template-columns: 1fr; gap: 0; }

  .vrp-calendar-month-tabs button { min-height: 40px; padding: 0 14px; font-size: 13px; }

  .vrp-calendar-date-grid          { gap: 4px; }
  .vrp-calendar-date-grid button,
  .vrp-calendar-date-empty         { min-height: 42px; }
  .vrp-calendar-date-grid button   { padding: 5px 2px; font-size: 14px; }
  .vrp-calendar-date-grid button small { display: none; }

  .vrp-calendar-slot-row {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:                   8px;
  }

  .vrp-calendar-time-chip  { width: 100%; min-width: 0; padding: 0 8px; }
  .vrp-calendar-chip-start { font-size: 13px; }

  .vrp-calendar-slots-loading {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .vrp-calendar-slots-loading span { width: 100%; }

  .vrp-calendar-price-hint { grid-template-columns: 1fr; }
  .vrp-calendar-qty        { grid-template-columns: 44px 1fr 44px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vrp-calendar-widget *, .vrp-calendar-widget *::before, .vrp-calendar-widget *::after {
    transition: none !important;
    animation:  none !important;
  }
}