/* Checkout page */
.checkout-section { padding: clamp(3rem, 6vw, 4.5rem) 1.5rem 6rem; background: var(--bg); }
.checkout-wrap {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; align-items: start;
}
@media (max-width: 860px) { .checkout-wrap { grid-template-columns: 1fr; } }

.no-plan-wrap {
  max-width: 480px; margin: 3rem auto; text-align: center;
  background: #fff; border-radius: var(--radius-lg); padding: 3rem 2rem;
  border: 1px solid rgba(0,0,0,0.07);
}
.no-plan-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.no-plan-title { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin-bottom: 0.5rem; }
.no-plan-sub { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.75rem; line-height: 1.6; }

.checkout-form-card { background: #fff; border-radius: var(--radius-lg); padding: 2.5rem; border: 1px solid rgba(0,0,0,0.06); }
.cf-title { font-size: 1.3rem; font-weight: 900; color: var(--ink); margin-bottom: 0.4rem; }
.cf-sub { font-size: 0.88rem; color: var(--muted); margin-bottom: 2rem; }
.cf-section-label {
  display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--red); margin: 1.75rem 0 1rem;
}
.cf-section-label:first-of-type { margin-top: 0; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 480px) { .cf-row { grid-template-columns: 1fr; } }
.cf-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.cf-label { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.cf-required { color: var(--red); }
.cf-optional { color: var(--muted); font-weight: 400; font-size: 0.78rem; }
.cf-input, .cf-select, .cf-textarea {
  padding: 0.75rem 1rem; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 8px;
  font-size: 0.88rem; font-family: inherit; color: var(--ink); background: #fff; width: 100%;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.cf-input:focus, .cf-select:focus, .cf-textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(229,9,20,0.08); outline: none; }
.cf-input.invalid, .cf-field.has-error .cf-input { border-color: #dc2626; }
.cf-textarea { resize: vertical; min-height: 100px; }
.cf-error { display: none; font-size: 0.76rem; color: #dc2626; }
.cf-field.has-error .cf-error { display: block; }
.cf-submit {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%;
  padding: 1rem; background: #25d166; color: #fff; font-size: 0.95rem; font-weight: 800;
  border: none; border-radius: 10px; cursor: pointer; font-family: inherit; margin-top: 0.5rem;
  transition: background 0.18s, transform 0.15s;
}
.cf-submit:hover { background: #1fb857; transform: translateY(-2px); }
.cf-note { font-size: 0.76rem; color: var(--muted); text-align: center; margin-top: 1rem; line-height: 1.6; }

.cf-success { text-align: center; padding: 2rem 1rem; }
.cf-success-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.cf-success-title { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin-bottom: 0.5rem; }
.cf-success-sub { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.5rem; line-height: 1.6; }
.cf-success-wa {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.75rem;
  background: #25d166; color: #fff; border-radius: 9px; font-weight: 700; font-size: 0.88rem; margin-bottom: 1rem;
}
.cf-success-tel { display: block; font-size: 0.82rem; color: var(--muted); }
.cf-success-tel a { color: var(--red); font-weight: 600; }

.order-summary {
  background: #0d0d1a; border-radius: var(--radius-lg); padding: 2rem; color: #fff;
  position: sticky; top: 130px;
}
.os-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.5rem; }
.os-plan-name { font-size: 1.4rem; font-weight: 900; margin-bottom: 0.15rem; }
.os-duration { font-size: 0.85rem; color: rgba(255,255,255,0.5); }
.os-price-block { border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 1.25rem 0; margin: 1.25rem 0; }
.os-price-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 0.75rem; }
.os-total-row { display: flex; justify-content: space-between; align-items: baseline; }
.os-total-label { font-size: 0.95rem; font-weight: 700; }
.os-total-value { font-size: 2rem; font-weight: 900; color: var(--red); }
.os-total-sup { font-size: 1.1rem; margin-right: 2px; }
.os-features { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.5rem; }
.os-feature { display: flex; align-items: center; gap: 0.55rem; font-size: 0.83rem; color: rgba(255,255,255,0.75); }
.os-feature-icon { color: #25d166; font-weight: 700; }
.os-contact { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.os-contact-label { font-size: 0.72rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; }
.os-contact-phone, .os-contact-wa { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #fff; font-weight: 600; }
.os-contact-wa { color: #25d166; }
.os-back { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-top: 1.25rem; }
.os-back:hover { color: #fff; }