/* =========================================================
   Satphone global modal (js/sp-modal) + reusable plan-picker.
   Loaded site-wide (default.xml). The modal shell is content-agnostic; the
   .sp-plan-* classes are the reusable airtime-plan picker (a theme-wide,
   un-page-scoped version of the airtime page's .sp-pp-opt choice bars) used
   inside the modal on the product cards, and reusable elsewhere later.
   Uses the global --spc-* tokens.
   ========================================================= */

/* ---------- Scroll lock while a modal is open (all viewports) ---------- */
body.sp-modal-open { overflow: hidden; }

/* ---------- Modal shell ---------- */
.sp-modal-root {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
}
.sp-modal-scrim {
  position: absolute; inset: 0; background: rgba(5, 10, 20, .62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .22s ease;
}
.sp-modal-root.is-open .sp-modal-scrim { opacity: 1; }
.sp-modal {
  position: relative; z-index: 1; width: 100%; max-width: 560px;
  max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: var(--spc-bg-2); border: 1px solid var(--spc-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  transform: translateY(14px) scale(.985); opacity: 0;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), opacity .22s ease;
  outline: none;
}
.sp-modal-root.is-open .sp-modal { transform: none; opacity: 1; }
.sp-modal-head {
  /* extra right padding clears the corner close button */
  padding: 1.5rem 62px 1.15rem 1.5rem; flex: 0 0 auto;
}
.sp-modal-title {
  margin: 0; color: #fff;
  font-family: 'Barlow', system-ui, sans-serif; text-transform: uppercase;
  font-size: 24px; font-weight: 700; letter-spacing: .03em; line-height: 1.1;
}
/* Close button pinned to the modal's top-right corner (past the header gutter),
   with only a left + bottom rule — an L that frames the corner. */
.sp-modal-close {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; padding: 0; cursor: pointer; box-shadow: none;
  background: transparent; color: var(--spc-fg);
  border: 0; border-left: 1px solid var(--spc-line); border-bottom: 1px solid var(--spc-line);
  border-radius: 0; transition: color .18s ease, background .18s ease;
}
.sp-modal-close:hover { color: var(--spc-accent); }
.sp-modal-close svg { width: 20px; height: 20px; display: block; }
.sp-modal-body {
  padding: 0 1.5rem 1.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto;
}

/* ---------- Reusable plan picker (tabs + choice bars + apply) ---------- */
/* 4-element tab bar: [edge][tab1][tab2][edge], aligned at the buttons' base with
   no gaps. The edges are the baseline extending left (short) and right (fills). */
.sp-plan-tabs { display: flex; align-items: flex-end; margin: 0 0 1.25rem; }
.sp-plan-tabs-edge { align-self: flex-end; border-bottom: 1px solid var(--spc-line); }
.sp-plan-tabs-edge--left { flex: 0 0 24px; }
.sp-plan-tabs-edge--right { flex: 1 1 auto; }
.sp-plan-tab {
  flex: none; width: 130px; min-width: 130px; box-sizing: border-box; padding: 12px 8px;
  cursor: pointer; box-shadow: none; background: transparent; color: var(--spc-muted);
  border: 1px solid var(--spc-line); border-radius: 0;
  font-family: 'Barlow', system-ui, sans-serif; font-weight: 700;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  transition: color .15s ease, border-color .15s ease;
}
/* inactive tab: muted gray box, closed on the baseline (default border above) */
.sp-plan-tab:not(.is-active):hover { color: var(--spc-fg); }
/* active tab: orange outline (top + sides) + orange text, no fill, and an open
   bottom so it merges into the content below the baseline */
.sp-plan-tab.is-active {
  color: var(--spc-accent);
  border-color: var(--spc-accent);
  border-bottom-color: transparent;
  background: transparent;
}

.sp-plan-desc { margin: 0 0 1.25rem; color: var(--spc-muted); font-size: .9rem; line-height: 1.6; }
/* Overlay the prepaid/postpaid panels in one grid cell so the picker always
   reserves the TALLER panel's height — the modal no longer resizes on tab
   switch. The inactive panel keeps its `hidden` attribute (JS logic relies on
   it) but is shown via visibility:hidden instead of display:none so it still
   contributes its height; visibility:hidden also hides it from AT + pointer. */
.sp-plan-panels { display: grid; }
.sp-plan-panels > .sp-plan-panel { grid-area: 1 / 1; min-width: 0; }
.sp-plan-panels > .sp-plan-panel[hidden] { display: block; visibility: hidden; }

/* legend text + an inline rule filling the rest of the row: "MINUTES * ———" */
.sp-plan-legend {
  display: flex; align-items: center; gap: 12px; margin: 0 0 .9rem; padding: 1.4rem 0 0;
  color: var(--spc-muted); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.sp-plan-legend-text { flex: 0 0 auto; }
.sp-plan-legend::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--spc-line); }
.sp-plan-req { color: var(--spc-accent); }
.sp-plan-opts { border: 0; margin: 0; padding: 0; }

.sp-plan-opt { display: block; cursor: pointer; margin: 0 0 8px; }
.sp-plan-opt input {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.sp-plan-opt-box {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; box-sizing: border-box;
  background: var(--spc-bg-2); border: 1px solid var(--spc-line); transition: border-color .15s ease;
}
.sp-plan-opt-box::before {
  content: ''; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--spc-line); box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease;
}
.sp-plan-opt input:checked + .sp-plan-opt-box { border-color: var(--spc-accent); }
.sp-plan-opt input:checked + .sp-plan-opt-box::before {
  border-color: var(--spc-accent); background: var(--spc-accent); box-shadow: inset 0 0 0 3px var(--spc-bg-2);
}
.sp-plan-opt input:focus-visible + .sp-plan-opt-box { outline: 2px solid var(--spc-accent); outline-offset: 1px; }
.sp-plan-opt-title { flex: 1 1 auto; min-width: 0; color: var(--spc-fg); font-size: .85rem; line-height: 1.4; }
.sp-plan-opt-price { flex: 0 0 auto; color: var(--spc-accent); font-weight: 600; font-size: .9rem; }

/* postpaid (or any) empty state */
.sp-plan-empty {
  margin: 0; padding: 1.5rem 0; color: var(--spc-muted); font-size: .9rem; line-height: 1.6; text-align: center;
}
.sp-plan-empty a { color: var(--spc-accent); text-decoration: none; border-bottom: 1px solid transparent; }
.sp-plan-empty a:hover { border-bottom-color: var(--spc-accent); }

/* footer apply button — mirrors the minicart/hero button styling */
.sp-plan-footer { margin: 1.5rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--spc-line); }
.sp-plan-apply { width: 100%; height: 52px; }
.sp-plan-apply[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

@media (max-width: 480px) {
  .sp-modal-root { padding: 12px; }
  .sp-modal-head { padding: 1.25rem 56px 1rem 1.25rem; }
  .sp-modal-body { padding: 0 1.25rem 1.25rem; }
  /* drop the 24px left baseline inset so the "Prepaid" tab sits flush with the
     container's left edge */
  .sp-plan-tabs-edge--left { display: none; }
}