/**
 * File Path: assets/css/wizard.css
 * MBS Setup Wizard — Brand tokens + layout
 * Direction: Variation B (Two-pane editorial)
 */

.mbs-wizard-frame {
  --mbs-navy: #2C3E6B;
  --mbs-navy-light: #4A5F8A;
  --mbs-navy-dark: #1A2B50;
  --mbs-lavender: #C8B4D4;
  --mbs-lavender-pale: #EDE8F4;
  --mbs-teal: #4AABB8;
  --mbs-teal-dark: #2E8A96;
  --mbs-teal-pale: #D4EEF1;
  --mbs-beige: #F4F0E8;
  --mbs-beige-dark: #E0D8C8;
  --mbs-parchment: #FAFBFD;
  --mbs-slate: #5A6472;
  --mbs-mist: #9AABBA;
  --mbs-free-text: #1A5A63; /* V7-A-002: wizard-internal token; not the renamed MBS design token --mbs-coming-soon-text */

  --mbs-serif: Georgia, "Times New Roman", serif;
  --mbs-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mbs-mono: "Courier New", Courier, monospace;

  position: fixed; inset: 32px 20px 20px 180px; /* clears WP admin bar + sidebar */
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(26,43,80,0.12);
  font-family: var(--mbs-sans); color: var(--mbs-slate);
  display: flex; overflow: hidden;
}

@media (max-width: 782px) {
  .mbs-wizard-frame { inset: 46px 0 0 0; border-radius: 0; }
}

/* Left rail */
.mbs-wizard-rail {
  width: 320px; background: var(--mbs-navy); color: #fff;
  padding: 32px 28px; display: flex; flex-direction: column;
}
.mbs-wizard-rail__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; }
.mbs-wizard-rail__mark {
  width: 40px; height: 40px; border-radius: 6px;
  background: var(--mbs-navy-dark); color: var(--mbs-lavender);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mbs-serif); font-weight: 700; font-size: 15px;
}
.mbs-wizard-rail__title { font-family: var(--mbs-serif); font-size: 16px; font-weight: 700; }
.mbs-wizard-rail__sub { font-size: 11px; color: var(--mbs-lavender); letter-spacing: 0.06em; margin-top: 2px; }
.mbs-wizard-rail__steps { list-style: none; padding: 0; margin: 0; flex: 1; }
.mbs-wizard-rail__steps li { position: relative; padding-left: 38px; padding-bottom: 28px; }
.mbs-wizard-rail__steps li:last-child { padding-bottom: 0; }
.mbs-wizard-rail__steps li::before {
  content: ""; position: absolute; left: 11px; top: 24px; bottom: 4px;
  width: 2px; background: var(--mbs-navy-light);
}
.mbs-wizard-rail__steps li:last-child::before { display: none; }
.mbs-wizard-rail__steps li.is-done::before { background: var(--mbs-teal); }
.mbs-wizard-rail__bullet {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--mbs-navy-light); background: transparent;
  color: var(--mbs-lavender); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mbs-wizard-rail__steps li.is-active .mbs-wizard-rail__bullet { background: var(--mbs-lavender); color: var(--mbs-navy); border: 0; }
.mbs-wizard-rail__steps li.is-done .mbs-wizard-rail__bullet { background: var(--mbs-teal); color: #fff; border: 0; }
.mbs-wizard-rail__step-title { font-family: var(--mbs-serif); font-size: 15px; font-weight: 700; color: var(--mbs-navy-light); }
.mbs-wizard-rail__step-sub   { font-size: 11.5px; color: var(--mbs-navy-light); margin-top: 2px; }
.mbs-wizard-rail__steps li.is-active .mbs-wizard-rail__step-title { color: #fff; }
.mbs-wizard-rail__steps li.is-active .mbs-wizard-rail__step-sub { color: var(--mbs-lavender); }
.mbs-wizard-rail__steps li.is-done   .mbs-wizard-rail__step-title { color: var(--mbs-lavender); }
.mbs-wizard-rail__tagline {
  border-top: 1px solid var(--mbs-navy-light); padding-top: 18px;
  font-size: 11px; color: var(--mbs-navy-light);
  font-style: italic; font-family: var(--mbs-serif);
}

/* Right pane */
.mbs-wizard-main { flex: 1; display: grid; overflow: hidden; }
.mbs-wizard-main--split { grid-template-columns: 1fr 1fr; }
.mbs-wizard-main--full  { grid-template-columns: 1fr; }
.mbs-wizard-form { padding: 48px 56px; display: flex; flex-direction: column; overflow: auto; }
.mbs-wizard-form--bare { padding: 0; }

/* Live preview pane */
.mbs-wizard-preview {
  background: var(--mbs-beige); padding: 48px 40px;
  border-left: 1px solid var(--mbs-beige-dark); overflow: auto;
}
.mbs-wizard-preview__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--mbs-mist); text-transform: uppercase; margin-bottom: 14px;
}
.mbs-wizard-preview__caption {
  font-size: 11.5px; color: var(--mbs-mist); margin-top: 14px;
  font-style: italic; font-family: var(--mbs-serif);
}

