/* ============================================================
   REQUEST-INFO WIZARD — new styles only
   INTEGRATION: append this whole block to the end of style.css.
   Uses only existing tokens from :root in style.css (--blue,
   --blue-deep, --ink, --line, --radius, --font-display, etc).
   No new tokens introduced. Class prefix "wms-form-" keeps this
   isolated from the rest of the site's "wms-" component classes.
   ============================================================ */

/* ---------- Intro strip (reuses .wms-hero-sub pattern, just narrower) ---------- */
.wms-form-intro{max-width:760px;}
.wms-form-intro p{color:var(--ink-soft); font-size:1.03rem; margin:0 0 14px;}
.wms-form-intro-list{margin:0 0 18px; padding-left:22px; color:var(--ink-soft); font-size:1.03rem;}
.wms-form-intro-list li{margin-bottom:6px;}
.wms-form-note{background:var(--blue-tint); border:1px solid rgba(0,120,248,0.18); border-radius:10px;
  padding:16px 20px; font-size:0.92rem; color:var(--ink-soft); margin-top:22px;}
.wms-form-note strong{color:var(--ink);}

.wms-faq-links{text-align:center; max-width:640px; margin:28px auto 0; color:var(--ink-soft); font-size:0.95rem;}
.wms-faq-links a{color:var(--blue-deep); font-weight:600; text-decoration:none;}
.wms-faq-links a:hover{text-decoration:underline;}

/* ---------- Progress bar ---------- */
.wms-progress{list-style:none; display:flex; margin:0 0 40px; padding:0; counter-reset:wmsstep;
  border-bottom:1px solid var(--line);}
.wms-progress li{flex:1; text-align:center; padding:0 4px 16px; position:relative; font-size:0.86rem;
  color:var(--ink-soft); font-weight:600;}
.wms-progress li::before{counter-increment:wmsstep; content:counter(wmsstep);
  display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background:var(--paper-soft); border:1.5px solid var(--line); color:var(--ink-soft);
  margin:0 auto 8px; font-family:var(--font-display); font-size:0.85rem;}
.wms-progress li::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:transparent;}
.wms-progress li.wms-step-done::before{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; content:"\2713";}
.wms-progress li.wms-step-active{color:var(--ink);}
.wms-progress li.wms-step-active::before{border-color:var(--blue-deep); color:var(--blue-deep);}
.wms-progress li.wms-step-active::after{background:var(--blue-deep);}
@media (max-width:640px){ .wms-progress li span{display:none;} }

/* ---------- Wizard shell ---------- */
.wms-wizard{max-width:880px; margin:0 auto; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:36px 40px 32px;}
@media (max-width:640px){ .wms-wizard{padding:26px 20px 22px;} }
.wms-wizard-panel{display:none;}
.wms-wizard-panel.wms-panel-active{display:block; animation:wmsFadeIn 0.2s ease;}
@keyframes wmsFadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.wms-wizard h2.wms-panel-title{font-family:var(--font-display); font-size:1.35rem; font-weight:600; margin:0 0 6px;}
.wms-panel-sub{color:var(--ink-soft); font-size:0.94rem; margin:0 0 28px;}

