/*
 * Domaintico UI (Pro) – Global polish layer
 * الهدف: توحيد شكل كل الصفحات (Frontend + User Dashboard + Checkout)
 * بدون كسر المنطق أو تغيير كبير في الـHTML.
 *
 * ملاحظة: هذا الملف يُحمّل بعد custom.css لذلك يعتبر override آمن.
 */

:root{
  --dm-radius-sm: 10px;
  --dm-radius: 14px;
  --dm-radius-md: var(--dm-radius);
  --dm-radius-lg: 18px;

  --dm-shadow-sm: 0 8px 22px rgba(2,6,23,.06);
  --dm-shadow: 0 12px 40px rgba(2,6,23,.08);

  --dm-border: rgba(2,6,23,.10);
  --dm-border-soft: rgba(2,6,23,.07);

  --dm-surface: #fff;
  --dm-surface-2: #F8FAFC;
  --dm-text: #0F172A;
  --dm-muted: #64748B;

  /*
    Theme tokens (DB-driven)
    -----------------------
    ThemeSettingsService injects the following (when configured):
      --dm-primary, --dm-primary-hover, --dm-primary-pressed,
      --dm-container-max, --dm-btn-radius

    We DO NOT overwrite those variables here.
    Instead, we define safe "derived" aliases with fallbacks.
  */
  --dm-primary-color: var(--dm-primary, #2563EB);
  --dm-primary-hover-color: var(--dm-primary-hover, #1D4ED8);
  --dm-primary-pressed-color: var(--dm-primary-pressed, #1E40AF);

  /* Global rhythm (used by .dm-section). Override from theme if needed. */
  --dm-section-pad: clamp(28px, 4.5vw, 56px);
  --dm-section-pad-tight: clamp(18px, 3.2vw, 40px);
}

/* =========================
   LOADER (NEW)
   Replaces legacy full-screen preloader.
   ========================= */

.dm-loader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
}

.dm-loader__bar{
  height: 100%;
  width: 40%;
  background: hsl(var(--base));
  border-radius: 0 0 8px 8px;
  transform: translateX(-60%);
  opacity: .75;
  animation: dmLoaderMove 1.1s ease-in-out infinite;
  box-shadow: 0 10px 18px hsl(var(--base) / .16);
}

.dm-loader.is-hidden{
  opacity: 0;
  transition: opacity .22s ease;
}

.dm-loader.is-hidden .dm-loader__bar{
  animation: none;
}

@keyframes dmLoaderMove{
  0%{ transform: translateX(-60%); width: 28%; opacity: .55; }
  50%{ width: 62%; opacity: 1; }
  100%{ transform: translateX(160%); width: 28%; opacity: .55; }
}

html{
  -webkit-text-size-adjust: 100%;
}

body{
  /* تحسين قراءة النص */
  font-size: 0.9375rem; /* 15px */
  line-height: 1.65;
  letter-spacing: 0;
}

/* خط عربي تلقائي عند RTL */
html[dir="rtl"] body{
  font-family: 'Cairo', var(--body-font);
}
html[dir="rtl"] :is(h1,h2,h3,h4,h5,h6){
  font-family: 'Cairo', var(--heading-font);
  letter-spacing: 0;
}

/* تحسين العناوين */
:is(h1,h2,h3,h4,h5,h6){
  color: var(--dm-text);
  letter-spacing: -0.015em;
}
h1{font-weight: 900;}
h2{font-weight: 900;}
h3{font-weight: 800;}
h4{font-weight: 800;}
h5{font-weight: 800;}
h6{font-weight: 800;}

a{
  transition: color .15s ease, opacity .15s ease;
}

/* مساحة عامة */
.dm-landing, .dm-home, .dm-contact, .dm-legal{
  padding-bottom: 48px;
}

/* ===== Page Header / Breadcrumb ===== */
.dm-page-header{
  /* Fallback */
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,0));
  /* Use theme primary color when supported */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--dm-primary-color) 12%, transparent),
    transparent
  );
  border-bottom: 1px solid var(--dm-border-soft);
}
.dm-page-header__inner{
  padding: 22px 0 18px;
}
.dm-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size: 13px;
  color: var(--dm-muted);
}
.dm-breadcrumb a{
  color: var(--dm-muted);
  font-weight: 700;
}
.dm-breadcrumb a:hover{
  color: var(--dm-text);
}
.dm-breadcrumb__sep{
  opacity: .6;
}
.dm-page-title{
  margin-top: 8px;
  font-size: 34px;
  line-height: 1.15;
}
@media (max-width: 575px){
  .dm-page-title{font-size: 28px;}
}

/* ===== Bootstrap polish (global) ===== */
.container{
  /* اعتمدنا عرض Bootstrap الافتراضي، ونعززه للأحجام الكبيرة */
}
@media (min-width: 1400px){
  .container{max-width: var(--dm-container-max, 1200px);}
}

.card, .dm-card, .dm-domain-card{
  border-radius: var(--dm-radius-lg);
  border: 1px solid var(--dm-border-soft);
  box-shadow: var(--dm-shadow-sm);
}

.card .card-header{
  border-bottom: 1px solid var(--dm-border-soft);
}

.btn,
.dm-btn,
.btn--base{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  border-radius: var(--dm-btn-radius, var(--dm-radius));
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: 10px 14px;

  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  vertical-align: middle;

  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-sm{
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 800;
}
.btn-lg{
  padding: 12px 18px;
  border-radius: 16px;
  font-size: 1rem;
}
.btn:focus,
.form-control:focus,
.form-select:focus{
  /* Fallback ring */
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.15) !important;
  /* Theme-aware ring */
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--dm-primary-color) 22%, transparent) !important;
}
.btn-primary{
  background: var(--dm-primary-color) !important;
  border-color: var(--dm-primary-color) !important;
}
.btn-primary:hover{
  background: var(--dm-primary-hover-color) !important;
  border-color: var(--dm-primary-hover-color) !important;
}
.btn-primary:active{
  background: var(--dm-primary-pressed-color) !important;
  border-color: var(--dm-primary-pressed-color) !important;
}
.btn-outline-primary{
  border-color: rgba(37,99,235,.35) !important;
  border-color: color-mix(in srgb, var(--dm-primary-color) 35%, transparent) !important;
  color: var(--dm-primary-color) !important;
}
.btn-outline-primary:hover{
  background: rgba(37,99,235,.08) !important;
  background: color-mix(in srgb, var(--dm-primary-color) 10%, transparent) !important;
}
.btn-outline-secondary{
  border-color: rgba(100,116,139,.35) !important;
}
.btn-outline-secondary:hover{
  background: rgba(100,116,139,.08) !important;
}

