/* ═══════════════════════════════════════════════════════════
   ESB Group — Qualify Form · Shiny Premium Chrome Style
   Design tokens live in base.css
   ═══════════════════════════════════════════════════════════ */

/* ── PAGE ───────────────────────────────────────────────── */
body{
  background: var(--gradient-bg);
  min-height: 100vh;
  position: relative;
}
body::before{
  content:'';
  position:fixed;inset:0;
  background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(255,255,255,.03),transparent);
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */
.q-header{
  text-align:center;
  padding:60px var(--space-lg) 0;
}
.q-logo{
  display:inline-block;
  font-weight:700;font-size:var(--text-base);
  letter-spacing:.08em;color:var(--color-text-muted);
  margin-bottom:var(--space-lg);
}
.q-hero-title{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(40px,8vw,70px);line-height:1.05;
  letter-spacing:-2.2px;margin-bottom:var(--space-md);
}
.q-hero-white{color:rgba(255,255,255,.85)}
.q-hero-gradient{
  background:var(--gradient-text-silver);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:silverGradient 4s ease-in-out infinite;
}
.q-hero-sub{
  font-size:var(--text-base);color:var(--color-text-muted);
  margin-bottom:var(--space-xs);font-weight:300;
}
.q-hero-note{
  font-size:var(--text-sm);color:var(--color-text-faint);
  margin-bottom:var(--space-xl);font-weight:300;
}

/* ═══════════════════════════════════════════════════════════
   PROGRESS BAR — shiny chrome fill
   ═══════════════════════════════════════════════════════════ */
.q-progress{
  max-width:600px;margin:0 auto var(--space-md);
  height:4px;background:var(--border-default);
  border-radius:var(--radius-sm);overflow:hidden;
}
.q-progress__fill{
  height:100%;width:14.28%;
  background:linear-gradient(90deg,#888,#fff,#aaa);
  background-size:200% 200%;
  border-radius:var(--radius-sm);
  transition:width var(--transition-slow);
  animation:gradientShift 3s ease infinite;
}
.q-step-label{
  font-size:13px;color:var(--color-text-faint);
  margin-bottom:var(--space-xl);letter-spacing:.02em;
}

/* ═══════════════════════════════════════════════════════════
   GLASS CARD
   ═══════════════════════════════════════════════════════════ */
.q-main{
  max-width:680px;margin:0 auto;
  padding:0 var(--space-lg) 60px;
}
.q-card{
  background:linear-gradient(145deg,rgba(255,255,255,.035) 0%,rgba(0,0,0,.7) 50%,rgba(255,255,255,.02) 100%);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius:var(--radius-xl);
  padding:var(--space-xl) 36px;
  animation:fadeInUp .4s var(--ease-smooth);
}
.q-card__head{
  display:flex;align-items:center;gap:var(--space-md);
  margin-bottom:28px;
}
.q-diamond{
  font-size:var(--text-sm);color:var(--color-text-muted);flex-shrink:0;
}
.q-card__title{
  font-family:var(--font-heading);font-weight:400;font-size:22px;
  flex:1;text-align:center;padding-right:30px;
}

/* ═══════════════════════════════════════════════════════════
   FORM FIELDS
   ═══════════════════════════════════════════════════════════ */
.q-fields{display:flex;flex-direction:column;gap:20px}
.q-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}

.q-field label{
  display:block;font-size:var(--text-sm);font-weight:500;
  color:var(--color-text-secondary);margin-bottom:var(--space-sm);
}
.q-field input,
.q-field textarea,
.q-field select{
  width:100%;padding:14px var(--space-md);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-medium);
  border-radius:var(--radius-md);
  color:var(--color-text);font-size:15px;outline:none;
  transition:border-color var(--transition-base),box-shadow var(--transition-base);
  resize:vertical;
}
.q-field input::placeholder,
.q-field textarea::placeholder{color:var(--color-text-faint)}

.q-field input:focus,
.q-field textarea:focus{
  border-color:rgba(255,255,255,.25);
  box-shadow:0 0 0 3px rgba(255,255,255,.05), 0 0 16px rgba(255,255,255,.03);
}
.q-field--half{max-width:50%}

/* Prefix input */
.q-input-prefix{position:relative}
.q-prefix{
  position:absolute;left:var(--space-md);top:50%;
  transform:translateY(-50%);color:var(--color-text-faint);
  font-size:15px;pointer-events:none;
}
.q-input-prefix input{padding-left:var(--space-xl)}

/* ═══════════════════════════════════════════════════════════
   OPTION CARDS (revenue, fulfillment)
   ═══════════════════════════════════════════════════════════ */
.q-options{display:grid;gap:var(--space-md);margin-top:var(--space-xs)}
.q-options--2col{grid-template-columns:1fr 1fr}
.q-options--4col{grid-template-columns:repeat(4,1fr)}

.q-option{
  padding:var(--space-md) var(--space-lg);
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-sm);
  color:var(--color-text);font-size:15px;font-weight:500;
  cursor:pointer;text-align:center;
  transition:all .3s var(--ease-smooth);
}
.q-option:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  background:rgba(255,255,255,.05);
}
.q-option.selected{
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 8px 24px rgba(0,0,0,.3);
}
.q-option--span{grid-column:1}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX
   ═══════════════════════════════════════════════════════════ */
