/* Domains Reseller client portal. TailAdmin look: soft surfaces, no borders, brand purple. */

@font-face {
    font-family: Outfit;
    src: url("../fonts/outfit.woff2") format("woff2");
    font-weight: 300 700;
    font-display: swap;
}

:root {
    --brand-25:  hsl(285 70% 98%);
    --brand-50:  hsl(285 66% 96%);
    --brand-100: hsl(285 62% 92%);
    --brand-300: hsl(285 58% 74%);
    --brand-500: hsl(285 58% 46%);
    --brand-600: hsl(285 58% 40%);
    --brand-700: hsl(285 58% 33%);
    --gray-25:  #fcfcfd;
    --gray-50:  #f9fafb;
    --gray-100: #f2f4f7;
    --gray-200: #e4e7ec;
    --gray-300: #d0d5dd;
    --gray-400: #98a2b3;
    --gray-500: #667085;
    --gray-600: #475467;
    --gray-700: #344054;
    --gray-800: #1d2939;
    --gray-900: #101828;
    --ok-50:  #ecfdf3;
    --ok-100: #d1fadf;
    --ok-500: #12b76a;
    --ok-600: #039855;
    --ok-700: #027a48;
    --bad-50:  #fef3f2;
    --bad-100: #fee4e2;
    --bad-500: #f04438;
    --bad-600: #d92d20;
    --bad-700: #b42318;
    --warn-50:  #fffaeb;
    --warn-100: #fef0c7;
    --warn-500: #f79009;
    --warn-600: #dc6803;
    --warn-700: #b54708;
    --info-50:  #f0f9ff;
    --info-700: #026aa2;
    --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, .1), 0 1px 2px 0 rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);
    --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
    --ring: 0 0 0 4px hsl(285 58% 46% / .15);
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --font: Outfit, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Names the older templates and portal.js still read. */
    --color-bg: var(--gray-50);
    --color-text: var(--gray-700);
    --color-text-muted: var(--gray-500);
    --color-primary: var(--brand-500);
    --color-primary-subtle: var(--brand-50);
    --radius-full: 9999px;
    --font-sans: var(--font);
}

@media (prefers-reduced-motion: reduce) {
    .dr-app *, .dr-wrap * { transition: none !important; animation: none !important; }
}

/* ---------- shell (portal.php) ---------- */

.dr-app { min-height: 100vh; margin: 0; background: var(--gray-50); color: var(--gray-700); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
.dr-app *, .dr-app *::before, .dr-app *::after { box-sizing: border-box; }

.dr-side { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; flex-direction: column; width: 272px; padding: 24px 16px 16px; background: #fff; box-shadow: var(--shadow-xs); transition: transform .25s var(--ease); }
.dr-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; color: var(--gray-800); text-decoration: none; }
.dr-brand:hover { text-decoration: none; }
.dr-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--brand-500); color: #fff; font-size: 17px; flex: none; }
.dr-brand b { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
.dr-brand small { display: block; font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.dr-menu { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.dr-menu-label { padding: 8px 12px 6px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-400); }
.dr-menu-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; color: var(--gray-700); text-decoration: none; transition: background-color .15s var(--ease), color .15s var(--ease); }
.dr-menu-item i { width: 20px; text-align: center; font-size: 15px; color: var(--gray-500); }
.dr-menu-item:hover { background: var(--gray-100); color: var(--gray-800); text-decoration: none; }
.dr-menu-item.is-active { background: var(--brand-50); color: var(--brand-600); }
.dr-menu-item.is-active i { color: var(--brand-500); }
.dr-side-foot { margin-top: auto; padding-top: 16px; }

.dr-main { margin-left: 272px; min-width: 0; }
.dr-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 24px; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(8px); box-shadow: var(--shadow-xs); }
.dr-head-title { font-size: 15px; font-weight: 600; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-head-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.dr-burger { display: none; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-md); background: var(--gray-100); color: var(--gray-700); font-size: 16px; cursor: pointer; }
.dr-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-md); background: var(--gray-100); color: var(--gray-700); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .15s var(--ease); }
.dr-chip:hover { background: var(--gray-200); color: var(--gray-800); text-decoration: none; }
.dr-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-size: 14px; font-weight: 600; flex: none; }
.dr-user { display: flex; align-items: center; gap: 10px; }
.dr-user b { display: block; font-size: 14px; font-weight: 500; color: var(--gray-800); line-height: 1.2; }
.dr-user small { display: block; font-size: 12px; color: var(--gray-500); }
.dr-content { max-width: 1320px; padding: 24px; }
.dr-scrim { display: none; }

@media (max-width: 1023px) {
    .dr-side { transform: translateX(-100%); }
    .dr-side-open .dr-side { transform: none; box-shadow: var(--shadow-lg); }
    .dr-side-open .dr-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(16, 24, 40, .45); }
    .dr-main { margin-left: 0; }
    .dr-burger { display: grid; }
    .dr-user span { display: none; }
}
@media (max-width: 640px) {
    .dr-head { padding: 0 16px; }
    .dr-content { padding: 16px; }
    .dr-chip .dr-chip-text { display: none; }
}

/* ---------- base ---------- */

.dr-wrap { color: var(--gray-700); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.dr-wrap *, .dr-wrap *::before, .dr-wrap *::after { box-sizing: border-box; }
.dr-wrap a { color: var(--brand-500); text-decoration: none; transition: color .15s var(--ease); }
.dr-wrap a:hover { color: var(--brand-600); }
.dr-wrap h1, .dr-wrap h2, .dr-wrap h3, .dr-wrap h4, .dr-wrap h5, .dr-wrap h6 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.3; color: var(--gray-800); }
.dr-wrap p { margin: 0 0 1rem; }
.dr-wrap hr { height: 0; margin: 1.25rem 0; border: 0; }
.dr-wrap code { padding: .15em .45em; border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-600); font-family: var(--mono); font-size: .85em; }
.dr-wrap dl { margin: 0 0 1rem; }
.dr-wrap dt { font-weight: 500; color: var(--gray-500); }
.dr-wrap dd { margin: 0 0 .5rem; color: var(--gray-800); }
.dr-wrap dl.row > dt, .dr-wrap dl.row > dd { margin-bottom: .4rem; }
.dr-wrap dd code, .dr-wrap dd a { overflow-wrap: anywhere; }
.dr-wrap pre { padding: 14px 16px; overflow: auto; border-radius: var(--r-lg); background: var(--gray-50); font-family: var(--mono); font-size: 12.5px; }
.dr-wrap input[type="checkbox"], .dr-wrap input[type="radio"] { width: 16px; height: 16px; vertical-align: middle; accent-color: var(--brand-500); }
.dr-wrap [hidden] { display: none !important; }

