/* ============================================================
   In-dashboard ordering: configurator on the left, live order
   summary pinned on the right. Uses the portal shell tokens.
   ============================================================ */

.ord {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.3rem;
  align-items: start;
}

/* ---------------- steps ---------------- */
.ord-step { margin-bottom: 1.1rem; }
.ord-step-title {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1rem; font-size: 1.02rem; font-weight: 800; color: var(--pm-text);
}
.ord-step-title i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  background: var(--pm-primary); color: #fff;
  font-style: normal; font-size: .76rem; font-weight: 800;
}

/* ---------------- service type ---------------- */
.ord-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.ord-type {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  padding: .9rem 1rem; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--pm-surface-2); border: 1.5px solid var(--pm-border); color: var(--pm-text);
  transition: border-color .15s ease, transform .15s ease;
}
.ord-type:hover { border-color: var(--pm-primary); transform: translateY(-2px); }
.ord-type.on { border-color: var(--pm-primary); box-shadow: 0 0 0 3px rgba(0, 96, 254, .14); }
.ord-type-ico { font-size: 1.4rem; line-height: 1; margin-bottom: .3rem; }
.ord-type strong { font-size: .92rem; font-weight: 700; }

/* ---------------- provider lines ---------------- */
.ord-lines { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.ord-line {
  padding: .45rem .95rem; border-radius: 999px; cursor: pointer;
  background: var(--pm-surface-2); border: 1.5px solid var(--pm-border);
  color: var(--pm-muted); font-size: .82rem; font-weight: 700;
}
.ord-line:hover { color: var(--pm-text); border-color: var(--pm-primary); }
.ord-line.on { background: var(--pm-primary); border-color: var(--pm-primary); color: #fff; }

/* ---------------- plan rows ---------------- */
.ord-plans { display: flex; flex-direction: column; gap: .55rem; }
.ord-plan {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  padding: .85rem 1rem; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--pm-surface-2); border: 1.5px solid var(--pm-border); color: var(--pm-text);
  transition: border-color .15s ease, background .15s ease;
}
.ord-plan:hover { border-color: var(--pm-primary); }
.ord-plan.on { border-color: var(--pm-primary); box-shadow: 0 0 0 3px rgba(0, 96, 254, .14); }
.ord-plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ord-plan-main strong { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 700; }
.ord-plan-meta { font-size: .74rem; color: var(--pm-muted); }
.ord-plan-price { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.ord-plan-price b { font-size: 1.15rem; font-weight: 800; color: var(--pm-text); }
.ord-plan-price i { font-style: normal; font-size: .74rem; color: var(--pm-muted); }
.ord-plan-pick {
  flex: 0 0 auto; padding: .42rem .9rem; border-radius: 9px;
  background: var(--pm-primary); color: #fff; font-size: .78rem; font-weight: 700;
}
.ord-plan.on .ord-plan-pick { background: #0a7d32; }

.ord-tag {
  font-style: normal; font-size: .64rem; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; padding: .18rem .45rem; border-radius: 999px;
  background: rgba(0, 96, 254, .16); color: var(--pm-primary);
}

/* ---------------- locations ---------------- */
.ord-locs { display: flex; flex-wrap: wrap; gap: .5rem; }
.ord-loc {
  padding: .55rem .9rem; border-radius: 10px; cursor: pointer;
  background: var(--pm-surface-2); border: 1.5px solid var(--pm-border);
  color: var(--pm-text); font-size: .83rem; font-weight: 600;
}
.ord-loc:hover { border-color: var(--pm-primary); }
.ord-loc.on { border-color: var(--pm-primary); box-shadow: 0 0 0 3px rgba(0, 96, 254, .14); }

/* ---------------- term ---------------- */
.ord-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; }
.ord-term {
  position: relative; display: flex; flex-direction: column; gap: .15rem;
  padding: 1rem; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--pm-surface-2); border: 1.5px solid var(--pm-border); color: var(--pm-text);
}
.ord-term:hover { border-color: var(--pm-primary); }
.ord-term.on { border-color: var(--pm-primary); box-shadow: 0 0 0 3px rgba(0, 96, 254, .14); }
.ord-term strong { font-size: .95rem; font-weight: 700; }
.ord-term-price { font-size: 1.35rem; font-weight: 800; }
.ord-term-price i { font-style: normal; font-size: .74rem; font-weight: 500; color: var(--pm-muted); }
.ord-term .ord-tag { position: absolute; top: .7rem; right: .7rem; }
.ord-perk { margin-top: .4rem; font-size: .76rem; font-weight: 700; color: #0a7d32; }

/* ---------------- summary ---------------- */
.ord-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 1rem; }
.ord-summary .portal-card-title { margin-bottom: .9rem; }
.ord-empty { margin: 0; }
.ord-sum-plan {
  display: flex; flex-direction: column; gap: .1rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--pm-border);
}
.ord-sum-plan strong { font-size: 1rem; font-weight: 800; color: var(--pm-text); }
.ord-sum-list {
  display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem;
  margin: .8rem 0; font-size: .84rem;
}
.ord-sum-list dt { color: var(--pm-muted); }
.ord-sum-list dd { margin: 0; text-align: right; color: var(--pm-text); font-weight: 600; }
.ord-save { color: #0a7d32 !important; }
.ord-total {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding-top: .8rem; border-top: 1px solid var(--pm-border);
}
.ord-total span { flex: 1; font-size: .88rem; color: var(--pm-muted); }
.ord-total b { font-size: 1.6rem; font-weight: 800; color: var(--pm-text); }
.ord-total i { width: 100%; text-align: right; font-style: normal; font-size: .74rem; color: var(--pm-muted); }
.ord-missing { margin: .8rem 0 0; color: #b7791f !important; }
.ord-cta { margin-top: 1rem; }
.ord-cta:disabled { opacity: .5; cursor: not-allowed; }
.ord-secure { margin: .7rem 0 0; text-align: center; font-size: .74rem; }

.ord-trust-title {
  margin: 0 0 .7rem; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px; color: var(--pm-muted);
}
.ord-trust li {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .5rem; font-size: .83rem; color: var(--pm-text);
}
.ord-trust li svg { color: var(--pm-primary); flex: 0 0 auto; }

/* ---------------- responsive ---------------- */
@media (max-width: 980px) {
  .ord { grid-template-columns: minmax(0, 1fr); }
  .ord-side { position: static; }
}
@media (max-width: 560px) {
  .ord-plan { flex-wrap: wrap; }
  .ord-plan-main { flex: 1 0 100%; }
  .ord-plan-price { flex: 1; text-align: left; }
}

/* ---------------- cart ---------------- */
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cart-list { display: flex; flex-direction: column; }
.cart-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 0; border-bottom: 1px solid var(--pm-border);
}
.cart-row:last-child { border-bottom: 0; }
.cart-ico {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pm-surface-2); font-size: 1.1rem;
}
.cart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.cart-info strong { font-size: .94rem; font-weight: 700; color: var(--pm-text); }
.cart-meta { font-size: .74rem; color: var(--pm-muted); }
.cart-price { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.cart-price b { font-size: 1.05rem; font-weight: 800; color: var(--pm-text); }
.cart-price i { font-style: normal; font-size: .72rem; color: var(--pm-muted); }
.cart-x {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--pm-border);
  color: var(--pm-muted); font-size: 1.1rem; line-height: 1;
}
.cart-x:hover { border-color: #d64541; color: #d64541; }
.cart-note { margin: .7rem 0 0; }

.cart-dsearch { display: flex; gap: .5rem; }
.cart-dsearch .form-input { flex: 1; }
.cart-dres { margin-top: .8rem; display: flex; flex-direction: column; }
.cart-drow {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem 0; border-bottom: 1px solid var(--pm-border); margin: 0;
}
.cart-drow:last-child { border-bottom: 0; }
.cart-drow.taken { opacity: .55; }
.cart-dname { flex: 1; font-size: .9rem; font-weight: 600; color: var(--pm-text); }
.cart-dprice { font-size: .95rem; font-weight: 800; color: var(--pm-text); white-space: nowrap; }
.cart-dprice i { font-style: normal; font-size: .72rem; font-weight: 500; color: var(--pm-muted); }
.ph-dot-primary { background: var(--ph-primary) !important; }

/* ---- sold-out plan rows ---- */
.ord-plan.is-out { opacity: .6; cursor: not-allowed; }
.ord-plan-pick.is-out { background: var(--pm-surface-2); color: var(--pm-muted); }
.wz-plan.is-out { opacity: .6; cursor: not-allowed; }
.wz-badge-out { background: rgba(120,124,140,.9) !important; }

/* ---- hardware detail on plan rows ---- */
.ord-hw { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.ord-hw span {
  font-size: .68rem; font-weight: 700; letter-spacing: .2px;
  padding: .16rem .45rem; border-radius: 6px;
  background: var(--pm-surface-2); color: var(--pm-muted);
  border: 1px solid var(--pm-border);
}
.ord-hw span.hw-cpu { color: var(--pm-primary); border-color: rgba(0,96,254,.3); }

/* ---- locations we offer but that are temporarily full ---- */
.ord-loc.is-out {
  display: inline-flex; align-items: center; gap: .45rem;
  cursor: not-allowed; opacity: .55;
  border-style: dashed; color: var(--pm-muted);
}
.ord-loc.is-out em {
  font-style: normal; font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px;
  padding: .1rem .35rem; border-radius: 5px;
  background: rgba(120,124,140,.2);
}
.wz-card.is-out { opacity: .55; cursor: not-allowed; border-style: dashed; }

/* ---- plan comparison ---- */
.ord-step-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ord-view { display: inline-flex; padding: .2rem; gap: .2rem; border-radius: 999px;
  background: var(--pm-surface-2); border: 1px solid var(--pm-border); }
.ord-view button { border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: .35rem .85rem; font-size: .78rem; font-weight: 700; color: var(--pm-muted); }
.ord-view button.on { background: var(--pm-primary); color: #fff; }

.ord-compare { overflow-x: auto; }
.ord-ctable { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 520px; }
.ord-ctable th, .ord-ctable td { padding: .6rem .7rem; text-align: center; border-bottom: 1px solid var(--pm-border); }
.ord-ctable th { font-weight: 800; color: var(--pm-text); font-size: .9rem; }
.ord-ctable th.pop { color: var(--pm-primary); }
.ord-ctable th em { display: block; font-style: normal; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--pm-primary); }
.ord-ctable td.k, .ord-ctable th:first-child { text-align: left; color: var(--pm-muted); font-weight: 600; white-space: nowrap; }
.ord-ctable tr:last-child td { border-bottom: 0; }

/* ---- domain chooser ---- */
.ord-dmode { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.ord-dmode button {
  display: flex; flex-direction: column; gap: .15rem; text-align: left; cursor: pointer;
  padding: .75rem .9rem; border-radius: 11px;
  background: var(--pm-surface-2); border: 1.5px solid var(--pm-border); color: var(--pm-text);
}
.ord-dmode button:hover { border-color: var(--pm-primary); }
.ord-dmode button.on { border-color: var(--pm-primary); box-shadow: 0 0 0 3px rgba(0,96,254,.14); }
.ord-dmode strong { font-size: .88rem; font-weight: 700; }
.ord-dmode span { font-size: .74rem; color: var(--pm-muted); }
.ord-dpane .cart-drow { width: 100%; cursor: pointer; background: none; border: 0;
  border-bottom: 1px solid var(--pm-border); text-align: left; }
.ord-dpane .cart-drow.on { background: rgba(0,96,254,.1); border-radius: 8px; }