/* ============================================================
   JP Tech & Support Careers Portal — shared wizard stylesheet
   Brand tokens carried over from the general JP Investment portal.
   ============================================================ */

:root {
  --navy: #21293b;
  --navy-deep: #171d2a;
  --gold: #c9a84c;
  --gold-deep: #a9812f;
  --paper: #f0f2f6;
  --surface: #ffffff;
  --surface-alt: #f5f7fa;
  --ink: #21293b;
  --ink-secondary: #566072;
  --ink-faint: #8892a3;
  --border: #e0e5ed;
  --border-strong: #c5cdd8;
  --danger: #c0392b;
  --danger-tint: #fff8f8;
  --good: #27ae60;
  --focus: #c9a84c;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Wizard shell ---------- */
body.wizard { display: flex; flex-direction: column; overflow: hidden; }

.topbar { flex-shrink: 0; background: var(--navy); border-bottom: 4px solid var(--gold); height: 60px; display: flex; align-items: center; padding: 0 2.5rem; width: 100%; }
.topbar-brand { display: flex; align-items: center; gap: .9rem; flex: 1; }
.topbar-icon-wrap { background: #fff; padding: 5px 7px; display: flex; align-items: center; justify-content: center; height: 42px; flex-shrink: 0; }
.topbar-icon { height: 30px; display: block; }
.topbar-text { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-line1 { font-size: .8rem; font-weight: 800; color: #fff; letter-spacing: .12em; text-transform: uppercase; }
.topbar-line2 { font-size: .68rem; font-weight: 700; color: var(--gold); letter-spacing: .18em; text-transform: uppercase; }
.topbar-tag { margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.2); padding: .32rem .75rem; }

/* Hamburger toggle — injected by js/mobile-menu.js, hidden until the
   mobile breakpoint where the step panel collapses out of the layout. */
.hamburger-btn { display: none; background: none; border: none; padding: 8px; margin-left: auto; cursor: pointer; flex-shrink: 0; }
.hamburger-btn:hover { opacity: .8; }
.hamburger-btn svg { display: block; }
.hamburger-btn .icon-close { display: none; }
.hamburger-btn[aria-expanded="true"] .icon-menu { display: none; }
.hamburger-btn[aria-expanded="true"] .icon-close { display: block; }

.page-body { flex: 1; min-height: 0; display: flex; }

/* ---------- Left panel ---------- */
.left-panel { width: 300px; flex-shrink: 0; background: var(--navy); display: flex; flex-direction: column; padding: 2.5rem 2rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.left-brand { font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 2rem; line-height: 1.6; }
.v-steps { display: flex; flex-direction: column; margin-bottom: 2.25rem; }
.v-step { display: flex; align-items: flex-start; gap: .9rem; }
.v-step-track { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 30px; }
.v-circle { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color: rgba(255,255,255,.3); flex-shrink: 0; }
.v-step.done .v-circle { background: var(--gold); border-color: var(--gold); color: #fff; }
.v-step.active .v-circle { background: #fff; border-color: #fff; color: var(--navy); box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.v-line { width: 2px; flex: 1; min-height: 16px; background: rgba(255,255,255,.12); margin: 4px 0; }
.v-step.done .v-line { background: var(--gold); }
.v-step:last-child .v-line { display: none; }
.v-info { padding-top: .3rem; padding-bottom: .9rem; }
.v-step:last-child .v-info { padding-bottom: 0; }
.v-label { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; line-height: 1.3; color: rgba(255,255,255,.3); }
.v-step.done .v-label { color: var(--gold); }
.v-step.active .v-label { color: #fff; }
.v-sublabel { font-size: .6rem; color: rgba(255,255,255,.35); margin-top: .16rem; font-weight: 500; }
.v-step.active .v-sublabel { color: rgba(255,255,255,.6); }
.left-divider { border: none; border-top: 1px solid rgba(255,255,255,.1); margin: 0 0 1.75rem; }
.left-step-title { font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: .75rem; }
.left-step-title span { color: var(--gold); }
.left-step-desc { font-size: .8rem; color: rgba(255,255,255,.6); line-height: 1.8; font-weight: 500; }
.left-counter { margin-top: 1.1rem; display: inline-block; background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.4); color: var(--gold); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .28rem .75rem; }
.left-note { margin-top: auto; padding-top: 1.5rem; font-size: .66rem; color: rgba(255,255,255,.3); font-weight: 600; letter-spacing: .04em; line-height: 1.7; border-top: 1px solid rgba(255,255,255,.08); }

/* ---------- Right panel / form card ---------- */
.right-panel { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--paper); padding: 2.5rem 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
.form-card { background: var(--surface); border-top: 5px solid var(--gold); box-shadow: 0 4px 24px rgba(33,41,59,.07); padding: 2rem 2.5rem; flex: 1; display: flex; flex-direction: column; }
.form-card-header { margin-bottom: 1.5rem; }
.step-badge { display: inline-block; background: var(--gold); color: var(--navy); font-size: .6rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; padding: .28rem .9rem; margin-bottom: .7rem; }
.form-card-header h2 { font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 800; color: var(--ink); border-left: 5px solid var(--gold); padding-left: .85rem; line-height: 1.25; margin-bottom: .5rem; }
.form-card-header p { font-size: clamp(.8rem, 1.3vw, .88rem); color: #666; line-height: 1.7; padding-left: 1.1rem; font-weight: 500; }
.note-box { font-size: .85rem; color: #666; line-height: 1.7; margin-bottom: 1.5rem; font-weight: 500; padding: 1rem 1.25rem; background: var(--surface-alt); border-left: 4px solid var(--gold); }

/* ---------- Form fields ---------- */
.portal-form { display: flex; flex-direction: column; gap: .95rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .95rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group label { font-size: .68rem; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .09em; }
.form-group label .req { color: var(--gold-deep); margin-left: 2px; }
.form-group input, .form-group textarea, .form-group select {
  padding: .78rem 1rem; border: 2px solid var(--border); font-size: .9rem; color: var(--ink); background: #fff;
  width: 100%; font-family: inherit; border-radius: 0; outline: none; transition: border-color .2s;
  -webkit-appearance: none; appearance: none; font-weight: 500;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--navy); }
.form-group input.error, .form-group textarea.error, .form-group select.error { border-color: var(--danger); background: var(--danger-tint); }
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2321293b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer;
}
.form-group textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.field-error, .q-error, .af-error { display: none; font-size: .66rem; color: var(--danger); margin-top: .15rem; font-weight: 700; }
.field-error.visible, .q-error.show, .af-error.show { display: block; }
.field-hint { font-size: .72rem; color: var(--ink-faint); font-weight: 500; }

/* Role select + description reveal */
.select-wrap { position: relative; }
.select-wrap::after { content: ''; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); pointer-events: none; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--ink); }
.role-desc { display: none; background: var(--surface-alt); border-left: 5px solid var(--gold); padding: 1rem 1.35rem; margin: 1.1rem 0 0; animation: fadeSlide .22s ease; }
.role-desc.visible { display: block; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.role-desc-title { font-size: .78rem; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .4rem; }
.role-desc-text { font-size: .87rem; color: #555; line-height: 1.75; font-weight: 500; }

/* Interview question blocks */
.questions-wrap { display: flex; flex-direction: column; gap: 1.75rem; flex: 1; }
.q-block { display: flex; flex-direction: column; gap: .75rem; }
.q-number { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
.q-text { font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.55; }
.q-textarea { width: 100%; padding: 1rem 1.1rem; border: 2px solid var(--border); font-size: .93rem; color: var(--ink); font-family: inherit; font-weight: 500; line-height: 1.65; outline: none; transition: border-color .2s; resize: none; min-height: 150px; }
.q-textarea:focus { border-color: var(--navy); }
.q-textarea.error { border-color: var(--danger); background: var(--danger-tint); }

/* ---------- Buttons ---------- */
.section-divider { border: none; border-top: 2px solid var(--border); margin: 1.5rem 0 1rem; }
.actions-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.btn-back { background: none; border: 2px solid var(--border); color: #888; padding: .85rem 1.75rem; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: .5rem; transition: border-color .2s, color .2s; }
.btn-back:hover { border-color: var(--navy); color: var(--navy); }
.btn-next, .btn-submit { background: var(--navy); color: #fff; border: none; padding: .9rem 2.75rem; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: .75rem; transition: background .2s, color .2s; flex: 1; justify-content: center; }
.btn-next:hover:not(:disabled), .btn-submit:hover:not(:disabled) { background: var(--gold); color: var(--navy); }
.btn-next:disabled, .btn-submit:disabled { background: #c5cdd8; cursor: not-allowed; opacity: .7; }
.btn-next .arrow, .btn-submit .arrow { transition: transform .2s; line-height: 0; }
.btn-next:not(:disabled):hover .arrow, .btn-submit:not(:disabled):hover .arrow { transform: translateX(5px); }

/* ---------- Callouts ---------- */
.callout { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gold); padding: 1rem 1.25rem; }
.callout.navy { border-left-color: var(--navy); }
.callout-title { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); margin-bottom: .4rem; }
.callout p { font-size: .85rem; color: #555; line-height: 1.7; font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .left-panel { width: 240px; padding: 2rem 1.5rem; }
  .right-panel { padding: 1.5rem; }
  .form-card { padding: 1.75rem; }
}
@media (max-width: 767px) {
  .page-body { flex-direction: column; overflow-y: auto; }
  body.wizard { overflow: visible; }
  .left-panel { width: 100%; padding: 1.25rem 1.5rem; overflow-y: visible; }
  .v-steps, .left-divider, .left-step-desc, .left-note { display: none; }
  .right-panel { overflow-y: visible; padding: 1rem; }
  .form-row { grid-template-columns: 1fr; gap: .85rem; }

  /* Hamburger reveal: on mobile the step panel is collapsed by default
     (rule above); toggling .mobile-nav-open on .left-panel brings it
     back as an in-flow dropdown under the brand row. */
  .hamburger-btn { display: inline-flex; align-items: center; justify-content: center; }
  .left-panel.mobile-nav-open .v-steps { display: flex; margin-top: .5rem; }
  .left-panel.mobile-nav-open .left-divider,
  .left-panel.mobile-nav-open .left-step-desc,
  .left-panel.mobile-nav-open .left-note { display: block; }
  .left-panel.mobile-nav-open .left-note { margin-top: 1.25rem; }
}
@media (max-width: 599px) {
  .topbar { height: 52px; padding: 0 1.25rem; }
  .topbar-icon-wrap { height: 36px; }
  .topbar-icon { height: 24px; }
  .topbar-line1 { font-size: .68rem; }
  .topbar-line2 { font-size: .58rem; }
  .form-card { padding: 1.25rem 1.1rem; }
  .btn-back, .btn-next, .btn-submit { padding: .82rem 1.25rem; font-size: .76rem; }
}
@media (max-width: 380px) {
  .actions-row { flex-direction: column; }
  .btn-back, .btn-next, .btn-submit { width: 100%; justify-content: center; flex: none; }
}