.q-checkbox{
  display:flex;align-items:center;gap:10px;
  cursor:pointer;font-size:var(--text-sm);color:var(--color-text-muted);
}
.q-checkbox input{display:none}
.q-checkbox__mark{
  width:18px;height:18px;border-radius:var(--space-xs);
  border:1px solid var(--border-medium);background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-base);flex-shrink:0;
}
.q-checkbox input:checked + .q-checkbox__mark{
  background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);
}
.q-checkbox input:checked + .q-checkbox__mark::after{
  content:'\2713';font-size:12px;color:#fff;
}

/* ═══════════════════════════════════════════════════════════
   STEP 7 — FOCUS LIST
   ═══════════════════════════════════════════════════════════ */
.q-notice{
  padding:var(--space-md) 20px;border-radius:var(--radius-md);
  background:rgba(255,255,255,.03);border:1px solid var(--border-subtle);
  font-size:var(--text-sm);line-height:1.7;color:var(--color-text-muted);
}
.q-notice strong{color:var(--color-text-secondary);font-weight:600}

.q-focus-label{
  font-size:15px;font-weight:500;
  color:var(--color-text-secondary);margin-top:var(--space-xs);
}

.q-focus-list{display:flex;flex-direction:column;gap:var(--space-sm)}

.q-focus-item{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-md);overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
.q-focus-item:hover{
  border-color:rgba(255,255,255,.12);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.q-focus-item.open{border-color:rgba(255,255,255,.14)}

.q-focus-item__head{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;cursor:pointer;
  transition:background var(--transition-fast);
}
.q-focus-item__head:hover{background:rgba(255,255,255,.03)}
.q-focus-icon{font-size:16px;flex-shrink:0}
.q-focus-name{font-size:var(--text-sm);font-weight:500;flex:1}

.q-tag{
  font-size:11px;padding:3px 10px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);
  color:var(--color-text-muted);font-weight:500;letter-spacing:.02em;
}

.q-focus-arrow{
  font-size:10px;color:var(--color-text-faint);
  transition:transform var(--transition-base);margin-left:auto;
}
.q-focus-item.open .q-focus-arrow{transform:rotate(180deg)}

.q-focus-item__body{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease,padding .35s ease;
}
.q-focus-item.open .q-focus-item__body{
  max-height:300px;padding:0 18px 16px;
}
.q-focus-item__body p{
  font-size:var(--text-sm);line-height:1.7;color:var(--color-text-muted);
}
.q-focus-item__body ul{
  margin-top:8px;padding-left:18px;list-style:disc;
}
.q-focus-item__body li{
  font-size:var(--text-sm);line-height:1.7;
  color:var(--color-text-muted);margin-bottom:4px;
}

.q-quote{
  padding:20px var(--space-lg);border-radius:14px;
  background:rgba(255,255,255,.04);text-align:center;
  font-style:italic;font-size:15px;line-height:1.6;
  color:var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   NAV BUTTONS — Premium chrome / shiny silver
   ═══════════════════════════════════════════════════════════ */
.q-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:28px;padding-top:var(--space-lg);
  border-top:1px solid rgba(255,255,255,.06);
}
.q-btn{
  display:inline-flex;align-items:center;gap:var(--space-sm);
  padding:12px 24px;border-radius:var(--radius-sm);
  font-size:var(--text-sm);font-weight:500;
  cursor:pointer;transition:all .25s;border:none;
  position:relative;overflow:hidden;
}

/* Previous — frosted ghost */
.q-btn--prev{
  background:transparent;color:var(--color-text);
  border:1px solid rgba(255,255,255,.1);
}
.q-btn--prev:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.18);
}

/* Next / Submit — shiny chrome  */
.q-btn--next,
.q-btn--submit{
  background:linear-gradient(135deg,#e8e8e8 0%,#b0b0b0 40%,#e0e0e0 60%,#c8c8c8 100%);
  background-size:200% 200%;
  color:#0a0a0a;margin-left:auto;font-weight:600;
  border-radius:var(--radius-sm);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 4px 16px rgba(0,0,0,.3);
  animation:gradientShift 3s ease infinite;
}
/* Glare sweep */
.q-btn--next::after,
.q-btn--submit::after{
  content:'';position:absolute;
  top:-50%;left:-60%;width:40%;height:200%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:skewX(-20deg);
  animation:glareSweep 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glareSweep{
  0%,80%{left:-60%}
  100%{left:160%}
}
.q-btn--next:hover,
.q-btn--submit:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 6px 24px rgba(0,0,0,.4), 0 0 20px rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .q-hero-title{letter-spacing:-1.3px}
}
@media(max-width:640px){
  .q-header{padding-top:40px}
  .q-card{padding:var(--space-xl) 20px}
  .q-row{grid-template-columns:1fr}
  .q-options--2col{grid-template-columns:1fr 1fr}
  .q-options--4col{grid-template-columns:1fr 1fr}
  .q-field--half{max-width:100%}
}

/* ═══════════════════════════════════════════════════════════
   VALIDATION ERRORS
   ═══════════════════════════════════════════════════════════ */
.q-field--error input,
.q-field--error textarea,
.q-field--error select{
  border-color:rgba(180,40,50,.6);
  box-shadow:0 0 0 2px rgba(180,40,50,.15);
}
.q-error-msg{
  display:none;
  font-size:12px;color:rgb(220,70,70);
  margin-top:6px;font-weight:500;
}
.q-field--error .q-error-msg{display:block}

/* Option group error */
.q-options--error{
  border:1px solid rgba(180,40,50,.4);
  border-radius:var(--radius-md);
  padding:4px;
}
.q-options-error-msg{
  display:none;
  font-size:12px;color:rgb(220,70,70);
  margin-top:6px;font-weight:500;
}
.q-options--error + .q-options-error-msg{display:block}