/* ============================================================================
   service-package.css — a 5G router is sold only with a 5G Service Package.

   Linked by scripts/service-package.py on the two 5G router pages and on the
   cart, checkout and confirmation screens. Three pieces:

     .svc-pick      the package picker on a router page, above Buy Now
     .svc-block     the cart's (and checkout's) stop when a router has no
                    package, with the same choice so it can be settled there
     .svc-monthly   the package's monthly figure under the order total

   Field styling is the site's own .qfield select (shop.css), restated here
   because the product pages do not load shop.css. Magenta, like the
   "5G Service Package must be purchased" line in each router's Overview, so
   the requirement and the place to meet it read as one thing.
   ========================================================================= */

/* ---- the picker on a router page --------------------------------------- */
.svc-pick {
  margin-top: 26px;
  max-width: 520px;
}

.svc-pick label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.svc-pick .req {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}

.svc-pick select,
.svc-block select {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background-color: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 34px 11px 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a949c' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
}

.svc-pick select:hover,
.svc-block select:hover {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
}

.svc-pick select:focus,
.svc-block select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

/* nothing chosen and Buy Now pressed */
.svc-pick.is-missing select {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 16%, transparent);
}

.svc-pick-msg {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--magenta-ink);
}

.svc-pick-msg[hidden] {
  display: none;
}

.svc-pick-compare {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}

.svc-pick-compare a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

.svc-pick-compare a:hover {
  text-decoration: underline;
}

/* the buy row sits closer under the picker than under the chips */
.svc-pick + .buy-row {
  margin-top: 16px;
}

/* ---- the cart's stop ----------------------------------------------------- */
.svc-block {
  margin: 0 0 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--magenta) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--magenta) 30%, transparent);
}

.svc-block[hidden] {
  display: none;
}

.svc-block-h {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--magenta-ink);
}

.svc-block-t {
  margin: 4px 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.svc-block-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.svc-block-row select {
  flex: 1;
  min-width: 0;
}

.svc-block-row .buybtn {
  flex: none;
  height: 44px;
}

.svc-block-err {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--magenta-ink);
}

.svc-block-err[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .svc-block-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* a package's line in the cart: a signal glyph where a product photo goes */
.cart-line .svc-shot {
  color: var(--blue);
}

.cart-line .svc-shot svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- the monthly figure under the total --------------------------------- */
.svc-monthly {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2, rgba(0, 0, 0, .03));
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.svc-monthly[hidden] {
  display: none;
}

.svc-monthly b {
  display: block;
  font-size: 14px;
  color: var(--ink);
}

/* checkout closed while a router has no package */
.summary .buybtn.is-blocked,
.summary .buybtn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* checkout's stop sits under the intro paragraph, not against it */
[data-checkout-service-stop] {
  margin-top: clamp(22px, 2.6vw, 30px);
}