/*!
 * Domaintico — Core CSS
 * ------------------------------------------------------------
 * Scope:
 *  - Base + Tokens (fonts/colors)
 *  - Color utilities
 *  - Padding/Spacing utilities
 *  - Buttons (core)
 *  - Header + Footer (shell)
 *
 * NOTE:
 *  - Page-level styles should live in CMS DB (page builder) or
 *    in dedicated page bundles (domaintico-*.css).
 *  - This file intentionally avoids page-specific components.
 *
 * Updated: 2026-02-25
 */

/* =========================
   TOKENS
   ========================= */

:root {
  /* Typography */
  --heading-font: "Inter", sans-serif;
  --body-font: "Inter", sans-serif;

  /* Legacy HSL tokens (used by .text--* / .bg--* utilities) */
  --heading: 222 47% 11%;
  --body: 222 47% 11%;
  --muted: 215 16% 47%;
  --border: 214 32% 91%;

  /* Brand scale (legacy) */
  --base-h: 221;
  --base-s: 83%;
  --base-l: 53%;
  --base: var(--base-h) var(--base-s) var(--base-l);
  --base-50: var(--base-h) var(--base-s) calc(var(--base-l) + 25%);
  --base-100: var(--base-h) var(--base-s) calc(var(--base-l) + 20%);
  --base-200: var(--base-h) var(--base-s) calc(var(--base-l) + 15%);
  --base-300: var(--base-h) var(--base-s) calc(var(--base-l) + 10%);
  --base-400: var(--base-h) var(--base-s) calc(var(--base-l) + 5%);
  --base-600: var(--base-h) var(--base-s) calc(var(--base-l) - 5%);
  --base-700: var(--base-h) var(--base-s) calc(var(--base-l) - 10%);
  --base-800: var(--base-h) var(--base-s) calc(var(--base-l) - 15%);
  --base-900: var(--base-h) var(--base-s) calc(var(--base-l) - 20%);
  --gradient-base: linear-gradient(270deg, hsl(var(--base-400)) 0%, hsl(var(--base-600)) 100%);

  /* Semantic palette (legacy) */
  --primary: 221 83% 53%;
  --secondary: 199 89% 48%;
  --success: 142 76% 36%;
  --danger: 0 72% 51%;
  --warning: 38 92% 50%;
  --info: 199 89% 48%;
  --dark: 222 47% 11%;
  --white: 0 0% 100%;
  --light: 210 40% 98%;

  /* New design tokens (DB can override via injected theme <style>) */
  --dm-primary: #2563EB;
  --dm-primary-hover: #1D4ED8;
  --dm-primary-pressed: #1E40AF;
  --dm-text: #0F172A;
  --dm-muted: #64748B;
  --dm-surface: #FFFFFF;
  --dm-surface-2: #F8FAFC;
  --dm-border: rgba(2, 6, 23, 0.10);
  --dm-border-soft: rgba(2, 6, 23, 0.07);
  --dm-btn-radius: 14px;
  --dm-container-max: 1200px;
}

/* =========================
   BASE
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.65;
  color: var(--dm-text, hsl(var(--body)));
  background-color: var(--dm-surface-2, hsl(var(--light)));
}

/* Arabic/RTL font is handled in the layout, but keep a safe fallback */
html[dir="rtl"] body {
  font-family: "Cairo", var(--body-font);
}

p {
  margin: 0;
}

:is(h1,h2,h3,h4,h5,h6) {
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 800;
  line-height: 1.3;
  color: var(--dm-text, hsl(var(--heading)));
  word-break: break-word;
}

:is(h1,h2,h3,h4,h5,h6) > a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--dm-primary, hsl(var(--base)));
  text-decoration: none;
}

a:hover {
  color: var(--dm-primary-hover, var(--dm-primary, hsl(var(--base))));
}

/* Keep sensible defaults for CMS content lists without affecting UI/nav lists */
ul:not([class]),
ol:not([class]) {
  margin: 0;
  padding-inline-start: 1.25rem;
}

/* Better default focus (kept subtle; UI layer may override) */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--dm-primary) 40%, transparent);
  outline-offset: 2px;
}

.text-bold {
  font-weight: 500;
}

/* Global overlay used by legacy scripts */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background-color: hsl(var(--dark) / 0.80);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s linear;
}

.overlay.active,
.overlay.show-overlay {
  visibility: visible;
  opacity: 1;
}

