/* =============================================================
   VIDEO-CALL-BOOKING.CSS
   "Book a Video Call" section — slot picker + booking form.
   Depends on: global.css

   Local tokens now point at the global.css palette instead of
   redeclaring their own hex values:
     - --ink was #111111 (global's --color-primary-black is #0A1628 —
       close enough that unifying it removes a second near-duplicate
       "black" from the codebase)
     - --indigo was #4F46A5 — a second accent color. global.css
       already retired the second accent and aliases
       --color-primary-indigo to the single brand orange, so this
       section's icons/underlines/active-states now render in the
       same orange as the rest of the site instead of purple.
   Fonts normalized from hardcoded 'Inter'/'Lora' names to the
   --font-body/--font-heading variables (both resolve to Inter,
   per the site's single-typeface system).

   Bug fix: removed `.vc-body{ width:400px }` that was overriding
   the fluid layout inside the 640px breakpoint — it forced a fixed
   400px width on phones narrower than that, which would overflow.

   Mobile time picker: below 640px, video-call-booking.php's JS now
   renders a native <select> (.vc-slot-select) instead of the
   .vc-slots button grid — a grid of small buttons is easy to hit
   with a mouse but fiddly to tap precisely on a phone; the dropdown
   opens the OS's own picker UI instead.
   ============================================================= */

:root{
  --ink: var(--color-primary-black);
  --canvas: var(--color-neutral-canvas);
  --grid: var(--color-neutral-grid-gray);
  --indigo: var(--color-primary-indigo);
  --orange: var(--color-primary-orange);
  --line: var(--grid);
  --line-strong: color-mix(in srgb, var(--color-primary-black) 28%, transparent);
  --muted: color-mix(in srgb, var(--color-primary-black) 60%, transparent);
}
html, body{
  margin:0;
  overflow-x: clip; /* prevents horizontal scroll without creating a scroll container that breaks sticky */
}

.vc-page{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  background-image: radial-gradient(color-mix(in srgb, var(--color-primary-black) 7%, transparent) 1px, transparent 1.5px);
  background-size: 24px 24px;
}
.vc-stage{
  max-width:1400px; margin:0 auto; padding:88px clamp(20px, 4vw, 40px) 96px;
  display:flex; gap:64px; align-items:flex-start;
  width:100%;
}

.vc-left{ flex:1 1 40%; min-width:0; position:sticky; top:88px; }

.vc-eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.vc-dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.vc-eyebrow span{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }

.vc-headline{
  font-family:var(--font-heading); font-weight:500; font-style:var(--font-style-heading,italic);
  font-size:clamp(28px, 3.8vw, 46px); line-height:1.12; margin:0 0 20px; max-width:15ch;
}
.vc-sub{ font-size:14.5px; line-height:1.7; color:var(--muted); max-width:40ch; margin:0 0 36px; }

.vc-meta{ display:flex; flex-direction:column; gap:16px; margin-bottom:36px; }
.vc-meta-item{ display:flex; align-items:center; gap:12px; }
.vc-meta-icon{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--indigo); flex-shrink:0;
}
.vc-meta-icon svg{ width:15px; height:15px; }
.vc-meta-text{ font-size:13px; color:color-mix(in srgb, var(--color-primary-black) 75%, transparent); min-width:0; }
.vc-meta-text strong{ color:var(--ink); font-weight:600; }

