/* ══════════════════════════════════════════════════════════════
   M&T Impact Booking — Frontend CSS
   Brand: Black #0d0d0d · White #ffffff · Gold #c9a462
═══════════════════════════════════════════════════════════════ */
:root{
  --black:#0d0d0d;
  --white:#ffffff;
  --gold:#c9a462;
  --gold-light:#e8c97a;
  --gold-bg:#faf7f0;
  --gray:#888888;
  --gray-light:#f5f5f5;
  --gray-border:#e0e0e0;
  --text:#1a1a1a;
  --error:#c0392b;
  --success:#1a7a3f;
  --r:4px;
  --shadow:0 2px 20px rgba(0,0,0,.10);
  --shadow-lg:0 8px 40px rgba(0,0,0,.16);
}
*{box-sizing:border-box;}
.iwd-wrap{
  max-width:840px;
  margin:0 auto;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--text);
  font-size:15px;
}
.iwd-hidden{display:none!important;}

/* ── Header ── */
.iwd-header{
  display:flex;align-items:center;gap:20px;
  background:var(--black);color:var(--white);
  padding:28px 36px;border-radius:var(--r) var(--r) 0 0;
}
.iwd-header-icon{flex-shrink:0;}
.iwd-header-title{
  font-size:22px;font-weight:800;letter-spacing:-.02em;
  margin:0 0 4px;color:var(--white);
}
.iwd-header-sub{
  font-size:12px;letter-spacing:.10em;text-transform:uppercase;
  color:#888;margin:0;
}
.iwd-gold-bar{
  height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));
  margin-bottom:32px;
}

/* ── Stepper ── */
.iwd-stepper{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:36px;gap:0;
}
.iwd-stepper-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.iwd-stepper-num{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
  background:var(--gray-border);color:var(--gray);
  transition:all .3s;border:2px solid transparent;
}
.iwd-stepper-item.active .iwd-stepper-num{
  background:var(--black);color:var(--white);border-color:var(--gold);
}
.iwd-stepper-item.done .iwd-stepper-num{
  background:var(--gold);color:var(--black);border-color:var(--gold);
}
.iwd-stepper-label{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--gray);white-space:nowrap;
}
.iwd-stepper-item.active .iwd-stepper-label{color:var(--black);}
.iwd-stepper-line{
  flex:1;height:2px;background:var(--gray-border);
  min-width:28px;margin:0 6px 24px;transition:background .3s;
}
.iwd-stepper-line.done{background:var(--gold);}

/* ── Step Head ── */
.iwd-step-head{margin-bottom:28px;}
.iwd-step-title{
  font-size:26px;font-weight:800;letter-spacing:-.02em;
  margin:0 0 6px;color:var(--black);
}
.iwd-step-sub{font-size:14px;color:var(--gray);margin:0;}