/* Browser mock */
.mbs-mock {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(26,43,80,0.10);
  border: 1px solid var(--mbs-beige-dark);
}
.mbs-mock__chrome {
  background: var(--mbs-parchment); padding: 10px 14px;
  border-bottom: 1px solid var(--mbs-beige-dark);
  display: flex; align-items: center; gap: 6px;
}
.mbs-mock__dot { width: 9px; height: 9px; border-radius: 50%; }
.mbs-mock__dot--r { background: #FF5F57; }
.mbs-mock__dot--y { background: #FEBC2E; }
.mbs-mock__dot--g { background: #28C840; }
.mbs-mock__url {
  flex: 1; margin-left: 10px; height: 18px;
  background: #fff; border: 1px solid var(--mbs-beige-dark);
  border-radius: 4px; font-size: 10px; color: var(--mbs-mist);
  padding: 3px 8px; font-family: var(--mbs-mono);
}
.mbs-mock__body { padding: 14px; }

/* Form primitives */
.mbs-wizard-input {
  width: 100%; font-family: var(--mbs-sans); font-size: 14px;
  padding: 9px 12px; border-radius: 4px;
  border: 1px solid var(--mbs-beige-dark); background: #fff; color: var(--mbs-slate);
}
.mbs-wizard-input:focus {
  outline: none; border-color: var(--mbs-teal);
  box-shadow: 0 0 0 3px rgba(74,171,184,0.18);
}
.mbs-wizard-label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--mbs-mist); margin-bottom: 6px;
}

/* Buttons */
.mbs-wizard-btn {
  font-family: var(--mbs-sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.03em; padding: 10px 22px; border-radius: 6px;
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 120ms, border-color 120ms;
}
.mbs-wizard-btn--primary { background: var(--mbs-teal); color: #fff; }
.mbs-wizard-btn--primary:hover { background: var(--mbs-teal-dark); }
.mbs-wizard-btn--ghost { background: transparent; color: var(--mbs-slate); border-color: var(--mbs-beige-dark); }
.mbs-wizard-btn--ghost:hover { border-color: var(--mbs-mist); color: var(--mbs-navy); }
.mbs-wizard-btn--text { background: transparent; color: var(--mbs-mist); border: none; padding: 10px 12px; }
.mbs-wizard-btn--text:hover { color: var(--mbs-slate); }

/* Badges */
.mbs-wizard-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--mbs-teal-pale); color: var(--mbs-free-text);
}

/* Layout option list */
.mbs-wizard-layout-list { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; }
.mbs-wizard-layout-option {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 8px; cursor: pointer;
  background: #fff; border: 1px solid var(--mbs-beige-dark);
  text-align: left; width: 100%;
}
.mbs-wizard-layout-option.is-selected {
  background: var(--mbs-lavender-pale);
  border: 1.5px solid var(--mbs-navy);
}
.mbs-wizard-layout-option__radio {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--mbs-mist); background: #fff; flex-shrink: 0;
}
.mbs-wizard-layout-option.is-selected .mbs-wizard-layout-option__radio {
  border: 5px solid var(--mbs-navy);
}

/* Cover dropzone */
.mbs-wizard-dropzone {
  display: flex; gap: 16px; align-items: center;
  padding: 14px; border-radius: 8px;
  border: 1.5px dashed var(--mbs-beige-dark);
  background: var(--mbs-parchment);
  transition: background 120ms, border-color 120ms;
}
.mbs-wizard-dropzone.is-dragover {
  border-color: var(--mbs-teal); background: var(--mbs-teal-pale);
}
.mbs-wizard-dropzone__thumb {
  width: 72px; aspect-ratio: 2/3; border-radius: 3px; overflow: hidden;
  flex-shrink: 0; background: var(--mbs-beige);
}
.mbs-wizard-dropzone__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Animations */
@keyframes mbsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mbsRise { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes mbsPop  { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes mbsFall { to   { transform: translateY(120vh) rotate(720deg); opacity: 0.6; } }

.mbs-wizard-crossfade { animation: mbsFade 280ms ease-out; }