.vc-platforms{ display:flex; align-items:center; gap:14px; padding-top:24px; border-top:1px solid var(--line); }
.vc-platforms span{ font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.vc-platform-icons{ display:flex; gap:8px; }
.vc-platform-badge{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:10px; font-weight:600;
  font-family:var(--font-heading);
}

.vc-right{ flex:1 1 60%; min-width:0; }
.vc-card{
  border:1px solid var(--line-strong); border-radius:3px; overflow:hidden;
  background:var(--color-white);
  box-shadow:0 30px 70px -30px color-mix(in srgb, var(--color-primary-black) 18%, transparent);
}

.vc-tz-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:22px 28px; border-bottom:1px solid var(--line); max-width:100%;
}
.vc-tz-info{ min-width:0; flex:1 1 auto; overflow:hidden; }
.vc-tz-info .vc-tz-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.vc-tz-label{ font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.vc-tz-value{ font-family:var(--font-heading); font-size:15px; }
.vc-tz-select{
  background:var(--canvas); border:1px solid var(--line-strong); color:var(--ink);
  font-family:var(--font-body); font-size:13px; padding:9px 30px 9px 12px; border-radius:2px; outline:none;
  appearance:none; -webkit-appearance:none; max-width:100%; min-width:0; flex:0 1 auto;
  background-image:var(--icon-chevron-ink);
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px;
  cursor:pointer;
}
.vc-tz-select option{ background:var(--color-white); color:var(--ink); }

.vc-body{ padding:28px; }

.vc-duration-row{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;
}
.vc-duration{
  flex:1 1 100px; min-width:0; text-align:center; font-size:12px; letter-spacing:0.04em; color:var(--ink);
  border:1px solid var(--line); border-radius:2px; padding:12px 10px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
  background:transparent; font-family:var(--font-body);
}
.vc-duration:hover{ border-color:var(--line-strong); }
.vc-duration.active{ background:var(--ink); color:var(--canvas); border-color:var(--ink); }

.vc-section-label{ font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }

.vc-days{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; margin-bottom:28px; scrollbar-width:none; max-width:100%; }
.vc-days::-webkit-scrollbar{ display:none; }
.vc-day-pill{
  flex-shrink:0; min-width:64px; text-align:center;
  border:1px solid var(--line); border-radius:4px; padding:12px 8px; cursor:pointer;
  background:transparent; color:var(--ink); font-family:var(--font-body);
  transition:border-color .2s ease, background .2s ease;
}
.vc-day-pill .vc-day-name{ display:block; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.vc-day-pill .vc-day-num{ display:block; font-family:var(--font-heading); font-size:18px; font-weight:500; }
.vc-day-pill:hover{ border-color:var(--line-strong); }
.vc-day-pill.active{ background:var(--ink); border-color:var(--ink); }
.vc-day-pill.active .vc-day-name, .vc-day-pill.active .vc-day-num{ color:var(--canvas); }
.vc-day-pill.disabled{ opacity:0.35; cursor:not-allowed; }

.vc-slots{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;
}
.vc-slot{
  flex:1 1 70px; max-width:120px; min-width:0;
  border:1px solid var(--line); border-radius:2px; padding:10px 8px; text-align:center;
  background:transparent; color:var(--ink); font-family:var(--font-body); font-size:12.5px;
  cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.vc-slot:hover{ border-color:var(--line-strong); }
.vc-slot.active{ background:var(--indigo); border-color:var(--indigo); color:var(--color-white); font-weight:600; }
.vc-slots-empty{ font-size:13px; color:var(--muted); padding:10px 0 32px; }

/* Mobile time picker — replaces .vc-slots below 640px (see JS) */
.vc-slot-select{
  width:100%; display:block;
  background:var(--canvas); border:1px solid var(--line-strong); color:var(--ink);
  font-family:var(--font-body); font-size:16px; padding:14px 36px 14px 14px; border-radius:2px; outline:none;
  appearance:none; -webkit-appearance:none;
  background-image:var(--icon-chevron-ink);
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  cursor:pointer; margin-bottom:32px; min-height:52px; /* comfortable tap target, 16px font avoids iOS auto-zoom */
}
.vc-slot-select:focus{ border-color:var(--indigo); }
.vc-slot-select option{ background:var(--color-white); color:var(--ink); }

.vc-form{ display:flex; flex-direction:column; gap:28px; padding-top:8px; border-top:1px solid var(--line); }
.vc-row{ display:flex; flex-wrap:wrap; gap:24px; padding-top:28px; }
.vc-row .vc-field{ flex:1 1 200px; min-width:0; }
.vc-field{ position:relative; }
.vc-field label{
  position:absolute; left:2px; top:9px; font-size:15px; color:color-mix(in srgb, var(--color-primary-black) 40%, transparent);
  pointer-events:none; transition: top .18s ease, font-size .18s ease, color .18s ease;
}
.vc-field input{
  width:100%; background:transparent; border:none; color:var(--ink);
  font-family:var(--font-body); font-size:15px; padding:22px 2px 10px; outline:none; position:relative; z-index:2;
}
.vc-field textarea{
  width:100%; background:transparent; border:none; color:var(--ink);
  font-family:var(--font-body); font-size:14.5px; line-height:1.6;
  padding:22px 2px 10px; outline:none; position:relative; z-index:2;
  resize:vertical; min-height:88px;
}
.vc-field textarea::placeholder{ color:transparent; }
.vc-field textarea:focus + label, .vc-field textarea:not(:placeholder-shown) + label{
  top:-6px; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
}
.vc-field textarea:focus + label{ color:var(--indigo); }
.vc-field input::placeholder{ color:transparent; }
.vc-field input:focus + label, .vc-field input:not(:placeholder-shown) + label{
  top:-6px; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
}
.vc-field input:focus + label{ color:var(--indigo); }
.vc-underline{ position:relative; }
.vc-underline::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); z-index:1; }
.vc-underline::before{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--indigo);
  transition:width .35s cubic-bezier(.4,0,.2,1); z-index:2;
}
.vc-underline:focus-within::before{ width:100%; }