/* ═══ STEP 1: SERVICES ═══════════════════════════════════════ */
.iwd-service-list{display:flex;flex-direction:column;gap:16px;margin-bottom:8px;}
.iwd-svc{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border:2px solid var(--gray-border);border-radius:var(--r);
  padding:24px 24px;cursor:pointer;background:var(--white);
  transition:border-color .2s,box-shadow .2s,background .2s;
  position:relative;overflow:hidden;
}
.iwd-svc::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--gold);transform:scaleY(0);transition:transform .2s;transform-origin:bottom;
}
.iwd-svc:hover{border-color:var(--black);box-shadow:var(--shadow);}
.iwd-svc:hover::before,.iwd-svc.selected::before{transform:scaleY(1);}
.iwd-svc.selected{border-color:var(--black);background:var(--black);color:var(--white);}
.iwd-svc-left{display:flex;align-items:flex-start;gap:18px;flex:1;}
.iwd-svc-icon{
  flex-shrink:0;width:52px;height:52px;
  border-radius:var(--r);background:var(--gray-light);
  display:flex;align-items:center;justify-content:center;
  color:var(--black);transition:background .2s,color .2s;
}
.iwd-svc.selected .iwd-svc-icon{background:rgba(255,255,255,.1);color:var(--gold);}
.iwd-svc-name{
  font-size:17px;font-weight:800;margin:0 0 6px;
  letter-spacing:-.01em;transition:color .2s;
}
.iwd-svc.selected .iwd-svc-name{color:var(--white);}
.iwd-svc-desc{
  font-size:13px;color:var(--gray);margin:0 0 10px;line-height:1.6;
  transition:color .2s;
}
.iwd-svc.selected .iwd-svc-desc{color:#bbb;}
.iwd-svc-meta{display:flex;align-items:center;gap:16px;}
.iwd-svc-dur{
  display:flex;align-items:center;gap:5px;
  font-size:13px;color:var(--gray);transition:color .2s;
}
.iwd-svc.selected .iwd-svc-dur{color:#aaa;}
.iwd-svc-price{
  font-size:20px;font-weight:800;color:var(--black);
  letter-spacing:-.02em;transition:color .2s;
}
.iwd-svc.selected .iwd-svc-price{color:var(--gold);}
.iwd-svc-free{
  font-size:15px;font-weight:700;color:var(--success);
  background:#e8f8ee;padding:3px 10px;border-radius:20px;
  transition:all .2s;
}
.iwd-svc.selected .iwd-svc-free{background:rgba(26,122,63,.25);color:#6ee8a0;}
.iwd-svc-select{
  flex-shrink:0;display:flex;align-items:center;gap:10px;
}
.iwd-svc-check{
  width:28px;height:28px;border-radius:50%;
  background:var(--gold);
  display:none;align-items:center;justify-content:center;
}
.iwd-svc.selected .iwd-svc-check{display:flex;}
.iwd-svc.selected .iwd-svc-arrow{display:none;}
.iwd-svc-arrow{font-size:20px;color:var(--gray);transition:transform .2s;}
.iwd-svc:hover .iwd-svc-arrow{transform:translateX(4px);}

/* ═══ STEP 2: CALENDAR ═══════════════════════════════════════ */
.iwd-cal-layout{
  display:grid;grid-template-columns:320px 1fr;gap:24px;margin-bottom:24px;
}
@media(max-width:640px){.iwd-cal-layout{grid-template-columns:1fr;}}
.iwd-cal-card{
  border:1px solid var(--gray-border);border-radius:var(--r);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow);
}
.iwd-cal-head{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--black);padding:14px 18px;
}
.iwd-cal-month{font-size:15px;font-weight:700;color:var(--white);}
.iwd-cal-nav{
  background:none;border:none;color:var(--gold);font-size:26px;
  cursor:pointer;padding:0 4px;line-height:1;
}
.iwd-cal-nav:hover{color:var(--gold-light);}
.iwd-cal-dows{
  display:grid;grid-template-columns:repeat(7,1fr);
  background:var(--gray-light);border-bottom:1px solid var(--gray-border);
}
.iwd-dow{
  text-align:center;font-size:11px;font-weight:700;
  color:var(--gray);padding:10px 0;
  text-transform:uppercase;letter-spacing:.06em;
}
.iwd-cal-days{
  display:grid;grid-template-columns:repeat(7,1fr);
  padding:8px;gap:3px;background:var(--white);
}
.iwd-cal-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:13px;border-radius:2px;cursor:default;font-weight:500;
}
.iwd-cal-day.available{
  cursor:pointer;font-weight:700;color:var(--black);
  background:var(--gold-bg);
}
.iwd-cal-day.available:hover{background:var(--gold);color:var(--black);}
.iwd-cal-day.selected{background:var(--black)!important;color:var(--gold)!important;font-weight:800;}
.iwd-cal-day.unavailable{color:#d0d0d0;}
.iwd-cal-day.other-month{visibility:hidden;}
.iwd-cal-loading{
  grid-column:span 7;padding:24px;text-align:center;
  color:var(--gray);font-size:14px;
}

/* Slots panel */
.iwd-slots-panel{
  border:1px solid var(--gray-border);border-radius:var(--r);
  background:var(--white);box-shadow:var(--shadow);
  display:flex;flex-direction:column;min-height:280px;
}
.iwd-slots-hint{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:32px;
  text-align:center;color:var(--gray);font-size:14px;
}
.iwd-slots-date{
  font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--black);
  padding:14px 16px 10px;border-bottom:1px solid var(--gray-border);
  background:var(--gold-bg);
}
.iwd-slots-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:8px;padding:16px;
}
.iwd-slot{
  padding:10px 6px;text-align:center;
  border:2px solid var(--gray-border);border-radius:var(--r);
  font-size:13px;font-weight:700;cursor:pointer;
  color:var(--black);background:var(--white);
  transition:all .15s;position:relative;
}
.iwd-slot:hover{border-color:var(--gold);background:var(--gold-bg);color:var(--black);}
.iwd-slot.selected{
  border-color:var(--black);background:var(--black);color:var(--gold);
  transform:scale(1.06);box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.iwd-slot.selected::after{
  content:'✓';
  position:absolute;top:-8px;right:-8px;
  width:18px;height:18px;border-radius:50%;
  background:var(--gold);color:var(--black);
  font-size:10px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  line-height:18px;text-align:center;
}

/* Spinner */
.iwd-spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid var(--gray-border);border-top-color:var(--gold);
  animation:iwd-spin .8s linear infinite;
}
.iwd-spinner-sm{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:iwd-spin .7s linear infinite;vertical-align:middle;
}
@keyframes iwd-spin{to{transform:rotate(360deg);}}