/* Bootstrap 3 clearfix pseudo-elements break flex rows on WHMCS 8 themes. */
.dr-wrap .row::before, .dr-wrap .row::after, .dr-wrap .nav::before, .dr-wrap .nav::after,
.dr-wrap .card-header::before, .dr-wrap .card-header::after,
.dr-wrap .dr-toolbar::before, .dr-wrap .dr-toolbar::after { content: none; display: none; }

/* ---------- page head ---------- */

.dr-wrap .dr-pagehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.dr-wrap .dr-pagehead h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 600; line-height: 32px; color: var(--gray-800); overflow-wrap: anywhere; }
.dr-wrap .dr-pagehead .dr-sub { margin-top: 4px; font-size: 14px; color: var(--gray-500); }
.dr-wrap .dr-pagehead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dr-wrap .dr-balance { padding: 10px 16px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-xs); text-align: right; line-height: 1.3; }
.dr-wrap .dr-balance span { display: block; font-size: 12px; color: var(--gray-500); }
.dr-wrap .dr-balance strong { font-size: 18px; font-weight: 600; color: var(--gray-800); font-variant-numeric: tabular-nums; }

/* ---------- grid and utilities ---------- */

.dr-wrap .row { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; }
.dr-wrap .row > * { width: 100%; max-width: 100%; padding-right: 12px; padding-left: 12px; }
.dr-wrap .g-2 { margin-top: -8px; }
.dr-wrap .g-2 > * { margin-top: 8px; }
.dr-wrap .g-3 { margin-top: -16px; }
.dr-wrap .g-3 > * { margin-top: 16px; }
.dr-wrap .col-5 { flex: 0 0 auto; width: 41.6667%; }
.dr-wrap .col-7 { flex: 0 0 auto; width: 58.3333%; }
.dr-wrap .col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 768px) {
    .dr-wrap .col-md-2 { flex: 0 0 auto; width: 16.6667%; }
    .dr-wrap .col-md-4 { flex: 0 0 auto; width: 33.3333%; }
    .dr-wrap .col-md-5 { flex: 0 0 auto; width: 41.6667%; }
    .dr-wrap .col-md-6 { flex: 0 0 auto; width: 50%; }
    .dr-wrap .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
}
@media (min-width: 992px) {
    .dr-wrap .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
    .dr-wrap .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .dr-wrap .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
}
.dr-wrap .d-flex { display: flex !important; }
.dr-wrap .d-inline { display: inline !important; }
.dr-wrap .flex-wrap { flex-wrap: wrap !important; }
.dr-wrap .flex-grow-1 { flex-grow: 1 !important; }
.dr-wrap .align-items-center { align-items: center !important; }
.dr-wrap .align-items-end { align-items: flex-end !important; }
.dr-wrap .gap-2 { gap: 8px !important; }
.dr-wrap .gap-3 { gap: 16px !important; }
.dr-wrap .w-100 { width: 100% !important; }
.dr-wrap .h-100 { height: 100% !important; }
.dr-wrap .p-0 { padding: 0 !important; }
.dr-wrap .py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
.dr-wrap .pb-2 { padding-bottom: 8px !important; }
.dr-wrap .mb-0 { margin-bottom: 0 !important; }
.dr-wrap .mb-1 { margin-bottom: 4px !important; }
.dr-wrap .mb-2 { margin-bottom: 8px !important; }
.dr-wrap .mb-3 { margin-bottom: 16px !important; }
.dr-wrap .mb-4 { margin-bottom: 24px !important; }
.dr-wrap .mt-2 { margin-top: 8px !important; }
.dr-wrap .me-1 { margin-right: 4px !important; }
.dr-wrap .me-2 { margin-right: 8px !important; }
.dr-wrap .ms-1 { margin-left: 4px !important; }
.dr-wrap .small { font-size: 13px; }
.dr-wrap .fs-5 { font-size: 18px !important; }
.dr-wrap .fw-normal { font-weight: 400 !important; }
.dr-wrap .fw-semibold { font-weight: 600 !important; color: var(--gray-800); }
.dr-wrap .text-start { text-align: left !important; }
.dr-wrap .text-center { text-align: center !important; }
.dr-wrap .text-end { text-align: right !important; }
.dr-wrap .text-nowrap { white-space: nowrap !important; }
.dr-wrap .text-muted { color: var(--gray-500) !important; }
.dr-wrap .font-monospace { font-family: var(--mono) !important; }
.dr-wrap .list-unstyled { padding-left: 0; list-style: none; }
.dr-wrap .dr-num { font-variant-numeric: tabular-nums; }

/* ---------- in-page nav (only off the portal shell) ---------- */

.dr-wrap .nav { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.dr-wrap .nav-link { display: block; padding: 8px 14px; background: none; border: 0; text-decoration: none; }
.dr-wrap .dr-nav { flex-wrap: nowrap !important; padding: 6px; margin-bottom: 24px !important; overflow-x: auto; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-xs); scrollbar-width: none; }
.dr-wrap .dr-nav::-webkit-scrollbar { display: none; }
.dr-wrap .dr-nav .nav-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-md); color: var(--gray-600); font-size: 14px; font-weight: 500; white-space: nowrap; }
.dr-wrap .dr-nav .nav-link:hover { background: var(--gray-100); color: var(--gray-800); }
.dr-wrap .dr-nav .nav-link.active { background: var(--brand-50); color: var(--brand-600); }

/* ---------- cards ---------- */

