/* MediBook Pro v4 — Premium Frontend */
:root{
  --mb-p:#2563EB;--mb-a:#7C3AED;
  --mb-ok:#16a34a;--mb-err:#dc2626;
  --mb-s0:#f8fafc;--mb-s1:#f1f5f9;--mb-s2:#e2e8f0;--mb-s3:#94a3b8;--mb-s4:#475569;--mb-s5:#1e293b;
  --mb-sh:0 4px 24px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --mb-r:16px;--mb-rs:10px;
  --mb-ico-w:44px; /* icon zone: 12px gap + 16px icon + 16px gap */
}
.mb-root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',sans-serif;color:var(--mb-s5);position:relative;margin:0 auto;}

/* ── Progress ── */
.mb-prog{display:flex;align-items:center;justify-content:center;padding:28px 0 34px;gap:0}
.mb-pdot{display:flex;flex-direction:column;align-items:center;gap:8px}
.mb-pdot-icon{width:48px;height:48px;border-radius:50%;border:2px solid var(--mb-s2);background:var(--mb-s1);display:flex;align-items:center;justify-content:center;transition:all .35s cubic-bezier(.4,0,.2,1);}
.mb-pdot-icon svg{stroke:var(--mb-s3);transition:stroke .3s}
.mb-pdot span{font-size:11px;font-weight:700;color:var(--mb-s3);letter-spacing:.4px;text-transform:uppercase;transition:color .3s}
.mb-pdot.active .mb-pdot-icon{background:linear-gradient(135deg,var(--mb-p),var(--mb-a));border-color:transparent;box-shadow:0 4px 20px color-mix(in srgb,var(--mb-p) 40%,transparent)}
.mb-pdot.active .mb-pdot-icon svg{stroke:#fff}
.mb-pdot.active span{color:var(--mb-p)}
.mb-pdot.done .mb-pdot-icon{background:var(--mb-ok);border-color:transparent}
.mb-pdot.done .mb-pdot-icon svg{stroke:#fff}
.mb-pdot.done span{color:var(--mb-ok)}
.mb-pline{width:72px;height:3px;border-radius:3px;background:var(--mb-s2);margin-bottom:28px;transition:background .4s}
.mb-pline.done{background:var(--mb-ok)}

/* ── Step card ── */
.mb-step{background:#fff;border-radius:var(--mb-r);box-shadow:var(--mb-sh);padding:40px 44px;animation:mbIn .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.04)}
@keyframes mbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:640px){.mb-step{padding:24px 20px}.mb-pline{width:32px}.mb-grid{grid-template-columns:1fr!important}.mb-pdot span{display:none}}

.mb-stitle{text-align:center;margin-bottom:32px}
.mb-stitle h2{font-size:22px;font-weight:700;margin:0 0 6px;color:var(--mb-s5);letter-spacing:-.3px}
.mb-stitle p{font-size:14px;color:var(--mb-s3);margin:0}

/* ── Grid ── */
.mb-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:28px}
.mb-full{grid-column:1/-1}

/* ── Fields ── */
.mb-field{display:flex;flex-direction:column;gap:7px}
.mb-field label{font-size:13px;font-weight:600;color:var(--mb-s4);letter-spacing:.1px}
.rq{color:var(--mb-err)}

.mb-field input[type=text],
.mb-field input[type=tel],
.mb-field input[type=email],
.mb-field input[type=number],
.mb-field input[type=password],
.mb-field textarea{
  width:100%;
  box-sizing:border-box;
  padding:12px 16px;
  border:1.5px solid var(--mb-s2);
  border-radius:var(--mb-rs);
  font-size:14px;
  font-family:inherit;
  color:var(--mb-s5);
  background:var(--mb-s0);
  transition:border-color .2s,box-shadow .2s,background .2s;
  outline:none;
  line-height:1.5;
}
.mb-field input::placeholder,
.mb-field textarea::placeholder{color:var(--mb-s3);font-size:13px}
.mb-field input:focus,
.mb-field textarea:focus{
  border-color:var(--mb-p);
  background:#fff;
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--mb-p) 12%,transparent);
}
.mb-field textarea{resize:vertical;min-height:82px}

/* Select wrapper — custom arrow, no icon */
.mb-sel-wrap{position:relative}
.mb-sel-wrap::after{
  content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--mb-s3);pointer-events:none;
}
.mb-sel-wrap select{
  width:100%;box-sizing:border-box;
  padding:12px 40px 12px 16px;
  border:1.5px solid var(--mb-s2);border-radius:var(--mb-rs);
  font-size:14px;font-family:inherit;color:var(--mb-s5);
  background:var(--mb-s0);outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.mb-sel-wrap select:focus{
  border-color:var(--mb-p);background:#fff;
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--mb-p) 12%,transparent);
}