/* Light / neutral button (used in Home quick links, etc.) */
.btn-light{
  background: rgba(2,6,23,.04) !important;
  border-color: rgba(2,6,23,.10) !important;
  color: var(--dm-text) !important;
}
.btn-light:hover{
  background: rgba(2,6,23,.06) !important;
  border-color: rgba(2,6,23,.14) !important;
}
.btn-light:active{
  transform: translateY(1px);
}


/* Link-style buttons (Bootstrap compatible) */
.btn-link{
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--dm-primary-color) !important;
  font-weight: 700;
  text-decoration: none;
}
.btn-link:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-control,
.form-select,
.input-group-text{
  border-radius: var(--dm-radius) !important;
  border-color: rgba(2,6,23,.12) !important;
}
.input-group .input-group-text{
  background: #F8FAFC;
}

.alert{
  border-radius: var(--dm-radius-lg);
  border: 1px solid var(--dm-border-soft);
}

.table{
  --bs-table-border-color: rgba(2,6,23,.08);
}
.table thead th{
  font-weight: 900;
  color: var(--dm-text);
}

/* Pagination */
.pagination .page-link{
  border-radius: 12px;
}
.pagination .page-item + .page-item{
  margin-left: 6px;
}

/* ===== Checkout header (moved from inline) ===== */
.dm-checkout-header{
  background:#fff;
  border-bottom:1px solid var(--dm-border-soft);
}
.dm-checkout-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
}
.dm-checkout-header__brand{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
}
.dm-checkout-header__logo{
  height:30px;
  max-width:220px;
  object-fit:contain;
}
.dm-checkout-header__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--dm-text);
  text-decoration:none;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:8px 10px;
}
.dm-checkout-header__back:hover{background:#e5e7eb}
.dm-checkout-header__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:48px;
}
.dm-checkout-header__lang{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  color: var(--dm-text);
  text-decoration:none;
}
.dm-checkout-header__lang:hover{background:#f3f4f6}
@media (max-width: 575px){
  .dm-checkout-header__logo{height:26px;max-width:160px}
  .dm-checkout-header__back{padding:8px;width:40px;justify-content:center}
}

/* ===== Checkout layout (moved from inline checkout views) ===== */

/* ===== Key / value rows (utility) =====
   Used across checkout + other pages (e.g., summaries).
   Keep unscoped so it works even if a wrapper class changes.
*/
.dm-kv{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.dm-kv > :first-child{
  flex:1;
  min-width:0; /* enables wrapping inside flex */
}
.dm-kv > :last-child{
  flex-shrink:0;
  text-align:right;
  white-space:nowrap;
}

.dm-checkout{
  max-width:1120px;
  margin:0 auto;
}
.dm-checkout .dm-steps{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.dm-checkout .dm-step{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#F1F5F9;
  border:1px solid rgba(0,0,0,.06);
  color:#0F172A;
  font-weight:900;
  font-size:13px;
}
.dm-checkout .dm-step.done{
  background:#F1F5F9;
  color:#334155;
  border-color:rgba(0,0,0,.06);
}
.dm-checkout .dm-step.active{
  background:#E5F0FF;
  color:#1D4ED8;
  border-color:rgba(37,99,235,.25);
}
.dm-checkout .dm-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
}
@media (max-width: 991px){
  .dm-checkout .dm-grid{grid-template-columns:1fr}
}
.dm-checkout .dm-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 12px 40px rgba(2,6,23,.04);
}
.dm-checkout .dm-card-body{padding:18px}
.dm-checkout .dm-muted{color:#64748B}
.dm-checkout .dm-kv{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.dm-checkout .dm-kv strong{font-weight:900}
.dm-checkout .dm-divider{height:1px;background:rgba(0,0,0,.06);margin:14px 0}
.dm-checkout .dm-btnrow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.dm-checkout .dm-btnrow .btn{border-radius:14px}

/* ===== User Dashboard cards ===== */
.dm-card__label{
  color: var(--dm-muted);
  font-weight: 800;
  font-size: 12px;
}
.dm-card__value{
  font-weight: 900;
  font-size: 22px;
  color: var(--dm-text);
  margin-top: 4px;
}

/* ===== Domains list cards ===== */
.dm-domain-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 12px 40px rgba(2,6,23,.04);
  padding:16px;
}
.dm-domain-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.dm-domain-name{
  font-weight:900;
  font-size:16px;
  color: var(--dm-text);
  text-decoration:none;
}
.dm-domain-name:hover{ text-decoration:underline; }
.dm-domain-meta{
  margin-top:6px;
  color: var(--dm-muted);
  font-size:13px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
}
.dm-domain-meta i{opacity:.85}
.dm-domain-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
.dm-badge-pill{
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  font-size:12px;
}
.dm-badge-muted{
  opacity:.8;
  font-weight:800;
}

/* Badge variants (shared across pages: domain search, cart, etc.) */
.dm-badge-premium{
  background:rgba(99,102,241,.14);
  color:#4338CA;
}
.dm-domain-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.dm-domain-actions .btn{
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
}
@media (max-width: 575px){
  .dm-domain-actions{
    display:grid;
    grid-template-columns: 1fr 1fr;
  }
  .dm-domain-actions .btn{
    width:100%;
    justify-content:center;
  }
  .dm-domain-actions .btn:first-child{
    grid-column: 1 / -1;
  }
  .dm-domain-right{align-items:flex-start}
}

/* Compact actions layout used on "My Domains" cards (Manage + 4 icon actions). */
.dm-domain-actions--compact{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  margin-top:14px;
}
.dm-domain-actions--compact .dm-domain-actions__manage{
  grid-column: 1 / -1;
  width:100%;
}
.dm-icon-btn--block{
  width:100%;
  justify-content:center;
}
.dm-domain-actions--compact .dm-icon-btn{
  height:42px;
  border-radius:14px;
}
@media (max-width: 575px){
  .dm-domain-actions--compact{grid-template-columns: 1fr 1fr;}
}

/* Mini labeled actions layout used on "My Domains" cards (clear labels, smaller height). */
.dm-domain-actions--mini{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}
.dm-domain-actions--mini > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
}
.dm-domain-actions--mini > a i{font-size:16px;}
.dm-domain-actions--mini > a:first-child{
  grid-column: 1 / -1;
  width:100%;
}
@media (min-width: 768px){
  .dm-domain-actions--mini{
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap:12px;
  }
  .dm-domain-actions--mini > a:first-child{grid-column:auto;}
}

/*
  Domain actions menu
  -------------------
  Desktop: normal dropdown menu.
  Mobile: convert the dropdown to a full-width bottom sheet.
*/

/* Backdrop (created via JS) */
.dm-actions-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 1055;
}
.dm-actions-backdrop.show{
  opacity: 1;
  pointer-events: auto;
}