/* Preloader (legacy) removed: replaced by lightweight top loader in domaintico-ui.css */

/* =========================
   COLOR UTILITIES
   ========================= */

.text--primary { color: hsl(var(--primary)) !important; }
.text--secondary { color: hsl(var(--secondary)) !important; }
.text--success { color: hsl(var(--success)) !important; }
.text--danger { color: hsl(var(--danger)) !important; }
.text--warning { color: hsl(var(--warning)) !important; }
.text--info { color: hsl(var(--info)) !important; }
.text--dark { color: hsl(var(--dark)) !important; }
.text--muted { color: hsl(var(--muted)) !important; }
.text--body { color: hsl(var(--body)) !important; }
.text--base { color: hsl(var(--base)) !important; }

.bg--primary { background-color: hsl(var(--primary)) !important; }
.bg--secondary { background-color: hsl(var(--secondary)) !important; }
.bg--success { background-color: hsl(var(--success)) !important; }
.bg--danger { background-color: hsl(var(--danger)) !important; }
.bg--warning { background-color: hsl(var(--warning)) !important; }
.bg--info { background-color: hsl(var(--info)) !important; }
.bg--dark { background-color: hsl(var(--dark)) !important; }
.bg--light { background-color: hsl(var(--light)) !important; }
.bg--base { background-color: hsl(var(--base)) !important; }

