/* ==========================================================================
   Glowmigos — Glow Plan builder + forms
   ========================================================================== */
.plan {
  position: relative;
  border-radius: var(--r-xl);
  border: 2px solid rgba(255, 181, 17, 0.4);
  background: radial-gradient(120% 140% at 50% 0%, rgba(16, 48, 122, 0.9), rgba(4, 16, 46, 0.95) 70%);
  box-shadow: 0 40px 90px -50px #000, inset 0 0 60px -20px rgba(255, 181, 17, 0.25);
  padding: clamp(1.3rem, 1rem + 2vw, 2.6rem);
  overflow: hidden;
}
.plan__progress { display: flex; gap: 0.5rem; align-items: center; margin-block-end: 1.4rem; padding-block-end: 1rem; border-block-end: 1px solid var(--hairline); }
.plan__dot { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: #16264A; transition: background var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-pop); }
.plan__dot.is-done { background: var(--c-gold); }
.plan__dot.is-current { background: var(--c-sun); transform: scale(1.35); box-shadow: 0 0 12px 2px rgba(255, 213, 42, 0.8); }
.plan__progress-text { margin-inline-start: 0.4rem; font-size: 0.68rem; font-weight: 800; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--t-dim); }

.plan__step { display: grid; gap: 1rem; }
.plan__step[hidden] { display: none; }
.plan__step legend, .plan__step h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); color: var(--t-bright); margin-block-end: 0.3rem; outline: none; }
.plan__step legend small, .plan__step h3 small { display: block; font-size: 0.85rem; font-weight: 500; color: var(--t-muted); margin-block-start: 0.35rem; letter-spacing: 0; }
.plan__step fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
@media (prefers-reduced-motion: no-preference) {
  .plan__step.is-current { animation: plan-in 420ms var(--e-out) both; }
  @keyframes plan-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 40rem) { .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chip-input { justify-content: center; text-align: center; }
.chip-input {
  --zc: var(--c-gold);
  position: relative;
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-block-size: 2.9rem; padding: 0.5rem 1rem 0.5rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--hairline-strong);
  background: rgba(10, 37, 96, 0.45);
  font-family: var(--f-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--t-body); cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}
.chip-input input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; inline-size: 100%; block-size: 100%; }
.chip-input .bulb { inline-size: 0.6rem; block-size: 0.6rem; --bulb-color: #2B3F6E; box-shadow: none; }
.chip-input:hover { color: var(--t-bright); border-color: var(--zc); }
.chip-input[aria-pressed="true"], .chip-input:has(input:checked) {
  color: var(--t-bright); border-color: var(--zc);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--zc) 30%, transparent), 0 0 22px -8px var(--zc);
}
.chip-input:has(input:checked) .bulb, .chip-input[aria-pressed="true"] .bulb { --bulb-color: var(--zc); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--zc) 80%, transparent); }
.chip-input:has(input:focus-visible) { outline: 2px solid var(--c-cyan); outline-offset: 3px; }
.chip-input small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--t-muted); font-size: 0.72rem; }

.plan__nav { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-block-start: 0.4rem; }
.plan__step-error { font-size: 0.82rem; color: #FF8B84; min-block-size: 1.2em; }
.plan__status { font-size: 0.8rem; color: var(--t-muted); }

/* Photo drop */
.plan__photo { display: grid; gap: 0.6rem; }
.plan__drop {
  display: grid; place-items: center; gap: 0.4rem; text-align: center;
  padding: 1.4rem 1rem;
  border-radius: var(--r-lg);
  border: 2px dashed var(--hairline-strong);
  background: rgba(10, 37, 96, 0.3);
  color: var(--t-body); cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.plan__drop:hover, .plan__drop:focus-within { border-color: var(--c-gold); background: rgba(16, 48, 122, 0.4); }
.plan__drop input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.plan__drop b { color: var(--t-bright); font-family: var(--f-display); }
.plan__drop small { color: var(--t-muted); font-size: 0.78rem; }
.plan__photo-note { font-size: 0.8rem; color: var(--t-muted); }
.plan__preview { inline-size: min(100%, 18rem); border-radius: var(--r-md); border: 1px solid var(--hairline-strong); }

/* Done */
.plan__done { display: none; text-align: center; padding: clamp(1rem, 0.6rem + 1.6vw, 2rem) 0.5rem; outline: none; }
.plan.is-done form { display: none; }
.plan.is-done .plan__done { display: grid; gap: 1rem; justify-items: center; }
.plan__done img { inline-size: min(320px, 78%); }
.plan__done h3 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); }
.plan__done p { color: var(--t-body); max-inline-size: 38ch; }

/* --- Fields (shared with the launch-list form) -------------------------- */
.form-grid { display: grid; gap: 0.9rem; }
@media (min-width: 30rem) { .form-grid--split { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.4rem; }
.field__label {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t-muted);
}
.field__label .req { color: var(--c-gold); }
.field input, .field select {
  inline-size: 100%; min-block-size: 48px;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  background: rgba(3, 11, 31, 0.8);
  border: 1px solid rgba(137, 176, 255, 0.2);
  color: var(--t-bright);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--c-cyan) 50%),
                    linear-gradient(135deg, var(--c-cyan) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select option { background: #04102E; color: #fff; }
.field input::placeholder { color: var(--t-dim); }
.field input:hover, .field select:hover { border-color: rgba(137, 176, 255, 0.38); }
.field input:focus-visible, .field select:focus-visible {
  outline: none;
  border-color: var(--c-sun);
  box-shadow: 0 0 0 3px rgba(255, 213, 42, 0.22), 0 0 26px -8px rgba(255, 213, 42, 0.8);
  background: rgba(6, 21, 50, 0.9);
}
.field input:user-invalid { border-color: var(--c-red); }
.field__error { font-size: 0.74rem; color: #FF8B84; min-block-size: 1em; }

.form-foot { display: grid; gap: 0.8rem; margin-block-start: 1.15rem; }
.form-note { font-size: 0.74rem; color: var(--t-dim); line-height: 1.5; }
.form-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }



/* --- Sizes --------------------------------------------------------------- */
.plan--home { max-inline-size: 46rem; margin-inline: auto; }