@media(min-width:576px){
  .dm-actions-backdrop{display:none;}
}

@media(max-width:575.98px){
  body.dm-app .dm-actions-menu{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -20px 60px rgba(15, 23, 42, 0.18) !important;
    max-height: calc(100vh - 84px);
    overflow: auto;
    z-index: 1060;
  }

  /* Drag handle */
  body.dm-app .dm-actions-menu::before{
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.18);
    margin: 4px auto 10px;
  }

  /* Larger tap targets */
  body.dm-app .dm-actions-menu .dropdown-item{
    border-radius: 14px;
    padding: 12px 12px;
    font-size: 1rem;
  }

  body.dm-app .dm-actions-menu .dropdown-divider{
    margin: 10px 4px;
  }
}

.empty-state{max-width:480px;margin:auto}
.empty-icon{font-size:48px}

/* ===== Dashboard header (auth_header) ===== */
.header.bg--dark{
  background: #0B1220 !important;
}
.header.bg--dark .logo img{
  filter: none;
}
.show-sidebar-bar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  color:#fff !important;
  background:rgba(255,255,255,.06);
  text-decoration:none;
}
.show-sidebar-bar i{font-size:26px;line-height:1}
.show-sidebar-bar.change-icon i::before{content:"\f00d"}

/* ===== Sidebar cards polish ===== */
.dm-master-sidebar{min-width:320px}
.dm-master-sidebar .card{border-radius:16px;overflow:hidden}
.dm-master-sidebar .bg-dark-two{background:#0B1220 !important;color:#fff}
.dm-master-sidebar .btn{border-radius:14px}

/* تحسين list-group داخل الداشبورد */
.list-group-item{
  border-color: rgba(2,6,23,.08);
}
.list-group-item-action{
  font-weight: 700;
}

/* RTL tweaks for bootstrap spacing */
html[dir="rtl"] .me-1{margin-left:.25rem!important;margin-right:0!important}
html[dir="rtl"] .me-2{margin-left:.5rem!important;margin-right:0!important}
html[dir="rtl"] .ms-2{margin-right:.5rem!important;margin-left:0!important}


/* ===== Stripe Elements ===== */
#card-element{
  position: relative;
  padding: 12px 14px;
  padding-inline-start: 44px;
  border: 1px solid rgba(2,6,23,.12);
  border-radius: var(--dm-radius);
  background: #fff;
}
#card-element::before{
  content: '';
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4H4V6h16v2Zm0 2H4v8h16v-8ZM8 17H6v-2h2v2Z'/%3E%3C/svg%3E");
  opacity: .9;
  pointer-events: none;
}
html[dir="rtl"] #card-element{
  padding-inline-start: 14px;
  padding-inline-end: 44px;
}
html[dir="rtl"] #card-element::before{
  inset-inline-start: auto;
  inset-inline-end: 14px;
}
.StripeElement--focus{
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.15);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--dm-primary-color) 22%, transparent);
}


/* ===== Small utilities (used to remove inline styles) ===== */
.dm-card--soft{background:#F8FAFC;border-color:rgba(0,0,0,.06) !important; box-shadow:none !important;}
.dm-card--flat{box-shadow:none !important;}
.dm-clickable{cursor:pointer;}
.dm-w-240{max-width:240px;}


/* =====================================================================
   Global components for NEW CMS pages
   - Buttons are already normalized above.
   - Below we add: section spacing, responsive grids, frames,
     hover dropdowns, and popups/modals.
   ===================================================================== */

/* ===== Section spacing (consistent rhythm) ===== */
body.dm-app .dm-section{
  padding-top: var(--dm-section-pad);
  padding-bottom: var(--dm-section-pad);
}

body.dm-app .dm-section--tight{
  padding-top: var(--dm-section-pad-tight);
  padding-bottom: var(--dm-section-pad-tight);
}

/* ===== Section variants + headings ===== */
body.dm-app .dm-section--alt{
  background: var(--dm-surface-2);
}

body.dm-app .dm-section-head,
body.dm-app .dm-section__head{
  max-width: 820px;
}

body.dm-app .dm-section-kicker,
body.dm-app .dm-section__kicker{
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(100,116,139,.85);
}

body.dm-app .dm-section-title{
  margin: 10px 0 0;
  font-size: clamp(24px, 2.3vw, 34px);
  letter-spacing: -0.02em;
  font-weight: 950;
  color: var(--dm-text);
}

body.dm-app .dm-section-subtitle,
body.dm-app .dm-section__text{
  margin: 10px 0 0;
  color: var(--dm-muted);
  font-weight: 700;
  line-height: 1.55;
}

/* Centered title helper (used by some CMS templates) */
body.dm-app .dm-section__title{
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-align: center;
}

/* Page hero blocks (Register/Transfer) */
body.dm-app .dm-section.dm-page-hero{
  padding-top: var(--dm-section-pad-tight);
  padding-bottom: var(--dm-section-pad-tight);
  background:
    radial-gradient(900px 320px at 50% 0%,
      color-mix(in srgb, var(--dm-primary-color) 18%, transparent),
      transparent 70%);
  border-bottom: 1px solid var(--dm-border-soft);
}

/* Subtle divider between consecutive sections */
body.dm-app .dm-section{ position: relative; }
body.dm-app .dm-section + .dm-section::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(2,6,23,.06);
}

/*
  Page heroes already include a border-bottom.
  Avoid rendering a second (stacked) divider line on the next section.
  This fixes the “extra line” seen on mobile between hero + body.
*/
body.dm-app .dm-section.dm-page-hero + .dm-section::before{
  display: none;
}

/* Anchor flash (when linking to #id on a section) */
body.dm-app .dm-section:target{
  animation: dmTargetFlash 1.1s ease-out;
}
@keyframes dmTargetFlash{
  0%{ box-shadow: 0 0 0 0 rgba(37,99,235,.22); }
  100%{ box-shadow: 0 0 0 18px rgba(37,99,235,0); }
}

/* Mobile: slightly tighter spacing (prevents too much scroll) */
@media (max-width: 575.98px){
  :root{
    --dm-section-pad: clamp(22px, 7vw, 40px);
    --dm-section-pad-tight: clamp(16px, 5.5vw, 28px);
  }
}