.dr-wrap .card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 0; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-xs); }
.dr-wrap .card-header { display: flex; align-items: center; gap: 10px; margin: 0; padding: 20px 24px 0; border: 0; background: transparent; font-size: 16px; font-weight: 600; color: var(--gray-800); }
.dr-wrap .card-header > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-500); font-size: 14px; flex: none; }
.dr-wrap .card-header > span > i:first-child { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 6px; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-500); font-size: 14px; vertical-align: middle; }
.dr-wrap .card-header.dr-toolbar { padding-bottom: 4px; }
.dr-wrap .card > form > .dr-picklist, .dr-wrap .card > .dr-picklist { margin: 16px 24px; }
.dr-wrap .card-body { flex: 1 1 auto; padding: 20px 24px 24px; color: var(--gray-700); }
.dr-wrap .card-body.p-0 { padding: 16px 12px 12px !important; }
.dr-wrap .card-footer { padding: 16px 24px; border: 0; border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--gray-50); }
.dr-wrap .dr-panels { display: grid; grid-template-columns: 1fr; align-items: start; gap: 24px; }
.dr-wrap .dr-panels > .card { margin-bottom: 0 !important; }
@media (min-width: 992px) { .dr-wrap .dr-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dr-wrap .dr-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-lg); font-size: 18px; flex-shrink: 0; }
.dr-wrap .dr-icon-badge--primary, .dr-wrap .dr-icon-badge--info { background: var(--brand-50); color: var(--brand-500); }
.dr-wrap .dr-icon-badge--success { background: var(--ok-50); color: var(--ok-600); }
.dr-wrap .dr-icon-badge--warning { background: var(--warn-50); color: var(--warn-600); }
.dr-wrap .dr-icon-badge--danger { background: var(--bad-50); color: var(--bad-600); }

/* ---------- stats ---------- */

.dr-wrap .dr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.dr-wrap .dr-stat, .dr-wrap .dr-stat-card { padding: 20px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-xs); }
.dr-wrap .dr-stat-card { display: flex; align-items: center; gap: 16px; height: 100%; }
.dr-wrap .dr-stat-label { font-size: 14px; color: var(--gray-500); }
.dr-wrap .dr-stat-value { margin-top: 6px; font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--gray-800); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dr-wrap .dr-stat-note { margin-top: 6px; display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--warn-50); color: var(--warn-700); font-size: 12px; font-weight: 500; }
.dr-wrap .dr-stat.is-warning { background: var(--warn-50); }
.dr-wrap .dr-stat.is-warning .dr-stat-value { color: var(--warn-700); }

/* ---------- buttons ---------- */

.dr-wrap .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: var(--r-md); background: var(--gray-100); color: var(--gray-700); font: 500 14px/20px var(--font); text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
.dr-wrap .btn:hover { background: var(--gray-200); color: var(--gray-800); text-decoration: none; }
.dr-wrap .btn:focus-visible { outline: 0; box-shadow: var(--ring); }
.dr-wrap .btn:disabled, .dr-wrap .btn.disabled { opacity: .5; pointer-events: none; }
.dr-wrap .btn.is-busy { opacity: .75; pointer-events: none; }
.dr-wrap .btn-sm { padding: 6px 12px; font-size: 13px; line-height: 18px; }
.dr-wrap .btn.dr-btn-icon { padding-inline: 9px; }
.dr-wrap .btn-primary { background: var(--brand-500); color: #fff; box-shadow: var(--shadow-xs); }
.dr-wrap .btn-primary:hover { background: var(--brand-600); color: #fff; }
.dr-wrap .btn-outline-primary { background: var(--brand-50); color: var(--brand-600); }
.dr-wrap .btn-outline-primary:hover { background: var(--brand-100); color: var(--brand-700); }
.dr-wrap .btn-outline-secondary { background: var(--gray-100); color: var(--gray-700); }
.dr-wrap .btn-outline-secondary:hover { background: var(--gray-200); color: var(--gray-800); }
.dr-wrap .btn-outline-success { background: var(--ok-50); color: var(--ok-700); }
.dr-wrap .btn-outline-success:hover { background: var(--ok-100); color: var(--ok-700); }
.dr-wrap .btn-outline-danger { background: var(--bad-50); color: var(--bad-600); }
.dr-wrap .btn-outline-danger:hover { background: var(--bad-100); color: var(--bad-700); }
.dr-wrap .dr-spin { display: inline-block; width: .9em; height: .9em; margin-right: 6px; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dr-spin .6s linear infinite; }
@keyframes dr-spin { to { transform: rotate(360deg); } }

/* ---------- forms ---------- */

.dr-wrap .form-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--gray-700); }
.dr-wrap .form-control, .dr-wrap .form-select { display: block; width: 100%; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-md); background: var(--gray-100); color: var(--gray-800); font: 14px/20px var(--font); outline: 0; transition: background-color .15s var(--ease), box-shadow .15s var(--ease); }
.dr-wrap textarea.form-control { height: auto; min-height: 96px; padding: 12px 16px; }
.dr-wrap .form-select { padding-right: 40px; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 11px; }
.dr-wrap .form-control:focus, .dr-wrap .form-select:focus { background-color: #fff; box-shadow: var(--ring); }
.dr-wrap .form-control::placeholder { color: var(--gray-400); opacity: 1; }
.dr-wrap .form-control:disabled, .dr-wrap .form-select:disabled { opacity: .6; cursor: not-allowed; }
.dr-wrap .form-control-sm { height: 36px; padding: 0 12px; font-size: 13px; }
.dr-wrap .form-control.is-invalid, .dr-wrap .form-select.is-invalid,
.dr-wrap .was-validated .form-control:invalid, .dr-wrap .was-validated .form-select:invalid { background-color: var(--bad-50); box-shadow: 0 0 0 4px rgba(240, 68, 56, .12); }
.dr-wrap .dr-field { margin-bottom: 20px; }
.dr-wrap .dr-field:last-child { margin-bottom: 0; }
.dr-wrap .dr-field-label { margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--gray-700); }
.dr-wrap .dr-field-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--gray-500); }
.dr-wrap .dr-field-meta i { color: var(--gray-400); }
.dr-wrap .dr-inline-form { display: flex; gap: 8px; }
.dr-wrap .dr-inline-form .form-control { flex: 1 1 auto; min-width: 0; }
.dr-wrap .dr-inline-form .btn { flex: 0 0 auto; }
.dr-wrap .dr-note { margin-top: 8px; font-size: 12px; color: var(--gray-500); }
.dr-wrap .dr-note--center { text-align: center; }
.dr-wrap .dr-optional { font-size: 12px; font-weight: 400; color: var(--gray-400); }

/* ---------- tables ---------- */

