/* Phase 2 form + checkout components. Built only from the tokens already
   defined in styles.css (--lime, --panel, --line, --muted...) so the new
   pages read as part of the same site. styles.css is deliberately not
   modified — it is the file already deployed in Phase 1. */

.form-shell { max-width: 460px; margin: 0 auto; }
.form-card {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel); padding: 32px; box-shadow: var(--shadow);
}
.form-card h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.03em; }
.form-card > p { color: var(--muted); margin: 0 0 24px; font-size: 14px; }

.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.field input {
  width: 100%; background: var(--bg); color: var(--text); border-radius: 14px;
  border: 1px solid rgba(255,255,255,.09); padding: 14px 16px; outline: none;
}
.field input:focus { border-color: rgba(207,255,88,.46); box-shadow: 0 0 0 3px rgba(207,255,88,.08); }
.field input[aria-invalid="true"] { border-color: rgba(255,120,110,.55); }

.primary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 56px; padding: 0 20px; border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #baf44e, #d8ff67); color: #07110f;
  font-weight: 830; cursor: pointer; text-decoration: none;
}
.primary-button:hover:not(:disabled) { filter: brightness(1.05); }
.primary-button:disabled { opacity: .55; cursor: not-allowed; }

.provider-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.035);
  color: #edf4ef; font-weight: 760;
}
.provider-button:hover { border-color: rgba(207,255,88,.45); background: rgba(207,255,88,.06); }
.provider-button svg { width: 18px; height: 18px; }

.form-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted-2); font-size: 12px; }
.form-divider::before, .form-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

.form-message { border-radius: 12px; padding: 12px 14px; font-size: 13px; margin-bottom: 18px; }
.form-message.error { background: rgba(255,120,110,.1); border: 1px solid rgba(255,120,110,.3); color: #ffb3ad; }
.form-message.success { background: rgba(207,255,88,.08); border: 1px solid var(--line); color: var(--lime); }
.form-message[hidden] { display: none !important; }

.form-switch { text-align: center; margin: 20px 0 0; color: var(--muted); font-size: 13px; }
.form-switch button { background: none; border: 0; color: var(--lime); font-weight: 760; cursor: pointer; padding: 0; }
.form-link { background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }

/* --- checkout + order --- */
.summary-card {
  border: 1px solid var(--line); border-radius: 22px; background: var(--panel-2);
  padding: 24px; margin-bottom: 24px;
}
.summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14px; color: var(--muted); }
.summary-row strong { color: var(--text); font-weight: 760; }
.summary-row.total { border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 16px; font-size: 17px; }
.summary-row.total strong { color: var(--lime); font-size: 22px; letter-spacing: -.03em; }

#payment-element { margin: 8px 0 22px; }

.qr-panel { text-align: center; padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: #fff; margin-bottom: 22px; }
.qr-panel img { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }
.activation-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  word-break: break-all; background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 13px; color: var(--muted); margin-top: 10px;
}
.status-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 760; }
.status-pill.pending { background: rgba(207,255,88,.08); border: 1px solid var(--line); color: var(--lime); }
.status-pill.done { background: rgba(114,191,105,.12); border: 1px solid rgba(114,191,105,.35); color: var(--green); }
.status-pill.failed { background: rgba(255,120,110,.1); border: 1px solid rgba(255,120,110,.3); color: #ffb3ad; }

.spinner {
  width: 15px; height: 15px; border: 2px solid rgba(7,17,15,.25); border-top-color: #07110f;
  border-radius: 50%; animation: ev-spin .7s linear infinite;
}
@keyframes ev-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

@media (max-width: 720px) { .form-card { padding: 24px; } }

/* Destination and order cards are links now (the whole card is the target),
   but .plan in styles.css was written for a non-interactive <article>, so
   the anchor defaults — underline and link colour — leak into every line of
   text inside it. Reset them here and keep the card's own palette. */
a.plan { display: block; text-decoration: none; color: inherit; }
a.plan:hover { text-decoration: none; }
a.plan h3, a.plan .price, a.plan .type, a.plan .plan-meta, a.plan .plan-meta span { text-decoration: none; }
a.plan .plan-meta span:last-child { color: var(--lime); }