/* ═══ STEP 3: FORM ═══════════════════════════════════════════ */
.iwd-form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px;
}
@media(max-width:520px){.iwd-form-grid{grid-template-columns:1fr;}}
.iwd-field{display:flex;flex-direction:column;gap:7px;}
.iwd-field-full{grid-column:span 2;}
.iwd-field-state{max-width:none;}
@media(max-width:520px){.iwd-field-full,.iwd-field-state{grid-column:span 1;}}
.iwd-label{font-size:13px;font-weight:700;color:var(--black);letter-spacing:.01em;}
.iwd-req{color:var(--gold);}
.iwd-input{
  padding:11px 14px;
  border:1.5px solid var(--gray-border);border-radius:var(--r);
  font-size:14px;color:var(--text);background:var(--white);
  width:100%;transition:border-color .2s,box-shadow .2s;
  font-family:inherit;
}
.iwd-input:focus{outline:none;border-color:var(--black);box-shadow:0 0 0 3px rgba(13,13,13,.08);}
.iwd-input.iwd-input-locked{background:var(--gray-light);color:var(--gray);cursor:default;font-weight:700;}
.iwd-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.iwd-textarea{resize:vertical;min-height:80px;}
.iwd-hint{font-size:12px;color:var(--gray);}
.iwd-input.error{border-color:var(--error);}

/* Payment option */
.iwd-payment-option{
  background:var(--gold-bg);border:1px solid rgba(201,164,98,.3);
  border-radius:var(--r);padding:20px 24px;margin-bottom:20px;
}
.iwd-payment-title{
  font-size:14px;font-weight:700;color:var(--black);
  margin-bottom:14px;text-transform:uppercase;letter-spacing:.06em;
}
.iwd-payment-choices{display:flex;flex-direction:column;gap:10px;}
.iwd-pay-choice{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border:1.5px solid var(--gray-border);
  border-radius:var(--r);cursor:pointer;background:var(--white);
  transition:border-color .2s;
}
.iwd-pay-choice:has(input:checked){border-color:var(--black);}
.iwd-pay-choice input{margin-top:2px;accent-color:var(--black);}
.iwd-pay-choice-body strong{display:block;font-size:14px;font-weight:700;color:var(--black);}
.iwd-pay-choice-body span{font-size:13px;color:var(--gray);}

/* Terms */
.iwd-terms-row{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:20px;padding:16px;
  background:var(--gray-light);border-radius:var(--r);
}
.iwd-terms-label{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:var(--gray);cursor:pointer;
}
.iwd-terms-label input{margin-top:2px;accent-color:var(--black);}
.iwd-terms-label a{color:var(--black);font-weight:700;}