.dr-wrap .table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.dr-wrap .table > thead > tr > th { padding: 8px 14px; border: 0; background: transparent; color: var(--gray-500); font-size: 12px; font-weight: 500; text-align: left; white-space: nowrap; }
.dr-wrap .table > tbody > tr > td, .dr-wrap .table > tbody > tr > th { padding: 12px 14px; border: 0; color: var(--gray-700); text-align: left; vertical-align: middle; }
.dr-wrap .table > tbody > tr:nth-child(odd) > td { background: var(--gray-50); }
.dr-wrap .table > tbody > tr > td:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.dr-wrap .table > tbody > tr > td:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.dr-wrap .table > tbody > tr > td:only-child { border-radius: var(--r-lg); }
.dr-wrap .table-hover > tbody > tr:hover > td { background: var(--brand-25); }
.dr-wrap .table-sm > thead > tr > th, .dr-wrap .table-sm > tbody > tr > td { padding: 6px 10px; }
.dr-wrap .table td .fa-fw { margin-right: 6px; color: var(--gray-400); }
.dr-wrap .table .text-end { text-align: right !important; }
.dr-wrap .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dr-wrap .table-responsive > table { min-width: 520px; }
.dr-wrap .dr-subrow > td, .dr-wrap .table-hover > tbody > tr.dr-subrow:hover > td { padding: 14px 16px; background: var(--brand-25) !important; }

@media (max-width: 767px) {
    .dr-wrap .dr-stackable, .dr-wrap .dr-stackable tbody, .dr-wrap .dr-stackable tr, .dr-wrap .dr-stackable td { display: block; width: auto; }
    .dr-wrap .dr-stackable thead { display: none; }
    .dr-wrap .table-responsive > .dr-stackable { min-width: 0; }
    .dr-wrap .dr-stackable tr { position: relative; margin-bottom: 10px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--gray-50); }
    .dr-wrap .dr-stackable > tbody > tr > td, .dr-wrap .dr-stackable > tbody > tr:nth-child(odd) > td { padding: 3px 0; background: transparent; border-radius: 0; text-align: left !important; }
    .dr-wrap .dr-stackable td[data-label] { display: flex; align-items: baseline; gap: 10px; }
    .dr-wrap .dr-stackable td[data-label]::before { content: attr(data-label); flex: 0 0 96px; color: var(--gray-500); font-size: 12px; }
    .dr-wrap .dr-stackable .dr-cell-title { margin-bottom: 4px; padding-right: 32px; font-size: 15px; overflow-wrap: anywhere; }
    .dr-wrap .dr-stackable .dr-cell-select { position: absolute; top: 14px; right: 14px; padding: 0; }
    .dr-wrap .dr-stackable .dr-cell-actions { display: flex; gap: 6px; margin-top: 10px; }
}

/* ---------- badges, alerts, empty states ---------- */

.dr-wrap .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--gray-100); color: var(--gray-700); font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.dr-wrap .badge.bg-success { background: var(--ok-50); color: var(--ok-700); }
.dr-wrap .badge.bg-danger { background: var(--bad-50); color: var(--bad-700); }
.dr-wrap .badge.bg-warning { background: var(--warn-50); color: var(--warn-700); }
.dr-wrap .badge.bg-info { background: var(--info-50); color: var(--info-700); }
.dr-wrap .badge.bg-secondary { background: var(--gray-100); color: var(--gray-600); }

.dr-wrap .alert { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 20px; padding: 14px 16px; border: 0; border-radius: var(--r-lg); font-size: 14px; }
.dr-wrap .alert i { margin-top: 3px; }
.dr-wrap .alert-success { background: var(--ok-50); color: var(--ok-700); }
.dr-wrap .alert-danger { background: var(--bad-50); color: var(--bad-700); }
.dr-wrap .alert-warning { background: var(--warn-50); color: var(--warn-700); }
.dr-wrap .alert.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .26s var(--ease), transform .26s var(--ease); }

.dr-wrap .dr-empty { padding: 48px 16px; text-align: center; color: var(--gray-500); }
.dr-wrap .dr-empty > i { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--gray-100); color: var(--gray-400); font-size: 22px; }
.dr-wrap .dr-empty .dr-empty-msg { font-size: 14px; }
.dr-wrap .dr-empty .btn { margin-top: 16px; }

/* ---------- pager ---------- */

