/**
 * Domain Management v5.0 — module-specific styles (admin + storefront + portal).
 * Uses the plugin's --hk-ui-* / --hk-primary / --hk-accent tokens. No hardcoded hex.
 */

/* ---- Toast (admin + portal feedback) ---- */
.hk-domain-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100000;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: var(--hk-ui-radius-md, 6px);
    background: var(--hk-ui-surface, #fff);
    color: var(--hk-ui-text, #0f1720);
    border: 1px solid var(--hk-ui-border, rgba(0,0,0,.08));
    border-left: 4px solid var(--hk-ui-accent, #0f62ff);
    box-shadow: var(--hk-shadow-card, 0 4px 12px rgba(15,23,36,.12));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}
.hk-domain-toast.is-visible { opacity: 1; transform: translateY(0); }
.hk-domain-toast.is-ok  { border-left-color: var(--hk-ui-success, #0f8a5f); }
.hk-domain-toast.is-err { border-left-color: var(--hk-ui-danger, #d32f2f); }

/* ---- Registrar logos / badges ---- */
.hk-registrar-logo {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: text-bottom;
    background: var(--hk-ui-subtle, #f1f6f9);
}
.hk-registrar-logo--namecheap { background: color-mix(in srgb, var(--hk-ui-accent) 30%, transparent); }
.hk-registrar-logo--godaddy   { background: color-mix(in srgb, var(--hk-ui-success) 30%, transparent); }
.hk-registrar-logo--cosmotown { background: color-mix(in srgb, var(--hk-ui-warning) 30%, transparent); }
.hk-registrar-logo--porkbun   { background: color-mix(in srgb, var(--hk-ui-primary) 30%, transparent); }
.hk-registrar-logo--manual    { background: var(--hk-ui-border, #ccc); }

.hk-registrar-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--hk-ui-subtle, #f1f6f9);
    color: var(--hk-ui-text, #0f1720);
}
.hk-registrar-badge--cheapest {
    background: color-mix(in srgb, var(--hk-ui-success) 16%, transparent);
    color: var(--hk-ui-success, #0f8a5f);
}

/* ---- TLD margin + mode pills ---- */
.hk-tld-margin-pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; background: color-mix(in srgb, var(--hk-ui-success) 16%, transparent); color: var(--hk-ui-success); }
.hk-tld-margin-pill--low { background: color-mix(in srgb, var(--hk-ui-warning) 18%, transparent); color: var(--hk-ui-warning); }
.hk-tld-margin-pill--bad { background: color-mix(in srgb, var(--hk-ui-danger) 16%, transparent); color: var(--hk-ui-danger); }

.hk-tld-mode-select { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; background: var(--hk-ui-subtle); color: var(--hk-ui-muted); }
.hk-tld-mode-select--auto    { background: color-mix(in srgb, var(--hk-ui-success) 16%, transparent); color: var(--hk-ui-success); }
.hk-tld-mode-select--approve { background: color-mix(in srgb, var(--hk-ui-warning) 18%, transparent); color: var(--hk-ui-warning); }
.hk-tld-mode-select--pinned  { background: color-mix(in srgb, var(--hk-ui-accent) 16%, transparent); color: var(--hk-ui-accent); }

/* ---- Status pills (domain-specific states) ---- */
.hk-status-pill--expiring,
.hk-status-pill--in-transfer-in,
.hk-status-pill--in-transfer-out { background: color-mix(in srgb, var(--hk-ui-warning) 18%, transparent); color: var(--hk-ui-warning); }
.hk-status-pill--expired,
.hk-status-pill--redemption,
.hk-status-pill--taken { background: color-mix(in srgb, var(--hk-ui-danger) 14%, transparent); color: var(--hk-ui-danger); }

/* ---- Page head ---- */
.hk-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.hk-page-head__actions { display:flex; gap:8px; }
.hk-muted { color: var(--hk-ui-muted, #6b7280); }

/* ---- Settings tabs / panels (legacy; scoped overrides in admin.css) ---- */

/* ---- Registrar compare (TLD editor) ---- */
.hk-registrar-compare { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:12px; margin:16px 0; }
.hk-registrar-compare__card { border:1px solid var(--hk-ui-border); border-radius: var(--hk-ui-radius-md,6px); padding:14px; text-align:center; background: var(--hk-ui-surface); }
.hk-registrar-compare__card--cheapest { border-color: var(--hk-ui-success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hk-ui-success) 25%, transparent); }
.hk-registrar-compare__price { font-size:20px; font-weight:700; margin:6px 0; }

/* ---- Arbitrage dashboard (legacy; scoped overrides live in admin.css) ---- */

/* ---- KV table (detail) ---- */
.hk-kv-table { width:100%; border-collapse:collapse; }
.hk-kv-table th { text-align:left; width:200px; padding:8px 12px; color: var(--hk-ui-muted); font-weight:600; vertical-align:top; }
.hk-kv-table td { padding:8px 12px; }

/* ================= Storefront ================= */
.hk-domain-shop { max-width: 760px; margin: 0 auto; }
.hk-search-hero { background: var(--hk-ui-subtle, #f1f6f9); border-radius: var(--hk-ui-radius-lg, 8px); padding: 24px; }
.hk-search-hero__mode-toggle { display:flex; gap:6px; margin-bottom:12px; }
.hk-search-hero__mode-toggle button { border:1px solid var(--hk-ui-border); background: var(--hk-ui-surface); border-radius:999px; padding:4px 14px; cursor:pointer; }
.hk-search-hero__mode-toggle button.is-active { background: var(--hk-ui-primary); color: var(--hk-ui-primary-contrast,#fff); border-color: transparent; }
.hk-search-hero__input { width:100%; height:48px; font-size:18px; padding:0 16px; border:1px solid var(--hk-ui-border); border-radius: var(--hk-ui-radius-md,6px); }
.hk-search-hero__cta { margin-top:10px; height:44px; padding:0 24px; border:none; border-radius: var(--hk-ui-radius-md,6px); background: var(--hk-ui-primary); color: var(--hk-ui-primary-contrast,#fff); font-weight:600; cursor:pointer; }
.hk-bulk-search { width:100%; }

.hk-avail-list { margin-top:16px; }
.hk-avail-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--hk-ui-border); border-radius: var(--hk-ui-radius-md,6px); margin-bottom:8px; background: var(--hk-ui-surface); }
.hk-avail-row--available { border-left:4px solid var(--hk-ui-success); }
.hk-avail-row--taken { border-left:4px solid var(--hk-ui-danger); opacity:.85; }
.hk-avail-row--checking { border-left:4px solid var(--hk-ui-border); color: var(--hk-ui-muted); }

/* Per-order fulfilment choice on the awaiting-payment queue (Domains → Tasks). */
.hk-fulfil-select { max-width:230px; margin-right:6px; vertical-align:middle; }
.hk-fulfil-static { margin-right:10px; white-space:nowrap; }

/* Registrar Settings: prepaid balance display. */
.hk-registrar-balance { margin:14px 0 4px; padding:10px 12px; background: var(--hk-ui-surface-2, #fafafa); border:1px solid var(--hk-ui-border); border-radius: var(--hk-ui-radius-md,6px); }

/* Portal: customer "don't renew" (cancel) controls. */
.hk-renew-banner--norenew { background: var(--hk-ui-surface); border:1px dashed var(--hk-ui-border); color: var(--hk-ui-muted); }
.hk-domain-cancel { margin-top:18px; padding-top:14px; border-top:1px solid var(--hk-ui-border); }
.hk-domain-cancel__btn { color: var(--hk-ui-danger); border-color: var(--hk-ui-danger); }
.hk-domain-cancel__btn:hover { background: var(--hk-ui-danger); color:#fff; }
.hk-domain-cancel p { margin:8px 0 0; max-width:560px; }
.hk-avail-row__name { font-weight:700; }
.hk-avail-row__meta { color: var(--hk-ui-muted); margin-left:auto; margin-right:12px; }

.hk-ai-strip-wrap { margin-top:20px; }
.hk-ai-strip { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
.hk-ai-strip-card { min-width:180px; border:1px solid var(--hk-ui-border); border-radius: var(--hk-ui-radius-md,6px); padding:14px; background: var(--hk-ui-surface); }
.hk-ai-strip-card__name { font-weight:700; }
.hk-ai-strip-card__price { color: var(--hk-ui-muted); margin:6px 0; }
.hk-check-chip { display:inline-block; padding:4px 12px; border-radius:999px; background: var(--hk-ui-primary); color: var(--hk-ui-primary-contrast,#fff); text-decoration:none; }

/* ================= Portal ================= */
.hk-portal-domains, .hk-portal-domain-detail { max-width: 860px; }
.hk-renew-banner { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius: var(--hk-ui-radius-md,6px); background: color-mix(in srgb, var(--hk-ui-warning) 14%, transparent); margin:14px 0; }
.hk-renew-banner--urgent { background: color-mix(in srgb, var(--hk-ui-danger) 12%, transparent); }
.hk-renew-banner .hk-btn { margin-left:auto; }
.hk-stat-strip { display:flex; gap:16px; margin:16px 0; }
.hk-domain-summary { margin: 12px 0; }
.hk-tabs { display:flex; gap:8px; border-bottom:1px solid var(--hk-ui-border); margin:16px 0; }
.hk-tab { background:none; border:none; padding:10px 14px; cursor:pointer; border-bottom:2px solid transparent; color: var(--hk-ui-muted); }
.hk-tab.is-active { color: var(--hk-ui-text); border-bottom-color: var(--hk-ui-primary); font-weight:600; }
.hk-auth-code code { display:inline-block; margin-left:10px; padding:4px 10px; background: var(--hk-ui-subtle); border-radius:4px; font-family: monospace; }
.hk-timeline { list-style:none; padding:0; margin:0; }
.hk-timeline li { display:flex; gap:14px; padding:8px 0; border-bottom:1px solid var(--hk-ui-border); }
.hk-timeline__when { color: var(--hk-ui-muted); min-width:160px; }
.hk-exp--urgent { color: var(--hk-ui-danger); font-weight:600; }
.hk-exp--soon { color: var(--hk-ui-warning); }

/* ---- Portal "add new" CTAs ---- */
.hk-portal-btn { display:inline-block; padding:8px 16px; border-radius: var(--hk-ui-radius-md,6px); background: var(--hk-primary, #1754d8); color: #fff !important; font-weight:600; font-size:14px; text-decoration:none; border:1px solid var(--hk-primary, #1754d8); cursor:pointer; }
.hk-portal-btn:hover { background: var(--hk-primary-dark, #1243b0); border-color: var(--hk-primary-dark, #1243b0); opacity: 1; }
.hk-portal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.hk-portal-actions-row { display:flex; justify-content:flex-end; margin:0 0 12px; }
.hk-portal-page-head .hk-portal-page-head__actions { margin: 0; }

.hk-get-more { margin:18px 0; }
.hk-get-more__title { margin:0 0 10px; font-size:15px; }
.hk-get-more__grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
.hk-get-more__card { display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--hk-ui-border, rgba(0,0,0,.1)); border-radius: var(--hk-ui-radius-md,6px); background: var(--hk-ui-surface,#fff); text-decoration:none; color: var(--hk-ui-text,#111); transition: box-shadow .15s ease, transform .15s ease; }
.hk-get-more__card:hover { box-shadow: var(--hk-shadow-card, 0 4px 12px rgba(0,0,0,.08)); transform: translateY(-1px); }
.hk-get-more__icon { font-size:22px; }
.hk-get-more__label { font-weight:700; }
.hk-get-more__desc { color: var(--hk-ui-muted,#6b7280); font-size:13px; }

/* ---- Frontend button base for domain-module surfaces (userend.css has no .hk-btn) ---- */
.hk-domain-shop .hk-btn,
.hk-portal-domains .hk-btn,
.hk-portal-domain-detail .hk-btn { display:inline-block; padding:8px 16px; border-radius: var(--hk-ui-radius-md,6px); font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent; line-height:1.4; }
.hk-domain-shop .hk-btn--primary,
.hk-portal-domains .hk-btn--primary,
.hk-portal-domain-detail .hk-btn--primary { background: var(--hk-primary, #1754d8); color: #fff; border-color: var(--hk-primary, #1754d8); }
.hk-domain-shop .hk-btn--ghost,
.hk-portal-domains .hk-btn--ghost,
.hk-portal-domain-detail .hk-btn--ghost { background: var(--hk-ui-surface,#fff); border-color: var(--hk-pd-border, #e8e8e8); color: var(--hk-ui-text,#111); }

/* Frontend stat cards (portal lists) */
.hk-userend .hk-stat-strip { display:flex; gap:16px; flex-wrap:wrap; }
.hk-userend .hk-stat-card { border:1px solid var(--hk-ui-border, rgba(0,0,0,.1)); border-radius: var(--hk-ui-radius-md,6px); padding:14px 18px; background: var(--hk-ui-surface,#fff); }
.hk-userend .hk-stat-card__value { font-size:22px; font-weight:700; }
.hk-userend .hk-stat-card__label { color: var(--hk-ui-muted,#6b7280); font-size:13px; }

/* ---- In-portal order forms (Order Hosting / Subscription / Domain) ---- */
.hk-portal-order { max-width: 660px; }
.hk-portal-order.hk-portal-order--domain { max-width: 820px; }
.hk-order-form { margin-top: 8px; }
.hk-radio-row { display:flex; flex-wrap:wrap; gap:14px; }
.hk-radio { display:inline-flex; align-items:center; gap:6px; }
.hk-domain-input-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.hk-domain-input-row .hk-input { flex:1 1 220px; }
.hk-order-avail { font-weight:600; }
.hk-order-avail.is-ok { color: var(--hk-ui-success,#0f8a5f); }
.hk-order-avail.is-err { color: var(--hk-ui-danger,#d32f2f); }
.hk-order-register-extras { display:flex; gap:18px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.hk-inline { display:inline-flex; align-items:center; gap:6px; }
.hk-order-hint { margin-top:8px; font-size:13px; }
.hk-userend .hk-input { width:100%; max-width:440px; height:40px; padding:0 12px; border:1px solid var(--hk-ui-border,#ddd); border-radius: var(--hk-ui-radius-md,6px); background: var(--hk-ui-surface,#fff); color: var(--hk-ui-text,#111); }
.hk-userend select.hk-input { height:42px; }

/* ===== Domain Tasks queue (admin) ===== */
.hk-list-page--domain-tasks .hk-page-shell__title .hk-status-pill { margin-left: 0; vertical-align: middle; }
.hk-status-pill--pending, .hk-status-pill--pending-registration { background: var(--hk-ui-warn-bg, #fff7e6); color: var(--hk-ui-warn-text, #8a6100); }
.hk-status-pill--failed { background: var(--hk-ui-danger-bg, #fdecec); color: var(--hk-ui-danger-text, #a3271f); }
.hk-status-pill--done { background: var(--hk-ui-ok-bg, #e9f7ef); color: var(--hk-ui-ok-text, #1e7c45); }

/* ===== Completion pass (v5.4): transfer-in card, renew term, admin actions ===== */
.hk-transfer-in-card { margin: 14px 0; }
.hk-transfer-in-card form { margin-top: 10px; padding: 14px; border: 1px solid var(--hk-ui-border, #ddd); border-radius: var(--hk-ui-radius-md, 6px); background: var(--hk-ui-surface, #fff); }
.hk-transfer-in-fields { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 1em; }
.hk-transfer-in-fields .hk-input { max-width: 260px; }
.hk-renew-years select { height: 36px; padding: 0 8px; border: 1px solid var(--hk-ui-border, #ddd); border-radius: var(--hk-ui-radius-md, 6px); background: var(--hk-ui-surface, #fff); color: var(--hk-ui-text, #111); margin: 0 6px; }
.hk-domain-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.hk-sync-card { margin-top: 18px; padding: 16px; }
.hk-sync-card label { display: inline-flex; align-items: center; gap: 8px; }

/* ===== Add-Domain availability indicator (admin) ===== */
.hk-da-avail { display: inline-block; margin-left: 10px; font-size: 12px; font-weight: 600; }
.hk-da-avail--checking { color: var(--hk-ui-text-soft, #666); }
.hk-da-avail--ok { color: var(--hk-ui-ok-text, #1e7c45); }
.hk-da-avail--taken { color: var(--hk-ui-danger-text, #a3271f); }
.hk-da-avail--warn { color: var(--hk-ui-warn-text, #8a6100); }

/* =========================================================================
 * v5.11+ portal modernization — domain detail + in-portal order forms.
 * Larger type + button/field polish to match the redesigned dashboard.
 * Loaded after userend.css, so these win on equal specificity.
 * ========================================================================= */
/* Status & auto-renew pills — base lives in admin.css; portal needs its own copy. */
.hk-portal .hk-status-pill,
.hk-userend .hk-status-pill,
.hk-portal .hk-auto-renew-pill,
.hk-userend .hk-auto-renew-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--hk-ui-radius-sm, 6px);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    border: 0;
}

.hk-portal .hk-status-pill--active,
.hk-userend .hk-status-pill--active {
    background: var(--hk-ui-success-bg, rgba(0, 164, 51, 0.098));
    color: rgba(0, 113, 63, 0.87);
}

.hk-portal .hk-status-pill--pending-registration,
.hk-userend .hk-status-pill--pending-registration,
.hk-portal .hk-status-pill--pending,
.hk-userend .hk-status-pill--pending {
    background: var(--hk-ui-warning-bg, rgba(245, 158, 11, 0.12));
    color: var(--hk-ui-warning, #b45309);
}

.hk-portal .hk-auto-renew-pill--on,
.hk-userend .hk-auto-renew-pill--on {
    background: var(--hk-ui-success-bg, rgba(0, 164, 51, 0.098));
    color: rgba(0, 113, 63, 0.87);
}

.hk-portal .hk-auto-renew-pill--off,
.hk-userend .hk-auto-renew-pill--off {
    background: var(--hk-ui-danger-bg, rgba(255, 41, 0, 0.098));
    color: var(--hk-ui-danger, #e30000);
}

.hk-portal .hk-kv-table,
.hk-userend .hk-kv-table { font-size: 14px; }
.hk-portal .hk-kv-table th { width: 220px; color: var(--hk-pd-muted, #6b7280); }

.hk-portal .hk-tab { font-size: 14px; padding: 10px 16px; }
.hk-portal .hk-timeline li { font-size: 14px; padding: 12px 0; }

.hk-portal .hk-renew-banner {
    font-size: 14px;
    border-radius: 8px;
    padding: 14px 18px;
}

/* Buttons — match the .hk-pd-btn feel (size, radius, hover). */
.hk-portal .hk-btn,
.hk-userend .hk-btn,
.hk-userend .hk-portal-btn,
.hk-portal .hk-portal-btn {
    font-size: 14px;
    padding: 9px 14px;
    line-height: 1.5;
    border-radius: 8px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hk-portal .hk-btn--primary:hover,
.hk-userend .hk-btn--primary:hover,
.hk-portal .hk-portal-btn:hover,
.hk-userend .hk-portal-btn:hover {
    background: var(--hk-primary-dark, #1243b0);
    border-color: var(--hk-primary-dark, #1243b0);
    opacity: 1;
}
.hk-portal .hk-btn--ghost:hover,
.hk-userend .hk-btn--ghost:hover {
    background: color-mix(in srgb, var(--hk-pd-text, #202020) 4%, var(--hk-pd-surface, #fff));
    opacity: 1;
}

/* In-portal order forms — bigger labels, fields, radios. */
.hk-userend .hk-form-label,
.hk-portal .hk-form-label { font-size: 1rem; margin-bottom: 8px; }
.hk-userend .hk-input,
.hk-portal .hk-input {
    height: auto;
    padding: .6rem .8rem;
    font-size: 1rem;
    border-radius: 8px;
}
.hk-userend .hk-input:focus,
.hk-portal .hk-input:focus {
    border-color: var(--hk-pd-accent, var(--hk-accent));
    box-shadow: 0 0 0 2px var(--hk-pd-accent, var(--hk-accent));
    outline: none;
}
.hk-userend .hk-radio,
.hk-portal .hk-radio { font-size: 1rem; }

/* In-portal order forms (hosting / subscription) — 14px portal typography */
.hk-portal.hk-portal-order {
    font-size: 14px;
    line-height: 1.5;
    color: var(--hk-pd-text, #202020);
}

.hk-portal.hk-portal-order > p {
    margin: 0 0 0.65rem;
}

.hk-portal.hk-portal-order > p a {
    font-size: 14px;
}

.hk-portal.hk-portal-order p,
.hk-portal.hk-portal-order a,
.hk-portal.hk-portal-order .hk-form-label,
.hk-portal.hk-portal-order .hk-radio,
.hk-portal.hk-portal-order .hk-inline,
.hk-portal.hk-portal-order .hk-muted,
.hk-portal.hk-portal-order .hk-order-hint,
.hk-portal.hk-portal-order .hk-order-avail,
.hk-portal.hk-portal-order label {
    font-size: 14px;
}

.hk-portal.hk-portal-order h2 {
    font-size: 2em;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.2;
    margin: 0 0 1rem !important;
    padding: 0;
    color: var(--hk-pd-text, #202020);
}

.woocommerce-account .woocommerce-MyAccount-content .hk-portal.hk-portal-order h2 {
    margin-top: 0 !important;
}

.hk-portal.hk-portal-order .hk-form-label {
    font-weight: 600;
    margin-bottom: 8px;
}

.hk-portal.hk-portal-order .hk-input,
.hk-portal.hk-portal-order select.hk-input,
.hk-portal.hk-portal-order input.hk-input {
    font-size: 14px !important;
    line-height: 1.4;
}

.hk-portal.hk-portal-order .hk-order-hint {
    margin-top: 8px;
}

/* =========================================================================
 * Domain search -> register (v5.12.0) — guided Search / Choose / Configure
 * flow (.hk-ds-*). Tokens come from the portal scope (.hk-userend, defined in
 * userend.css); hex fallbacks keep it rendering on a bare storefront page too.
 *
 * Typography uses px (not rem): many themes set html { font-size: 62.5% } (10px),
 * which makes rem-based sizes far too small inside My Account.
 * ========================================================================= */
.hk-domain-shop.hk-ds {
    max-width: 820px;
    margin: 0 auto;
    color: var(--hk-pd-text, #202020);
    font-size: 16px;
}

/* Stepper */
.hk-ds-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.hk-ds-step {
    flex: 1; display: flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: 14px; color: var(--hk-pd-muted, rgba(0,0,0,.486));
    border-top: 3px solid var(--hk-pd-border, #e8e8e8); padding-top: 10px;
}
.hk-ds-step__num {
    width: 26px; height: 26px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--hk-pd-bg, #f6f7f9);
    color: var(--hk-pd-muted, rgba(0,0,0,.486)); font-size: 13px;
}
.hk-ds-step.is-active { color: var(--hk-pd-text, #202020); border-top-color: var(--hk-pd-accent, #1754d8); }
.hk-ds-step.is-active .hk-ds-step__num { background: var(--hk-pd-accent, #1754d8); color: #fff; }
.hk-ds-step.is-done { border-top-color: var(--hk-pd-accent, #1754d8); }
.hk-ds-step.is-done .hk-ds-step__num { background: var(--hk-pd-primary, #1243b0); color: #fff; }

/* Hero search */
.hk-ds-hero {
    background: var(--hk-pd-bg, #f6f7f9); border: 1px solid var(--hk-pd-border, #e8e8e8);
    border-radius: var(--hk-ui-radius-md, 8px); padding: 1.5rem 1.35rem; text-align: center;
}
.hk-ds-hero__title { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--hk-pd-text, #202020); }
.hk-ds-hero__lead { margin: 0 0 1.15rem; color: var(--hk-pd-muted, rgba(0,0,0,.486)); font-size: 15px; line-height: 1.45; }
.hk-ds-modes { display: inline-flex; gap: 6px; margin-bottom: 1rem; }
.hk-ds-mode {
    border: 1px solid var(--hk-pd-border, #e8e8e8); background: var(--hk-pd-surface, #fff);
    color: var(--hk-pd-text, #202020); border-radius: 999px; padding: 6px 16px;
    font-weight: 600; cursor: pointer; font-size: 14px; line-height: 1.35;
}
.hk-ds-mode.is-active { background: var(--hk-pd-accent, #1754d8); color: #fff; border-color: transparent; }

/* WHOP-style unified search bar (single domain) */
.hk-ds-searchbar { display: flex; gap: 10px; align-items: stretch; }

/* .hk-ds-searchbar sets display:flex and overrides the native [hidden] rule — keep inactive panes hidden. */
.hk-domain-shop.hk-ds [hidden] {
    display: none !important;
}
.hk-ds-searchbar[data-hk-search-pane="single"] {
    gap: 0;
    max-width: 560px;
    margin: 0 auto;
    border: 1px solid var(--hk-pd-border, #e8e8e8);
    border-radius: var(--hk-ui-radius-md, 8px);
    overflow: hidden;
    background: var(--hk-pd-surface, #fff);
}
.hk-ds-searchbar[data-hk-search-pane="single"]:focus-within {
    border-color: var(--hk-pd-accent, #1754d8);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--hk-pd-accent, #1754d8) 14%, transparent);
}
.hk-ds-searchbar--bulk { flex-direction: column; max-width: none; margin: 0; border: none; overflow: visible; background: transparent; }
.hk-ds-input {
    flex: 1; width: 100%; min-height: 44px; height: auto; font-size: 15px; padding: 10px 14px;
    border: 1px solid var(--hk-pd-border, #e8e8e8); border-radius: var(--hk-ui-radius-md, 8px);
    background: var(--hk-pd-surface, #fff); color: var(--hk-pd-text, #202020); box-sizing: border-box;
    line-height: 1.4 !important;
}
.hk-ds-searchbar[data-hk-search-pane="single"] .hk-ds-input {
    border: none; border-radius: 0; box-shadow: none;
}
.hk-ds-input:focus { border-color: var(--hk-pd-accent, #1754d8); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--hk-pd-accent, #1754d8) 14%, transparent); }
.hk-ds-searchbar[data-hk-search-pane="single"] .hk-ds-input:focus { box-shadow: none; }
.hk-ds-textarea {
    width: 100%; padding: 12px 14px; font-size: 15px; line-height: 1.45; resize: vertical; box-sizing: border-box;
    border: 1px solid var(--hk-pd-border, #e8e8e8); border-radius: var(--hk-ui-radius-md, 8px); background: var(--hk-pd-surface, #fff);
}
.hk-ds-textarea:focus { border-color: var(--hk-pd-accent, #1754d8); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--hk-pd-accent, #1754d8) 14%, transparent); }

/* Buttons */
.hk-ds-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 18px; border-radius: var(--hk-ui-radius-md, 8px); border: 1px solid transparent;
    font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; line-height: 1.35 !important;
    white-space: nowrap; transition: background .15s ease, border-color .15s ease, opacity .15s ease;
    box-sizing: border-box;
}
.hk-ds-btn:hover { opacity: .92; }
.hk-ds-btn:focus-visible { outline: 2px solid var(--hk-pd-accent, #1754d8); outline-offset: 2px; }
.hk-ds-btn--primary {
    background: var(--hk-pd-accent, #1754d8) !important;
    color: #fff !important;
    border-color: var(--hk-pd-accent, #1754d8) !important;
}
.hk-ds-btn--ghost { background: var(--hk-pd-surface, #fff); color: var(--hk-pd-text, #202020); border-color: var(--hk-pd-border, #e8e8e8); }
.hk-ds-btn--taken { background: var(--hk-pd-bg, #f6f7f9); color: var(--hk-pd-muted, rgba(0,0,0,.486)); cursor: default; }
.hk-ds-btn--lg { padding: 0 22px; min-height: 48px; font-size: 16px; }
.hk-ds-searchbar > .hk-ds-btn { align-self: stretch; flex-shrink: 0; }
.hk-ds-searchbar[data-hk-search-pane="single"] > .hk-ds-btn {
    border-radius: 0; border: none; border-left: 1px solid var(--hk-pd-border, #e8e8e8);
    min-height: 44px; padding: 0 20px;
}
.hk-ds-searchbar--bulk > .hk-ds-btn { align-self: flex-end; min-height: 44px; height: auto; }

/* Theme / WooCommerce button resets on domain search surfaces */
.woocommerce .hk-domain-shop button.hk-ds-btn,
.hk-portal-order--domain button.hk-ds-btn,
.hk-domain-shop.hk-ds .hk-ds-btn {
    height: auto !important;
    min-height: 44px !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Results */
.hk-ds-results { margin-top: 1.5rem; }
.hk-ds-row {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; margin-bottom: 10px;
    border: 1px solid var(--hk-pd-border, #e8e8e8); border-radius: var(--hk-ui-radius-md, 8px); background: var(--hk-pd-surface, #fff);
}
.hk-ds-row.is-available { border-left: 4px solid var(--hk-pd-success, #00713f); }
.hk-ds-row.is-taken { border-left: 4px solid var(--hk-pd-danger, #e30000); }
.hk-ds-row.is-checking { border-left: 4px solid var(--hk-pd-border, #e8e8e8); color: var(--hk-pd-muted, rgba(0,0,0,.486)); }
.hk-ds-row__name { font-weight: 700; font-size: 18px; word-break: break-all; }
.hk-ds-badge { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; background: #fef3c7; color: #92400e; vertical-align: middle; margin-left: 6px; }
.hk-ds-row__meta { margin-left: auto; text-align: right; white-space: nowrap; font-size: 14px; }
.hk-ds-row__avail { color: var(--hk-pd-success, #00713f); font-weight: 600; }
.hk-ds-row__price { color: var(--hk-pd-muted, rgba(0,0,0,.486)); }
.hk-ds-row__taken { color: var(--hk-pd-danger, #e30000); font-weight: 600; }
.hk-ds-row__action { flex-shrink: 0; }
.hk-ds-hint { color: var(--hk-pd-muted, rgba(0,0,0,.486)); margin: 4px 0 0 4px; font-size: 14px; }
.hk-ds-muted { color: var(--hk-pd-muted, rgba(0,0,0,.486)); font-size: 14px; }

/* Alternatives */
.hk-ds-alts { margin-top: 1.5rem; }
.hk-ds-alts__title { font-size: 18px; font-weight: 700; margin: 0 0 12px; color: var(--hk-pd-text, #202020); }
.hk-ds-alts__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.hk-ds-alt {
    display: flex; flex-direction: column; gap: 6px; padding: 1rem;
    border: 1px solid var(--hk-pd-border, #e8e8e8); border-radius: var(--hk-ui-radius-md, 8px); background: var(--hk-pd-surface, #fff);
}
.hk-ds-alt__name { font-weight: 700; font-size: 15px; word-break: break-all; }
.hk-ds-alt__price { color: var(--hk-pd-muted, rgba(0,0,0,.486)); font-size: 14px; }
.hk-ds-alt__btn { margin-top: 6px; align-self: flex-start; padding: 6px 16px; font-size: 14px; }

/* Configure */
.hk-ds-configure { margin-top: 1.25rem; outline: none; }
.hk-ds-link { background: none; border: none; color: var(--hk-pd-accent, #1754d8); font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 1rem; font-size: 14px; }
.hk-ds-link:hover { text-decoration: underline; }
.hk-ds-cfg-head {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 1.1rem 1.25rem;
    border: 1px solid var(--hk-pd-border, #e8e8e8); border-bottom: none; border-radius: var(--hk-ui-radius-md, 8px) var(--hk-ui-radius-md, 8px) 0 0;
    background: var(--hk-pd-bg, #f6f7f9);
}
.hk-ds-cfg-chosen { color: var(--hk-pd-muted, rgba(0,0,0,.486)); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; width: 100%; }
.hk-ds-cfg-domain { font-size: 22px; font-weight: 700; color: var(--hk-pd-text, #202020); word-break: break-all; }
.hk-ds-cfg-unit { color: var(--hk-pd-muted, rgba(0,0,0,.486)); font-size: 14px; margin-left: auto; }
.hk-ds-cfg-grid {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.25rem; padding: 1.25rem;
    border: 1px solid var(--hk-pd-border, #e8e8e8); border-top: none; background: var(--hk-pd-surface, #fff);
}
.hk-ds-cfg-field { display: flex; flex-direction: column; gap: 6px; }
.hk-ds-cfg-field__label { font-weight: 600; font-size: 15px; color: var(--hk-pd-text, #202020); }
.hk-ds-cfg-priv { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 15px; }
.hk-ds-cfg-priv input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }
.hk-ds-cfg-priv__text { display: flex; flex-direction: column; gap: 2px; }
.hk-ds-cfg-priv__hint { color: var(--hk-pd-muted, rgba(0,0,0,.486)); font-size: 14px; }
.hk-ds-cfg-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1.1rem 1.25rem; border: 1px solid var(--hk-pd-border, #e8e8e8); border-top: none;
    border-radius: 0 0 var(--hk-ui-radius-md, 8px) var(--hk-ui-radius-md, 8px); background: var(--hk-pd-surface, #fff);
}
.hk-ds-cfg-total { font-size: 15px; color: var(--hk-pd-muted, rgba(0,0,0,.486)); }
.hk-ds-cfg-total strong { display: block; font-size: 26px; color: var(--hk-pd-text, #202020); }

@media (max-width: 600px) {
    .hk-ds-step__label { display: none; }
    .hk-ds-searchbar[data-hk-search-pane="single"] { flex-direction: column; max-width: none; overflow: visible; border: none; background: transparent; }
    .hk-ds-searchbar[data-hk-search-pane="single"] .hk-ds-input {
        border: 1px solid var(--hk-pd-border, #e8e8e8); border-radius: var(--hk-ui-radius-md, 8px);
    }
    .hk-ds-searchbar[data-hk-search-pane="single"] > .hk-ds-btn {
        width: 100%; border-left: none; border-radius: var(--hk-ui-radius-md, 8px);
    }
    .hk-ds-searchbar--bulk { flex-direction: column; }
    .hk-ds-searchbar--bulk > .hk-ds-btn { width: 100%; min-height: 44px; }
    .hk-ds-cfg-grid { grid-template-columns: 1fr; }
    .hk-ds-cfg-foot { flex-direction: column; align-items: stretch; }
    .hk-ds-cfg-foot .hk-ds-btn { width: 100%; }
}

/* Prevent legacy whm-user-dashboard input caps from breaking domain search. */
.whm-user-dashboard .hk-domain-shop .hk-ds-input,
.hk-userend .hk-domain-shop .hk-ds-input,
.hk-userend .hk-domain-shop .hk-ds-textarea {
    max-width: none !important;
    width: 100% !important;
}

/* ── Domain detail (/my-account/hk-view-domain/) ─────────────────────────── */

#whm-user-domain-detail.hk-portal-domain-detail {
    font-size: 14px;
    line-height: 1.5;
    color: var(--hk-pd-text, #202020);
}

#whm-user-domain-detail .hk-domain-summary {
    margin: 12px 0 16px;
}

#whm-user-domain-detail .hk-domain-summary .hk-pd-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--hk-pd-text, #202020);
}

#whm-user-domain-detail .hk-domain-summary .hk-status-pill {
    margin-bottom: 6px;
}

#whm-user-domain-detail .hk-muted,
#whm-user-domain-detail .hk-domain-cancel p,
#whm-user-domain-detail .hk-tab-panel p {
    font-size: 14px;
    color: var(--hk-pd-muted, #6b7280);
    line-height: 1.5;
}

#whm-user-domain-detail .hk-kv-table th,
#whm-user-domain-detail .hk-kv-table td {
    font-size: 14px;
    padding: 12px 0;
    vertical-align: middle;
}

#whm-user-domain-detail .hk-kv-table th {
    width: 200px;
    padding-right: 16px;
    font-weight: 600;
    color: var(--hk-pd-muted, #6b7280);
}

#whm-user-domain-detail .hk-kv-table td {
    color: var(--hk-pd-text, #202020);
}

#whm-user-domain-detail .hk-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

#whm-user-domain-detail .hk-toggle span {
    font-size: 14px;
    color: var(--hk-pd-text, #202020);
}

/* WHOP-style tabs — accent underline, no boxed borders */
#whm-user-domain-detail .hk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 20px 0 0;
    padding: 0;
    border-bottom: 1px solid var(--hk-pd-border, #e8e8e8);
}

#whm-user-domain-detail .hk-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--hk-pd-muted, #6b7280);
    cursor: pointer;
    border-radius: 0;
    transition: color .15s ease, border-color .15s ease;
}

#whm-user-domain-detail .hk-tab:hover {
    color: var(--hk-pd-text, #202020);
}

#whm-user-domain-detail .hk-tab.is-active {
    color: var(--hk-primary, #1754d8);
    border-bottom-color: var(--hk-primary, #1754d8);
    font-weight: 600;
}

#whm-user-domain-detail .hk-tab-panel {
    padding-top: 20px;
    font-size: 14px;
}

#whm-user-domain-detail .hk-timeline li,
#whm-user-domain-detail .hk-timeline__when,
#whm-user-domain-detail .hk-timeline__what {
    font-size: 14px;
}

#whm-user-domain-detail .hk-renew-banner {
    font-size: 14px;
}

#whm-user-domain-detail .hk-btn--primary {
    background: var(--hk-primary, #1754d8) !important;
    border-color: var(--hk-primary, #1754d8) !important;
    color: #fff !important;
}

#whm-user-domain-detail .hk-btn--primary:hover {
    background: var(--hk-primary-dark, #1243b0) !important;
    border-color: var(--hk-primary-dark, #1243b0) !important;
    opacity: 1 !important;
}

#whm-user-domain-detail .hk-btn--ghost:hover {
    background: color-mix(in srgb, var(--hk-pd-text, #202020) 4%, var(--hk-pd-surface, #fff)) !important;
    border-color: var(--hk-pd-border, #e8e8e8) !important;
    opacity: 1 !important;
}

#whm-user-domain-detail .hk-ns-list {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 8px 0 12px;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100px;
    padding: 10px 12px;
    border: 1px solid var(--hk-pd-border, #e8e8e8);
    border-radius: 8px;
    resize: vertical;
}

#whm-user-domain-detail .hk-field span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}