/* ---- ORGX Consultant Booking widget ----
   Matches the host theme's brand tokens (orbicul-brand.css) so the
   booking page never looks like a bolted-on plugin. Falls back to
   sane defaults if those custom properties aren't present (e.g. the
   plugin is ever used on a different theme). */

.orgx-cb-widget{
  max-width:38rem; margin:0 auto;
  font-family:'Raleway',system-ui,-apple-system,sans-serif;
}

.orgx-cb-label{
  font-size:.8rem; font-weight:700; letter-spacing:.02em;
  color:var(--accent,#95C11F); margin:0 0 .6rem;
}
.orgx-cb-heading{
  font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:700; line-height:1.15;
  color:var(--text,#F2F5F7); margin:0 0 .7rem;
}
.orgx-cb-intro{
  font-size:1.05rem; color:var(--muted,#8B96A3); margin:0 0 2rem; max-width:34rem;
}

.orgx-cb-tz-note{ font-size:.82rem; color:var(--muted,#8B96A3); margin-bottom:1.4rem; }

.orgx-cb-day{ margin-bottom:1.8rem; }
.orgx-cb-day h4{
  margin:0 0 .8rem; font-size:.95rem; font-weight:700; color:var(--text,#F2F5F7);
}
.orgx-cb-slots{ display:flex; flex-wrap:wrap; gap:.7rem; }
.orgx-cb-slot{
  padding:.75rem 1.3rem; border:1px solid var(--border,#1E2A35); border-radius:var(--radius,10px);
  background:var(--surface,#0E141B); color:var(--text,#F2F5F7);
  cursor:pointer; font-size:.95rem; font-weight:600; font-family:inherit;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
  transform-origin:center;
}
.orgx-cb-slot:hover, .orgx-cb-slot:focus-visible{
  border-color:var(--accent,#95C11F); color:var(--accent-strong,#B4E23A); outline:none;
  transform:scale(1.04);
}
.orgx-cb-empty{ color:var(--muted,#8B96A3); font-size:1rem; }

.orgx-cb-back{
  background:none; border:none; color:var(--muted,#8B96A3); cursor:pointer;
  padding:0; margin-bottom:1.4rem; font-size:.9rem; font-family:inherit;
  transition:color .15s ease;
}
.orgx-cb-back:hover{ color:var(--accent,#95C11F); }

.orgx-cb-selected-time{
  font-weight:700; font-size:1.15rem; color:var(--text,#F2F5F7); margin:0 0 1.6rem;
}

.orgx-cb-form p{ margin:0 0 1.1rem; }
.orgx-cb-form label{
  display:block; font-size:.85rem; font-weight:600; color:var(--muted,#8B96A3); margin-bottom:.4rem;
}
.orgx-cb-form input, .orgx-cb-form textarea{
  width:100%; padding:.85rem 1rem; border-radius:var(--radius,10px); border:1px solid var(--border,#1E2A35);
  background:var(--bg,#060A0F); color:var(--text,#F2F5F7); font-family:inherit; font-size:.95rem;
}
.orgx-cb-form input:focus, .orgx-cb-form textarea:focus{
  outline:none; border-color:var(--accent,#95C11F);
  box-shadow:0 0 6px 1px color-mix(in srgb, var(--accent,#95C11F) 55%, transparent);
}

.orgx-cb-submit{
  display:inline-block; padding:.85rem 1.6rem; border-radius:var(--radius,10px); border:1px solid var(--accent,#95C11F);
  cursor:pointer; background:var(--accent,#95C11F); color:var(--accent-ink,#06110A);
  font-weight:600; font-size:.98rem; font-family:inherit; letter-spacing:.02em;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
  transform-origin:center;
}
.orgx-cb-submit:hover{ background:var(--accent-strong,#B4E23A); border-color:var(--accent-strong,#B4E23A); transform:scale(1.03); }
.orgx-cb-submit[disabled]{ opacity:.6; cursor:default; transform:none; }

.orgx-cb-error{ color:#E3554F; font-size:.9rem; margin-top:.9rem; }

.orgx-cb-step-done{
  padding:2rem; border:1px solid var(--border,#1E2A35); border-radius:var(--radius,10px);
  background:var(--surface,#0E141B);
}
.orgx-cb-step-done p{ font-size:1.1rem; color:var(--text,#F2F5F7); margin:0; }

/* Safety padding for narrow phones when this widget is dropped
   somewhere with no side padding of its own (a raw shortcode/block
   rather than inside a themed page wrapper) — harmless no-op when the
   host page already provides its own gutter. */
@media (max-width:480px){
  .orgx-cb-widget{ padding-inline:.25rem; }
}

/* ── Weekly grid layout for the shared widget's day list ─────────────────────
   Centralised here from 4 near-identical per-theme copies (orbicul-v1,
   ORGX Clean v1, ORGX Digital Services v2, orgx-theme-launch-*) — each
   theme's own assets/scheduler.js builds this by moving (never cloning)
   the .orgx-cb-day elements above into Mon–Fri columns, one week at a
   time. Uses the same var(--token, fallback) pattern as the rest of this
   file so each theme's own brand tokens (already proven to resolve here,
   see the accent/muted/text/border/surface/radius usage above) apply
   without any per-theme override needed. */
.orgx-cb-weekgrid__nav{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.8rem;
}
.orgx-cb-weekgrid__label{
  font-size:.85rem; font-weight:700; color:var(--muted,#8B96A3);
  min-width:140px; text-align:center;
}
.orgx-cb-weekgrid__navbtn{
  width:28px; height:28px; border-radius:var(--radius,10px);
  border:1px solid var(--border,#1E2A35); background:var(--surface,#0E141B); color:var(--muted,#8B96A3);
  cursor:pointer; font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.orgx-cb-weekgrid__navbtn:hover:not(:disabled){ border-color:var(--accent,#95C11F); color:var(--accent,#95C11F); }
.orgx-cb-weekgrid__navbtn:disabled{ opacity:.35; cursor:not-allowed; }

.orgx-cb-weekgrid__panel{
  display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; margin-bottom:1.8rem;
}
.orgx-cb-weekgrid__panel[hidden]{ display:none; }

/* Grid items default to min-width:auto, so a column with long unbreakable
   content ("Wednesday 16 September") expands past its 1fr share to fit
   that text — squeezing the empty Mon/Tue columns down to a sliver
   instead of 5 genuinely equal columns. min-width:0 lets the day heading
   wrap/truncate inside its own column instead of resizing the column. */
.orgx-cb-weekgrid__col{ min-width:0; }

.orgx-cb-weekgrid__col.orgx-cb-day{ margin-bottom:0; }
/* Higher specificity than .orgx-cb-day h4 above (font-size .95rem) —
   populated day columns keep BOTH classes (.orgx-cb-day from this file,
   .orgx-cb-weekgrid__col added by scheduler.js), so without this the
   plain .orgx-cb-day h4 rule wins on source order and the heading renders
   noticeably bigger than the empty-day placeholder next to it. min-height
   reserves space for 2 lines regardless of whether THIS day's name
   happens to wrap to 1 or 2 lines — without it, a short name makes its
   own column shorter than its neighbours, which visibly knocks that
   column's first time-slot row out of horizontal alignment with the rest. */
.orgx-cb-weekgrid__col.orgx-cb-day h4,
.orgx-cb-weekgrid__col--empty h4{
  text-align:center; font-size:.72rem; line-height:1.3; min-height:2.6em;
  margin:0 0 .6rem; white-space:normal; overflow-wrap:break-word;
}
.orgx-cb-weekgrid__col .orgx-cb-slots{ display:flex; flex-direction:column; gap:.4rem; }
.orgx-cb-weekgrid__col .orgx-cb-slot{ width:100%; }

.orgx-cb-weekgrid__col--empty{ display:flex; flex-direction:column; align-items:center; }
.orgx-cb-weekgrid__col--empty h4{ font-weight:700; color:var(--text,#F2F5F7); }
.orgx-cb-weekgrid__daydate{ display:block; font-weight:400; color:var(--muted,#8B96A3); font-size:.7rem; margin-top:.2rem; }
.orgx-cb-weekgrid__noavail{ color:var(--muted,#8B96A3); opacity:.4; padding-top:.5rem; }

@media (max-width:680px){
  .orgx-cb-weekgrid__panel{ grid-template-columns:repeat(5,minmax(56px,1fr)); gap:.3rem; overflow-x:auto; }
  .orgx-cb-weekgrid__label{ min-width:0; font-size:.75rem; }

  /* The day heading above is a full "Wednesday 16 September" — fine in a
     5-per-row desktop grid, but overlaps the next column at these
     narrower widths. Truncate rather than let it collide. Selectors must
     match (or exceed) the base rule's specificity
     (.orgx-cb-weekgrid__col.orgx-cb-day h4), or it loses to that rule's
     white-space:normal regardless of this media query. */
  .orgx-cb-weekgrid__col.orgx-cb-day h4,
  .orgx-cb-weekgrid__col--empty h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
  }
}