.dr-wrap .dr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px 4px; }
.dr-wrap .dr-pager-count { font-size: 13px; color: var(--gray-500); }
.dr-wrap .dr-pager-count strong { font-weight: 600; color: var(--gray-800); }
.dr-wrap .dr-pager-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.dr-wrap .dr-pager-links > a, .dr-wrap .dr-pager-links > span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--r-md); color: var(--gray-600); font-size: 13px; font-weight: 500; text-decoration: none; transition: background-color .15s var(--ease), color .15s var(--ease); }
.dr-wrap .dr-pager-links > a:hover { background: var(--gray-100); color: var(--gray-800); }
.dr-wrap .dr-pager-links > a:focus-visible { outline: 0; box-shadow: var(--ring); }
.dr-wrap .dr-pager-links > .active { background: var(--brand-500); color: #fff; }
.dr-wrap .dr-pager-links > .disabled { color: var(--gray-400); opacity: .6; cursor: default; }
@media (max-width: 576px) {
    .dr-wrap .dr-pager { justify-content: center; }
    .dr-wrap .dr-pager-links { margin-left: 0; }
    .dr-wrap .row > .col-5, .dr-wrap .row > .col-7 { flex: 0 0 100%; width: 100%; }
    .dr-wrap .card-header { padding: 16px 16px 0; }
    .dr-wrap .card-body { padding: 16px; }
    .dr-wrap .dr-pagehead h1 { font-size: 20px; line-height: 28px; }
}

/* ---------- toolbar, search, copy, secrets ---------- */

.dr-wrap .dr-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.dr-wrap .dr-toolbar > span { display: inline-flex; align-items: center; gap: 6px; }
.dr-wrap .dr-search { position: relative; flex: 1 1 14rem; max-width: 22rem; }
.dr-wrap .dr-search > i { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--gray-400); font-size: 13px; pointer-events: none; }
.dr-wrap .dr-search .form-control { padding-left: 38px; }
.dr-wrap .dr-search input[type="search"]::-webkit-search-decoration,
.dr-wrap .dr-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.dr-wrap .dr-copy { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 3px 9px; border: 0; border-radius: var(--r-sm); background: var(--gray-100); color: var(--gray-600); font: 500 12px/18px var(--font); vertical-align: middle; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.dr-wrap .dr-copy:hover { background: var(--brand-50); color: var(--brand-600); }
.dr-wrap .dr-copy:focus-visible { outline: 0; box-shadow: var(--ring); }
.dr-wrap .dr-copy.is-copied { background: var(--ok-50); color: var(--ok-700); }

.dr-wrap .dr-secret { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-radius: var(--r-md); background: var(--gray-100); }
.dr-wrap .dr-secret-value { flex: 1 1 auto; min-width: 0; padding: 0; background: none; color: var(--gray-800); font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.dr-wrap .dr-secret-value.is-revealed { color: var(--brand-600); }
.dr-wrap .dr-secret .dr-copy { flex: 0 0 auto; margin-left: 0; background: #fff; }

.dr-wrap .dr-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14px; }
.dr-wrap .dr-kv > span { flex: 0 0 auto; color: var(--gray-500); }
.dr-wrap .dr-kv > strong { font-weight: 500; color: var(--gray-800); text-align: right; }
.dr-wrap .dr-kv-wrap { overflow-wrap: anywhere; }

/* ---------- register: search, TLD chips, results ---------- */

.dr-wrap .dr-searchblock { margin-bottom: 24px; padding: 24px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-xs); }
.dr-wrap .dr-searchbar { display: flex; gap: 10px; }
.dr-wrap .dr-searchbar-field { position: relative; flex: 1 1 14rem; min-width: 0; }
.dr-wrap .dr-searchbar-field > i { position: absolute; top: 50%; left: 18px; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }
.dr-wrap .dr-searchbar input { display: block; width: 100%; height: 52px; padding: 0 16px 0 46px; border: 0; border-radius: var(--r-lg); background: var(--gray-100); color: var(--gray-800); font: 16px var(--font); outline: 0; transition: background-color .15s var(--ease), box-shadow .15s var(--ease); }
.dr-wrap .dr-searchbar input::placeholder { color: var(--gray-400); }
.dr-wrap .dr-searchbar input:focus { background: #fff; box-shadow: var(--ring); }
.dr-wrap .dr-searchbar .btn { flex: 0 0 auto; height: 52px; padding-inline: 26px; border-radius: var(--r-lg); font-size: 15px; }
.dr-wrap .dr-tlds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.dr-wrap .dr-tlds-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-wrap .dr-tld { position: relative; margin: 0; cursor: pointer; }
.dr-wrap .dr-tld input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dr-wrap .dr-tld > span { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); font-size: 13px; font-weight: 500; transition: background-color .15s var(--ease), color .15s var(--ease); }
.dr-wrap .dr-tld:hover > span { background: var(--gray-200); color: var(--gray-800); }
.dr-wrap .dr-tld input:checked + span { background: var(--brand-500); color: #fff; }
.dr-wrap .dr-tld input:focus-visible + span { box-shadow: var(--ring); }
.dr-wrap .dr-tlds-add { flex: 0 0 auto; }
.dr-wrap .dr-tlds-add .form-control { width: 150px; height: 32px; border-radius: 999px; text-align: center; font-size: 13px; }
.dr-wrap .dr-tlds-add .form-control:focus { text-align: left; }

.dr-wrap .dr-results { display: flex; flex-direction: column; gap: 10px; }
.dr-wrap .dr-resultrow { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-xs); }
.dr-wrap .dr-resultrow.is-available { background: var(--ok-50); box-shadow: none; }
.dr-wrap .dr-resultrow.is-taken { background: var(--gray-100); box-shadow: none; }
.dr-wrap .dr-resultrow.is-taken .dr-resultrow-name, .dr-wrap .dr-resultrow.is-taken .dr-price { color: var(--gray-500); }
.dr-wrap .dr-resultrow-name { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--gray-800); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.dr-wrap .dr-resultrow-price { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.dr-wrap .dr-price { color: var(--gray-800); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dr-wrap .dr-price-unit { margin-left: 3px; color: var(--gray-500); font-size: 12px; }
.dr-wrap .dr-resultrow-cta { flex: 0 0 auto; min-width: 88px; text-align: right; }
@media (max-width: 576px) {
    .dr-wrap .dr-searchblock { padding: 16px; }
    .dr-wrap .dr-searchbar { flex-wrap: wrap; }
    .dr-wrap .dr-searchbar-field, .dr-wrap .dr-searchbar .btn { flex: 1 1 100%; }
    .dr-wrap .dr-searchbar input { height: 48px; font-size: 15px; }
    .dr-wrap .dr-resultrow { flex-wrap: wrap; }
    .dr-wrap .dr-resultrow-name { flex: 1 1 100%; }
    .dr-wrap .dr-resultrow-price { flex: 1 1 auto; text-align: left; }
}

/* ---------- register: hero search, featured result, price tiles ---------- */

.dr-wrap .dr-hero { position: relative; overflow: hidden; margin-bottom: 24px; padding: 32px; border-radius: 20px; background: radial-gradient(120% 140% at 100% 0%, hsl(285 62% 56%) 0%, var(--brand-600) 45%, hsl(285 58% 26%) 100%); color: #fff; box-shadow: var(--shadow-md); }
.dr-wrap .dr-hero::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
.dr-wrap .dr-hero-top { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dr-wrap .dr-hero h1 { margin: 0 0 6px; color: #fff; font-size: 28px; font-weight: 600; line-height: 36px; }
.dr-wrap .dr-hero p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 15px; }
.dr-wrap .dr-hero-credit { padding: 10px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .12); text-align: right; line-height: 1.3; }
.dr-wrap .dr-hero-credit span { display: block; color: rgba(255, 255, 255, .7); font-size: 12px; }
.dr-wrap .dr-hero-credit strong { color: #fff; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dr-wrap .dr-hero .dr-searchblock { position: relative; z-index: 2; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.dr-wrap .dr-hero .dr-searchbar { padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(16, 24, 40, .25); }
.dr-wrap .dr-hero .dr-searchbar input { background: transparent; }
.dr-wrap .dr-hero .dr-searchbar input:focus { background: transparent; box-shadow: none; }
.dr-wrap .dr-hero .dr-searchbar .btn { border-radius: 12px; }
.dr-wrap .dr-hero .dr-tlds { margin-top: 16px; }
.dr-wrap .dr-tlds-label { color: rgba(255, 255, 255, .7); font-size: 13px; margin-right: 2px; }
.dr-wrap .dr-hero .dr-tld > span { display: inline-flex; align-items: baseline; gap: 6px; background: rgba(255, 255, 255, .14); color: #fff; }
.dr-wrap .dr-hero .dr-tld:hover > span { background: rgba(255, 255, 255, .24); color: #fff; }
.dr-wrap .dr-hero .dr-tld input:checked + span { background: #fff; color: var(--brand-700); }
.dr-wrap .dr-tld em { font-style: normal; font-size: 11px; font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }
.dr-wrap .dr-hero .dr-tlds-add .form-control { background: rgba(255, 255, 255, .14); color: #fff; }
.dr-wrap .dr-hero .dr-tlds-add .form-control::placeholder { color: rgba(255, 255, 255, .75); }
.dr-wrap .dr-hero .dr-tlds-add .form-control:focus { background: #fff; color: var(--gray-800); }
.dr-wrap .dr-hero .dr-combo-list { color: var(--gray-700); }

.dr-wrap .dr-featured { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 22px 24px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-xs); }
.dr-wrap .dr-featured-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--gray-100); color: var(--gray-500); font-size: 24px; flex: none; }
.dr-wrap .dr-featured.is-available { background: linear-gradient(0deg, var(--ok-50), var(--ok-50)), #fff; }
.dr-wrap .dr-featured.is-available .dr-featured-icon { background: #fff; color: var(--ok-600); }
.dr-wrap .dr-featured.is-taken .dr-featured-icon { background: var(--bad-50); color: var(--bad-600); }
.dr-wrap .dr-featured-main { flex: 1 1 220px; min-width: 0; }
.dr-wrap .dr-featured-domain { color: var(--gray-900); font-size: 22px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.dr-wrap .dr-featured-note { margin-top: 2px; color: var(--gray-600); font-size: 14px; }
.dr-wrap .dr-featured-buy { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.dr-wrap .dr-featured-buy .dr-price { font-size: 22px; }
.dr-wrap .dr-featured-buy .btn { padding: 12px 22px; font-size: 15px; }
.dr-wrap .dr-results-label { margin: 20px 4px 10px; color: var(--gray-500); font-size: 13px; font-weight: 500; }
.dr-wrap .dr-results .dr-results-label { margin: 10px 4px 0; }

.dr-wrap .dr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dr-wrap .dr-tile { display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-xs); }
.dr-wrap .dr-tile-tld { color: var(--brand-600); font-size: 20px; font-weight: 600; }
.dr-wrap .dr-tile-price { margin-top: 6px; color: var(--gray-800); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dr-wrap .dr-tile-unit { color: var(--gray-500); font-size: 12px; }

@media (max-width: 640px) {
    .dr-wrap .dr-hero { padding: 22px 18px; border-radius: var(--r-xl); }
    .dr-wrap .dr-hero h1 { font-size: 22px; line-height: 30px; }
    .dr-wrap .dr-hero .dr-searchbar { flex-wrap: wrap; }
    .dr-wrap .dr-featured { padding: 18px; }
    .dr-wrap .dr-featured-buy { width: 100%; justify-content: space-between; margin-left: 0; }
    .dr-wrap .dr-featured-domain { font-size: 19px; }
}

/* ---------- checkout: choices and summary ---------- */

.dr-wrap .dr-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 10px; }
.dr-wrap .dr-choice { position: relative; display: block; margin: 0; cursor: pointer; }
.dr-wrap .dr-choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.dr-wrap .dr-choice-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--gray-50); transition: background-color .15s var(--ease), box-shadow .15s var(--ease); }
.dr-wrap .dr-choice:hover .dr-choice-body { background: var(--gray-100); }
.dr-wrap .dr-choice input:checked + .dr-choice-body { background: var(--brand-50); box-shadow: inset 0 0 0 2px var(--brand-500); }
.dr-wrap .dr-choice input:focus-visible + .dr-choice-body { box-shadow: var(--ring); }
.dr-wrap .dr-choice-title { color: var(--gray-800); font-size: 14px; font-weight: 500; }
.dr-wrap .dr-choice-price { color: var(--gray-500); font-size: 13px; }
.dr-wrap .dr-choice input:checked + .dr-choice-body .dr-choice-title,
.dr-wrap .dr-choice input:checked + .dr-choice-body .dr-choice-price { color: var(--brand-600); }

.dr-wrap .dr-summary { position: sticky; top: 92px; overflow: hidden; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-xs); }
.dr-wrap .dr-summary-head { padding: 20px 24px 4px; color: var(--gray-800); font-size: 16px; font-weight: 600; }
.dr-wrap .dr-summary-body { padding: 8px 24px; }
.dr-wrap .dr-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 24px 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--brand-50); }
.dr-wrap .dr-summary-total span { color: var(--brand-700); font-size: 14px; font-weight: 500; }
.dr-wrap .dr-summary-total strong { color: var(--brand-700); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dr-wrap .dr-summary-foot { padding: 16px 24px 24px; }
.dr-wrap .dr-summary-foot .dr-note { margin-top: 10px; }

.dr-wrap .dr-result { padding: 56px 16px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-xs); text-align: center; }
.dr-wrap .dr-result-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; background: var(--ok-50); color: var(--ok-600); font-size: 28px; }
.dr-wrap .dr-result h1 { font-size: 24px; overflow-wrap: anywhere; }
.dr-wrap .dr-result p { margin-bottom: 24px; color: var(--gray-500); }
.dr-wrap .dr-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------- domain page bits ---------- */

.dr-wrap .dr-domainmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dr-wrap .dr-disclose { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 0; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); font: 500 12px/18px var(--font); white-space: nowrap; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.dr-wrap .dr-disclose::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s var(--ease); }
.dr-wrap .dr-disclose:hover, .dr-wrap .dr-disclose.is-open { background: var(--brand-50); color: var(--brand-600); }
.dr-wrap .dr-disclose:focus-visible { outline: 0; box-shadow: var(--ring); }
.dr-wrap .dr-disclose.is-open::after { transform: translateY(1px) rotate(-135deg); }
.dr-wrap .dr-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 8px; }
.dr-wrap .dr-term { padding: 10px 12px; border-radius: var(--r-md); background: #fff; }
.dr-wrap .dr-term-year { color: var(--gray-500); font-size: 12px; font-weight: 500; }
.dr-wrap .dr-term-prices { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; color: var(--gray-800); font-size: 13px; font-variant-numeric: tabular-nums; }
.dr-wrap .dr-term-prices em { margin-right: 3px; font-style: normal; color: var(--gray-400); }

.dr-wrap .dr-method { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); background: var(--gray-100); color: var(--gray-600); font: 600 11px/16px var(--mono); letter-spacing: .03em; }
.dr-wrap .dr-payloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 12px; }
.dr-wrap .dr-payload { overflow: hidden; border-radius: var(--r-lg); background: var(--gray-50); }
.dr-wrap .dr-payload-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 0; color: var(--gray-500); font-size: 12px; font-weight: 500; }
.dr-wrap .dr-payload-head .dr-copy { margin-left: 0; background: #fff; }
.dr-wrap .dr-payload pre { max-height: 18rem; margin: 0; padding: 10px 14px 14px; overflow: auto; background: transparent; color: var(--gray-800); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- pickers ---------- */

.dr-wrap .dr-combo { position: relative; }
.dr-wrap .dr-combo-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: 16rem; max-height: 15rem; margin: 0; padding: 6px; overflow-y: auto; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-lg); list-style: none; }
.dr-wrap .dr-combo-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--gray-700); font-size: 13px; white-space: nowrap; cursor: pointer; }
.dr-wrap .dr-combo-item:hover, .dr-wrap .dr-combo-item.is-active { background: var(--brand-50); color: var(--brand-600); }
.dr-wrap .dr-combo-item b { font-weight: 600; color: var(--brand-600); }
.dr-wrap .dr-combo-item.is-active b { color: inherit; }
.dr-wrap .dr-combo-tag { margin-left: auto; color: var(--gray-400); font-size: 11px; font-weight: 500; }
.dr-wrap .dr-picklist { max-height: 15rem; padding: 6px; overflow-y: auto; border-radius: var(--r-lg); background: var(--gray-50); }
.dr-wrap .dr-pick { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 10px; border-radius: var(--r-sm); font-size: 14px; cursor: pointer; transition: background-color .15s var(--ease); }
.dr-wrap .dr-pick:hover { background: #fff; }
.dr-wrap .dr-pick input { flex: 0 0 auto; margin: 0; }
.dr-wrap .dr-pick > span { overflow-wrap: anywhere; }
.dr-wrap .dr-pick:has(input:checked) { background: var(--brand-50); color: var(--brand-600); font-weight: 500; }

/* ---------- Integration ---------- */

.dr-wrap .dr-pkg { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-lg); background: var(--gray-50); }
.dr-wrap .dr-pkg + .dr-pkg { margin-top: 12px; }
.dr-wrap .dr-pkg-logo { width: 140px; height: 40px; object-fit: contain; object-position: left center; flex: none; }
.dr-wrap .dr-pkg-body { flex: 1 1 200px; min-width: 0; }
.dr-wrap .dr-pkg-name { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--gray-800); overflow-wrap: anywhere; }
.dr-wrap .dr-pkg-desc { margin-top: 2px; font-size: 13px; color: var(--gray-500); }
.dr-wrap .dr-pkg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-wrap .dr-steps { margin: 0; padding: 0; list-style: none; counter-reset: dr-step; }
.dr-wrap .dr-steps li { position: relative; padding: 4px 0 18px 44px; font-size: 14px; line-height: 22px; color: var(--gray-600); counter-increment: dr-step; }
.dr-wrap .dr-steps li:last-child { padding-bottom: 0; }
.dr-wrap .dr-steps li::before { content: counter(dr-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-50); color: var(--brand-600); font-size: 13px; font-weight: 600; }
.dr-wrap .dr-steps b { color: var(--gray-800); font-weight: 600; }
.dr-wrap .dr-steps code { font-family: var(--mono); font-size: 13px; color: var(--brand-600); overflow-wrap: anywhere; }