/* ===== Responsive grids (ready for any new page) ===== */
body.dm-app .dm-grid{
  display: grid;
  gap: 18px;
}
body.dm-app .dm-grid--2{grid-template-columns: repeat(2, minmax(0, 1fr));}
body.dm-app .dm-grid--3{grid-template-columns: repeat(3, minmax(0, 1fr));}
body.dm-app .dm-grid--4{grid-template-columns: repeat(4, minmax(0, 1fr));}

@media (max-width: 991.98px){
  body.dm-app .dm-grid--3,
  body.dm-app .dm-grid--4{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 575.98px){
  body.dm-app .dm-grid--2,
  body.dm-app .dm-grid--3,
  body.dm-app .dm-grid--4{grid-template-columns: 1fr;}
}

/* ===== Frames / surfaces ===== */
body.dm-app .dm-surface{
  background: var(--dm-surface);
  border: 1px solid var(--dm-border-soft);
  border-radius: var(--dm-radius-lg);
  box-shadow: var(--dm-shadow-sm);
}

body.dm-app .dm-divider{
  height: 1px;
  background: var(--dm-border-soft);
}

/* ===== Dropdown menus (polish) ===== */
body.dm-app .dropdown-menu{
  border-radius: var(--dm-radius-lg);
  border-color: var(--dm-border-soft);
  box-shadow: var(--dm-shadow);
}

body.dm-app .dropdown-item:hover,
body.dm-app .dropdown-item:focus{
  background: rgba(37,99,235,.08);
  background: color-mix(in srgb, var(--dm-primary-color) 10%, transparent);
}

/* Hover dropdowns (Desktop only) – mainly for the header navigation */
@media (min-width: 992px){
  body.dm-app .dm-nav__dropdown > .dropdown-menu{
    /* override bootstrapless: display:none; */
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  }

  body.dm-app .dm-nav__dropdown:hover > .dropdown-menu,
  body.dm-app .dm-nav__dropdown:focus-within > .dropdown-menu,
  body.dm-app .dm-nav__dropdown > .dropdown-menu.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* ===== Popups / Modals (Bootstrapless + custom) ===== */
body.dm-app .modal-content{
  border-radius: var(--dm-radius-lg);
  border-color: var(--dm-border-soft);
  box-shadow: var(--dm-shadow);
}

body.dm-app .modal-header,
body.dm-app .modal-footer{
  border-color: var(--dm-border-soft);
}

body.dm-app .btn-close{
  border-radius: 14px;
}

/* Custom modal component for CMS pages (if needed) */
body.dm-app .dm-modal[hidden]{display:none !important;}
body.dm-app .dm-modal{
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 16px;
}
body.dm-app .dm-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.55);
}
body.dm-app .dm-modal__dialog{
  position: relative;
  width: min(760px, 100%);
  background: var(--dm-surface);
  border: 1px solid var(--dm-border-soft);
  border-radius: var(--dm-radius-lg);
  box-shadow: var(--dm-shadow);
  overflow: hidden;
}
body.dm-app .dm-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--dm-border-soft);
}
body.dm-app .dm-modal__title{margin:0; font-weight:900; font-size: 16px;}
body.dm-app .dm-modal__body{padding: 16px;}
body.dm-app .dm-modal__foot{
  padding: 14px 16px;
  border-top: 1px solid var(--dm-border-soft);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

/* ===== CMS blocks normalization (prevents "random gray" backgrounds) ===== */
body.dm-app .dm-content-page [class*="DMGridSection"],
body.dm-app .dm-content-page [class*="DMGridSection"]::before,
body.dm-app .dm-content-page [class*="DMGridSection"]::after{
  background: #fff !important;
}


/* ===== Button spinners (show only when loading) ===== */
body.dm-app .dm-btn-spinner{ display:none; }
body.dm-app .dm-btn.is-loading .dm-btn-spinner,
body.dm-app .dm-btn[aria-busy="true"] .dm-btn-spinner,
body.dm-app button.is-loading .dm-btn-spinner,
body.dm-app button[aria-busy="true"] .dm-btn-spinner{
  display:inline-block;
}


/* ======================================================================
   Domaintico legacy helpers (theme class compatibility) + small UI polish
   ====================================================================== */

/* Dropdown menus should never show <ul>/<li> bullets */
.dm-app .dropdown-menu {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.dm-app .dropdown-menu > li {
  list-style: none;
  padding-left: 0;
}

/* Account dropdown (header) */
.dm-app .dm-account-menu {
  min-width: 260px;
}

.dm-app .dm-account-menu__meta {
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--dm-border);
}

.dm-app .dm-account-menu__name {
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--dm-text);
  line-height: 1.2;
}

.dm-app .dm-account-menu__email {
  margin-top: 2px;
  font-size: 12px;
  color: var(--dm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown item layout (icon + label) */
.dm-app .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Badges (used across user pages) */
.dm-app .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.dm-app .badge--primary {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.22);
  color: rgb(29, 78, 216);
}

.dm-app .badge--secondary {
  background: rgba(100, 116, 139, 0.12);
  border-color: rgba(100, 116, 139, 0.22);
  color: rgb(51, 65, 85);
}

.dm-app .badge--success {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.22);
  color: rgb(5, 150, 105);
}

.dm-app .badge--warning {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.22);
  color: rgb(180, 83, 9);
}

.dm-app .badge--danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.22);
  color: rgb(185, 28, 28);
}

.dm-app .badge--info {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.22);
  color: rgb(2, 132, 199);
}

/* List groups
   NOTE: Keep list-group-item as a normal block by default.
   Some pages (e.g., /user/services) render multi-line content inside an item.
   Forcing the item to be a flex row causes the description to be pushed into a
   narrow right column and breaks mobile layout.
*/
.dm-app .list-group{
  list-style: none;
  padding: 0;
  margin: 0;
}

.dm-app .list-group-item{
  padding: 10px 12px;
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-md);
  background: var(--dm-surface);
}

/* Spacing for non-flush groups */
.dm-app .list-group:not(.list-group-flush) .list-group-item + .list-group-item{
  margin-top: 10px;
}

/* Flush groups (stacked rows in a single frame) */
.dm-app .list-group.list-group-flush{
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-md);
  overflow: hidden;
}

.dm-app .list-group.list-group-flush .list-group-item{
  border: 0;
  border-bottom: 1px solid var(--dm-border);
  border-radius: 0;
  margin: 0;
}

.dm-app .list-group.list-group-flush .list-group-item:last-child{
  border-bottom: 0;
}

