/* dedicated.html — page-only styles */

.ded-provision-note {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ded-provision-note strong { color: var(--success); }

/* ---- server list: one calm row per server (name, 4 specs, price, order) ---- */
.dedicated-matrix-list {
  --ded-cols: minmax(190px, 1.7fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(80px, .8fr) minmax(130px, 1fr) 132px;
  gap: 10px;
}
.ded-head {
  display: grid; grid-template-columns: var(--ded-cols); gap: 20px; align-items: end;
  padding: 0 27px 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
}
.dedicated-matrix-list .ded-row-card {
  grid-template-columns: var(--ded-cols); gap: 20px;
  padding: 22px 26px;
}
.dedicated-matrix-list .ded-row-card:hover { transform: none; }
.ded-row-card .ded-col-model strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

.ded-spec { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ded-spec .lbl {
  display: none; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
}
.ded-spec .val { font-size: 14.5px; font-weight: 500; color: var(--text); white-space: nowrap; }

.ded-row-card .ded-col-price { white-space: nowrap; font-size: 24px; }
.ded-col-btn .tech-action-btn { text-decoration: none; white-space: nowrap; width: 100%; justify-content: center; }

/* per-server extras (only rendered when WHMCS lists something not every server has) */
.ded-more { grid-column: 1 / -1; margin-top: -6px; font-size: 13px; color: var(--text-muted); }
.ded-more summary {
  cursor: pointer; width: max-content; list-style: none;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}
.ded-more summary::-webkit-details-marker { display: none; }
.ded-more summary::after { content: " +"; }
.ded-more[open] summary::after { content: " \2212"; }
.ded-more summary:hover { color: var(--primary); }
.ded-more ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; padding: 0; list-style: none; }

/* "included with every server" strip */
.ded-included {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px;
  margin-top: 26px; padding: 0 16px;
}
.ded-included[hidden] { display: none; }
.ded-included-title {
  flex-basis: 100%; text-align: center; margin-bottom: 2px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
}
.ded-included-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.ded-included-item i { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }

/* tablet / phone: the row becomes a stacked card (name + price on top, specs below, full-width order button) */
@media (max-width: 1100px) {
  .ded-head { display: none; }
  .dedicated-matrix-list .ded-row-card {
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 22px;
  }
  .ded-row-card .ded-col-model { grid-row: 1; grid-column: 1 / 3; align-self: center; }
  .ded-row-card .ded-col-price { grid-row: 1; grid-column: 3 / -1; justify-self: end; align-self: center; }
  .ded-spec .lbl { display: block; }
  .ded-col-btn { grid-column: 1 / -1; }
  .ded-col-btn .tech-action-btn { padding: 11px 0; }
  .ded-more { margin-top: 0; }
}
@media (max-width: 640px) {
  .dedicated-matrix-list .ded-row-card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 18px; }
  .ded-row-card .ded-col-model { grid-column: 1 / 2; }
  .ded-row-card .ded-col-price { grid-column: 2 / 3; font-size: 22px; }
  .ded-row-card .ded-col-model strong { font-size: 15.5px; }
  .ded-included { justify-content: flex-start; padding: 0 4px; gap: 8px 18px; }
  .ded-included-title { text-align: left; }
}