/* =============================================================================
   USMLE PULSE — order.css
   Styles the order / checkout configurator so it matches the site's design
   system (replaces the old Arial/blue builder look). Loaded after main.css.
   ========================================================================== */

.order-wrap { max-width: 640px; margin-inline: auto; }

.order-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.order-card .eyebrow { justify-content: flex-start; }
.order-card h1 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2rem); margin-top: var(--sp-2); }
.order-card .intro { color: var(--text-muted); margin-top: var(--sp-2); margin-bottom: var(--sp-5); }

/* Selects reuse the .input look but need a custom chevron */
.order-card select.input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b6b77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}
.order-card select.input:disabled { opacity: .6; cursor: not-allowed; }

/* Hide the conditional governorate block cleanly */
#govDiv[hidden] { display: none; }

/* Price summary */
.price-box {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--text-invert);
  text-align: center;
}
.price-box .label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-invert-muted); }
.price-box .amount { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; letter-spacing: -.02em; color: #fff; margin-top: .3rem; line-height: 1.1; }
.price-box .amount small { font-size: 1rem; font-weight: 600; color: var(--text-invert-muted); }
.price-box .approx { font-size: .85rem; color: var(--text-invert-muted); margin-top: .35rem; }
.price-box .was { color: var(--text-invert-muted); text-decoration: line-through; font-size: 1.1rem; font-weight: 600; margin-right: .5rem; }
.price-box .discount-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(22,163,74,.18); color: #4ade80;
  font-size: .8rem; font-weight: 700; padding: .25rem .7rem; border-radius: var(--r-pill);
  margin-bottom: .6rem;
}
.price-box.empty .amount { color: var(--text-invert-muted); font-size: 1.4rem; }

.rate-note { text-align: center; font-size: .8rem; color: var(--text-muted); margin-top: var(--sp-3); }
.rate-note a { color: var(--brand); font-weight: 600; }

.order-card .btn-pay { margin-top: var(--sp-5); }

.secure-row {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: var(--sp-4); font-size: .82rem; color: var(--text-muted);
}
.secure-row svg { color: var(--brand); }

/* ===== Simple checkout (InstaPay / Vodafone / PaySky card) ===== */
.checkout-wrap { max-width: 620px; margin-inline: auto; }
.checkout-wrap h1 { margin-bottom: var(--sp-5); }
.checkout-summary { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-2); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.cs-line { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; color: var(--text-muted); }
.cs-line b { color: var(--ink); font-weight: 600; }
.cs-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.cs-total b { font-size: 1.5rem; font-family: var(--font-mono); }
.cs-fx { text-align: right; color: var(--text-muted); font-size: .82rem; margin-top: .25rem; }
.pay-h { font-size: 1.05rem; margin-bottom: var(--sp-4); }
.pay-options { display: grid; gap: var(--sp-3); }
.pay-card { display: flex; align-items: center; gap: var(--sp-4); width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); padding: var(--sp-4); cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .15s; color: var(--ink); text-decoration: none; }
.pay-card:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(12,26,36,.08); }
.pay-ic { width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.pay-ic.instapay { background: #6a1b9a; } .pay-ic.vodafone { background: #e60000; } .pay-ic.visa { background: var(--ink); font-size: 1.3rem; }
.pay-body { flex: 1; display: flex; flex-direction: column; }
.pay-body b { font-size: 1rem; } .pay-body span { color: var(--text-muted); font-size: .84rem; }
.pay-go { color: var(--brand); font-weight: 700; white-space: nowrap; }
.pay-note { color: var(--text-muted); font-size: .86rem; margin-top: var(--sp-5); line-height: 1.6; }