/* ── Date & Slots ── */
.mb-date-wrap{margin-bottom:22px}
.mb-date-wrap input[type=date]{
  width:100%;box-sizing:border-box;
  padding:13px 16px;
  border:1.5px solid var(--mb-s2);border-radius:var(--mb-rs);
  font-size:14px;background:var(--mb-s0);outline:none;cursor:pointer;
  transition:border-color .2s,box-shadow .2s;color:var(--mb-s5);
  font-family:inherit;
}
.mb-date-wrap input[type=date]:focus{border-color:var(--mb-p);box-shadow:0 0 0 3.5px color-mix(in srgb,var(--mb-p) 12%,transparent);background:#fff}
.mb-offnotice{display:flex;align-items:center;gap:8px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:11px 14px;border-radius:var(--mb-rs);font-size:13px;margin-top:10px}

/* Slots skeleton — shown immediately, prevents late-load flash */
.mb-slots-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;margin-bottom:8px}
.mb-skel-item{height:42px;border-radius:var(--mb-rs);background:linear-gradient(90deg,var(--mb-s1) 25%,var(--mb-s2) 50%,var(--mb-s1) 75%);background-size:200% 100%;animation:mbShimmer 1.4s infinite}
@keyframes mbShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.mb-slots-hdr{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--mb-s4);margin:20px 0 12px;text-transform:uppercase;letter-spacing:.4px}
.mb-slots-hdr svg{stroke:var(--mb-p);flex-shrink:0}
.mb-scount{background:color-mix(in srgb,var(--mb-p) 12%,white);color:var(--mb-p);font-size:11px;padding:3px 10px;border-radius:20px;font-weight:700}

.mb-slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;margin-bottom:8px}
.mb-slot{
  padding:11px 6px;text-align:center;
  border:1.5px solid var(--mb-s2);border-radius:var(--mb-rs);
  background:#fff;font-size:13px;font-weight:700;color:var(--mb-s4);
  cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);
  line-height:1.2;
}
.mb-slot .mb-slot-period{display:block;font-size:10px;font-weight:500;color:var(--mb-s3);margin-top:1px}
.mb-slot:hover:not(.bkd){
  border-color:var(--mb-p);color:var(--mb-p);
  background:color-mix(in srgb,var(--mb-p) 7%,white);
  transform:translateY(-2px);
  box-shadow:0 4px 12px color-mix(in srgb,var(--mb-p) 18%,transparent);
}
.mb-slot.sel{
  background:linear-gradient(135deg,var(--mb-p),var(--mb-a));
  border-color:transparent;color:#fff;
  box-shadow:0 6px 18px color-mix(in srgb,var(--mb-p) 40%,transparent);
  transform:translateY(-2px);
}
.mb-slot.sel .mb-slot-period{color:rgba(255,255,255,.75)}
.mb-slot.bkd{opacity:.4;cursor:not-allowed;text-decoration:line-through;background:var(--mb-s1);color:var(--mb-s3)}

/* Morning / Afternoon / Evening section dividers */
.mb-slot-section{margin-bottom:16px}
.mb-slot-section-label{font-size:11px;font-weight:700;color:var(--mb-s3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.mb-slot-section-label::after{content:'';flex:1;height:1px;background:var(--mb-s2)}

/* ── Summary ── */
.mb-summary{border:1.5px solid var(--mb-s2);border-radius:var(--mb-r);overflow:hidden;margin-bottom:18px}
.mb-sum-hdr{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--mb-p),var(--mb-a));padding:13px 18px;color:#fff;font-size:14px;font-weight:700}
.mb-sum-row{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-bottom:1px solid var(--mb-s1);font-size:14px}
.mb-sum-row:last-of-type{border-bottom:none}
.mb-sum-lbl{color:var(--mb-s4);display:flex;align-items:center;gap:6px}
.mb-sum-val{font-weight:600;color:var(--mb-s5);text-align:right;max-width:58%}
.mb-sum-fee{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:color-mix(in srgb,var(--mb-p) 6%,white);border-top:2px solid var(--mb-p);font-size:15px;font-weight:600;color:var(--mb-s5)}
.mb-fee-val{font-size:22px;font-weight:800;color:var(--mb-p)}

/* ── Consent ── */
.mb-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--mb-s4);margin-bottom:18px;cursor:pointer;line-height:1.5}
.mb-consent input{margin-top:2px;accent-color:var(--mb-p);flex-shrink:0;width:15px;height:15px}
.mb-consent a{color:var(--mb-p)}