.vc-submit{
  align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--color-white); background:var(--ink); border:1px solid var(--ink); border-radius:2px;
  padding:16px 22px 16px 30px; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.vc-submit svg{ width:14px; height:14px; transition:transform .25s ease; }
.vc-submit:hover{ background:var(--orange); border-color:var(--orange); box-shadow:0 10px 30px -8px color-mix(in srgb, var(--color-primary-orange) 35%, transparent); }
.vc-submit:hover svg{ transform:translateX(4px); }
.vc-submit:disabled{ opacity:0.4; cursor:not-allowed; box-shadow:none; }
.vc-submit:disabled:hover{ background:var(--ink); border-color:var(--ink); }
.vc-submit:disabled:hover svg{ transform:none; }
.vc-note{ font-size:11.5px; color:var(--muted); margin-top:-14px; }
.vc-error{ font-size:12.5px; color:var(--color-error); margin-top:-14px; display:none; }
.vc-error.vc-show{ display:block; }

.vc-success{ display:none; padding:8px 0 4px; }
.vc-success.vc-show{ display:block; animation:vc-fade .5s ease; }
@keyframes vc-fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.vc-success h3{ font-family:var(--font-heading); font-weight:500; font-size:22px; margin:0 0 10px; }
.vc-success p{ font-size:13.5px; color:var(--muted); line-height:1.65; margin:0 0 6px; max-width:44ch; }
.vc-success .vc-success-detail{ color:var(--indigo); font-weight:600; }

@media (max-width: 960px){
  .vc-stage{ flex-direction:column; gap:40px; padding-top:56px; }
  .vc-left{ position:static; }
}

@media (max-width: 640px){
  .vc-stage{ padding-left:16px; padding-right:16px; padding-bottom:64px; }
  .vc-headline{ max-width:16ch; }
  .vc-meta-item{ align-items:flex-start; }
  .vc-body{ padding:22px; }
  .vc-tz-row{ flex-direction:column; align-items:flex-start; padding:18px 22px; }
  .vc-tz-select{ width:100%; }
  .vc-duration-row{ gap:8px; }
  .vc-duration{ font-size:11px; padding:11px 6px; }
  .vc-day-pill{ min-width:64px; padding:10px 6px; }
  .vc-day-pill .vc-day-num{ font-size:16px; }
  .vc-slots{ gap:8px; }
  .vc-slot{ font-size:11.5px; padding:9px 6px; }
  .vc-submit{ width:100%; justify-content:center; padding-left:22px; }
  .vc-platforms{ flex-wrap:wrap; gap:10px; }
}

@media (max-width: 400px){
  .vc-stage{ padding-left:14px; padding-right:14px; }
  .vc-headline{ font-size:28px; }
  .vc-sub{ font-size:13.5px; }
  .vc-body{ padding:18px; }
  .vc-tz-row{ padding:16px 18px; }
  .vc-day-pill{ min-width:58px; }
  .vc-slots{ gap:6px; }
  .vc-field input{ font-size:14px; }
  .vc-field textarea{ font-size:13.5px; min-height:76px; }
}