.border--primary { border-color: hsl(var(--primary)) !important; }
.border--secondary { border-color: hsl(var(--secondary)) !important; }
.border--success { border-color: hsl(var(--success)) !important; }
.border--danger { border-color: hsl(var(--danger)) !important; }
.border--warning { border-color: hsl(var(--warning)) !important; }
.border--info { border-color: hsl(var(--info)) !important; }
.border--dark { border-color: hsl(var(--dark)) !important; }
.border--white,
.border--light { border-color: #ffffff !important; }

/* =========================
   PADDING / SPACING UTILITIES
   ========================= */

/* Section spacing helpers (clamp for responsive rhythm) */
.pt-120 { padding-top: clamp(60px, 6vw, 120px); }
.pt-100 { padding-top: clamp(50px, 6vw, 100px); }
.pt-80  { padding-top: clamp(40px, 6vw, 80px); }
.pt-60  { padding-top: clamp(30px, 6vw, 60px); }
.pt-50  { padding-top: clamp(25px, 6vw, 50px); }

.pb-120 { padding-bottom: clamp(60px, 6vw, 120px); }
.pb-100 { padding-bottom: clamp(50px, 6vw, 100px); }
.pb-80  { padding-bottom: clamp(40px, 6vw, 80px); }
.pb-60  { padding-bottom: clamp(30px, 6vw, 60px); }
.pb-50  { padding-bottom: clamp(25px, 6vw, 50px); }

/* =========================
   BUTTONS
   ========================= */

/* Minimal Domaintico button set (safe defaults; UI layer may override) */
.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 10px 14px;
  border-radius: var(--dm-btn-radius, 14px);
  border: 1px solid transparent;
  font-weight: 900;
  line-height: 1.1;
  cursor: pointer;
  background: var(--dm-primary, #2563EB);
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.dm-btn:hover {
  background: var(--dm-primary-hover, var(--dm-primary, #2563EB));
  color: #fff;
}

.dm-btn:active {
  transform: translateY(1px);
}

.dm-btn:disabled,
.dm-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.dm-btn-ghost {
  background: color-mix(in srgb, var(--dm-primary, #2563EB) 10%, transparent);
  border-color: color-mix(in srgb, var(--dm-primary, #2563EB) 25%, transparent);
  color: var(--dm-primary, #2563EB);
}

.dm-btn-ghost:hover {
  background: color-mix(in srgb, var(--dm-primary, #2563EB) 14%, transparent);
}

.dm-btn-block {
  width: 100%;
}

.dm-btn-sm {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 12px;
}

/* =========================
   HEADER
   ========================= */

/* Main header container */
body.dm-app .dm-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* Optional elevated state */
body.dm-app .dm-header.sticky {
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

body.dm-app .dm-header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  /* Keep vertical spacing but do NOT override the container's horizontal padding.
     (Fixes mobile edge-to-edge header on iPhone Safari / Android Chrome.) */
  padding-top: 14px;
  padding-bottom: 10px;
}

/* Brand */
body.dm-app .dm-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--dm-text, #0F172A);
  font-weight: 900;
}

body.dm-app .dm-brand-logo {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
}

body.dm-app .dm-brand-name {
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
}

body.dm-app .dm-brand--small .dm-brand-name {
  font-size: 16px;
}

/* Desktop nav */
body.dm-app .dm-nav {
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

body.dm-app .dm-nav__link {
  color: #0F172A !important;
  font-weight: 900;
  padding: 10px 4px;
  position: relative;
  text-decoration: none;
}

body.dm-app .dm-nav__link:hover {
  color: var(--dm-primary, #2563EB) !important;
}

body.dm-app .dm-nav__link.is-active {
  color: #0F172A !important;
}

body.dm-app .dm-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  background: var(--dm-primary, #2563EB);
  border-radius: 999px;
}

/* Optional header CTAs */
body.dm-app .dm-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--dm-btn-radius, 14px);
  font-weight: 900;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

body.dm-app .dm-nav__cta:active {
  transform: translateY(1px);
}

body.dm-app .dm-nav__cta--primary {
  background: var(--dm-primary, #2563EB);
  border-color: var(--dm-primary, #2563EB);
  color: #fff !important;
}

body.dm-app .dm-nav__cta--primary:hover {
  background: var(--dm-primary-hover, var(--dm-primary, #2563EB));
  border-color: var(--dm-primary-hover, var(--dm-primary, #2563EB));
}

body.dm-app .dm-nav__cta--outline {
  background: color-mix(in srgb, var(--dm-primary, #2563EB) 10%, transparent);
  border-color: color-mix(in srgb, var(--dm-primary, #2563EB) 25%, transparent);
  color: var(--dm-primary, #2563EB) !important;
}

body.dm-app .dm-nav__cta--outline:hover {
  background: color-mix(in srgb, var(--dm-primary, #2563EB) 14%, transparent);
}

/* Dropdown menus (header) */
body.dm-app .dm-header .dropdown-menu {
  border-radius: 18px !important;
  border: 1px solid rgba(2, 6, 23, 0.10) !important;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.14);
  padding: 10px !important;
  min-width: 240px;
}

body.dm-app .dm-header .dropdown-divider {
  margin: 8px 10px;
  border-top-color: rgba(2, 6, 23, 0.08) !important;
}

body.dm-app .dm-header .dropdown-menu a,
body.dm-app .dm-header .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  border-radius: 14px;
  font-weight: 900 !important;
  font-size: 14px !important;
  color: rgba(15, 23, 42, 0.92) !important;
  text-decoration: none !important;
}

body.dm-app .dm-header .dropdown-menu a:hover,
body.dm-app .dm-header .dropdown-item:hover {
  background: color-mix(in srgb, var(--dm-primary, #2563EB) 10%, transparent) !important;
  color: rgba(15, 23, 42, 0.96) !important;
}

body.dm-app .dm-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Mobile actions wrapper */
body.dm-app .dm-mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Keep brand on the left and mobile actions (cart/user/menu) on the right. */
  margin-left: auto;
}

/* Icon buttons */
body.dm-app .dm-icon-btn {
  height: 44px;
  width: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #fff;
  text-decoration: none;
  color: var(--dm-text, #0F172A);
}

body.dm-app .dm-icon-btn:hover {
  background: rgba(15, 23, 42, 0.04);
}

body.dm-app .dm-icon-btn:focus {
  outline: none;
}

body.dm-app .dm-icon-btn__svg {
  display: block;
}

/* Cart badge */
body.dm-app .dm-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  background: var(--dm-primary, #2563EB);
  color: #fff;
}

/* Ensure the HTML [hidden] attribute always wins (author CSS can otherwise override UA styles). */
body.dm-app .dm-cart-badge[hidden]{
  display: none !important;
}

/* Desktop cart badge: show as a corner bubble (mobile already uses dm-cart-badge--icon). */
body.dm-app .dm-cart-btn{
  position: relative;
}

body.dm-app .dm-cart-btn .dm-cart-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 11px;
  line-height: 18px;
  border: 2px solid #fff;
  box-shadow: 0 8px 22px rgba(2,6,23,.12);
}

/* Mobile cart button + badge positioning */
body.dm-app .dm-mobile-cart-btn {
  position: relative;
  text-decoration: none;
}

body.dm-app .dm-cart-badge--icon {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 18px;
  border: 2px solid #fff;
}

/* ------------------------------------------------------------
   Mobile drawer (v2)
------------------------------------------------------------ */

body.dm-no-scroll {
  overflow: hidden;
}

body.dm-app .dm-mobile-nav.dm-mobile-nav--v2 {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: block;
  opacity: 1;
  pointer-events: none;
}

body.dm-app .dm-mobile-nav.dm-mobile-nav--v2.is-open {
  pointer-events: auto;
}

body.dm-app .dm-mobile-nav.dm-mobile-nav--v2[hidden] {
  display: none !important;
}

body.dm-app .dm-mobile-nav--v2 .dm-mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  transition: opacity 180ms ease;
}

body.dm-app .dm-mobile-nav--v2 .dm-mobile-nav__panel {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  left: auto;

  width: min(92vw, 360px);
  max-height: calc(100% - (max(24px, env(safe-area-inset-top)) + env(safe-area-inset-bottom)));

  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  transform: translateX(120%);
  transition: transform 220ms ease;
  outline: none;
}

body.dm-app .dm-mobile-nav--v2.is-open .dm-mobile-nav__backdrop {
  opacity: 1;
}

body.dm-app .dm-mobile-nav--v2.is-open .dm-mobile-nav__panel {
  transform: translateX(0);
}

body.dm-app .dm-mobile-nav--v2 .dm-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

body.dm-app .dm-mobile-nav--v2 .dm-brand--small .dm-brand-logo {
  width: 32px;
  height: 32px;
}

body.dm-app .dm-mobile-nav--v2 .dm-mobile-nav__body {
  padding: 10px 14px 14px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

body.dm-app .dm-mobile-nav--v2 .dm-mobile-link {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 700;
  font-size: 16px;
}


/* Mobile menu buttons (normalize <button> look on iOS/Android) */
body.dm-app .dm-mobile-nav--v2 button.dm-mobile-link{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* Active state */
body.dm-app .dm-mobile-nav--v2 .dm-mobile-link.is-active{
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

/* Section toggles (Products/Services) */
body.dm-app .dm-mobile-nav--v2 .dm-mobile-link--toggle{
  justify-content: space-between;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.03);
  font-weight: 900;
}

body.dm-app .dm-mobile-nav--v2 .dm-mobile-link--toggle::after{
  content: '';
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-inline-start: 10px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.293 8.293 12 14l5.707-5.707 1.414 1.414L12 16.828 4.879 9.707z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.293 8.293 12 14l5.707-5.707 1.414 1.414L12 16.828 4.879 9.707z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.65;
  transition: transform 160ms ease;
}

body.dm-app .dm-mobile-nav--v2 .dm-mobile-link--toggle[aria-expanded="true"]::after{
  transform: rotate(180deg);
}

body.dm-app .dm-mobile-nav--v2 .dm-mobile-link--toggle.is-active{
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.28);
  color: #2563eb;
}


/* Submenu items (inside collapse) */
body.dm-app .dm-mobile-nav--v2 .collapse .dm-mobile-link{
  padding: 10px 10px;
  font-size: 15px;
  font-weight: 700;
}
body.dm-app .dm-mobile-nav--v2 .dm-mobile-link:hover {
  background: rgba(37, 99, 235, 0.07);
  color: #2563eb;
}

body.dm-app .dm-mobile-nav--v2 .dm-mobile-nav__actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 10px;
}

body.dm-app .dm-mobile-nav--v2 .dm-btn-block {
  width: 100%;
  justify-content: center;
}

@supports (padding: max(0px)) {
  body.dm-app .dm-mobile-nav--v2 .dm-mobile-nav__panel {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dm-app .dm-mobile-nav--v2 .dm-mobile-nav__backdrop,
  body.dm-app .dm-mobile-nav--v2 .dm-mobile-nav__panel {
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   Cart drawer (right-side panel) — Add-on
------------------------------------------------------------ */

.dm-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1070;
  display: block;
  opacity: 1;
  pointer-events: none;
}

.dm-cart-drawer.is-open {
  pointer-events: auto;
}

.dm-cart-drawer[hidden] {
  display: none !important;
}

.dm-cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  transition: opacity 180ms ease;
}

.dm-cart-drawer__panel {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  width: min(92vw, 420px);
  max-height: calc(100% - (max(24px, env(safe-area-inset-top)) + env(safe-area-inset-bottom)));
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(120%);
  transition: transform 220ms ease;
  outline: none;
}

.dm-cart-drawer.is-open .dm-cart-drawer__backdrop {
  opacity: 1;
}

.dm-cart-drawer.is-open .dm-cart-drawer__panel {
  transform: translateX(0);
}

.dm-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.dm-cart-drawer__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}

.dm-cart-drawer__body {
  padding: 10px 14px 14px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Drawer states */
.dm-cart-drawer__loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 28px 10px;
  color: rgba(15,23,42,.70);
  font-weight: 800;
}

.dm-cart-drawer__summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding: 0 2px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  margin-bottom: 12px;
}

.dm-cart-drawer__count{ font-weight: 950; }
.dm-cart-drawer__note{ font-size:12px; opacity:.75; margin-top:2px; }

.dm-cart-drawer__empty{
  padding: 18px 8px;
  text-align:center;
}

.dm-cart-drawer__empty-ic{ font-size: 30px; opacity:.85; margin-bottom:10px; }
.dm-cart-drawer__empty-title{ margin:0 0 6px; font-size:18px; font-weight: 950; }
.dm-cart-drawer__empty-sub{ margin:0 0 14px; opacity:.80; }

.dm-cart-drawer__items{
  list-style:none;
  padding:0;
  margin: 0 0 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dm-cart-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background: rgba(15,23,42,.02);
}

.dm-cart-item__domain{ font-weight: 950; line-height:1.2; word-break:break-word; }
.dm-cart-item__meta{
  font-size:12px;
  opacity:.78;
  font-weight: 800;
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.dm-cart-item__right{ display:flex; align-items:center; gap:10px; }
.dm-cart-item__price{ font-weight: 950; white-space:nowrap; }
.dm-cart-item__price .unit{ font-weight: 800; opacity:.85; font-size:12px; margin-inline-start:2px; }

.dm-cart-item__remove{
  width:34px;
  height:34px;
  border-radius: 10px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(15,23,42,.75);
}

.dm-cart-item__remove:hover{ background: rgba(239,68,68,.08); color:#dc2626; }

.dm-cart-drawer__totals{
  border-top:1px solid rgba(15,23,42,.08);
  padding-top: 12px;
  margin-top: 6px;
}

.dm-cart-drawer__total-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight: 950;
}

.dm-cart-drawer__actions{
  margin-top: 12px;
  display:grid;
  gap:10px;
}


.dm-cart-drawer__spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.18);
  border-top-color: rgba(37, 99, 235, 0.90);
  animation: dmSpin 0.8s linear infinite;
}

@keyframes dmSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------
   Cart page (full) — Add-on
------------------------------------------------------------ */

.dm-cart-page .dm-cart-page-item{
  align-items: stretch;
}

.dm-cart-page .dm-cart-page__domain{
  word-break: break-word;
}

.dm-cart-page .dm-cart-page__domain-icon{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 10px;
  background: color-mix(in srgb, var(--dm-primary, #2563EB) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--dm-primary, #2563EB) 22%, rgba(2,6,23,.10));
  color: var(--dm-primary, #2563EB);
}

.dm-cart-page .dm-cart-page__domain-icon i{
  font-size: 18px;
  line-height: 1;
}

/* Price block (always visible, wraps nicely on mobile) */
.dm-cart-page .dm-cart-page__price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  white-space:nowrap;
}

@media (max-width: 575.98px){
  .dm-cart-page .dm-cart-page__price{
    align-items:flex-start;
    width:100%;
    margin-top: 6px;
  }
}

.dm-cart-page .dm-cart-page__opts .form-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

/*
  Cart item details (Options + Breakdown)
  Collapsible for a shorter / cleaner mobile cart.
*/
.dm-cart-page details.dm-cart-page__details > summary,
.dm-cart-page details.dm-cart-page__detailsSummary{
  cursor: pointer;
  user-select: none;
  font-weight: 900;
  color: rgba(15,23,42,.78);
  font-size: 13px;
  display:flex;
  align-items:center;
  gap: 8px;
}

.dm-cart-page details.dm-cart-page__details > summary::-webkit-details-marker{
  display:none;
}

.dm-cart-page details.dm-cart-page__details > summary::before{
  content:'▸';
  display:inline-block;
  transition: transform 160ms ease;
  opacity: .75;
}

.dm-cart-page details.dm-cart-page__details[open] > summary::before{
  transform: rotate(90deg);
}

.dm-cart-page .dm-cart-page__detailsBody{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.08);
}

.dm-cart-page .dm-cart-page__kv{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px dashed rgba(15,23,42,.14);
}

.dm-cart-page .dm-cart-page__kv:last-child{
  border-bottom: 0;
}

@media (min-width: 992px){
  .dm-cart-page .dm-cart-summary{
    position: sticky;
    top: 92px;
  }
}

/* Mobile sticky summary bar */
.dm-cart-mobile-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(15,23,42,.10);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}

.dm-cart-mobile-bar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
}

.dm-cart-mobile-bar__label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}

.dm-cart-mobile-bar__value{
  font-weight: 950;
  font-size: 18px;
  line-height: 1.1;
}

.dm-cart-mobile-bar__value .unit{
  font-size: 12px;
  font-weight: 800;
  opacity: .75;
  margin-inline-start: 4px;
}

.dm-cart-mobile-bar__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 6px;
}

.dm-cart-mobile-bar__link{
  font-size: 13px;
  font-weight: 800;
  color: rgba(37,99,235,.92);
  text-decoration: none;
}
.dm-cart-mobile-bar__link:hover{ text-decoration: underline; text-underline-offset: 2px; }

/* Make room for the fixed bar on mobile */
@media (max-width: 991.98px){
  .dm-cart-page.dm-cart-page--has-sticky{
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 992px){
  .dm-cart-mobile-bar{ display:none; }
  .dm-cart-page.dm-cart-page--has-sticky{ padding-bottom: 0; }
}

/* Small interaction reliability helpers */
.dm-app .overlay { pointer-events: none; }
.dm-app .overlay.active,
.dm-app .overlay.show-overlay { pointer-events: auto; }

.dm-app .modal-backdrop:not(.show),
.dm-app .offcanvas-backdrop:not(.show) { pointer-events: none; }

.dm-app :is(a, button, [role="button"], input[type="submit"]) {
  -webkit-tap-highlight-color: rgba(37, 99, 235, 0.18);
}

/* =========================
   FOOTER
   ========================= */

body.dm-app .dm-site-footer {
  background: #0B1220;
  color: #fff;
  margin-top: 40px;
}

body.dm-app .dm-footer-wrap {
  /* Keep vertical spacing but do NOT override the container's horizontal padding.
     (Fixes footer edge-to-edge on mobile.) */
  padding-top: 34px;
  padding-bottom: 34px;
}

body.dm-app .dm-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body.dm-app .dm-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: 950;
}

body.dm-app .dm-footer-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}

body.dm-app .dm-footer-name {
  font-size: 18px;
}

body.dm-app .dm-footer-lang__label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}

body.dm-app .dm-footer-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

body.dm-app .dm-footer-title {
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}

body.dm-app .dm-footer-link {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 800;
  padding: 8px 0;
}

body.dm-app .dm-footer-link:hover {
  color: #fff;
}

body.dm-app .dm-footer-bottom {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

body.dm-app .dm-footer-note {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}

body.dm-app .dm-footer-copy {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}

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



/* =========================
   ACCOUNT MENU (USER DROPDOWN)
   ========================= */

/* Ensure any <ul class="dropdown-menu"> never shows bullets */
body.dm-app .dm-header ul.dropdown-menu,
body.dm-app .dm-header ul.dropdown-menu > li {
  list-style: none !important;
}
body.dm-app .dm-header ul.dropdown-menu {
  padding-left: 0 !important;
}
body.dm-app .dm-header ul.dropdown-menu > li::marker {
  content: "" !important;
}


body.dm-app .dm-account-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 260px;
}

body.dm-app .dm-account-menu > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.dm-app .dm-account-menu .dm-account-menu__meta {
  padding: 12px 16px 10px;
}

body.dm-app .dm-account-menu .dm-account-menu__name {
  font-weight: 700;
  color: var(--dm-text, #0f172a);
  font-size: 0.95rem;
  line-height: 1.2;
}

body.dm-app .dm-account-menu .dm-account-menu__email {
  margin-top: 2px;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--dm-muted, #64748b);
  word-break: break-word;
}

body.dm-app .dm-account-menu .dm-account-menu__meta + .dropdown-divider {
  margin-top: 0;
}

body.dm-app .dm-account-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  white-space: nowrap;
}

body.dm-app .dm-account-menu .dropdown-item svg {
  flex: 0 0 auto;
}

body.dm-app .dm-account-menu .dropdown-item:active {
  background: rgba(59, 130, 246, 0.12);
  color: inherit;
}