/* ── Errors ── */
.mb-err{display:flex;align-items:center;gap:10px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:12px 16px;border-radius:var(--mb-rs);font-size:14px;margin-bottom:16px}

/* ── Buttons ── */
.mb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--mb-rs);font-size:15px;font-weight:600;border:none;cursor:pointer;transition:all .22s;text-decoration:none;line-height:1}
.mb-btn-prim{padding:13px 28px;background:linear-gradient(135deg,var(--mb-p),var(--mb-a));color:#fff;box-shadow:0 4px 16px color-mix(in srgb,var(--mb-p) 38%,transparent)}
.mb-btn-prim:hover{transform:translateY(-2px);box-shadow:0 7px 22px color-mix(in srgb,var(--mb-p) 48%,transparent)}
.mb-btn-pay{padding:13px 28px;background:linear-gradient(135deg,#059669,#0d9488);color:#fff;box-shadow:0 4px 16px rgba(5,150,105,.34)}
.mb-btn-pay:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(5,150,105,.44)}
.mb-btn-ghost{padding:12px 20px;background:var(--mb-s1);color:var(--mb-s4);border:1.5px solid var(--mb-s2)}
.mb-btn-ghost:hover{background:var(--mb-s2)}
.mb-actions{display:flex;justify-content:flex-end;margin-top:4px}
.mb-split{justify-content:space-between}

/* ── Secure note ── */
.mb-secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--mb-s3);margin-top:12px}
.mb-secure svg{stroke:var(--mb-s3)}

/* ── Loading overlay ── */
.mb-overlay{position:absolute;inset:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;border-radius:var(--mb-r)}
.mb-loader{text-align:center;position:relative;padding-top:20px}
.mb-loader p{margin:14px 0 0;font-weight:600;color:var(--mb-s4);font-size:14px}
.mb-ring{width:76px;height:76px;border-radius:50%;border:3px solid color-mix(in srgb,var(--mb-p) 22%,transparent);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:mbPulse 1.7s ease-out infinite}
.mb-ring2{animation-delay:.55s}
@keyframes mbPulse{0%{transform:translate(-50%,-50%) scale(.55);opacity:1}100%{transform:translate(-50%,-50%) scale(1.45);opacity:0}}
.mb-hb{width:44px;height:44px;display:block;margin:0 auto 0;fill:var(--mb-p);animation:mbBeat .75s ease-in-out infinite alternate}
@keyframes mbBeat{from{transform:scale(1)}to{transform:scale(1.14)}}

