/* ============================================================
   Giright — world-class customer booking experience
   Light + dark, fluid & mobile-first. All class names preserved
   so the existing markup and booking.js continue to work.
   ============================================================ */

.giright-booking,
.giright-booking *{box-sizing:border-box}

.giright-booking{
  /* Palette */
  --g-navy:#091023;
  --g-navy2:#152a57;
  --g-blue:#2f6bff;
  --g-blue-ink:#1b4fd6;
  --g-blue-soft:#eef4ff;
  --g-accent:#5fe3a1;
  --g-ink:#0d1526;
  --g-ink-2:#33415c;
  --g-muted:#67748c;
  --g-faint:#8a95a7;
  --g-line:#e6ecf5;
  --g-line-2:#eef2f8;
  --g-surface:#ffffff;
  --g-surface-2:#f7f9fd;
  --g-danger:#c23b3b;
  --g-radius:26px;
  --g-radius-md:16px;
  --g-radius-sm:13px;
  --g-shadow:0 30px 80px -32px rgba(11,20,45,.35);
  --g-shadow-sm:0 12px 34px -18px rgba(11,20,45,.28);
  --g-ring:0 0 0 4px rgba(47,107,255,.14);

  width:100%;
  max-width:1160px;
  margin:clamp(16px,4vw,32px) auto clamp(40px,8vw,72px);
  padding-inline:clamp(0px,2vw,0px);
  color:var(--g-ink);
  font-family:inherit,"Schibsted Grotesk",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Hero ---------- */
.giright-booking-head{
  position:relative;overflow:hidden;
  padding:clamp(26px,5vw,48px) clamp(20px,5vw,52px) clamp(24px,4.4vw,42px);
  border-radius:var(--g-radius) var(--g-radius) 0 0;
  background:
    radial-gradient(120% 140% at 88% 8%,rgba(95,150,255,.34),transparent 46%),
    radial-gradient(90% 120% at 4% 100%,rgba(95,227,161,.14),transparent 44%),
    linear-gradient(140deg,var(--g-navy) 8%,var(--g-navy2) 96%);
  color:#fff;
  box-shadow:var(--g-shadow);
}
.giright-booking-head::before{
  content:"";position:absolute;inset:auto -90px -140px auto;width:340px;height:340px;
  border:1px solid rgba(255,255,255,.10);border-radius:50%;
  box-shadow:0 0 0 36px rgba(255,255,255,.028),0 0 0 74px rgba(255,255,255,.018);
  pointer-events:none
}
.giright-booking-head::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:22px 22px;opacity:.5;mask-image:linear-gradient(180deg,#000,transparent 70%);
  pointer-events:none
}
.giright-booking-eyebrow{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  font-size:10px;line-height:1;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:#bcd3ff
}
.giright-booking-eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--g-accent);
  box-shadow:0 0 0 5px rgba(95,227,161,.16);animation:g-pulse 2.6s ease-in-out infinite
}
@keyframes g-pulse{0%,100%{box-shadow:0 0 0 4px rgba(95,227,161,.18)}50%{box-shadow:0 0 0 8px rgba(95,227,161,.05)}}
.giright-booking-head h2{
  position:relative;z-index:1;margin:0;max-width:800px;color:#fff;
  font-size:clamp(27px,4.4vw,46px);line-height:1.04;letter-spacing:-.045em;font-weight:750
}
.giright-booking-subtitle{
  position:relative;z-index:1;max-width:640px;margin:14px 0 0;
  color:rgba(255,255,255,.74);font-size:clamp(13px,1.5vw,15px);line-height:1.7
}

/* ---------- Body ---------- */
.giright-booking-body{
  padding:clamp(14px,3.4vw,32px);
  background:linear-gradient(180deg,#fff,#fbfcff);
  border:1px solid var(--g-line);border-top:0;
  border-radius:0 0 var(--g-radius) var(--g-radius);
  box-shadow:var(--g-shadow)
}
.giright-booking-form{display:grid;gap:clamp(16px,2.6vw,24px)}
.giright-booking-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);gap:clamp(12px,1.8vw,18px)}

