/* Premium activation experience */
/* Mobile-first activation page styles
   Add to project alongside existing activate.css.
   Keeps visual alignment with current design system but scoped
   to avoid interfering with other pages. */

:root {
  --ap-card-bg: #ffffff;
  --ap-border: rgba(0,0,0,0.06);
  --ap-accent: #0077cc;
  --ap-radius: 16px;
  --ap-gap: 14px;
  --ap-text: #0b2536;
}

.activation-flow {
  padding: 20px;
  border-radius: var(--ap-radius);
  background: var(--ap-card-bg);
  border: 1px solid var(--ap-border);
  box-shadow: 0 10px 30px rgba(6,18,28,0.06);
}

/* Progress steps */
.activation-steps ol {
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0 0 18px 0;
  list-style: none;
}
.activation-steps li {
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f6f9;
  color: #0b2536;
  min-width: 64px;
  text-align: center;
}
.activation-steps li.is-current {
  background: linear-gradient(90deg,#075a9a,#06a6d5);
  color: white;
  font-weight: 700;
}

/* Form layout */
.form-section {
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(10,20,30,0.04);
}
.field {
  margin-bottom: 12px;
}
.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--ap-text);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(10,20,30,0.08);
  font-size: 1rem;
  box-sizing: border-box;
}
.field .help {
  display: block;
  margin-top: 6px;
  color: rgba(11,37,54,0.6);
  font-size: 0.9rem;
}
.field-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media(min-width:900px){
  .activation-layout { grid-template-columns: 0.9fr 1.1fr; }
  .field-grid { grid-template-columns: 1fr 1fr; }
}

/* Buttons */
.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
.btn {
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}
.btn-primary { background: var(--ap-accent); color: white; }
.btn-secondary { background: #eef6fb; color: var(--ap-text); }

/* Errors & messages */
.error {
  color: #b00020;
  margin-top: 6px;
  font-size: 0.92rem;
}
.form-message {
  margin: 8px 0 12px 0;
  color: #0b2536;
}

/* Modal / review panel */
.modal[hidden] {
  display: none !important;
}

/* Ensure JavaScript-controlled elements properly honor hidden state */
.form-section[hidden],
.success-panel[hidden],
button[hidden] {
  display: none !important;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6,18,28,0.45);
  padding: 20px;
  z-index: 1200;
}
.modal-content {
  width: 100%;
  max-width: 720px;
  background: var(--ap-card-bg);
  padding: 20px;
  border-radius: 12px;
}
.review-summary {
  margin: 12px 0;
  background: #f8fbfd;
  padding: 12px;
  border-radius: 8px;
}
.modal-actions {
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Success panel */
.success-panel {
  padding: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg,#f7fffb,#e9fff2);
  text-align: center;
  margin-top: 12px;
}

/* Make large touch targets on mobile */
input, select, .btn { min-height: 44px; }

.activation-page{overflow:hidden}
.activation-layout{min-width:0}
.activation-copy,.activation-card{min-width:0}
.activation-copy h1{overflow-wrap:anywhere}
.activation-explain{max-width:620px;color:rgba(255,255,255,.7);line-height:1.7}
.activation-benefits div{align-items:flex-start;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.045);backdrop-filter:blur(8px)}
.activation-benefits strong{width:auto;height:auto;min-width:88px;padding:7px 10px;border-radius:999px;line-height:1.15}
.activation-benefits span{line-height:1.45}
.activation-card{position:relative;overflow:hidden}
.activation-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#67d8ff,#0ea5e9,#d8ad54)}
.activation-steps{overflow-x:auto;padding-bottom:3px}
.activation-steps ol{min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.activation-steps li{min-width:0;padding:8px 5px;font-size:.78rem}
.form-section legend{padding:0;margin-bottom:18px;color:#04111f;font-size:1.05rem;font-weight:900}
.field input,.field select{transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus,.field select:focus{outline:0;border-color:#0ea5e9;box-shadow:0 0 0 4px rgba(14,165,233,.12)}
.optional{color:#718696;font-size:.82rem;font-weight:600}
.checkbox-label{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.checkbox-label input{flex:0 0 auto;width:19px;height:19px;margin-top:1px;accent-color:#0ea5e9}
.form-actions .btn{min-height:50px;padding:12px 20px;border-radius:999px}
.btn-primary{background:linear-gradient(135deg,#67d8ff,#0ea5e9);color:#04111f;box-shadow:0 10px 24px rgba(14,165,233,.2)}
.success-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
@media(max-width:700px){
 .activation-shell{width:min(100% - 28px,1180px)}
 .activation-hero{padding:38px 0 54px}
 .activation-layout{gap:28px}
 .activation-copy{padding:0}
 .activation-eyebrow{font-size:.68rem;letter-spacing:.12em}
 .activation-copy h1{font-size:clamp(2.25rem,12vw,3.7rem);line-height:1.02;letter-spacing:-.045em}
 .activation-intro{margin-top:18px;font-size:1rem;line-height:1.55}
 .activation-explain{font-size:.93rem;line-height:1.55}
 .activation-benefits{margin-top:22px;gap:8px}
 .activation-benefits div{padding:11px 12px;gap:10px}
 .activation-benefits strong{min-width:76px;font-size:.7rem}
 .activation-benefits span{font-size:.85rem}
 .activation-card{width:100%;padding:24px 16px;border-radius:22px}
 .activation-card h2{font-size:1.65rem}
 .activation-card-intro{margin-bottom:18px}
 .activation-steps li{font-size:.68rem;padding:7px 2px}
 .form-actions{flex-direction:column-reverse}
 .form-actions .btn{width:100%}
 .modal{padding:12px}
 .modal-content{max-height:90vh;overflow:auto;padding:18px;border-radius:18px}
}