/* ═══ STEP 4: SUMMARY ════════════════════════════════════════ */
.iwd-summary{
  background:var(--black);border-radius:var(--r);
  padding:28px 32px;margin-bottom:28px;color:var(--white);
}
.iwd-summary-section{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:10px 0;font-size:15px;gap:16px;
}
.iwd-summary-label{color:#888;font-weight:500;flex-shrink:0;}
.iwd-summary-value{font-weight:700;text-align:right;}
.iwd-summary-divider{border:none;border-top:1px solid #2a2a2a;margin:6px 0;}
.iwd-summary-price{font-size:22px;font-weight:800;color:var(--gold);}
.iwd-summary-total .iwd-summary-label{font-weight:700;color:#ccc;}

/* ── Buttons ── */
.iwd-step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px;}
.iwd-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:var(--r);
  font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;border:2px solid var(--black);
  background:var(--black);color:var(--white);
  text-decoration:none;transition:all .15s;
  font-family:inherit;
}
.iwd-btn:hover{background:#2a2a2a;border-color:#2a2a2a;color:var(--white);}
.iwd-btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  border-color:transparent;color:var(--black);
}
.iwd-btn-gold:hover{background:linear-gradient(135deg,#b8913f,#d4b45a);color:var(--black);}
.iwd-btn-ghost{background:transparent;color:var(--black);}
.iwd-btn-ghost:hover{background:var(--gray-light);}
.iwd-btn-disabled{background:var(--gray-border);border-color:var(--gray-border);color:var(--gray);cursor:not-allowed;}
.iwd-btn:not(.iwd-btn-disabled){animation:none;}
@keyframes iwd-btn-appear{from{transform:scale(.95);opacity:.7;}to{transform:scale(1);opacity:1;}}
.iwd-btn-sm{padding:8px 16px;font-size:12px;}

/* Error */
.iwd-error{
  background:#fff0f0;border:1px solid #ffd0d0;color:var(--error);
  padding:12px 16px;border-radius:var(--r);font-size:14px;margin-top:16px;
}

/* ═══ SUCCESS ════════════════════════════════════════════════ */
.iwd-success{text-align:center;padding:40px 20px;}
.iwd-success-icon{margin-bottom:20px;}
.iwd-success-title{
  font-size:30px;font-weight:800;letter-spacing:-.02em;
  margin:0 0 10px;color:var(--black);
}
.iwd-success-sub{color:var(--gray);font-size:15px;margin-bottom:28px;}
.iwd-success-card{
  background:var(--black);border-radius:var(--r);
  padding:28px;margin:0 auto 24px;max-width:400px;
}
.iwd-success-code-label{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:#888;margin-bottom:8px;
}
.iwd-success-code{
  font-size:28px;font-weight:800;font-family:monospace;
  color:var(--gold);letter-spacing:.15em;margin-bottom:20px;
}
.iwd-success-details{
  text-align:left;color:#ccc;font-size:14px;
  display:flex;flex-direction:column;gap:6px;
}
.iwd-success-note{color:var(--gray);font-size:13px;margin-bottom:28px;}
.iwd-success-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ═══ MY APPOINTMENTS ════════════════════════════════════════ */
.iwd-ma-empty,.iwd-login-box{
  text-align:center;padding:56px 24px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.iwd-ma-empty p,.iwd-login-box p{color:var(--gray);font-size:15px;}
.iwd-login-box h2{font-size:22px;font-weight:800;color:var(--black);}
.iwd-login-sub{font-size:13px;color:var(--gray);}
.iwd-login-sub a{color:var(--black);font-weight:700;}
.iwd-ma-list{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;}
.iwd-ma-card{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--white);border:1.5px solid var(--gray-border);
  border-radius:var(--r);padding:20px 24px;flex-wrap:wrap;
  transition:border-color .2s;
}
.iwd-ma-card:hover{border-color:var(--black);}
.iwd-ma-card.cancelled{opacity:.5;}
.iwd-ma-card-left{display:flex;flex-direction:column;gap:6px;}
.iwd-ma-card-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.iwd-ma-code{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gray);text-transform:uppercase;}
.iwd-ma-service{font-size:16px;font-weight:800;color:var(--black);}
.iwd-ma-datetime{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--gray);}
.iwd-ma-price{font-size:18px;font-weight:800;color:var(--black);}
.iwd-price-free{color:var(--success);font-size:14px;}
.iwd-ma-actions{text-align:center;margin-top:8px;}

/* Status badges */
.iwd-status{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;text-transform:capitalize;}
.iwd-status-pending{background:#fff8e8;color:#8a6600;}
.iwd-status-pending_payment{background:#fff0d6;color:#8a4a00;}
.iwd-status-confirmed{background:#e8fbed;color:#166534;}
.iwd-status-completed{background:#e0f2fe;color:#0c4a6e;}
.iwd-status-cancelled{background:#fee2e2;color:#991b1b;}

/* ── Cancel button ── */
.iwd-cancel-btn{color:var(--error)!important;border-color:var(--error)!important;}
.iwd-cancel-btn:hover{background:#fff0f0!important;}

/* Mobile */
@media(max-width:520px){
  .iwd-header{padding:20px 20px;gap:14px;}
  .iwd-header-title{font-size:18px;}
  .iwd-summary{padding:20px;}
  .iwd-step-nav{flex-direction:column-reverse;}
  .iwd-btn{width:100%;justify-content:center;}
  .iwd-svc{flex-direction:column;align-items:flex-start;}
}

/* ═══ ACCOUNT BAR ════════════════════════════════════════════ */
.iwd-account-bar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;
  background:var(--black);
  padding:10px 20px;
  border-radius:var(--r) var(--r) 0 0;
  font-size:13px;
  color:#bbb;
}
.iwd-account-bar-guest{background:#2a2a2a;}
.iwd-account-bar strong{color:#fff;}
.iwd-account-bar-left{display:flex;align-items:center;gap:8px;}
.iwd-account-bar-right{display:flex;align-items:center;gap:8px;}
.iwd-account-link{color:var(--gold);text-decoration:none;font-weight:600;}
.iwd-account-link:hover{color:var(--gold-light);text-decoration:underline;}
.iwd-account-logout{color:#aaa!important;}
.iwd-account-logout:hover{color:#fff!important;}
.iwd-account-sep{color:#444;}

/* Adjust header radius when account bar is present */
.iwd-account-bar + .iwd-hp-field + .iwd-header,
.iwd-account-bar ~ .iwd-header{border-radius:0;}

/* ═══ HONEYPOT ═══════════════════════════════════════════════ */
.iwd-hp-field{
  position:absolute;left:-9999px;top:-9999px;
  width:1px;height:1px;overflow:hidden;opacity:0;
  pointer-events:none;
}