/* รอบ 57: โดเมนของร้าน (/shop-domain) + หน้าโดเมนของแอดมินกลาง (/platform/domains) — class ขึ้นต้น dom- */

/* ---------- สถานะ ---------- */
.dom-st { white-space: nowrap; font-weight: 600; }
.dom-st-review, .dom-st-dns, .dom-st-processing { background: var(--warn-soft); color: var(--warn-text, #8A5A00); }
.dom-st-active { background: var(--ok-soft); color: var(--ok); }
.dom-st-expiring { background: var(--warn-soft); color: var(--warn-text, #8A5A00); }
.dom-st-expired, .dom-st-disabled, .dom-st-rejected { background: var(--danger-soft); color: var(--danger); }
.dom-st-cancelled { background: var(--chip); color: var(--muted); }
.dom-ost-pending { background: var(--warn-soft); color: var(--warn-text, #8A5A00); }
.dom-ost-approved { background: var(--ok-soft); color: var(--ok); }
.dom-ost-rejected { background: var(--danger-soft); color: var(--danger); }
.dom-ost-cancelled { background: var(--chip); color: var(--muted); }
.warn-note { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn-text, #8A5A00); overflow-wrap: anywhere; }

/* ---------- หน้าโดเมนของร้าน ---------- */
.dom-page .panel h2 { margin: 0 0 6px; font-size: 1.05rem; }
.dom-cur { display: flex; flex-direction: column; gap: 14px; }
.dom-cur-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dom-globe { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); }
.dom-cur-name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dom-cur-name strong { font-size: 1.25rem; overflow-wrap: anywhere; }
.dom-cur-msg { margin: 0; color: var(--ink); }
.dom-live { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

.dom-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 18px; }
.dom-facts > div { min-width: 0; }
.dom-facts dt { color: var(--muted); font-size: .82rem; }
.dom-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

.dom-dns { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.dom-dns > h2, .dom-dns > p, .dom-orders > h2 { margin: 0; }
.dom-dns-list { display: flex; flex-direction: column; gap: 10px; }
.dom-dns-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); }
.dom-dns-type { grid-row: 1 / span 2; align-self: start; padding: 4px 0; border-radius: 8px; background: var(--ink); color: var(--surface); font-weight: 700; font-size: .82rem; text-align: center; letter-spacing: .04em; }
.dom-dns-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; min-width: 0; }
.dom-dns-k { color: var(--muted); font-size: .8rem; }
.dom-dns-v { overflow-wrap: anywhere; word-break: break-all; font-size: .88rem; }
.dom-dns-copyrow { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.dom-dns-hint { grid-column: 2; }
.dom-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dom-check-items { display: flex; flex-wrap: wrap; gap: 6px; }
.dom-ck { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .82rem; background: var(--chip); color: var(--muted); }
.dom-ck::before { content: "○"; }
.dom-ck.ok { background: var(--ok-soft); color: var(--ok); }
.dom-ck.ok::before { content: "✓"; }
.dom-ck.bad { background: var(--danger-soft); color: var(--danger); }
.dom-ck.bad::before { content: "✕"; }

.dom-cur-actions { flex-wrap: wrap; gap: 10px; }
.dom-orders { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.dom-order { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg); flex-wrap: wrap; }
.dom-order-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.dom-order-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.dom-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.dom-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.dom-tab small { color: var(--muted); }
.dom-tab.on { border-color: var(--brand); background: var(--brand-tint); }
.dom-intro h2 { margin: 0 0 4px; }
.dom-intro p { margin: 0; }

.dom-search { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.dom-search .field { flex: 1 1 240px; }
.dom-buy, .dom-own { display: flex; flex-direction: column; gap: 12px; }
.dom-buy > p, .dom-own > p { margin: 0; }
.dom-offers { display: flex; flex-direction: column; gap: 8px; }
.dom-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.dom-offer.taken { opacity: .6; }
.dom-offer-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.dom-offer-name strong { overflow-wrap: anywhere; }
.dom-offer-name small { flex-basis: 100%; }
.dom-offer-price { font-weight: 600; white-space: nowrap; }
.dom-av { padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.dom-av-available { background: var(--ok-soft); color: var(--ok); }
.dom-av-taken { background: var(--danger-soft); color: var(--danger); }
.dom-av-unknown { background: var(--warn-soft); color: var(--warn-text, #8A5A00); }

.dom-steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.dom-total { font-size: 1.2rem; color: var(--ink); }
.dom-help { margin: 0; }
.dom-paygrid, .dom-buyform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 16px 22px; align-items: start; }

.dom-history { display: flex; flex-direction: column; gap: 8px; }
.dom-hist-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.dom-hist-row strong { overflow-wrap: anywhere; }

/* ---------- แอดมินกลาง ---------- */
.dom-pf-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 2px; }
.dom-pf-name strong { font-size: 1.1rem; overflow-wrap: anywhere; }
.dom-pfcard { display: flex; flex-direction: column; gap: 12px; }
.dom-pfcard .dom-facts { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.dom-reg p { margin: 0; overflow-wrap: anywhere; }
.dom-dns-mini { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; }
.dom-dns-mini span { overflow-wrap: anywhere; word-break: break-all; }
.dom-pf-actions { flex-wrap: wrap; justify-content: flex-start; }
.dom-pfset { display: flex; flex-direction: column; gap: 12px; }
.dom-pfset h2 { margin: 0; font-size: 1.05rem; }
.dom-pfset > p { margin: 0; }
.dom-tld-list { display: flex; flex-direction: column; gap: 6px; }
.dom-tld-row { display: grid; grid-template-columns: minmax(80px, 1fr) repeat(3, minmax(90px, 1fr)) auto auto; gap: 8px 12px; align-items: center; }
.dom-tld-row.head { font-size: .8rem; color: var(--muted); }
.dom-tld-row input[type="text"], .dom-tld-row input[type="number"] { width: 100%; min-width: 0; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.dom-tld-name { font-size: 1rem; }
.dom-tld-lbl { display: none; }
.dom-code { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); font-size: .82rem; line-height: 1.5; overflow-x: auto; white-space: pre; }

@media (max-width: 720px) {
  .dom-tabs { grid-template-columns: minmax(0, 1fr); }
  .dom-paygrid, .dom-buyform { grid-template-columns: minmax(0, 1fr); }
  .dom-offer { grid-template-columns: minmax(0, 1fr) auto; }
  .dom-offer-price { grid-column: 1; }
  .dom-offer .btn { grid-column: 2; grid-row: 1 / span 2; }
  .dom-dns-row { grid-template-columns: minmax(0, 1fr); }
  .dom-dns-type { grid-row: auto; justify-self: start; padding: 4px 12px; }
  .dom-dns-hint { grid-column: 1; }
  .dom-tld-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; border-radius: var(--radius-sm); background: var(--bg); }
  .dom-tld-row.head { display: none; }
  .dom-tld-lbl { display: inline; }
  .dom-tld-name { grid-column: 1 / -1; }
}