/* ---------- Font Awesome: names the templates use, on FA5 and FA6 ---------- */

.dr-app .fa-solid, .dr-wrap .fa-solid, .dr-app .fa-regular, .dr-wrap .fa-regular { display: inline-block; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; -webkit-font-smoothing: antialiased; }
.dr-app .fa-solid, .dr-wrap .fa-solid { font-weight: 900; }
.dr-app .fa-regular, .dr-wrap .fa-regular { font-weight: 400; }
.dr-app .fa-cart-shopping::before, .dr-wrap .fa-cart-shopping::before { content: "\f07a"; }
.dr-app .fa-magnifying-glass::before, .dr-wrap .fa-magnifying-glass::before { content: "\f002"; }
.dr-app .fa-circle-check::before, .dr-wrap .fa-circle-check::before { content: "\f058"; }
.dr-app .fa-circle-info::before, .dr-wrap .fa-circle-info::before { content: "\f05a"; }
.dr-app .fa-circle-xmark::before, .dr-wrap .fa-circle-xmark::before { content: "\f057"; }
.dr-app .fa-file-lines::before, .dr-wrap .fa-file-lines::before { content: "\f15c"; }
.dr-app .fa-floppy-disk::before, .dr-wrap .fa-floppy-disk::before { content: "\f0c7"; }
.dr-app .fa-gear::before, .dr-wrap .fa-gear::before { content: "\f013"; }
.dr-app .fa-house::before, .dr-wrap .fa-house::before { content: "\f015"; }
.dr-app .fa-link-slash::before, .dr-wrap .fa-link-slash::before { content: "\f127"; }
.dr-app .fa-list-check::before, .dr-wrap .fa-list-check::before { content: "\f0ae"; }
.dr-app .fa-rotate::before, .dr-wrap .fa-rotate::before { content: "\f021"; }
.dr-app .fa-shield-halved::before, .dr-wrap .fa-shield-halved::before { content: "\f3ed"; }
.dr-app .fa-sliders::before, .dr-wrap .fa-sliders::before { content: "\f1de"; }
.dr-app .fa-triangle-exclamation::before, .dr-wrap .fa-triangle-exclamation::before { content: "\f071"; }
.dr-app .fa-bars::before { content: "\f0c9"; }
.dr-app .fa-arrow-left::before { content: "\f060"; }
.dr-app .fa-globe::before { content: "\f0ac"; }
.dr-app .fa-plug::before, .dr-wrap .fa-plug::before { content: "\f1e6"; }