/* Legacy utility colors */
.dm-app .text--base { color: var(--dm-primary) !important; }
.dm-app .text--success { color: rgb(5, 150, 105) !important; }
.dm-app .text--warning { color: rgb(180, 83, 9) !important; }
.dm-app .text--danger { color: rgb(185, 28, 28) !important; }
.dm-app .text--info { color: rgb(2, 132, 199) !important; }

.dm-app .bg--base { background: var(--dm-primary) !important; color: #fff !important; }

/* Legacy buttons (theme compatibility) */
.dm-app .btn--base,
.dm-app a.btn--base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid var(--dm-primary);
  background: var(--dm-primary);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.dm-app .btn--base:hover,
.dm-app a.btn--base:hover {
  filter: brightness(0.96);
  box-shadow: var(--dm-shadow-sm);
  transform: translateY(-1px);
  color: #fff;
}

.dm-app .btn-outline--primary,
.dm-app a.btn-outline--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.06);
  color: rgb(29, 78, 216);
  font-weight: 900;
  text-decoration: none;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.dm-app .btn-outline--primary:hover,
.dm-app a.btn-outline--primary:hover {
  background: rgba(59, 130, 246, 0.10);
  box-shadow: var(--dm-shadow-sm);
  transform: translateY(-1px);
  color: rgb(29, 78, 216);
}

.dm-app .btn-outline--secondary,
.dm-app a.btn-outline--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(100, 116, 139, 0.35);
  background: rgba(100, 116, 139, 0.06);
  color: rgb(51, 65, 85);
  font-weight: 900;
  text-decoration: none;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.dm-app .btn-outline--secondary:hover,
.dm-app a.btn-outline--secondary:hover {
  background: rgba(100, 116, 139, 0.10);
  box-shadow: var(--dm-shadow-sm);
  transform: translateY(-1px);
  color: rgb(51, 65, 85);
}

/* Legacy button sizes */
.dm-app .btn--sm,
.dm-app .btn-sm,
.dm-app a.btn--sm,
.dm-app a.btn-sm {
  padding: 8px 12px;
  font-size: 13px;
}


/* Form labels */
.dm-app .form-label{
  display: inline-block;
  margin-bottom: 6px;
}
/* Checkboxes (Bootstrap compatible) */
.dm-app .form-check{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 20px;
}

.dm-app .form-check-input{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--dm-primary-color);
}

.dm-app .form-check-label{
  margin: 0;
  font-weight: 700;
  color: var(--dm-text);
}
/* Legacy form controls */
.dm-app .form-control,
.dm-app .form-select,
.dm-app .form--control,
.dm-app .form--select {
  display: block;
  max-width: 100%;
  width: 100%;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid var(--dm-border);
  background: #fff;
  color: var(--dm-text);
}

/*
  Make single-line inputs feel consistent with the Domaintico search input.
  (Some screens were showing smaller default inputs.)
*/
.dm-app input.form-control,
.dm-app select.form-select,
.dm-app input.form--control,
.dm-app select.form--select{
  min-height: 48px;
  font-size: 16px;
}

.dm-app textarea.form-control,
.dm-app textarea.form--control{
  min-height: 120px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

.dm-app .form-control:focus,
.dm-app .form-select:focus,
.dm-app .form--control:focus,
.dm-app .form--select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

/* Legacy tables */
.dm-app .table-responsive--md {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dm-app .table--light thead th {
  background: var(--dm-surface-2);
}



/* Extra badge variants used by the panel */
.dm-app .badge--dark {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.16);
  color: rgb(15, 23, 42);
}

.dm-app .badge--icon {
  padding-left: 8px;
  padding-right: 10px;
}

/* Extra legacy button variants */
.dm-app .btn--primary,
.dm-app a.btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid var(--dm-primary);
  background: var(--dm-primary);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.dm-app .btn--primary:hover,
.dm-app a.btn--primary:hover {
  filter: brightness(0.96);
  box-shadow: var(--dm-shadow-sm);
  transform: translateY(-1px);
  color: #fff;
}

.dm-app .btn--secondary,
.dm-app a.btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(100, 116, 139, 0.35);
  background: rgba(100, 116, 139, 0.10);
  color: rgb(51, 65, 85);
  font-weight: 900;
  text-decoration: none;
}

.dm-app .btn--success,
.dm-app a.btn--success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.12);
  color: rgb(5, 150, 105);
  font-weight: 900;
  text-decoration: none;
}

.dm-app .btn--warning,
.dm-app a.btn--warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.12);
  color: rgb(180, 83, 9);
  font-weight: 900;
  text-decoration: none;
}

.dm-app .btn--danger,
.dm-app a.btn--danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
  color: rgb(185, 28, 28);
  font-weight: 900;
  text-decoration: none;
}

.dm-app .btn--dark,
.dm-app a.btn--dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(15, 23, 42, 0.28);
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.dm-app .btn--light,
.dm-app a.btn--light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid var(--dm-border);
  background: rgba(255, 255, 255, 0.85);
  color: var(--dm-text);
  font-weight: 900;
  text-decoration: none;
}

/* Hover polish for legacy variants */
.dm-app .btn--secondary:hover,
.dm-app .btn--success:hover,
.dm-app .btn--warning:hover,
.dm-app .btn--danger:hover,
.dm-app .btn--dark:hover,
.dm-app .btn--light:hover,
.dm-app a.btn--secondary:hover,
.dm-app a.btn--success:hover,
.dm-app a.btn--warning:hover,
.dm-app a.btn--danger:hover,
.dm-app a.btn--dark:hover,
.dm-app a.btn--light:hover {
  box-shadow: var(--dm-shadow-sm);
  transform: translateY(-1px);
}


/* Extra outline variants (legacy theme) */
.dm-app .btn-outline--success,
.dm-app a.btn-outline--success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.06);
  color: rgb(5, 150, 105);
  font-weight: 900;
  text-decoration: none;
}

.dm-app .btn-outline--warning,
.dm-app a.btn-outline--warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.06);
  color: rgb(180, 83, 9);
  font-weight: 900;
  text-decoration: none;
}

.dm-app .btn-outline--danger,
.dm-app a.btn-outline--danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
  color: rgb(185, 28, 28);
  font-weight: 900;
  text-decoration: none;
}

.dm-app .btn-outline--info,
.dm-app a.btn-outline--info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(14, 165, 233, 0.35);
  background: rgba(14, 165, 233, 0.06);
  color: rgb(2, 132, 199);
  font-weight: 900;
  text-decoration: none;
}

