/* ==========================================================================
   new-order.css — FINAL (mobile-first, scoped)
   ========================================================================== */

.order-scope {
  /* Design tokens */
  --ord-bg:#fff; --ord-surface:#fff; --ord-elev:#f9fafb;
  --ord-ink:#0f172a; --ord-muted:#6b7280;
  --ord-border:#e5e7eb; --ord-border-strong:#d1d5db;
  --ord-primary:#2563eb; --ord-primary-ink:#1d4ed8; --ord-primary-50:rgba(37,99,235,.06);

  --ok:#16a34a;     /* green-600 */
  --ok-50:rgba(22,163,74,.08);
  --warn:#d97706;   /* amber-600 */
  --warn-50:rgba(217,119,6,.10);
  --no:#dc2626;     /* red-600 */
  --no-50:rgba(220,38,38,.10);

  --radius-xs:10px; --radius:14px; --radius-lg:18px;
  --shadow:0 12px 30px rgba(15,23,42,.08);
  --soft:0 6px 18px rgba(15,23,42,.06);
  --focus:0 0 0 3px rgba(37,99,235,.25);
}

/* ---------- Typo & wrappers ---------- */
.order-scope .section-title{ font-weight:700; color:var(--ord-ink); margin:10px 0 8px; }
.order-scope .fine-print{ color:var(--ord-muted); font-size:.875rem; }

/* ---------- Cards ---------- */
.order-scope .card{ border:1px solid var(--ord-border); border-radius:var(--radius); box-shadow:var(--soft); overflow:hidden; }
.order-scope .card-header{ background:linear-gradient(180deg,#fff,#fcfdff); border-bottom:1px solid var(--ord-border); color:var(--ord-ink); }
.order-scope .card-footer{ background:#fbfcff; border-top:1px solid var(--ord-border); }

/* ---------- Sticky plan summary ---------- */
.order-scope #plan-summary{ top:calc(env(safe-area-inset-top)+8px); border:1px solid var(--ord-border); border-radius:var(--radius); background:#fff; z-index:5; }
@media (max-width:576px){
  .order-scope #plan-summary{ position:sticky; top:0; border-radius:0 0 var(--radius) var(--radius); }
}

/* ---------- Progress base ---------- */
.order-scope .progress{
  height:10px; background:#edf2f7; border-radius:999px; overflow:hidden;
}
.order-scope .progress-bar,
.order-scope #wizard-progress{
  position: relative;
  background: linear-gradient(90deg, var(--ord-primary), #60a5fa);
  transition: width .6s cubic-bezier(.2,.7,.2,1);
  will-change: width;
  z-index: 0; /* stripe overlay sits above via ::after */
}

/* Animated stripe overlay lives on ::after so the base gradient stays intact */
.order-scope #wizard-progress::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0; /* hidden by default */
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.28) 0 12px,
      transparent 12px 24px
    );
  background-size: 24px 24px;
  transition: opacity .15s ease;
  z-index: 1;
}

/* When animating, fade in overlay and move it */
.order-scope #wizard-progress.is-anim::after{
  opacity:1;
  animation: ord-stripes 1s linear infinite;
}
@keyframes ord-stripes{
  from { background-position: 0 0; }
  to   { background-position: 24px 0; }
}

/* Small pulse on step changes (triggered by JS if you want it) */
.order-scope .step-pulse{ animation: ord-pulse .35s ease; }
@keyframes ord-pulse{ 0%{ transform: scale(.995); } 100%{ transform: scale(1); } }

/* ---------- Step transitions ---------- */
.order-scope .wizard-step{ transition:opacity .2s ease, transform .2s ease; }
.order-scope .wizard-step.d-none{ opacity:0; transform:translateY(6px); }