.giright-booking-form label{
  display:grid;gap:8px;min-width:0;color:var(--g-ink-2);
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:800
}
.giright-booking-form input,
.giright-booking-form select{
  width:100%;height:52px;margin:0;padding:0 15px;
  border:1px solid #d9e2f0;border-radius:var(--g-radius-sm);background:#fff;color:#111c31;
  font:600 15px/1 inherit;outline:0;
  transition:border-color .18s,box-shadow .18s,background .18s
}
.giright-booking-form select{
  appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2367748c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center
}
.giright-booking-form input:hover,
.giright-booking-form select:hover{border-color:#b6c6de}
.giright-booking-form input:focus,
.giright-booking-form select:focus{border-color:var(--g-blue);box-shadow:var(--g-ring);background:#fbfdff}
.giright-booking-form input::placeholder{color:#9aa5b5}

.giright-timezone-field{display:grid;gap:7px}
.giright-timezone-field small{font-size:11px;line-height:1.5;color:var(--g-faint);font-weight:600;text-transform:none;letter-spacing:0}

/* ---------- Calendar ---------- */
.giright-native-calendar{
  overflow:hidden;border:1px solid var(--g-line);border-radius:var(--g-radius-md);
  background:#fff;box-shadow:var(--g-shadow-sm)
}
.giright-calendar-heading{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(16px,2.6vw,24px);border-bottom:1px solid var(--g-line-2);
  background:linear-gradient(180deg,#fff,#fafcff)
}
.giright-calendar-kicker{display:block;margin-bottom:7px;color:var(--g-blue);font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:900}
.giright-calendar-heading h3{margin:0;color:#0f1a2d;font-size:clamp(17px,2.2vw,22px);line-height:1.2;letter-spacing:-.025em;font-weight:800}
.giright-calendar-heading p{margin:6px 0 0;color:var(--g-muted);font-size:12px;line-height:1.55;max-width:360px}

.giright-calendar-nav{display:flex;align-items:center;gap:8px;min-width:210px;justify-content:flex-end}
.giright-calendar-nav strong{min-width:118px;text-align:center;color:#16233a;font-size:14px;font-weight:800;letter-spacing:-.01em}
.giright-calendar-nav button{
  display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:1px solid #dbe3f0;border-radius:12px;background:#fff;color:#18243a;
  font-size:20px;line-height:1;cursor:pointer;transition:.18s
}
.giright-calendar-nav button:hover:not(:disabled){border-color:#93b5fb;background:#f4f8ff;transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(47,107,255,.5)}
.giright-calendar-nav button:disabled{opacity:.32;cursor:not-allowed}

.giright-calendar-weekdays,
.giright-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(5px,1vw,8px);padding-inline:clamp(10px,2vw,18px)}
.giright-calendar-weekdays{padding-top:16px;padding-bottom:9px}
.giright-calendar-weekdays span{text-align:center;color:#9aa6b7;font-size:9px;letter-spacing:.09em;text-transform:uppercase;font-weight:900}
.giright-calendar-grid{padding-top:2px;padding-bottom:clamp(12px,2vw,18px)}
.giright-calendar-empty{min-height:clamp(46px,8vw,64px)}

.giright-calendar-day{
  position:relative;min-width:0;min-height:clamp(46px,8vw,64px);
  border:1px solid #e4eaf2;border-radius:12px;background:#fff;color:var(--g-ink-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;
  transition:transform .16s,box-shadow .16s,border-color .16s,background .16s
}
.giright-calendar-day span{font-size:clamp(13px,1.7vw,15px);font-weight:800;line-height:1}
.giright-calendar-day small{font-size:7px;line-height:1;text-transform:uppercase;letter-spacing:.04em;color:var(--g-blue);font-weight:900}
.giright-calendar-day.is-available:hover{transform:translateY(-2px);border-color:#8fb3f9;background:#f7fbff;box-shadow:0 10px 22px -12px rgba(47,107,255,.55)}
.giright-calendar-day.is-selected{
  border-color:var(--g-blue);color:var(--g-blue-ink);
  background:linear-gradient(150deg,#eaf2ff,#f6faff);
  box-shadow:inset 0 0 0 1.5px var(--g-blue),0 10px 24px -14px rgba(47,107,255,.6)
}
.giright-calendar-day.is-selected small{color:var(--g-blue-ink)}
.giright-calendar-day.is-selected::after{content:"";position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%;background:var(--g-blue)}
.giright-calendar-day.is-disabled{opacity:.34;cursor:not-allowed;background:#f8fafc;box-shadow:none}
.giright-calendar-day.is-disabled small{display:none}

.giright-calendar-note{
  display:flex;gap:9px;align-items:flex-start;padding:13px clamp(14px,2vw,18px);
  border-top:1px solid var(--g-line-2);background:#fbfcfe;color:var(--g-muted);font-size:11px;line-height:1.5
}
.giright-calendar-note span:first-child{color:var(--g-blue);font-size:9px;margin-top:2px}

/* ---------- Times / course ---------- */
.giright-booking-form fieldset{min-width:0;margin:0;padding:clamp(14px,2.4vw,22px);border:1px solid var(--g-line);border-radius:var(--g-radius-md);background:#fff}
.giright-booking-form legend{padding:0 8px;color:#0f1a2d;font-size:clamp(15px,1.9vw,17px);letter-spacing:-.015em;font-weight:800}

.giright-course-note,
.giright-course-preview{
  display:grid;gap:5px;padding:14px 16px;border:1px solid #d7e5fc;border-radius:14px;
  background:linear-gradient(135deg,#f7fbff,#eef5ff);color:#12213a
}
.giright-course-note strong,
.giright-course-preview strong{font-size:14px;letter-spacing:-.01em}
.giright-course-note span,
.giright-course-preview span{font-size:12px;line-height:1.55;color:#5a6a85}
.giright-course-preview{margin-top:14px;transition:border-color .18s,box-shadow .18s,background .18s}
.giright-course-preview.is-selected{border-color:#8bb0f6;background:linear-gradient(135deg,#f2f8ff,#e8f1ff);box-shadow:var(--g-ring)}

.giright-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vw,11px);margin-top:15px}
.giright-slot{
  min-width:0;min-height:60px;padding:10px 8px;border:1px solid #dae3f0;border-radius:13px;background:#fff;color:#152340;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;
  transition:transform .16s,box-shadow .16s,border-color .16s,background .16s
}
.giright-slot:hover:not(.is-full){transform:translateY(-2px);border-color:#8fb3f9;background:#f7fbff;box-shadow:0 10px 20px -12px rgba(47,107,255,.55)}
.giright-slot.is-selected{border-color:var(--g-blue);background:linear-gradient(150deg,#eaf2ff,#f6faff);color:var(--g-blue-ink);box-shadow:inset 0 0 0 1.5px var(--g-blue),0 10px 22px -14px rgba(47,107,255,.55)}
.giright-slot-time{font-size:14px;font-weight:850;letter-spacing:-.01em}
.giright-slot small{font-size:8px;color:var(--g-muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.giright-slot.is-selected small{color:var(--g-blue-ink)}
.giright-slot.is-full{opacity:.42;cursor:not-allowed;background:#f7f9fc}
.giright-slot.is-full small{color:#a24141}
.giright-slot.is-booked{opacity:1;background:#fff8ec;border-color:#e7c98a}
.giright-slot.is-booked small{color:#8a6410}
.giright-slot.is-blocked{opacity:.7;background:#f4f2ec}
.giright-slot.is-blocked small{color:#565349;text-transform:none;letter-spacing:0;font-weight:700}
html[data-theme="dark"] .giright-slot.is-booked{background:#241c0d;border-color:#5a4a22}
html[data-theme="dark"] .giright-slot.is-booked small{color:#eab143}
html[data-theme="dark"] .giright-slot.is-blocked{background:#17171a}
html[data-theme="dark"] .giright-slot.is-blocked small{color:#b2afa6}

/* ---------- States & CTA ---------- */
.giright-empty{margin:0;padding:20px;border:1px dashed #d4dded;border-radius:13px;background:#fafcff;color:var(--g-muted);font-size:13px;text-align:center}
.giright-error{padding:13px 16px;border:1px solid #f6c9c9;border-radius:13px;background:#fff6f6;color:#a13636;font-size:13px;line-height:1.5;font-weight:650}

.giright-submit{
  position:relative;overflow:hidden;width:100%;min-height:60px;border:0;border-radius:15px;
  background:linear-gradient(135deg,#3a72ff,#1b46c9);color:#fff;
  font:800 14px/1 inherit;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 18px 34px -14px rgba(47,107,255,.6);
  transition:transform .18s,box-shadow .18s,filter .18s
}
.giright-submit:hover{transform:translateY(-1px);filter:saturate(1.05);box-shadow:0 22px 40px -14px rgba(47,107,255,.7)}
.giright-submit:active{transform:translateY(0)}
.giright-submit::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.22) 48%,transparent 70%);transform:translateX(-130%);transition:transform .7s ease}
.giright-submit:hover::after{transform:translateX(130%)}

.giright-submit:focus-visible,
.giright-slot:focus-visible,
.giright-calendar-day:focus-visible,
.giright-calendar-nav button:focus-visible,
.giright-booking-form input:focus-visible,
.giright-booking-form select:focus-visible{outline:3px solid rgba(47,107,255,.4);outline-offset:3px}

/* ---------- Dark mode ---------- */
html[data-theme="dark"] .giright-booking,
.giright-booking.is-dark{
  --g-ink:#f3f6fc;--g-ink-2:#c7d2e4;--g-muted:#9aa7bd;--g-faint:#8695ad;
  --g-line:#28324a;--g-line-2:#222b40;--g-surface:#121a2c;--g-surface-2:#0e1626;
  --g-blue-soft:#16233f;--g-blue-ink:#a9c6ff;
  --g-shadow:0 30px 80px -30px rgba(0,0,0,.7);--g-shadow-sm:0 12px 34px -18px rgba(0,0,0,.6)
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .giright-booking{
    --g-ink:#f3f6fc;--g-ink-2:#c7d2e4;--g-muted:#9aa7bd;--g-faint:#8695ad;
    --g-line:#28324a;--g-line-2:#222b40;--g-surface:#121a2c;--g-surface-2:#0e1626;
    --g-blue-soft:#16233f;--g-blue-ink:#a9c6ff;
    --g-shadow:0 30px 80px -30px rgba(0,0,0,.7);--g-shadow-sm:0 12px 34px -18px rgba(0,0,0,.6)
  }
}
html[data-theme="dark"] .giright-booking-body,
html[data-theme="dark"] .giright-native-calendar,
html[data-theme="dark"] .giright-booking-form fieldset,
html[data-theme="dark"] .giright-booking-form input,
html[data-theme="dark"] .giright-booking-form select,
html[data-theme="dark"] .giright-calendar-day,
html[data-theme="dark"] .giright-slot,
html[data-theme="dark"] .giright-calendar-nav button{background:var(--g-surface);color:var(--g-ink);border-color:var(--g-line)}
html[data-theme="dark"] .giright-calendar-nav strong,html[data-theme="dark"] .giright-calendar-month{color:var(--g-ink)}
html[data-theme="dark"] .giright-booking-body{background:linear-gradient(180deg,#111a2c,#0d1524)}
html[data-theme="dark"] .giright-calendar-heading,
html[data-theme="dark"] .giright-calendar-note,
html[data-theme="dark"] .giright-course-note,
html[data-theme="dark"] .giright-course-preview{background:var(--g-surface-2);color:var(--g-ink)}
html[data-theme="dark"] .giright-calendar-heading h3{color:var(--g-ink)}
html[data-theme="dark"] .giright-calendar-day.is-disabled{background:#0d1524}
html[data-theme="dark"] .giright-calendar-day.is-available:hover,
html[data-theme="dark"] .giright-slot:hover:not(.is-full){background:#17253c;border-color:#3f6cff;color:var(--g-ink);box-shadow:0 10px 22px -12px rgba(47,107,255,.5)}
html[data-theme="dark"] .giright-calendar-day.is-available:hover span,
html[data-theme="dark"] .giright-slot:hover:not(.is-full) .giright-slot-time{color:var(--g-ink)}
html[data-theme="dark"] .giright-error{background:#241416;border-color:#4a2528;color:#f4b4b4}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .giright-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .giright-booking-head{border-radius:20px 20px 0 0}
  .giright-booking-body{border-radius:0 0 20px 20px}
  .giright-booking-grid{grid-template-columns:1fr}
  .giright-calendar-heading{align-items:flex-start;flex-direction:column;gap:14px}
  .giright-calendar-nav{width:100%;min-width:0;justify-content:space-between}
  .giright-calendar-nav strong{flex:1}
  .giright-calendar-day small{display:none}
  .giright-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .giright-slot{min-height:56px}
  .giright-booking-form input,
  .giright-booking-form select{height:50px}
}
@media (max-width:390px){
  .giright-calendar-weekdays,
  .giright-calendar-grid{gap:4px;padding-inline:8px}
  .giright-calendar-day{min-height:44px;border-radius:10px}
  .giright-calendar-day span{font-size:12px}
  .giright-slots{grid-template-columns:1fr}
}

/* Touch targets never below 44px on coarse pointers */
@media (pointer:coarse){
  .giright-calendar-day,.giright-slot{min-height:48px}
  .giright-calendar-nav button{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .giright-booking *{animation:none!important;transition:none!important}
  .giright-submit::after{display:none}
}