.dm-app .btn-outline--dark,
.dm-app a.btn-outline--dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius);
  border: 1px solid rgba(15, 23, 42, 0.26);
  background: rgba(15, 23, 42, 0.04);
  color: rgb(15, 23, 42);
  font-weight: 900;
  text-decoration: none;
}

.dm-app .btn-outline--success:hover,
.dm-app .btn-outline--warning:hover,
.dm-app .btn-outline--danger:hover,
.dm-app .btn-outline--info:hover,
.dm-app .btn-outline--dark:hover,
.dm-app a.btn-outline--success:hover,
.dm-app a.btn-outline--warning:hover,
.dm-app a.btn-outline--danger:hover,
.dm-app a.btn-outline--info:hover,
.dm-app a.btn-outline--dark:hover {
  box-shadow: var(--dm-shadow-sm);
  transform: translateY(-1px);
}

/* =====================================================================
   CART PAGE — Pro / Compact
   الهدف: Desktop layout يظهر 2 columns + spacing أقل + look احترافي
   ===================================================================== */

body.dm-app .dm-cart-page{
  /* Subtle page wash to make cards pop (matches Domaintico hero vibe) */
  background:
    radial-gradient(1000px 420px at 50% 0%,
      color-mix(in srgb, var(--dm-primary-color) 10%, transparent),
      transparent 70%),
    linear-gradient(180deg, rgba(248,250,252,.75), rgba(248,250,252,0));
}

/* Make hero card feel premium */
body.dm-app .dm-cart-page .dm-page-hero .dm-surface{
  border-radius: 24px;
  box-shadow: var(--dm-shadow);
}

/* Slightly tighter body section on cart */
body.dm-app .dm-cart-page .dm-page-body{
  padding-top: var(--dm-section-pad-tight);
}

/* Items + Summary cards */
body.dm-app .dm-cart-page :is(.dm-card, .dm-surface){
  border-color: var(--dm-border-soft);
}

/* Cart item rows: more “app-like” and compact */
body.dm-app .dm-cart-page .dm-cart-item{
  background: #fff;
  border: 1px solid var(--dm-border-soft);
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

body.dm-app .dm-cart-page .dm-cart-item:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--dm-primary-color) 20%, var(--dm-border-soft));
  box-shadow: var(--dm-shadow-sm);
}

body.dm-app .dm-cart-page .dm-cart-page__domain{
  font-size: 18px;
  letter-spacing: -0.02em;
}

@media (min-width: 992px){
  body.dm-app .dm-cart-page .dm-cart-page__domain{ font-size: 19px; }
}

/* Details summary becomes a pill (less “raw”) */
body.dm-app .dm-cart-page details.dm-cart-page__details > summary,
body.dm-app .dm-cart-page details.dm-cart-page__detailsSummary{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
}

body.dm-app .dm-cart-page details.dm-cart-page__details[open] > summary{
  background: color-mix(in srgb, var(--dm-primary-color) 7%, #fff);
  border-color: color-mix(in srgb, var(--dm-primary-color) 18%, rgba(15,23,42,.10));
}

body.dm-app .dm-cart-page .dm-cart-page__detailsBody{
  margin-top: 10px;
  padding-top: 10px;
}

/* Desktop summary: highlight slightly */
body.dm-app .dm-cart-page .dm-cart-summary{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--dm-primary-color) 6%, #fff),
    #fff);
  border-color: color-mix(in srgb, var(--dm-primary-color) 18%, var(--dm-border-soft));
}

/* Danger ghost button (used for “Clear”) */
body.dm-app .dm-btn-danger-ghost{
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.28);
  color: rgb(220,38,38);
}
body.dm-app .dm-btn-danger-ghost:hover{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.32);
  color: rgb(185,28,28);
}


/* === UX PACK: Bootstrapless completion + Domaintico UI polish ===
   This block improves Bootstrap-like components used across the app
   so the UI stays consistent even without Bootstrap.
*/

/* Alerts (Bootstrap-compatible + legacy variants) */
.dm-app .alert{
  padding: 12px 14px;
  background: rgba(2, 6, 23, 0.03);
  color: var(--dm-text);
}
.dm-app .alert-success,
.dm-app .alert--success{
  border-color: rgba(16,185,129,.24);
  background: rgba(16,185,129,.10);
  color: rgb(6,95,70);
}
.dm-app .alert-warning,
.dm-app .alert--warning{
  border-color: rgba(245,158,11,.26);
  background: rgba(245,158,11,.10);
  color: rgb(146,64,14);
}
.dm-app .alert-danger,
.dm-app .alert--danger{
  border-color: rgba(239,68,68,.26);
  background: rgba(239,68,68,.10);
  color: rgb(153,27,27);
}
.dm-app .alert-info,
.dm-app .alert--info{
  border-color: rgba(59,130,246,.26);
  background: rgba(59,130,246,.10);
  color: rgb(30,64,175);
}
.dm-app .alert-secondary,
.dm-app .alert--secondary{
  border-color: rgba(100,116,139,.24);
  background: rgba(100,116,139,.10);
  color: rgb(51,65,85);
}

/* Cards (Bootstrap-compatible) */
.dm-app .card{
  background: var(--dm-surface);
  border: 1px solid var(--dm-border-soft);
  border-radius: var(--dm-radius-lg);
  box-shadow: var(--dm-shadow-sm);
  overflow: hidden;
}
.dm-app .card-header{
  padding: 14px 16px;
  background: var(--dm-surface-2);
  border-bottom: 1px solid var(--dm-border-soft);
  font-weight: 900;
  letter-spacing: -0.01em;
}
.dm-app .card-body{
  padding: 16px;
}
.dm-app .card-footer{
  padding: 14px 16px;
  background: var(--dm-surface-2);
  border-top: 1px solid var(--dm-border-soft);
}

/* Nav pills */
.dm-app .nav{
  gap: 10px;
}
.dm-app .nav-pills{
  gap: 10px;
}
.dm-app .nav-pills .nav-link{
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid var(--dm-border-soft);
  background: rgba(2, 6, 23, 0.03);
  font-weight: 900;
  color: var(--dm-text);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.dm-app .nav-pills .nav-link:hover{
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.22);
  transform: translateY(-1px);
  box-shadow: var(--dm-shadow-sm);
}
.dm-app .nav-pills .nav-link.active{
  background: color-mix(in srgb, var(--dm-primary-color) 10%, #fff);
  border-color: color-mix(in srgb, var(--dm-primary-color) 26%, var(--dm-border-soft));
  color: var(--dm-primary-color);
}
.dm-app .nav-pills .nav-link i{
  opacity: .85;
}

/* Tables */
.dm-app .table-responsive{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--dm-radius-lg);
  border: 1px solid var(--dm-border-soft);
  background: var(--dm-surface);
}
.dm-app .table-responsive > .table{
  margin-bottom: 0;
}
.dm-app .table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.dm-app .table th,
.dm-app .table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--dm-border-soft);
  vertical-align: middle;
}
.dm-app .table thead th{
  background: var(--dm-surface-2);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--dm-muted);
  font-weight: 900;
}
.dm-app .table tbody tr:last-child td{
  border-bottom: 0;
}
.dm-app .table tbody tr:hover td{
  background: rgba(37, 99, 235, 0.04);
}