/* ---------- Field grid ---------- */
.wms-field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.wms-field{display:flex; flex-direction:column; gap:6px;}
.wms-field label{font-weight:600; font-size:0.9rem; color:var(--ink);}
.wms-field .wms-req{color:#C0303A;}
.wms-field input[type=text], .wms-field input[type=email], .wms-field input[type=tel], .wms-field input[type=number],
.wms-field select, .wms-field textarea{
  font:inherit; padding:12px 14px; border:1.5px solid var(--line); border-radius:8px;
  background:var(--paper-soft); color:var(--ink); min-height:46px;
}
.wms-field-age input[type=number]{max-width:110px;}
.wms-field textarea{min-height:110px; resize:vertical;}
.wms-field input:focus, .wms-field select:focus, .wms-field textarea:focus{
  outline:none; border-color:var(--blue); background:var(--paper);
}
.wms-field-phone{display:grid; grid-template-columns:1fr 130px; gap:10px; min-width:0;}
.wms-field-phone input, .wms-field-phone select{min-width:0;}
.wms-field-error{font-size:0.82rem; color:#C0303A; display:none;}
.wms-field.wms-invalid input, .wms-field.wms-invalid select{border-color:#C0303A;}
.wms-field.wms-invalid .wms-field-error{display:block;}
@media (max-width:640px){ .wms-field-row{grid-template-columns:1fr;} }

/* ---------- Student cards ---------- */
.wms-student-card{border:1.5px solid var(--line); border-radius:12px; padding:24px; margin-bottom:20px; position:relative;}
.wms-student-card h3{font-family:var(--font-display); margin:0 0 18px; font-size:1.05rem; display:flex; align-items:center; justify-content:space-between;}
.wms-student-remove{background:none; border:0; color:var(--ink-soft); font-size:0.85rem; cursor:pointer; text-decoration:underline; font-weight:500;}
.wms-student-remove:hover{color:#C0303A;}
.wms-add-student{display:inline-flex; align-items:center; gap:8px; background:none; border:1.5px dashed var(--line);
  border-radius:10px; padding:14px 20px; width:100%; justify-content:center; color:var(--blue-deep); font-weight:700;
  cursor:pointer; font-size:0.94rem;}
.wms-add-student:hover{border-color:var(--blue); background:var(--blue-tint);}
.wms-add-student[hidden]{display:none;}

/* ---------- Chip toggles (instruments / days / times) — real checkboxes, styled as chips ---------- */
.wms-field-label-block{font-weight:600; font-size:0.9rem; color:var(--ink); margin-bottom:10px; display:block;}
.wms-chip-toggles{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.wms-chip-toggles input{position:absolute; opacity:0; width:1px; height:1px;}
.wms-chip-toggles label{
  display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px; border:1.5px solid var(--line);
  font-size:0.88rem; font-weight:600; color:var(--ink-soft); cursor:pointer; user-select:none;
  transition:background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.wms-chip-toggles input:checked + label{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff;}
.wms-chip-toggles input:focus-visible + label{outline:3px solid var(--blue); outline-offset:2px;}

/* ---------- Review step ---------- */
.wms-review-block{background:var(--paper-soft); border:1px solid var(--line); border-radius:10px; padding:22px 24px; margin-bottom:16px;}
.wms-review-block h4{font-family:var(--font-display); margin:0 0 10px; font-size:1rem;}
.wms-review-block dl{margin:0; display:grid; grid-template-columns:150px 1fr; gap:6px 14px; font-size:0.9rem;}
.wms-review-block dt{color:var(--ink-soft);}
.wms-review-block dd{margin:0; color:var(--ink); font-weight:500;}
.wms-review-empty{color:var(--ink-soft); font-style:italic;}

.wms-length-warn{display:none; background:#FFF6E5; border:1px solid #A67B0A; color:#7A5A00; border-radius:8px;
  padding:12px 16px; font-size:0.85rem; margin-bottom:16px;}
.wms-length-warn.wms-show{display:block;}

/* ---------- Wizard nav buttons ---------- */
.wms-wizard-actions{display:flex; justify-content:space-between; align-items:center; margin-top:30px;
  padding-top:24px; border-top:1px solid var(--line); gap:12px; flex-wrap:wrap;}
.wms-btn-plain{background:none; border:0; color:var(--ink-soft); font-weight:600; cursor:pointer; font-size:0.95rem; padding:12px 6px;}
.wms-btn-plain:hover{color:var(--ink);}
.wms-btn-plain[hidden]{visibility:hidden;}
button.wms-btn{border:0; cursor:pointer; font-family:inherit;}
.wms-btn-secondary{background:var(--paper-soft); color:var(--ink); border:1.5px solid var(--line) !important;}
.wms-btn-secondary:hover{border-color:var(--ink);}

.wms-sent-confirm{display:none; text-align:center; padding:20px 0 4px;}
.wms-sent-confirm.wms-show{display:block;}
.wms-sent-confirm svg{width:44px; height:44px; color:var(--blue-deep); margin-bottom:12px;}

/* ---------- Force [hidden] to win ---------- */
/* .wms-btn (in style.css) sets display:inline-block, which otherwise silently
   overrides the hidden attribute's own display:none — author CSS always beats
   the browser's default stylesheet regardless of selector specificity. Without
   this rule, Next/Send/Copy could all render at once regardless of step. */
.wms-wizard-actions [hidden]{display:none !important;}

/* ---------- Match live site's blue topbar ---------- */
/* style.css (from the homepage bundle) sets .wms-topbar background to var(--ink)
   (dark charcoal). The live wanderingminstrel.ca/request-info/ page actually shows
   a blue topbar. Overriding here, scoped to this page only, so the homepage bundle
   itself is untouched. */
.wms-topbar{background:var(--blue-deep) !important;}
.wms-topbar .wms-trial{background:rgba(0,0,0,0.18) !important;}
.wms-topbar .wms-trial:hover{background:rgba(0,0,0,0.32) !important;}

/* ---------- Contact Us page ---------- */
.wms-contact-layout{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start;}
@media (max-width:980px){
  .wms-contact-layout{grid-template-columns:1fr; gap:36px;}
}
.wms-contact-form{display:flex; flex-direction:column; gap:22px;}
.wms-contact-submit-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.wms-contact-link{display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:600; text-decoration:none;}
.wms-contact-link:hover{color:var(--blue-deep);}
.wms-address-label{font-family:var(--font-display); font-weight:600; letter-spacing:0.02em; margin:0 0 8px; color:var(--ink);}

.wms-send-btn{
  display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; font-family:inherit;
  background:var(--blue-deep); color:#fff; font-weight:700; font-size:1rem;
  padding:15px 30px; border-radius:999px; box-shadow:0 4px 14px rgba(0,80,208,0.28);
  transition:transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.wms-send-btn svg{width:17px; height:17px; flex:none; transition:transform 0.15s ease;}
.wms-send-btn:hover{background:#003DA0; transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,80,208,0.36);}
.wms-send-btn:hover svg{transform:translate(2px,-2px);}
.wms-send-btn:active{transform:translateY(0); box-shadow:0 2px 8px rgba(0,80,208,0.28);}
.wms-send-btn:focus-visible{outline:2px solid var(--blue-deep); outline-offset:3px;}

