/* Order steps (/order/…): plan and domain, cart, checkout. Uses the site's colour tokens. */
.ord-wrap { max-width: 1120px; margin: 0 auto; padding: 32px 16px 72px; }
.ord-title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.6rem; color: var(--ink); }
.ord-title .icon { width: 28px; height: 28px; color: var(--primary); }
.ord-lead { margin: 0 0 18px; color: var(--muted); line-height: 1.9; }
.ord-hint { margin: 8px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.8; }
.ord-center { text-align: center; margin-top: 18px; }
.ord-error { margin: 6px 0 0; color: #b42318; font-size: .86rem; font-weight: 700; }

/* steps */
.ord-steps { display: flex; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; counter-reset: none; overflow-x: auto; }
.ord-steps li { flex: 1 1 0; min-width: 120px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: .86rem; font-weight: 700; }
.ord-step-num { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); color: var(--muted); font-weight: 800; }
.ord-step-num .icon { width: 16px; height: 16px; }
.ord-steps li.is-current { border-color: var(--primary); color: var(--ink); box-shadow: 0 0 0 3px var(--primary-soft); }
.ord-steps li.is-current .ord-step-num { background: var(--primary); color: #fff; }
.ord-steps li.is-done .ord-step-num { background: #16a05a; color: #fff; }

/* layout */
.ord-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.ord-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ord-side { position: sticky; top: 90px; }
.ord-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 20px 22px; margin: 0; min-width: 0; }
fieldset.ord-card { padding-top: 20px; }
/* A legend normally sits on the fieldset's border; here it is an ordinary heading. */
legend.ord-card-title { float: right; width: 100%; }
legend.ord-card-title + * { clear: both; }
.ord-card-title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 0; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.ord-card-title .icon { width: 20px; height: 20px; color: var(--primary); }
.ord-card-title small { color: var(--muted); font-weight: 600; }
.ord-card label { display: block; margin-bottom: 12px; }
.ord-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }

/* billing cycles and domain options */
.ord-cycles, .ord-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ord-cycle, .ord-option { position: relative; margin: 0 !important; cursor: pointer; }
.ord-cycle input, .ord-option input { position: absolute; opacity: 0; pointer-events: none; }
.ord-cycle > span, .ord-option > span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.ord-option > span { flex-direction: row; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.ord-option .icon { width: 20px; height: 20px; color: var(--primary); }
.ord-cycle b { color: var(--ink); }
.ord-cycle small { color: var(--muted); }
.ord-cycle em { font-style: normal; font-size: .78rem; font-weight: 800; color: #16a05a; }
.ord-cycle input:checked + span, .ord-option input:checked + span { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ord-cycle input:focus-visible + span, .ord-option input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.ord-pane { margin-top: 16px; }
.ord-search { display: flex; gap: 8px; }
.ord-search .acc-input:first-child { flex: 1 1 auto; min-width: 0; }
.ord-tld { flex: 0 0 auto; width: auto; min-width: 150px; }
.ord-search.is-big { margin-top: 6px; }
.ord-search.is-big .btn { flex: none; }
.ord-years { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.ord-check-result { margin: 10px 0 0; min-height: 1.6em; font-weight: 700; }
.ord-check-result.is-ok { color: #16a05a; }
.ord-check-result.is-bad { color: #b42318; }
.ord-check-result.is-unknown { color: var(--muted); }

/* domain search results */
.ord-domain-hero { margin-bottom: 16px; }
.ord-results { padding: 6px 22px; }
.ord-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.ord-result:last-child { border-bottom: 0; }
.ord-result-name { font-size: 1.05rem; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ord-badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; background: var(--bg); color: var(--muted); }
.ord-badge.is-ok { background: #e6f7ee; color: #16a05a; }
.ord-badge.is-bad { background: #fdecec; color: #d12d2d; }
.ord-result-add { display: flex; align-items: center; gap: 8px; margin: 0; }
.ord-result-add[hidden] { display: none; }
.ord-years-select { height: 40px; width: auto; font-size: .9rem; }

/* cart and summary */
.ord-lines { padding: 6px 22px; }
.ord-line { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.ord-line:last-child { border-bottom: 0; }
.ord-line.is-child { padding-top: 0; margin-top: -6px; padding-inline-start: 22px; }
.ord-line-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ord-line-text b { color: var(--ink); overflow-wrap: anywhere; }
.ord-line-text small { color: var(--muted); }
.ord-line-price { flex: none; text-align: left; color: var(--ink); }
.ord-line-price small { color: var(--muted); }
.ord-line-remove { flex: none; width: 36px; margin: 0; }
.ord-line-remove button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.ord-line-remove button:hover { background: #fdecec; color: #d12d2d; }
.ord-line-remove .icon { width: 18px; height: 18px; }
.ord-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.ord-summary .btn-block { margin-top: 14px; }
.ord-row, .ord-total { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; color: var(--muted); }
.ord-row b { color: var(--ink); }
.ord-total { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 1.05rem; color: var(--ink); }
.ord-total b { color: var(--primary); font-size: 1.15rem; }
.ord-features, .ord-mini { list-style: none; margin: 0 0 12px; padding: 0; }
.ord-features li, .ord-mini li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--muted); }
.ord-features li b, .ord-mini li b { color: var(--ink); text-align: left; }
.ord-terms { display: flex !important; align-items: flex-start; margin-top: 14px; font-size: .88rem; line-height: 1.8; }
.ord-empty { text-align: center; padding: 48px 24px; }
.ord-empty-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.ord-empty-icon .icon { width: 30px; height: 30px; }
.ord-empty h2 { margin: 14px 0 6px; color: var(--ink); }
.ord-empty p { color: var(--muted); }
.ord-empty .ord-actions { justify-content: center; margin-top: 16px; }

@media (max-width: 900px) {
  .ord-layout { grid-template-columns: minmax(0, 1fr); }
  .ord-side { position: static; }
  .ord-steps li { min-width: 0; }
  .ord-step-label { display: none; }
  .ord-steps li.is-current .ord-step-label { display: inline; }
}
@media (max-width: 560px) {
  .ord-search { flex-wrap: wrap; }
  .ord-tld { flex: 1 1 auto; }
  .ord-search .btn { flex: 1 1 100%; }
  .ord-card { padding: 16px; }
  .ord-lines, .ord-results { padding: 4px 16px; }
}

/* Domain names, IRNIC handles and codes: the site font draws Persian digits, so
   these use a system font and show exactly what the customer types. */
.is-order .acc-input.is-ltr, .is-order bdi[dir="ltr"], .is-order .ord-result-name, .ord-domain-code {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}