/* Pagination */
.dm-app .pagination{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.dm-app .pagination .page-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--dm-border-soft);
  background: var(--dm-surface);
  color: var(--dm-text);
  font-weight: 900;
  text-decoration: none;
  box-shadow: var(--dm-shadow-xs, 0 1px 0 rgba(2,6,23,.02));
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}
.dm-app .pagination .page-link:hover{
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.22);
  transform: translateY(-1px);
  box-shadow: var(--dm-shadow-sm);
}
.dm-app .pagination .page-item.active .page-link{
  background: var(--dm-primary-color);
  border-color: var(--dm-primary-color);
  color: #fff;
}
.dm-app .pagination .page-item.disabled .page-link{
  opacity: .5;
  pointer-events: none;
}

/* Form switch (Bootstrap compatible) */
.dm-app .form-switch{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dm-app .form-switch .form-check-input{
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--dm-border-soft);
  background: rgba(100,116,139,.18);
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.dm-app .form-switch .form-check-input::before{
  content:"";
  position:absolute;
  top: 50%;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 6px 16px rgba(2,6,23,.16);
  transition: inset-inline-start 160ms ease;
}
.dm-app .form-switch .form-check-input:checked{
  background: color-mix(in srgb, var(--dm-primary-color) 42%, #fff);
  border-color: color-mix(in srgb, var(--dm-primary-color) 28%, var(--dm-border-soft));
}
.dm-app .form-switch .form-check-input:checked::before{
  inset-inline-start: calc(100% - 23px);
}
.dm-app .form-switch .form-check-input:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

/* Checkout auth tabs */
.dm-checkout .dm-auth-tab{
  border-radius: 14px;
  font-weight: 900;
}
.dm-checkout .dm-auth-tab.active{
  background: var(--dm-primary-color);
  border-color: var(--dm-primary-color);
  color: #fff;
}
.dm-checkout input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--dm-primary-color);
}



/* === UX PACK PATCH 2: Missing bootstrap-like classes used in templates === */

/* Button variants */
.btn-outline-danger{
  border-color: rgba(239,68,68,.38) !important;
  color: rgb(220,38,38) !important;
}
.btn-outline-danger:hover{
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.45) !important;
  color: rgb(185,28,28) !important;
}

.btn-warning{
  background: rgba(245,158,11,.92) !important;
  border-color: rgba(245,158,11,.92) !important;
  color: rgb(15,23,42) !important;
}
.btn-warning:hover{
  background: rgba(245,158,11,1) !important;
  border-color: rgba(245,158,11,1) !important;
}
.btn-warning:active{
  transform: translateY(1px);
}

/* Sidebar + overlay (mobile) */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 1050;
}
.overlay.show-overlay{
  opacity: 1;
  pointer-events: auto;
}

.collapable-sidebar{
  position: relative;
}
.collapable-sidebar__inner{
  background: var(--dm-surface);
  border: 1px solid var(--dm-border-soft);
  border-radius: var(--dm-radius-lg);
  box-shadow: var(--dm-shadow-sm);
  padding: 14px;
}
.collapable-sidebar__close{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--dm-border-soft);
  background: rgba(2,6,23,.03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991.98px){
  .collapable-sidebar{
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(92vw, 340px);
    transform: translateX(-110%);
    transition: transform 220ms ease;
    z-index: 1060;
    padding: 12px;
  }
  .collapable-sidebar.show{
    transform: translateX(0);
  }
  .collapable-sidebar__inner{
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
    padding: 14px;
  }
  .collapable-sidebar__close{
    position: sticky;
    top: 0;
    margin-bottom: 10px;
    z-index: 1;
  }
}

/* Small table variant */
.table-sm th,
.table-sm td{
  padding: 10px 12px;
}

/* Text helpers */
.text-uppercase{
  text-transform: uppercase;
  letter-spacing: .10em;
}
.text-nowrap{ white-space: nowrap; }
.text-truncate{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

.form-text{
  font-size: 12px;
  color: var(--dm-muted);
  margin-top: 6px;
}


/* Header icon sizing (mobile + desktop)
   Keeps header controls consistent and finger-friendly.
*/
.dm-header .dm-icon-btn{
  width: 52px;
  height: 52px;
}
.dm-header .dm-icon-btn i{
  font-size: 22px;
}
.dm-header .dm-cart-badge{
  min-width: 22px;
  height: 22px;
  font-size: 12px;
  top: 6px;
  right: 6px;
}
.dm-header .dm-icon-btn__svg{
  width: 22px;
  height: 22px;
}

@media (max-width: 991.98px){
  .dm-header .dm-icon-btn{
    width: 50px;
    height: 50px;
  }
  .dm-header .dm-icon-btn i{
    font-size: 21px;
  }
  .dm-header .dm-cart-badge{
    top: 6px;
    right: 6px;
  }
}

/* =========================================================
   User domain management (My Domains + Domain details)
   ========================================================= */

/* Compact top row used on domain sub-pages (DNS / Nameservers / Renew) */
.dm-domain-page-top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.dm-domain-page-top__titles{
  min-width: 0;
}

.dm-back-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--dm-border);
  background: var(--dm-surface);
  color: var(--dm-text);
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.dm-back-link i{ font-size: 20px; }
.dm-back-link:hover{
  background: var(--dm-surface-2);
  border-color: rgba(24, 98, 240, .30);
}
.dm-back-link:active{ transform: translateY(1px); }

/* Domain sub navigation tabs */
.dm-domain-nav{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--dm-border);
  background: var(--dm-surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}
.dm-domain-nav::-webkit-scrollbar{ height: 0; }

.dm-domain-nav__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--dm-muted);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dm-domain-nav__item i{ font-size: 18px; }

.dm-domain-nav__item:hover{
  color: var(--dm-text);
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
}

.dm-domain-nav__item.is-active{
  background: rgba(24, 98, 240, .10);
  color: var(--dm-primary);
  border-color: rgba(24, 98, 240, .25);
}