/* ── Book Button (shortcode) ── */
.mb-book-btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;cursor:pointer;text-decoration:none!important;transition:all .28s;border:none;line-height:1}
/* styles */
.mb-btn-solid{background:linear-gradient(135deg,var(--mb-primary,var(--mb-p)),var(--mb-accent,var(--mb-a)));color:#fff!important;box-shadow:0 5px 20px color-mix(in srgb,var(--mb-p) 38%,transparent)}
.mb-btn-solid:hover{transform:translateY(-3px);box-shadow:0 9px 28px color-mix(in srgb,var(--mb-p) 48%,transparent)}
.mb-btn-outline{background:transparent!important;color:var(--mb-p)!important;border:2px solid var(--mb-p)!important}
.mb-btn-outline:hover{background:color-mix(in srgb,var(--mb-p) 8%,white)!important}
.mb-btn-ghost{background:color-mix(in srgb,var(--mb-p) 10%,white)!important;color:var(--mb-p)!important;border:none}
.mb-btn-ghost:hover{background:color-mix(in srgb,var(--mb-p) 18%,white)!important}
/* sizes */
.mb-btn-sm{padding:9px 20px;font-size:13px}
.mb-btn-md{padding:13px 28px;font-size:15px}
.mb-btn-lg{padding:17px 38px;font-size:18px}
/* radius */
.mb-btn-r-pill{border-radius:50px}
.mb-btn-r-rounded{border-radius:10px}
.mb-btn-r-square{border-radius:4px}

/* ── Modal ── */
.mb-modal{position:fixed;inset:0;z-index:99999;background:rgba(15,23,42,.6);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:16px}
.mb-dialog{background:#fff;border-radius:20px;width:100%;max-height:92vh;overflow-y:auto;position:relative;box-shadow:0 28px 90px rgba(0,0,0,.28)}
.mb-anim-slide .mb-dialog{animation:mbSlide .32s cubic-bezier(.34,1.56,.64,1)}
.mb-anim-fade  .mb-dialog{animation:mbFade  .28s ease}
.mb-anim-zoom  .mb-dialog{animation:mbZoom  .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes mbSlide{from{transform:translateY(44px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes mbFade {from{opacity:0}to{opacity:1}}
@keyframes mbZoom {from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.mb-dlg-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;color:#fff;font-size:16px;font-weight:700;border-radius:20px 20px 0 0}
.mb-close{background:rgba(255,255,255,.22);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .2s}
.mb-close:hover{background:rgba(255,255,255,.38)}
.mb-close-abs{position:absolute;top:14px;right:14px;background:var(--mb-s1);color:var(--mb-s4);border:none;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:2}
.mb-close-abs:hover{background:var(--mb-s2)}
.mb-dlg-body{padding:8px 16px 24px}

/* ── Result cards ── */
.mb-result{text-align:center;padding:56px 28px;border-radius:var(--mb-r);animation:mbIn .4s ease}
.mb-res-ico{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.mb-res-ico svg{width:34px;height:34px}
.mb-result h2{font-size:24px;margin:0 0 10px}
.mb-result p{color:var(--mb-s4);max-width:380px;margin:0 auto 8px;font-size:14px}
.mb-res-note{font-weight:600!important;color:var(--mb-s5)!important}
.mb-ok .mb-res-ico{background:#dcfce7}.mb-ok .mb-res-ico svg{stroke:var(--mb-ok);fill:none}.mb-ok h2{color:var(--mb-ok)}
.mb-fail .mb-res-ico{background:#fee2e2}.mb-fail .mb-res-ico svg{stroke:var(--mb-err);fill:none}.mb-fail h2{color:var(--mb-err)}

/* ── International phone field ── */
.mb-phone-wrap {
  display: flex;
  gap: 0;
  border: 1.5px solid #e0d5c8;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s;
  background: #fff;
}
.mb-phone-wrap:focus-within {
  border-color: #b5893a;
  box-shadow: 0 0 0 3px rgba(181,137,58,.1);
}
.mb-country-sel {
  border: none !important;
  border-right: 1.5px solid #e0d5c8 !important;
  border-radius: 0 !important;
  background: #fdf8f0 !important;
  padding: 0 10px !important;
  font-size: .85rem !important;
  min-width: 90px;
  max-width: 110px;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  color: #1c1a17;
  flex-shrink: 0;
}
.mb-phone-wrap input[type="tel"] {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  flex: 1;
  min-width: 0;
  font-size: .95rem;
  outline: none !important;
  background: transparent !important;
}

/* ── Timezone notice ── */
.mb-tz-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  color: #6b6154;
  background: #fdf8f0;
  border: 1px solid #e8ddd0;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  line-height: 1.5;
  flex-wrap: wrap;
}
.mb-tz-notice strong { color: #1c1a17; }
.mb-tz-notice svg { flex-shrink: 0; stroke: #b5893a; }

@media(max-width:480px){
  .mb-country-sel { min-width: 80px; max-width: 90px; font-size:.78rem !important; }
}

/* ── International phone field ── */
.mb-phone-wrap {
  display: flex;
  border: 1.5px solid #e0d5c8;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.mb-phone-wrap:focus-within {
  border-color: #b5893a;
  box-shadow: 0 0 0 3px rgba(181,137,58,.1);
}
.mb-country-sel {
  border: none !important;
  border-right: 1.5px solid #e0d5c8 !important;
  border-radius: 0 !important;
  background: #fdf8f0 !important;
  padding: 0 8px !important;
  font-size: .82rem !important;
  min-width: 95px; max-width: 115px;
  cursor: pointer; outline: none !important;
  box-shadow: none !important;
  color: #1c1a17; flex-shrink: 0;
}
.mb-phone-wrap input[type="tel"] {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  flex: 1; min-width: 0;
  background: transparent !important;
  outline: none !important;
}

/* ── Timezone notice ── */
.mb-tz-notice {
  display: flex; align-items: flex-start;
  gap: 7px; flex-wrap: wrap;
  font-size: .74rem; color: #6b6154;
  background: #fdf8f0; border: 1px solid #e8ddd0;
  border-radius: 8px; padding: 8px 12px;
  margin-bottom: 12px; line-height: 1.5;
}
.mb-tz-notice strong { color: #1c1a17; }
.mb-tz-notice svg { flex-shrink:0; margin-top:1px; stroke:#b5893a; }

@media(max-width:480px){
  .mb-country-sel { min-width:80px; max-width:90px; font-size:.75rem !important; }
}