/* ==========================================================================
   /thank-you-demo/ — demo booking wizard
   --------------------------------------------------------------------------
   Ported from the styles the wizard used to share with /schedule-a-demo/,
   which now only carries the intro form (.form-card / .c-form live in
   schedule-a-demo.css still). The wizard sits inside a <form> here rather
   than beside one, so .booker-grid is applied to the form element itself.
   ========================================================================== */

    /* ===== Page wrapper ===== */
    .booker {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(to bottom, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
      backdrop-filter: blur(14px);
      box-shadow: 0 40px 100px -32px rgba(0,0,0,0.55);
    }
    [data-theme="light"] .booker {
      border-color: rgba(15,18,32,0.10);
      background: linear-gradient(to bottom, rgba(15,18,32,0.025), rgba(15,18,32,0.008));
      box-shadow: 0 40px 100px -32px rgba(15,18,32,0.22);
    }
    /* The form is the grid container, so it needs the layout reset a <form>
       would not otherwise get. */
    .booker-grid {
      display: grid;
      grid-template-columns: 360px 1fr;
      min-height: 520px;
      margin: 0;
    }
    @media (max-width: 900px) {
      .booker-grid { grid-template-columns: 1fr; }
    }

    /* Shown in place of the wizard when the demo_token is missing or has
       aged out (inc/forms.php hides the form in that case). */
    .booker > .sb-form-error {
      margin: 24px;
    }

    /* ===== Left rail (meeting info) ===== */
    .rail {
      position: relative;
      padding: 28px 24px;
      border-right: 1px solid var(--line);
      background:
        radial-gradient(400px 240px at -20% 0%, rgba(123,140,255,0.18), transparent 60%),
        radial-gradient(360px 240px at 120% 100%, rgba(178,123,255,0.16), transparent 60%);
    }
    @media (max-width: 900px) {
      .rail { border-right: none; border-bottom: 1px solid var(--line); }
    }
    .rail .host {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 18px;
    }
    .rail .host .av {
      width: 44px; height: 44px; border-radius: 12px;
      background: linear-gradient(135deg, #7b8cff, #b27bff);
      display: grid; place-items: center;
      color: white; font-weight: 700;
      font-family: 'JetBrains Mono', monospace; font-size: 13px;
      box-shadow: 0 12px 28px -10px rgba(123,140,255,0.5);
    }
    .rail .host .info .name {
      font-size: 13.5px; font-weight: 600; color: var(--text-0);
    }
    .rail .host .info .role {
      font-size: 11.5px; color: var(--text-2); margin-top: 2px;
    }
    .rail h2 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px; font-weight: 700;
      letter-spacing: -0.6px;
      line-height: 1.1;
      color: var(--text-0);
      margin-bottom: 14px;
    }
    .rail .lead {
      font-size: 14px;
      color: var(--text-1);
      line-height: 1.65;
      margin-bottom: 22px;
    }
    .rail .meta-list {
      display: flex; flex-direction: column; gap: 12px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }
    .rail .meta-item {
      display: flex; align-items: flex-start; gap: 12px;
      font-size: 13px;
      color: var(--text-1);
    }
    .rail .meta-item svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
    .rail .meta-item b { color: var(--text-0); font-weight: 600; }
    .rail .expect {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }
    .rail .expect h4 {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-2);
      margin-bottom: 12px;
    }
    .rail .expect ul { display: flex; flex-direction: column; gap: 8px; }
    .rail .expect li {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 13px; color: var(--text-1);
    }
    .rail .expect li::before {
      content: '';
      width: 14px; height: 14px;
      border-radius: 5px;
      flex-shrink: 0;
      background: linear-gradient(135deg, rgba(123,140,255,.22), rgba(178,123,255,.12));
      border: 1px solid rgba(123,140,255,.3);
      position: relative;
    }
    .rail .expect li::after {
      content: '';
      width: 5px; height: 2.5px;
      border-left: 1.5px solid #b27bff;
      border-bottom: 1.5px solid #b27bff;
      transform: rotate(-45deg);
      margin-left: -18px; margin-right: 7px;
      margin-top: 4.5px;
      flex-shrink: 0;
    }

    /* ===== Right pane ===== */
    .pane { padding: 28px 28px; position: relative; min-width: 0; }
    @media (max-width: 640px) { .pane { padding: 20px 18px; } }

    /* Stepper */
    .stepper {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 26px;
    }
    .stepper .step {
      display: flex; align-items: center; gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.10em;
      color: var(--text-2);
    }
    .stepper .step .num {
      width: 22px; height: 22px; border-radius: 7px;
      display: grid; place-items: center;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.025);
      font-size: 11px;
      color: var(--text-2);
    }
    [data-theme="light"] .stepper .step .num { background: rgba(15,18,32,0.03); }
    .stepper .step.active { color: var(--text-0); }
    .stepper .step.active .num {
      background: linear-gradient(135deg, #7b8cff, #b27bff);
      border-color: transparent;
      color: white;
      box-shadow: 0 8px 18px -8px rgba(123,140,255,0.55);
    }
    .stepper .step.done .num {
      background: rgba(74,222,128,.18);
      border-color: rgba(74,222,128,.35);
      color: #86efac;
    }
    .stepper .sep {
      flex: 1; height: 1px;
      background: linear-gradient(90deg, var(--line), transparent);
      max-width: 40px;
    }

    /* Panels */
    .step-panel { display: none; animation: panelIn .45s ease both; }
    .step-panel.active { display: block; }
    @keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    .panel-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 18px; font-weight: 700;
      letter-spacing: -0.4px;
      color: var(--text-0);
      margin-bottom: 4px;
    }
    .panel-sub {
      font-size: 13.5px; color: var(--text-1);
      margin-bottom: 22px;
    }

    /* ===== Calendar ===== */
    .cal-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px;
    }
    .cal-head .month {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 15px; font-weight: 600;
      color: var(--text-0);
    }
    .cal-nav {
      display: flex; align-items: center; gap: 6px;
    }
    .cal-nav button {
      width: 34px; height: 34px;
      border-radius: 10px;
      display: grid; place-items: center;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.02);
      color: var(--text-1);
      transition: border-color .2s, background .2s, color .2s, transform .15s;
    }
    [data-theme="light"] .cal-nav button { background: rgba(15,18,32,0.025); }
    .cal-nav button:hover {
      border-color: rgba(123,140,255,0.4);
      background: rgba(123,140,255,0.08);
      color: var(--text-0);
    }
    .cal-nav button:active { transform: scale(0.94); }
    .cal-nav button[disabled] { opacity: 0.35; pointer-events: none; }

    .cal-dows {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      margin-bottom: 4px;
    }
    .cal-dows span {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      text-align: center;
      color: var(--text-2);
      padding: 6px 0;
    }

    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }
    .cal-cell {
      aspect-ratio: 1 / 1;
      border-radius: 10px;
      display: grid; place-items: center;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 13.5px; font-weight: 500;
      color: var(--text-1);
      border: 1px solid transparent;
      background: rgba(255,255,255,0.015);
      cursor: pointer;
      transition: background .2s, color .2s, border-color .2s, transform .15s;
      position: relative;
    }
    [data-theme="light"] .cal-cell { background: rgba(15,18,32,0.018); }
    .cal-cell.empty { background: transparent; cursor: default; pointer-events: none; }
    .cal-cell.past, .cal-cell.disabled {
      color: var(--text-2);
      opacity: 0.35;
      cursor: not-allowed;
      pointer-events: none;
    }
    .cal-cell.weekend { color: var(--text-2); opacity: 0.5; pointer-events: none; }
    .cal-cell.available:hover {
      background: rgba(123,140,255,0.10);
      color: var(--text-0);
      border-color: rgba(123,140,255,0.35);
      transform: translateY(-1px);
    }
    .cal-cell.today {
      color: var(--accent);
      font-weight: 700;
    }
    .cal-cell.today::after {
      content: '';
      position: absolute;
      bottom: 5px;
      left: 50%; transform: translateX(-50%);
      width: 4px; height: 4px; border-radius: 999px;
      background: var(--accent);
    }
    .cal-cell.selected {
      background: linear-gradient(135deg, #7b8cff, #b27bff);
      color: white !important;
      border-color: transparent;
      box-shadow: 0 12px 26px -10px rgba(123,140,255,0.6);
    }
    .cal-cell.selected::after { background: white; }

    .cal-legend {
      display: flex; flex-wrap: wrap; gap: 14px;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
      font-size: 11.5px;
      color: var(--text-2);
    }
    .cal-legend .lg {
      display: inline-flex; align-items: center; gap: 6px;
    }
    .cal-legend .sw {
      width: 10px; height: 10px; border-radius: 4px;
    }
    .cal-legend .sw.av { background: linear-gradient(135deg, rgba(123,140,255,.45), rgba(178,123,255,.25)); border: 1px solid rgba(123,140,255,.4); }
    .cal-legend .sw.un { background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
    [data-theme="light"] .cal-legend .sw.un { background: rgba(15,18,32,0.04); }
    .cal-legend .sw.td { background: var(--accent); }

    /* ===== Time slots ===== */
    .selected-date {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid rgba(123,140,255,0.32);
      background: rgba(123,140,255,0.08);
      margin-bottom: 20px;
    }
    .selected-date .dt {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px; font-weight: 600;
      color: var(--text-0);
    }
    .selected-date .lbl {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .back-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12.5px;
      color: var(--text-1);
      cursor: pointer;
      transition: color .2s;
    }
    .back-link:hover { color: var(--text-0); }

    .tz-row {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 16px;
      font-size: 12.5px; color: var(--text-2);
    }
    .tz-row svg { color: var(--accent-2); }
    .tz-row select {
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.02);
      color: var(--text-0);
      font-size: 12.5px;
      font-family: 'Inter', sans-serif;
    }
    [data-theme="light"] .tz-row select { background: rgba(15,18,32,0.03); }

    .slots {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 10px;
      max-height: 360px;
      overflow-y: auto;
      padding-right: 4px;
    }
    .slots::-webkit-scrollbar { width: 6px; }
    .slots::-webkit-scrollbar-thumb { background: rgba(123,140,255,0.3); border-radius: 999px; }

    .slot {
      padding: 12px 8px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.02);
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px; font-weight: 500;
      color: var(--text-1);
      text-align: center;
      cursor: pointer;
      transition: border-color .2s, background .2s, color .2s, transform .15s;
    }
    [data-theme="light"] .slot { background: rgba(15,18,32,0.025); }
    .slot:hover {
      border-color: rgba(123,140,255,0.4);
      background: rgba(123,140,255,0.08);
      color: var(--text-0);
      transform: translateY(-1px);
    }
    .slot.selected {
      background: linear-gradient(135deg, #7b8cff, #b27bff);
      border-color: transparent;
      color: white;
      box-shadow: 0 12px 26px -10px rgba(123,140,255,0.6);
    }
    .slot.unavailable { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

    .slot-actions {
      display: flex; justify-content: space-between; align-items: center;
      gap: 10px; flex-wrap: wrap;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    /* Slot summary on the confirm step */
    .meet-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 20px;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(123,140,255,0.32);
      background: rgba(123,140,255,0.06);
    }
    @media (max-width: 540px) { .meet-summary { grid-template-columns: 1fr; } }
    .meet-summary .ms-row {
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; color: var(--text-1);
    }
    .meet-summary .ms-row svg { color: var(--accent); flex-shrink: 0; }
    .meet-summary .ms-row b { color: var(--text-0); font-weight: 600; }