/* Small action buttons (used in cards) */
.dm-mini-btn,
.dm-action-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--dm-border);
  background: var(--dm-surface);
  color: var(--dm-text);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .05s ease, color .15s ease;
}
.dm-mini-btn i,
.dm-action-pill i{ font-size: 18px; }

.dm-mini-btn:hover,
.dm-action-pill:hover{
  background: var(--dm-surface-2);
  border-color: rgba(24, 98, 240, .30);
}
.dm-mini-btn:active,
.dm-action-pill:active{
  transform: translateY(1px);
}

.dm-mini-btn--ghost{
  background: transparent;
}
.dm-mini-btn--ghost:hover{
  background: rgba(255,255,255,.7);
}

.dm-mini-btn--primary,
.dm-action-pill--primary{
  background: var(--dm-primary);
  border-color: var(--dm-primary);
  color: #fff;
}
.dm-mini-btn--primary:hover,
.dm-action-pill--primary:hover{
  background: rgba(24, 98, 240, .92);
  border-color: rgba(24, 98, 240, .92);
  color: #fff;
}

.dm-actions-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Domain details header */
.dm-domain-profile{
  display: flex;
  align-items: center;
  gap: 14px;
}
.dm-domain-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: rgba(24, 98, 240, .10);
  color: var(--dm-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.dm-domain-icon i{ font-size: 24px; }

.dm-domain-status{
  min-width: 0;
}
.dm-domain-status__name{
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  line-height: 1.15;
  word-break: break-word;
}
.dm-domain-status__sub{
  font-size: 13px;
  color: var(--dm-muted);
  margin-top: 4px;
}

/* Info grid */
.dm-domain-meta-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 767.98px){
  .dm-domain-meta-grid{ grid-template-columns: 1fr; }
}

.dm-meta-card{
  border: 1px solid var(--dm-border);
  background: var(--dm-surface);
  border-radius: 16px;
  padding: 14px;
}

.dm-meta-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dm-meta-label{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--dm-muted);
}

.dm-meta-value{
  font-size: 14px;
  font-weight: 800;
  color: var(--dm-text);
  text-align: right;
}

.dm-link{
  color: var(--dm-primary);
  font-weight: 800;
}
.dm-link:hover{
  color: rgba(24, 98, 240, .85);
}

/* Callout card */
.dm-cta-card{
  border: 1px solid rgba(24, 98, 240, .22);
  background: linear-gradient(180deg, rgba(24, 98, 240, .10), rgba(24, 98, 240, .04));
  border-radius: 18px;
  padding: 16px;
}
.dm-cta-content{ margin-bottom: 12px; }

/* Smaller list spacing on user pages (mobile friendly) */
.dm-card.dm-compact{
  padding: 14px;
}

/* Icon-only buttons inside tables */
.dm-icon-btn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--dm-border);
  background: var(--dm-surface);
  color: var(--dm-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.dm-icon-btn i{ font-size: 18px; }
.dm-icon-btn:hover{
  background: var(--dm-surface-2);
  border-color: rgba(24, 98, 240, .30);
}
.dm-icon-btn:active{ transform: translateY(1px); }
.dm-icon-btn--danger{ color: #DC2626; }
.dm-icon-btn--danger:hover{ border-color: rgba(220,38,38,.35); }

/* ------------------------------------------------------------
   Domain cards redesign (My Domains)
   - Cleaner, compact layout
   - Better spacing between cards
   ------------------------------------------------------------ */
.dm-domain-list{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.dm-domain-card{
  padding:16px;
}

/* Make the header + badges layout stack nicely on small screens */
@media (max-width: 520px){
  .dm-domain-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .dm-domain-right{
    width:100%;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    margin-top:10px;
  }
}

/* Add a subtle divider before the actions row for clearer hierarchy */
.dm-domain-actions{
  border-top:1px solid rgba(148, 163, 184, 0.25);
  padding-top:12px;
}

/* The list card now only has 1 main action (Actions) */
.dm-domain-actions--mini{
  display:flex;
  justify-content:flex-start;
}

@media (max-width: 520px){
  .dm-domain-actions__dropdown{
    width:100%;
  }
  .dm-domain-actions__dropdown .dm-mini-btn{
    width:100%;
    justify-content:center;
  }
}

.dm-domain-card + .dm-domain-card{margin-top:0;}
.dm-domain-card .dm-domain-actions{margin-top:16px;}
@media (max-width: 520px){
  .dm-domain-card{padding:18px 16px;}
}

/* Nameserver modes / presets */
.dm-ns-presets{
  display:grid;
  gap:12px;
}

.dm-ns-preset{
  display:block;
  position:relative;
  border:1px solid rgba(15,23,42,.12);
  border-radius:20px;
  background:#fff;
  padding:16px 18px;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dm-ns-preset:hover{
  border-color:rgba(37,99,235,.28);
  box-shadow:0 10px 30px rgba(15,23,42,.05);
}
.dm-ns-preset.is-active{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
  background:linear-gradient(180deg, rgba(37,99,235,.03), rgba(37,99,235,.015));
}
.dm-ns-preset.is-disabled{
  opacity:.72;
}
.dm-ns-preset input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.dm-ns-preset__body{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dm-ns-preset__title{
  font-weight:800;
  color:#0f172a;
}
.dm-ns-preset__desc{
  color:#64748b;
  font-size:.95rem;
}
.dm-ns-preset__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.dm-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(148,163,184,.12);
  color:#334155;
  font-size:.85rem;
  line-height:1;
}

/* DNS page guard / provider state */
.dm-dns-guard{
  border:1px solid rgba(37,99,235,.14);
  background: linear-gradient(180deg, rgba(37,99,235,.035), rgba(255,255,255,.92));
}
.dm-dns-guard__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.dm-chip-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.dm-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.10);
  background:#fff;
  font-size:.8125rem;
  font-weight:700;
  color:var(--dm-text);
}
.dm-chip--warn{
  background:#FFF7ED;
  border-color:#FED7AA;
  color:#C2410C;
}
.dm-card--muted{
  opacity:.96;
}
.dm-empty-state{
  border:1px dashed rgba(2,6,23,.12);
  background:#F8FAFC;
  border-radius:18px;
  padding:28px 18px;
  text-align:center;
}
.dm-empty-state__icon{
  font-size:30px;
  color:var(--dm-primary-color);
  margin-bottom:8px;
}
.dm-empty-state__title{
  font-weight:800;
  color:var(--dm-text);
  margin-bottom:4px;
}
.dm-empty-state__text{
  color:var(--dm-muted);
  max-width:58ch;
  margin:0 auto;
}