/* ---------- Public price list (/pricing) ---------- */

.dr-pub { min-height: 100vh; margin: 0; background: var(--gray-50); color: var(--gray-700); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
.dr-pub *, .dr-pub *::before, .dr-pub *::after { box-sizing: border-box; }
.dr-pub-head { background: #fff; box-shadow: var(--shadow-xs); }
.dr-pub-bar { display: flex; align-items: center; gap: 10px; max-width: 1080px; margin: 0 auto; padding: 12px 16px; }
.dr-pub-brand { display: flex; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.dr-pub-brand b { display: block; color: var(--gray-900, #101828); font-size: 17px; font-weight: 600; line-height: 1.2; }
.dr-pub-brand small { display: block; color: var(--gray-500); font-size: 12px; }
.dr-pub-main { max-width: 1080px; margin: 0 auto; padding: 32px 16px 16px; }
.dr-pub-hero { max-width: 720px; margin-bottom: 24px; }
.dr-pub-hero .badge { background: var(--brand-50); color: var(--brand-600); }
.dr-pub-hero h1 { margin: 14px 0 8px; color: var(--gray-900, #101828); font-size: 30px; font-weight: 600; line-height: 38px; }
.dr-pub-hero p { margin: 0; color: var(--gray-600, #475467); font-size: 16px; }
.dr-wrap .dr-pub-tools { flex-wrap: wrap; gap: 12px; padding-bottom: 12px; }
.dr-pub-count { color: var(--gray-500); font-size: 13px; }
.dr-pub-seg { display: flex; gap: 4px; margin-left: auto; padding: 4px; border-radius: var(--r-md); background: var(--gray-100); }
.dr-pub-seg a { padding: 5px 12px; border-radius: 6px; color: var(--gray-600, #475467); font-size: 13px; font-weight: 500; text-decoration: none; }
.dr-pub-seg a.is-on { background: #fff; color: var(--brand-600); box-shadow: var(--shadow-xs); }
.dr-wrap .dr-pub-login { background: transparent; }
.dr-pub-scroll { overflow-x: auto; }
.dr-wrap .dr-pub-table td { font-size: 15px; white-space: nowrap; }
.dr-wrap .dr-pub-table td:first-child { color: var(--gray-900, #101828); }
.dr-wrap .dr-pub-cta { margin-top: 24px; }
.dr-wrap .dr-pub-cta .card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.dr-wrap .dr-pub-cta .card-body > div { flex: 1 1 320px; }
.dr-wrap .dr-pub-cta h2 { margin: 0 0 4px; color: var(--gray-900, #101828); font-size: 18px; font-weight: 600; }
.dr-wrap .dr-pub-cta p { margin: 0; color: var(--gray-500); }
.dr-pub-foot { max-width: 1080px; margin: 0 auto; padding: 8px 16px 32px; color: var(--gray-500); font-size: 12px; }
@media (max-width: 575px) {
    .dr-pub-hero h1 { font-size: 24px; line-height: 32px; }
    .dr-wrap .dr-pub-login { display: none; }
    .dr-pub-seg { margin-left: 0; }
    .dr-wrap .dr-pub-table thead { display: none; }
    .dr-wrap .dr-pub-table, .dr-wrap .dr-pub-table tbody { display: block; }
    .dr-wrap .dr-pub-table > tbody > tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 10px 12px; border-radius: var(--r-lg); }
    .dr-wrap .dr-pub-table > tbody > tr[hidden] { display: none; }
    .dr-wrap .dr-pub-table > tbody > tr:nth-child(odd) { background: var(--gray-50); }
    .dr-wrap .dr-pub-table > tbody > tr > td, .dr-wrap .dr-pub-table > tbody > tr > td.text-end { display: block; padding: 0; border-radius: 0 !important; background: none !important; font-size: 14px; text-align: left !important; }
    .dr-wrap .dr-pub-table > tbody > tr > td:first-child { grid-column: 1 / -1; margin-bottom: 4px; font-size: 15px; }
    .dr-wrap .dr-pub-table > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; color: var(--gray-500); font-size: 11px; font-weight: 400; }
}
.dr-pub-more { display: flex; justify-content: center; padding: 12px 0 4px; }
.dr-pub-more:has([hidden]) { display: none; }
.dr-pub-note { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--warn-50); color: var(--warn-700); font-size: 13px; text-align: center; }
.dr-pub-busy { opacity: .55; transition: opacity .15s; }

/* ---------- Announcement bar under the top bar ---------- */

.dr-notice { position: relative; overflow: hidden; background: var(--brand-50); color: var(--brand-700); font: 500 14px/20px var(--font); }
.dr-notice.is-info { background: var(--info-50); color: var(--info-700, #026aa2); }
.dr-notice.is-warn { background: var(--warn-50); color: var(--warn-700); }
.dr-notice.is-ok { background: var(--ok-50); color: var(--ok-700); }
.dr-notice a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dr-notice-item { display: inline-flex; align-items: center; gap: 8px; padding: 10px 56px 10px 0; white-space: nowrap; }
.dr-notice-item i { opacity: .7; font-size: 13px; }
.dr-notice-track { display: flex; width: max-content; animation: dr-marquee 30s linear infinite; }
.dr-notice-half { display: flex; justify-content: space-around; min-width: 100vw; padding-left: 56px; }
.dr-notice:hover .dr-notice-track, .dr-notice:focus-within .dr-notice-track { animation-play-state: paused; }
.dr-notice.is-static { display: flex; justify-content: center; padding: 0 16px; text-align: center; }
.dr-notice.is-static .dr-notice-item { padding: 10px 0; white-space: normal; }
@keyframes dr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .dr-notice-track { width: auto; animation: none; }
    .dr-notice-half { min-width: 0; padding: 0 16px; }
    .dr-notice-half + .dr-notice-half, .dr-notice-item[aria-hidden] { display: none; }
    .dr-notice-item { white-space: normal; }
}
.dr-wrap > .dr-notice { margin: 0 0 16px; border-radius: var(--r-lg); }