/* ---------- Buttons ---------- */
.order-scope .btn{ border-radius:12px; }
.order-scope .btn.btn-primary{ background:var(--ord-primary); border-color:var(--ord-primary); }
.order-scope .btn.btn-primary:hover{ background:var(--ord-primary-ink); }
.order-scope .btn-outline-secondary{ border-color:var(--ord-border-strong); color:var(--ord-ink); background:#fff; }
.order-scope .btn-outline-secondary:hover{ background:#f8fafc; border-color:var(--ord-border-strong); }
.order-scope .btn.btn-icon-change{
  width:38px; height:38px; border-radius:12px; display:inline-grid; place-items:center;
  background:#f1f5f9; border:1px solid var(--ord-border);
}
.order-scope .btn.btn-icon-change:hover{ background:#e2e8f0; }

/* ---------- Selectable tiles (terms, sim type, number action) ---------- */
.order-scope .option-tile{
  position:relative; display:flex; align-items:center; gap:.5rem;
  padding:.85rem 1rem; min-height:44px; user-select:none; cursor:pointer;
  border:1px solid var(--ord-border); border-radius:12px; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .05s ease;
}
.order-scope .option-tile:hover{ border-color:var(--ord-primary); background:var(--ord-primary-50); }
.order-scope .option-tile .sim-icon{ margin-right:.45rem; }

/* Hide native radios (still accessible) */
.order-scope .option-tile .form-check-input{ position:absolute; inset:auto; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.order-scope .option-tile span{ display:inline-flex; align-items:center; gap:.5rem; }
.order-scope .option-tile span::before{
  content:""; width:18px; height:18px; border-radius:5px; background:#fff; border:2px solid var(--ord-border-strong); transition:all .18s ease;
}
/* Checked → green tick */
.order-scope .option-tile input:checked + span::before,
.order-scope .option-tile.is-selected span::before{
  border-color:var(--ok); background:var(--ok);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M16.704 5.29a1 1 0 0 1 0 1.415l-7.5 7.5a1 1 0 0 1-1.415 0l-3-3A1 1 0 1 1 5.204 9.79l2.293 2.293 6.793-6.793a1 1 0 0 1 1.414 0z'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:12px 12px;
}

/* :has() highlight (auto without JS) */
.order-scope .option-tile:has(input:checked),
.order-scope .hw-card:has(input:checked),
.order-scope .operator-card:has(input:checked){
  border-color:var(--ok)!important; box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 26%, transparent), var(--soft);
  background:linear-gradient(180deg,#fff,#f7fff9);
}
.order-scope .option-tile:has(.term-opt:checked){ transform:translateY(-1px); }

/* Fallback class (JS toggles .is-selected) */
.order-scope .option-tile.is-selected,
.order-scope .hw-card.is-selected,
.order-scope .operator-card.is-selected{
  border-color:var(--ok)!important; box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 26%, transparent), var(--soft);
  background:linear-gradient(180deg,#fff,#f7fff9);
}

/* Tiny “tick” badge when selected */
.order-scope .option-tile:has(input:checked)::after,
.order-scope .option-tile.is-selected::after,
.order-scope .hw-card:has(input:checked)::after,
.order-scope .hw-card.is-selected::after,
.order-scope .operator-card:has(input:checked)::after,
.order-scope .operator-card.is-selected::after{
  content:""; position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:999px; background:var(--ok);
  box-shadow:0 0 0 2px #fff;
  -webkit-mask:none; mask:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M16.704 5.29a1 1 0 0 1 0 1.415l-7.5 7.5a1 1 0 0 1-1.415 0l-3-3A1 1 0 1 1 5.204 9.79l2.293 2.293 6.793-6.793a1 1 0 0 1 1.414 0z'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:14px 14px;
}

/* ---------- Hardware cards ---------- */
.order-scope .hw-card{
  display:block; padding:14px; border:1px solid var(--ord-border); border-radius:14px; background:#fff; cursor:pointer;
  transition:box-shadow .2s ease, border-color .2s ease, transform .05s ease;
}
.order-scope .hw-card:hover{ border-color:var(--ord-primary); box-shadow:var(--soft); }
.order-scope .hw-card:active{ transform:translateY(1px); }

/* ---------- Add-on line ---------- */
.order-scope .addon-line{ border-top:1px dashed var(--ord-border); padding-top:12px; margin-top:12px; }

/* ---------- Forms (live validity) ---------- */
.order-scope .form-control, .order-scope .form-select{ border-radius:12px; border-color:var(--ord-border); background:#fff; color:var(--ord-ink); }
.order-scope .form-control:focus, .order-scope .form-select:focus{ border-color:var(--ord-primary); box-shadow:var(--focus); outline:none; }
.order-scope .form-check-input:focus{ box-shadow:var(--focus); }

/* Valid (green tick) */
.order-scope .form-control.is-valid, .order-scope .form-select.is-valid{
  border-color:var(--ok)!important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'><path d='M16.704 5.29a1 1 0 0 1 0 1.415l-7.5 7.5a1 1 0 0 1-1.415 0l-3-3A1 1 0 1 1 5.204 9.79l2.293 2.293 6.793-6.793a1 1 0 0 1 1.414 0z'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:18px 18px; padding-right:2.2rem;
}
/* Invalid (red ring) */
.order-scope .form-control.is-invalid, .order-scope .form-select.is-invalid{
  border-color:var(--no)!important; box-shadow:0 0 0 3px color-mix(in srgb, var(--no) 25%, transparent);
}

/* ---------- Address view/edit ---------- */
.order-scope #addr_view{ border:1px solid var(--ord-border); border-radius:12px; background:#fff; }
.order-scope #btn-change-address{ color:var(--ord-primary); }

/* ---------- Summary ---------- */
.order-scope .summary-block{ border:1px solid var(--ord-border); border-radius:14px; padding:14px; background:#fff; box-shadow:var(--soft); }
.order-scope .summary-title{ font-weight:700; color:var(--ord-ink); }
.order-scope .summary-kv{ display:grid; grid-template-columns:140px 1fr; gap:8px 12px; }
@media (max-width:576px){ .order-scope .summary-kv{ grid-template-columns:1fr; } .order-scope .summary-kv .key{ color:var(--ord-muted); } }
.order-scope .summary-kv .key{ color:#374151; font-weight:600; }
.order-scope .summary-kv .val{ color:#111827; }
.order-scope .totals{ display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; }
.order-scope .totals .label{ color:var(--ord-muted); }
.order-scope .totals .amount{ font-weight:700; color:var(--ord-ink); }

/* ---------- Slots (AVAILABLE / LIMITED / UNAVAILABLE / PAST) ---------- */
.order-scope #slot-wrap{ gap:.5rem; }
.order-scope .slot-chip{
  --ring: var(--ord-border);
  display:inline-flex; align-items:center; justify-content:center;
  min-width:88px; padding:.55rem .9rem;
  border:2px solid var(--ring);
  border-radius:999px;
  background:#fff; color:#0f172a; font-weight:700;
  cursor:pointer; user-select:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .05s ease, color .15s ease;
  position:relative;
}
/* Icon bubble (tick, !, x) */
.order-scope .slot-chip::before{
  content:""; width:18px; height:18px; border-radius:999px; margin-right:.5rem; display:inline-block; background:#cbd5e1;
}

/* Status colors via data-status */
.order-scope .slot-chip[data-status="ok"]{ --ring: color-mix(in srgb, var(--ok) 40%, #fff); background: var(--ok-50); border-color: var(--ok); }
.order-scope .slot-chip[data-status="ok"]::before{ background:var(--ok);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M16.704 5.29a1 1 0 0 1 0 1.415l-7.5 7.5a1 1 0 0 1-1.415 0l-3-3A1 1 0 1 1 5.204 9.79l2.293 2.293 6.793-6.793a1 1 0 0 1 1.414 0z'/></svg>") center/14px 14px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M16.704 5.29a1 1 0 0 1 0 1.415l-7.5 7.5a1 1 0 0 1-1.415 0l-3-3A1 1 0 1 1 5.204 9.79l2.293 2.293 6.793-6.793a1 1 0 0 1 1.414 0z'/></svg>") center/14px 14px no-repeat;
}

.order-scope .slot-chip[data-status="few"]{ --ring: color-mix(in srgb, var(--warn) 40%, #fff); background: var(--warn-50); border-color: var(--warn); }
.order-scope .slot-chip[data-status="few"]::before{ background:var(--warn);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z'/></svg>") center/14px 14px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z'/></svg>") center/14px 14px no-repeat;
}

.order-scope .slot-chip[data-status="no"]{ --ring: color-mix(in srgb, var(--no) 40%, #fff); background: var(--no-50); border-color: var(--no); color:#7f1d1d; }
.order-scope .slot-chip[data-status="no"]::before{ background:var(--no);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M10 18a8 8 0 110-16 8 8 0 010 16zm2.828-11.172L11.657 8l1.171 1.172a1 1 0 01-1.414 1.414L10.243 9.414 9.07 10.586a1 1 0 11-1.414-1.414L8.829 8 7.657 6.828a1 1 0 111.414-1.414L10.243 6.586l1.172-1.172a1 1 0 111.414 1.414z'/></svg>") center/14px 14px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M10 18a8 8 0 110-16 8 8 0 010 16zm2.828-11.172L11.657 8l1.171 1.172a1 1 0 01-1.414 1.414L10.243 9.414 9.07 10.586a1 1 0 11-1.414-1.414L8.829 8 7.657 6.828a1 1 0 111.414-1.414L10.243 6.586l1.172-1.172a1 1 0 111.414 1.414z'/></svg>") center/14px 14px no-repeat;
}

/* Past slots look muted and non-interactive */
.order-scope .slot-chip[data-status="past"]{
  --ring:#d1d5db; background:#f3f4f6; border-color:#d1d5db; color:#6b7280; cursor:not-allowed; opacity:.7;
}

/* Hover/active for interactive states only */
.order-scope .slot-chip:not([data-status="no"]):not([data-status="past"]):hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}

/* Selected (aria-pressed) always turns rich green */
.order-scope .slot-chip[aria-pressed="true"],
.order-scope .slot-chip.is-selected{
  background:var(--ok); color:#fff; border-color:var(--ok);
  box-shadow:0 10px 22px rgba(22,163,74,.28);
}
.order-scope .slot-chip[aria-pressed="true"]::before,
.order-scope .slot-chip.is-selected::before{
  background:#fff; /* white dot with green border look */
  -webkit-mask:none; mask:none;
  width:10px; height:10px; outline:2px solid #fff; box-shadow:0 0 0 10px rgba(255,255,255,.12) inset;
  border-radius:999px;
}

/* Disabled guard */
.order-scope .slot-chip.is-disabled{ opacity:.5; pointer-events:none; }

/* ---------- Operators ---------- */
.order-scope .operator-card{ border:1px solid var(--ord-border); border-radius:12px; padding:.6rem .8rem; background:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
.order-scope .operator-card:hover{ border-color:var(--ord-primary); box-shadow:var(--soft); }
.order-scope .operator-card input[type="radio"]{ margin-right:.5rem; }

/* ---------- Hero badge ---------- */
.order-scope #badge-verified{ background:#10b981; color:#fff; border-radius:999px; padding:.35rem .7rem; }

/* ---------- Breadcrumb overlay ---------- */
.order-scope .breadcrumb-wrapper{ position:relative; }
.order-scope .breadcrumb-wrapper::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.25)); }
.order-scope .breadcrumb-wrapper .container{ position:relative; z-index:1; }

/* ---------- Submit overlay ---------- */
.order-scope .submit-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.35); display:grid; place-items:center; z-index:1100; }
.order-scope .submit-overlay__box{ background:#fff; color:var(--ord-ink); padding:20px 22px; border-radius:14px; box-shadow:var(--shadow); min-width:260px; text-align:center; border:1px solid var(--ord-border); }
.order-scope .submit-overlay__spinner{
  width:34px; height:34px; border-radius:999px; margin:0 auto 10px; border:3px solid #e5e7eb; border-top-color:var(--ord-primary);
  animation:ord-spin 1s linear infinite;
}
@keyframes ord-spin{ to{ transform:rotate(360deg); } }

/* ---------- Modals (mobile fullscreen) ---------- */
@media (max-width:576px){
  .order-scope .modal-dialog{ max-width:100%; margin:0; }
  .order-scope .modal-content{ min-height:100vh; border-radius:0; display:flex; flex-direction:column; }
  .order-scope .modal-header{
    position:sticky; top:0; z-index:1; background:#fff;
    padding-top:calc(12px + env(safe-area-inset-top)); border-bottom:1px solid var(--ord-border);
  }
  .order-scope .modal-body{ flex:1 1 auto; overflow:auto; padding-bottom:16px; }
  .order-scope .modal-footer{
    position:sticky; bottom:0; background:#fff; padding-bottom:calc(14px + env(safe-area-inset-bottom));
    border-top:1px solid var(--ord-border);
  }
}

/* ---------- Tabs ---------- */
.order-scope .nav-tabs .nav-link{ border:1px solid transparent; border-bottom:none; margin-right:6px; color:var(--ord-muted); }
.order-scope .nav-tabs .nav-link:hover{ color:var(--ord-ink); }
.order-scope .nav-tabs .nav-link.active{ color:var(--ord-ink); border-color:var(--ord-border) var(--ord-border) #fff var(--ord-border); background:#fff; }

/* ---------- A11y / Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .order-scope *, .order-scope *::before, .order-scope *::after{ transition:none !important; animation:none !important; }
}