/* ==============================================================
   KMS Dashboard — Glassy High-Tech Automotive UI
   ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Registered custom properties (enable gradient/shine animation) ── */
@property --db-brd {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.18;
}
@property --db-shine {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -120%;
}
@property --db-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --db-bg:          #f5f5f7;
  --db-bg-punch:    #f5f5f7;   /* solid colour for concave punch-outs */
  --db-card:        #ffffff;
  --db-border:      rgba(220,220,222,.9);
  --db-navy:        #1a2b4a;
  --db-navy-2:      #0d1b35;
  --db-orange:      #ee7b03;
  --db-blue:        #1e5fa8;
  --db-muted:       #4a607e;
  --db-radius:      16px;
  --db-icon-bg:     rgba(232,240,255,.85);
  --db-icon-border: rgba(30,95,168,.18);
  --db-shadow:      0 2px 18px rgba(0,0,0,.055),
                    inset 0 1px 0 rgba(255,255,255,.95);
  --db-shadow-hover:0 24px 64px rgba(238,123,3,.09),
                    0 8px 28px rgba(0,0,0,.1),
                    inset 0 1px 0 rgba(255,255,255,1);
}

/* ============================================================
   PAGE BASE
   ============================================================ */
body.db-page {
  background: #f5f5f7 !important;
  background-attachment: fixed !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--db-navy) !important;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body.db-page *, body.db-page *::before, body.db-page *::after { box-sizing: border-box; }

/* Typography overrides (beats Bootstrap + main_styles) */
body.db-page h1,body.db-page h2,body.db-page h3,
body.db-page h4,body.db-page h5,body.db-page h6 {
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-shadow: none !important;
}
body.db-page h1 { font-size: 36px !important; font-weight: 800 !important; color: var(--db-navy) !important; line-height: 1.18 !important; margin: 0 0 10px !important; }
body.db-page h3 { font-size: 13px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--db-navy) !important; margin: 0 0 8px !important; line-height: 1.3 !important; }
body.db-page h4 { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--db-navy) !important; margin: 0 0 4px !important; line-height: 1.3 !important; }
body.db-page p  { font-size: 13px !important; line-height: 1.65 !important; color: var(--db-muted) !important; margin: 0 !important; text-shadow: none !important; }
body.db-page a  { text-decoration: none !important; }

/* ============================================================
   NAVBAR — glassy white on dashboard
   ============================================================ */
body.db-page .kms_navbar {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 1px 0 rgba(214,224,242,.6), 0 2px 20px rgba(0,0,0,.05) !important;
}
body.db-page .kms_navbar .navbar-nav .nav-link { color: var(--db-navy) !important; font-family: 'Inter',sans-serif !important; font-size: 13px !important; font-weight: 600 !important; }
body.db-page .kms_navbar .navbar-nav .nav-link:hover { color: var(--db-orange) !important; background: rgba(238,123,3,.07) !important; }
body.db-page .kms_navbar .navbar-nav .nav-item.active > .nav-link { color: var(--db-orange) !important; background: rgba(238,123,3,.1) !important; }
body.db-page .kms_lang_btn { background: rgba(243,244,248,.9) !important; border-color: var(--db-border) !important; color: var(--db-navy) !important; }
body.db-page .kms_lang_btn::after { border-top-color: var(--db-navy) !important; }
body.db-page .kms_toggler { border-color: var(--db-border) !important; }
body.db-page .kms_toggler span { background: var(--db-navy) !important; }
body.db-page .kms_navbar .navbar-collapse { background: rgba(255,255,255,.96) !important; border-top: 1px solid var(--db-border) !important; }
body.db-page .kms_login_btn { background: var(--db-orange) !important; color: #fff !important; }
body.db-page #kms-theme-toggle-global { display: none !important; }

/* ============================================================
   PAGE WRAPPER — 90% width
   ============================================================ */
body.db-page .db-wrapper {
  width: 90%;
  margin: 0 auto;
  padding: 28px 0 0;
}

/* ============================================================
   HERO CARD
   ============================================================ */
body.db-page .db-hero {
  border: 2px solid var(--db-orange);
  border-radius: var(--db-radius);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 18px;
  box-shadow:
    0 4px 28px rgba(238,123,3,.06),
    0 2px 8px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,1);
  position: relative;
  overflow: hidden;
}
/* Corner glow */
body.db-page .db-hero::before {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,95,168,.04) 0%, transparent 70%);
  pointer-events: none;
}
body.db-page .db-hero::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238,123,3,.06) 0%, transparent 70%);
  pointer-events: none;
}
body.db-page .db-hero-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
  padding: 36px 44px;
  min-height: 210px;
  position: relative;
  z-index: 1;
}
body.db-page .db-hero-label {
  display: block !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .18em !important; text-transform: uppercase !important;
  color: var(--db-orange) !important; margin: 0 0 10px !important; line-height: 1.4 !important;
}
body.db-page .db-hero-text h1 { font-size: 38px !important; font-weight: 800 !important; color: var(--db-navy) !important; margin: 0 0 10px !important; line-height: 1.15 !important; }
body.db-page .db-hero-text p  { font-size: 14px !important; color: var(--db-muted) !important; margin: 0 !important; line-height: 1.7 !important; max-width: 290px; }
body.db-page .db-hero-car { flex-shrink: 0; max-width: 48%; width: 48%; position: static !important; }
body.db-page .db-hero-car img { width: 100%; height: 210px; object-fit: cover; object-position: center center; display: block; position: static !important; border-radius: 10px; }

/* ============================================================
   GRID SECTION
   ============================================================ */
body.db-page .db-grid-section { display: flex !important; flex-direction: column !important; gap: 0; margin-bottom: 16px; position: relative; }
body.db-page .db-row { display: grid !important; gap: 16px; position: relative; }
body.db-page .db-row-2col { grid-template-columns: 1fr 1fr; z-index: 1;  }
body.db-page .db-row-hub  { grid-template-columns: 1fr 280px 1fr; column-gap: 0; align-items: stretch; z-index: 10; overflow: visible; }

/* ============================================================
   BASE TILE — traveling border glow + shine sweep on hover
   ============================================================ */
body.db-page .db-tile {
  --db-shine: -120%;
  border: 2px solid transparent;
  border-radius: var(--db-radius);
  background:
    /* Internal shine sweep — fires on hover */
    linear-gradient(
      110deg,
      transparent calc(var(--db-shine) - 22%),
      rgba(255,255,255,.58) var(--db-shine),
      transparent calc(var(--db-shine) + 22%)
    ) padding-box,
    /* White card fill — must be an image, not bare color, in non-final layer */
    linear-gradient(#fff 0%, #fff 100%) padding-box,
    /* Traveling blue→orange→blue glow on border */
    conic-gradient(
      from var(--db-ang),
      rgba(30,95,168,.12)  0deg  66deg,
      rgba(30,95,168,.75) 66deg  90deg,
      #ee7b03             90deg 114deg,
      rgba(30,95,168,.75) 114deg 138deg,
      rgba(30,95,168,.12) 138deg 360deg
    ) border-box;
  box-shadow:
    0 1px 3px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.95);
  animation: db-border-spin 8s linear infinite;
  animation-play-state: paused;
  transition:
    --db-shine 0s,
    transform .3s cubic-bezier(.22,.68,0,1.18),
    box-shadow .3s ease;
  cursor: pointer;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: visible;
  color: var(--db-navy) !important;
}
body.db-page .db-tile:visited,
body.db-page .db-tile:active { color: var(--db-navy) !important; text-decoration: none !important; }

body.db-page .db-tile:hover {
  --db-shine: 220%;
  transform: translateY(-5px) scale(1.008);
  box-shadow:
    0 16px 48px rgba(30,95,168,.14),
    0 6px 18px rgba(238,123,3,.12),
    inset 0 1px 0 rgba(255,255,255,1);
  color: var(--db-navy) !important;
  text-decoration: none !important;
  /* Resume the spinning border + accelerate to 1.8s for electric feel */
  animation: db-border-spin 1.8s linear infinite;
  animation-play-state: running;
  transition:
    --db-shine .75s cubic-bezier(.4,0,.2,1),
    transform .3s cubic-bezier(.22,.68,0,1.18),
    box-shadow .3s ease;
}

/* ── Sequential animation delays — one glow travels card to card ── */
body.db-page .db-tile-top-left  { animation-delay:    0s; }
body.db-page .db-tile-top-right { animation-delay:   -1s; }
body.db-page .db-tile-hub-right { animation-delay:   -2s; }
body.db-page .db-tile-bot-right { animation-delay: -3.2s; }
body.db-page .db-tile-wide      { animation-delay: -4.2s; }
body.db-page .db-tile-bot-left  { animation-delay: -5.4s; }
body.db-page .db-tile-hub-left  { animation-delay: -6.6s; }

/* Orange chevron arrow */
body.db-page .db-tile::after {
  content: '›';
  position: absolute !important;
  bottom: 17px !important; right: 20px !important;
  font-size: 26px !important; font-weight: 300 !important;
  color: var(--db-orange) !important;
  line-height: 1 !important;
  transition: transform .3s cubic-bezier(.22,.68,0,1.18), opacity .22s;
  opacity: .55;
}
body.db-page .db-tile:hover::after { transform: translateX(6px); opacity: 1; }

/* Icon pulse on hover */
body.db-page .db-tile:hover .db-tile-icon {
  transform: scale(1.08);
  box-shadow:
    0 6px 20px rgba(30,95,168,.18),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* ============================================================
   CONCAVE CORNER PUNCH-OUTS
   Quarter-circle in page-bg colour at hub-facing corners.
   ============================================================ */

/* Row-1 left tile → concave bottom-right (hub docks here) */
body.db-page .db-tile-top-left::before {
  content: '' !important; position: absolute !important;
  bottom: -2px; right: -2px;
  width: 64px; height: 64px;
  background: var(--db-bg-punch);
  border-top-left-radius: 100%; z-index: 4;
  box-shadow: -1px -1px 0 rgba(220,220,222,.9);
}
/* Row-1 right tile → concave bottom-left (hub docks here) */
body.db-page .db-tile-top-right::before {
  content: '' !important; position: absolute !important;
  bottom: -2px; left: -2px;
  width: 64px; height: 64px;
  background: var(--db-bg-punch);
  border-top-right-radius: 100%; z-index: 4;
  box-shadow: 1px -1px 0 rgba(220,220,222,.9);
}
/* Row-3 left tile → concave top-right (hub docks here) */
body.db-page .db-tile-bot-left::before {
  content: '' !important; position: absolute !important;
  top: -2px; right: -2px;
  width: 64px; height: 64px;
  background: var(--db-bg-punch);
  border-bottom-left-radius: 100%; z-index: 4;
  box-shadow: -1px 1px 0 rgba(220,220,222,.9);
}
/* Row-3 right tile → concave top-left (hub docks here) */
body.db-page .db-tile-bot-right::before {
  content: '' !important; position: absolute !important;
  top: -2px; left: -2px;
  width: 64px; height: 64px;
  background: var(--db-bg-punch);
  border-bottom-right-radius: 100%; z-index: 4;
  box-shadow: 1px 1px 0 rgba(220,220,222,.9);
}
/* Hub-row tiles: small radius on hub-facing edge + circular concave notch */
body.db-page .db-tile-hub-left {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  align-items: center !important;
  padding: 28px 24px !important;
}
body.db-page .db-tile-hub-right {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  align-items: center !important;
  padding: 28px 24px !important;
}
body.db-page .db-tile-hub-left::before {
content: '' !important;
    position: absolute !important;
    right: -150px;
    top: 50%;
    width: 200px;
    height: 200px;
    background: var(--db-bg-punch);
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 7;
    box-shadow: 0 0 0 1px rgba(220, 220, 222, .9);
}
body.db-page .db-tile-hub-right::before {
    content: '' !important;
    position: absolute !important;
    left: -150px;
    top: 50%;
    width: 200px;
    height: 200px;
    background: var(--db-bg-punch);
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 7;
    box-shadow: 0 0 0 1px rgba(220, 220, 222, .9);
}

/* ============================================================
   LARGE TILE
   ============================================================ */
body.db-page .db-tile-lg {
  padding: 32px 28px 58px !important;
  min-height: 310px !important;
  flex-direction: column !important;
}
body.db-page .db-tile-lg .db-tile-icon {
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #edf3fc 0%, #dce8f8 100%) !important;
  border: 1.5px solid rgba(30,95,168,.24) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-bottom: 22px !important; flex-shrink: 0 !important;
  position: relative !important;
  transition: transform .3s cubic-bezier(.22,.68,0,1.18), box-shadow .25s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(30,95,168,.08),
    0 2px 10px rgba(30,95,168,.13);
}
body.db-page .db-tile-lg .db-tile-icon svg {
  width: 24px !important; height: 24px !important;
  display: block !important; position: static !important;
  filter: drop-shadow(0 1px 2px rgba(30,95,168,.18));
}
body.db-page .db-tile-lg h3 { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--db-navy) !important; margin: 0 0 8px !important; }
body.db-page .db-tile-lg p  { font-size: 13px !important; color: var(--db-muted) !important; margin: 0 !important; line-height: 1.6 !important; }

/* ============================================================
   COMPACT TILE (hub row + row 3)
   ============================================================ */
body.db-page .db-tile-sm {
  padding: 24px 22px 44px !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  min-height: 140px !important;
}
body.db-page .db-tile-sm .db-tile-icon {
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #edf3fc 0%, #dce8f8 100%) !important;
  border: 1.5px solid rgba(30,95,168,.24) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; position: relative !important;
  transition: transform .3s cubic-bezier(.22,.68,0,1.18), box-shadow .25s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(30,95,168,.08),
    0 2px 10px rgba(30,95,168,.1);
}
body.db-page .db-tile-sm .db-tile-icon svg {
  display: block !important; position: static !important;
  filter: drop-shadow(0 1px 2px rgba(30,95,168,.15));
}
body.db-page .db-tile-sm .db-tile-content { flex: 1 !important; min-width: 0; display: block !important; position: static !important; }
body.db-page .db-tile-sm h4 { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .13em !important; text-transform: uppercase !important; color: var(--db-navy) !important; margin: 0 0 4px !important; }
body.db-page .db-tile-sm p  { font-size: 12px !important; color: var(--db-muted) !important; margin: 0 !important; line-height: 1.55 !important; }

/* ============================================================
   WIDE TILE
   ============================================================ */
body.db-page .db-tile-wide {
  flex-direction: row !important; align-items: center !important;
  padding: 22px 28px !important; gap: 20px !important;
  margin-bottom: 18px !important;
  min-height: 88px !important;
  max-height: 100px;
}
body.db-page .db-tile-wide .db-tile-icon {
  width: 54px !important; height: 54px !important; border-radius: 50% !important;
  background: linear-gradient(145deg, #edf3fc 0%, #dce8f8 100%) !important;
  border: 1.5px solid rgba(30,95,168,.24) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; position: relative !important;
  transition: transform .3s cubic-bezier(.22,.68,0,1.18), box-shadow .25s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(30,95,168,.08),
    0 2px 10px rgba(30,95,168,.13);
}
body.db-page .db-tile-wide .db-tile-icon svg { display: block !important; position: static !important; }
body.db-page .db-tile-wide .db-tile-content { flex: 1 !important; position: static !important; }
body.db-page .db-tile-wide .db-tile-content h4 { font-size: 13px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--db-navy) !important; margin: 0 0 4px !important; }
body.db-page .db-tile-wide .db-tile-content p  { font-size: 13px !important; color: var(--db-muted) !important; margin: 0 !important; }

/* ── Bedrijfsgegevens wide tile (3-column) ─────────────────── */
body.db-page .db-biz-tile {
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  cursor: default !important;
  min-height: 100px !important;
  max-height: none !important;
  overflow: hidden !important;
}
body.db-page .db-biz-tile::after { display: none !important; }

.db-biz-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 24px;
  gap: 5px;
  position: relative;
  transition: background .2s ease;
}
.db-biz-col::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(30,95,168,.03) 100%);
  opacity: 0;
  transition: opacity .2s;
}
.db-biz-col:hover::before { opacity: 1; }

.db-biz-col-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(145deg, #edf3fc, #dce8f8);
  border: 1.5px solid rgba(30,95,168,.22);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 8px rgba(30,95,168,.12);
  transition: transform .2s cubic-bezier(.22,.68,0,1.18), box-shadow .2s;
}
.db-biz-col:hover .db-biz-col-icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(30,95,168,.2);
}

.db-biz-col-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--db-muted);
  line-height: 1.2;
}
.db-biz-col-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--db-navy);
  letter-spacing: .06em;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  word-break: break-all;
}
.db-biz-col-sub {
  font-size: 10px;
  color: var(--db-muted);
  opacity: .65;
  line-height: 1.3;
}

.db-biz-divider {
  width: 1px;
  flex-shrink: 0;
  align-self: stretch;
  background: linear-gradient(to bottom, transparent 10%, var(--db-border) 35%, var(--db-border) 65%, transparent 90%);
}

/* ── Hub orbit hot-arc (orange arc on hover) ───────────────── */
body.db-page .db-hub-orbit-hot {
  position: absolute !important;
  width: 328px; height: 328px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(0deg);
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(
    from -50deg,
    transparent       0deg,
    rgba(238,123,3,.0)  15deg,
    rgba(238,123,3,.3)  35deg,
    rgba(238,123,3,.7)  50deg,
    rgba(238,123,3,.7)  55deg,
    rgba(238,123,3,.3)  70deg,
    rgba(238,123,3,.0)  90deg,
    transparent        105deg,
    transparent        360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), white calc(100% - 4px));
  mask:         radial-gradient(farthest-side, transparent calc(100% - 4px), white calc(100% - 4px));
  opacity: 0;
  transition: opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1);
  mix-blend-mode: multiply;
}

/* ── Hub symbol pointer transition ────────────────────────── */
body.db-page .db-hub-symbol {
  transition: transform .5s cubic-bezier(.22,1,.36,1) !important;
}

/* sps search modal */
#sps-overlay {
  opacity: 0;
  transition: opacity .3s ease;
}

/* ============================================================
   PORTAL TILE  (dark navy, orange accent)
   ============================================================ */
body.db-page .db-tile-portal {
  background: linear-gradient(145deg, rgba(26,43,74,.95) 0%, rgba(13,27,53,.97) 100%) !important;
  border-color: rgba(30,95,168,.4) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 20px rgba(13,27,53,.2), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.db-page .db-tile-portal:hover {
  border-color: rgba(238,123,3,.6) !important;
  box-shadow: 0 20px 60px rgba(13,27,53,.25), 0 8px 24px rgba(238,123,3,.08), inset 0 1px 0 rgba(255,255,255,.08) !important;
  background: linear-gradient(145deg, rgba(30,50,87,.96) 0%, rgba(17,31,60,.98) 100%) !important;
}
body.db-page .db-tile-portal h4,
body.db-page .db-tile-portal p { color: rgba(255,255,255,.85) !important; }
body.db-page .db-tile-portal .db-tile-icon {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}
body.db-page .db-tile-portal::after { color: var(--db-orange) !important; }
/* Portal concave corner needs dark bg override so it blends to page bg */
body.db-page .db-tile-bot-right.db-tile-portal::before { background: var(--db-bg-punch); }

/* ============================================================
   HUB — mechanical high-tech centre ring
   ============================================================ */
body.db-page .db-hub {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 10;
  align-self: center !important;
  padding: 24px 0 !important;
}

/* Vertical connector going UP into row-1 */
body.db-page .db-hub::before {
  content: '';
  position: absolute !important;
  left: 50%; top: -36px;
  width: 2px; height: 38px;
  background: linear-gradient(to top, rgba(30,95,168,.5), transparent);
  transform: translateX(-50%);
  z-index: 12;
}
/* Vertical connector going DOWN into row-3 */
body.db-page .db-hub::after {
  content: '';
  position: absolute !important;
  left: 50%; bottom: -36px;
  width: 2px; height: 38px;
  background: linear-gradient(to bottom, rgba(30,95,168,.5), transparent);
  transform: translateX(-50%);
  z-index: 12;
}

/* OUTER FLYWHEEL GEAR — clockwise, translate baked into keyframe */
body.db-page .db-hub-gear-outer {
  position: absolute !important;
  width: 330px; height: 330px;
  top: 50%; left: 50%;
  animation: db-gear-outer-cw 36s linear infinite;
  z-index: 9;
  pointer-events: none;
}
/* MID GEAR — counter-clockwise, translate baked into keyframe */
body.db-page .db-hub-gear-mid {
  position: absolute !important;
  width: 290px; height: 290px;
  top: 50%; left: 50%;
  animation: db-gear-mid-ccw 22s linear infinite;
  z-index: 9;
  pointer-events: none;
}

/* MAIN CONIC ARC RING */
body.db-page .db-hub-ring {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  /* Machined brushed-metal ring */
  background:
    repeating-conic-gradient(
      rgba(255,255,255,.06) 0deg 3deg,
      transparent 3deg 6deg
    ),
    radial-gradient(circle at 50% 50%, #dde4f0 0%, #c8d2e3 100%);
  position: relative !important;
  z-index: 8;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(30,95,168,.1),
    0 8px 40px rgba(30,95,168,.14),
    inset 0 2px 4px rgba(255,255,255,.6),
    inset 0 -2px 4px rgba(0,0,0,.06);
  animation: db-hub-breathe 5s ease-in-out infinite;
}

/* Blue arc ring — slowly rotates */
body.db-page .db-hub-ring::before {
  content: '';
  position: absolute !important;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 220deg,
    #1e5fa8  0deg 200deg,
    #b8c8de 200deg 218deg,
    #e2e8f0 218deg 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), white calc(100% - 14px));
  mask:         radial-gradient(farthest-side, transparent calc(100% - 14px), white calc(100% - 14px));
  animation: db-hub-arc 16s linear infinite;
}

/* ring::after replaced by .db-hub-gear-mid SVG */
body.db-page .db-hub-ring::after { display: none; }

/* INNER CIRCLE — machined aluminium face */
body.db-page .db-hub-inner {
  width: 224px !important;
  height: 224px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at 35% 28%, #ffffff 0%, #eef3fb 42%, #dce8f6 100%) !important;
  border: 1.5px solid rgba(30,95,168,.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    inset 0 5px 16px rgba(255,255,255,.95),
    inset 0 -5px 16px rgba(0,0,0,.07),
    inset 0 0 0 1px rgba(30,95,168,.05),
    0 6px 36px rgba(30,95,168,.16) !important;
  z-index: 9;
  position: relative !important;
}

/* db-hub-inner-ring replaced by .db-hub-compass-svg */
body.db-page .db-hub-inner-ring { display: none; }

/* COMPASS SVG — fills inner circle, needle rotates via JS */
body.db-page .db-hub-compass-svg {
  position: absolute !important;
  inset: 0;
  width: 100% !important; height: 100% !important;
  z-index: 3;
  pointer-events: none;
}
body.db-page .db-cmp-cardinal {
  font-size: 9px;
  font-weight: 800;
  fill: rgba(30,95,168,.75);
  font-family: 'Inter','Segoe UI',sans-serif;
  letter-spacing: .04em;
}
body.db-page .db-cmp-n { fill: #1e5fa8; font-size: 10px; }
body.db-page .db-cmp-inter {
  font-size: 6.5px;
  font-weight: 600;
  fill: rgba(30,95,168,.45);
  font-family: 'Inter','Segoe UI',sans-serif;
}
body.db-page .db-compass-needle {
  transform-origin: 112px 112px;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}

/* Compass tap-hint — inside db-hub-inner, bottom-center */
body.db-page .db-compass-hint {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  background: rgba(30,95,168,.78);
  color: #fff;
  font-size: 8px; font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 9px 3px 7px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  display: none;
  gap: 4px; align-items: center;
}
@media (pointer: coarse) {
  body.db-page .db-compass-hint { display: flex; }
}
body.db-page .db-compass-hint.db-hint-granted { display: none !important; }

/* Logo — 140px mobile, 210px desktop */
body.db-page .db-hub-symbol {
  width: 140px !important;
  height: 140px !important;
  object-fit: contain;
  display: block;
  position: relative !important;
  z-index: 4;
  filter: drop-shadow(0 2px 12px rgba(238,123,3,.42)) drop-shadow(0 0 5px rgba(238,123,3,.18));
}
@media (min-width: 768px) {
  body.db-page .db-hub-symbol {
    width: 210px !important;
    height: 210px !important;
  }
}

/* ============================================================
   STATUS BAR
   ============================================================ */
body.db-page .db-statusbar {
  background: #ffffff;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 18px 36px;
  box-shadow: var(--db-shadow);
  margin-bottom: 18px;
}
body.db-page .db-statusbar-item {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  text-align: center !important; gap: 10px;
  flex: 1; padding: 0 20px !important; position: static !important;
}
body.db-page .db-statusbar-item + .db-statusbar-item {
  padding-left: 28px;
  border-left: 1px solid var(--db-border);
}
body.db-page .db-statusbar-icon {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--db-icon-border);
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0; color: var(--db-blue);
  background: var(--db-icon-bg);
  position: relative !important;
}
body.db-page .db-statusbar-icon svg { display: block !important; position: static !important; }
body.db-page .db-statusbar-label {
  display: block !important; font-size: 9px !important; font-weight: 700 !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  color: var(--db-muted) !important; margin-bottom: 3px !important; line-height: 1.2 !important;
}
body.db-page .db-statusbar-value {
  display: block !important; font-size: 15px !important; font-weight: 700 !important;
  color: var(--db-navy) !important; line-height: 1.2 !important;
  letter-spacing: -.01em !important;
}
body.db-page .db-statusbar-value a { color: var(--db-navy) !important; text-decoration: none !important; }

/* Pulsing live indicator on clock icon */
body.db-page .db-statusbar-item:first-child .db-statusbar-icon::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--db-orange);
  box-shadow: 0 0 0 0 rgba(238,123,3,.5);
  animation: db-pulse 2s ease-out infinite;
}
@keyframes db-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(238,123,3,.6); }
  70%  { box-shadow: 0 0 0 7px rgba(238,123,3,0); }
  100% { box-shadow: 0 0 0 0 rgba(238,123,3,0); }
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes db-border-spin {
  /* Drives the traveling blue→orange border glow on every card */
  to { --db-ang: 360deg; }
}
@keyframes db-orbit-ccw {
  to { transform: translate(-50%,-50%) rotate(-360deg); }
}
/* Gear SVG animations — translate(-50%,-50%) baked in so centering never drifts */
@keyframes db-gear-outer-cw {
  from { transform: translate(-50%,-50%) rotate(0deg);    }
  to   { transform: translate(-50%,-50%) rotate(360deg);  }
}
@keyframes db-gear-mid-ccw {
  from { transform: translate(-50%,-50%) rotate(0deg);    }
  to   { transform: translate(-50%,-50%) rotate(-360deg); }
}
@keyframes db-rotate-ccw {
  /* Pure counter-rotation — for elements already positioned without translate */
  to { transform: rotate(-360deg); }
}
@keyframes db-hub-arc {
  to { transform: rotate(360deg); }
}
@keyframes db-hub-breathe {
  0%,100% {
    box-shadow:
      0 0 0 1px rgba(30,95,168,.1),
      0 8px 40px rgba(30,95,168,.14),
      inset 0 2px 4px rgba(255,255,255,.6),
      inset 0 -2px 4px rgba(0,0,0,.06);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(30,95,168,.06),
      0 8px 56px rgba(30,95,168,.22),
      inset 0 2px 4px rgba(255,255,255,.6),
      inset 0 -2px 4px rgba(0,0,0,.06);
  }
}

/* ============================================================
   FLOATING THEME TOGGLE  (other pages — not shown on dashboard)
   ============================================================ */
#kms-theme-toggle-global {
  position: fixed; bottom: 22px; right: 22px; z-index: 99999;
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(26,43,74,.9); backdrop-filter: blur(10px);
  color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
  transition: all .2s; font-family: 'Inter',sans-serif; letter-spacing: .03em;
}
#kms-global-dot {
  width: 22px; height: 13px; border-radius: 7px;
  background: rgba(255,255,255,.2);
  position: relative !important; flex-shrink: 0;
  display: inline-block !important; transition: background .2s;
}
#kms-global-dot-inner {
  position: absolute !important; top: 2.5px; left: 2.5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; display: block !important; transition: transform .2s;
}

/* ============================================================
   GLOBAL THEME OVERRIDES  (body.theme-dashboard on all pages)
   ============================================================ */
body.theme-dashboard {
  background: #f5f5f7 !important;
  font-family: 'Inter','Poppins',sans-serif !important;
}
body.theme-dashboard .kms_navbar {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 1px 0 rgba(214,224,242,.6), 0 2px 20px rgba(0,0,0,.05) !important;
}
body.theme-dashboard .kms_navbar .navbar-nav .nav-link { color: var(--db-navy) !important; font-size: 13px; font-weight: 600; }
body.theme-dashboard .kms_navbar .navbar-nav .nav-link:hover { color: var(--db-orange) !important; background: rgba(238,123,3,.07) !important; }
body.theme-dashboard .kms_navbar .navbar-nav .nav-item.active > .nav-link { color: var(--db-orange) !important; background: rgba(238,123,3,.1) !important; }
body.theme-dashboard .kms_lang_btn { background: rgba(243,244,248,.9) !important; border-color: var(--db-border) !important; color: var(--db-navy) !important; }
body.theme-dashboard .kms_toggler { border-color: var(--db-border) !important; }
body.theme-dashboard .kms_toggler span { background: var(--db-navy) !important; }
body.theme-dashboard .kms_navbar .navbar-collapse { background: rgba(255,255,255,.96) !important; border-top: 0px solid #FFF !important; }
body.theme-dashboard .page_banner,
body.theme-dashboard .page-banner { background: linear-gradient(120deg, #ffffff 0%, #2565b3 60%, #008abb 100%) !important; }
body.theme-dashboard .card,
body.theme-dashboard .assortiment_card { border-radius: var(--db-radius) !important; box-shadow: var(--db-shadow) !important; border: 1px solid var(--db-border) !important; }
body.theme-dashboard footer,
body.theme-dashboard .footer { background: #f4f4f4 !important; }
body.theme-dashboard h1,body.theme-dashboard h2,
body.theme-dashboard h3,body.theme-dashboard h4 { font-family: 'Inter',sans-serif !important; }

/* ============================================================
   REPARATIE FINDER — embedded in first tile
   ============================================================ */
body.db-page .db-finder-tile {
  cursor: default !important;
  padding: 24px 24px 24px !important;
  min-height: 360px !important;
}
body.db-page .db-finder-tile::after { display: none !important; }

body.db-page .db-finder-hd {
  display: flex !important;
  align-items: center !important;
  gap: 14px;
  margin-bottom: 18px;
}
body.db-page .db-finder-hd .db-tile-icon {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
body.db-page .db-finder-hd-text h3 { margin-bottom: 2px !important; }
body.db-page .db-finder-hd-text p  { font-size: 12px !important; margin: 0 !important; }

/* Kenteken tile: [text][icon] grouped on the right */
body.db-page .db-kp-tile .db-finder-hd {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

body.db-page .db-finder-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
body.db-page .db-finder-group { display: flex; flex-direction: column; gap: 4px; }
body.db-page .db-finder-lbl {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--db-muted);
  margin: 0;
}
body.db-page .db-finder-sel {
  width: 100%;
  border: 1.5px solid rgba(220,220,222,.9);
  border-radius: 8px;
  padding: 8px 28px 8px 10px;
  font-size: 13px;
  color: var(--db-navy);
  font-family: 'Inter', sans-serif;
  background-color: rgba(243,246,252,.8);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a2b4a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  cursor: pointer;
}
body.db-page .db-finder-sel:focus {
  border-color: var(--db-blue);
  box-shadow: 0 0 0 3px rgba(30,95,168,.1);
  background-color: #fff;
}
body.db-page .db-finder-sel:disabled { opacity: .45; cursor: not-allowed; }

body.db-page .db-finder-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--db-blue) 0%, #1a4d8f 100%);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  margin-top: 4px;
  letter-spacing: .02em;
}
body.db-page .db-finder-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
body.db-page .db-finder-btn:disabled { opacity: .35; cursor: not-allowed; }

body.db-page .db-finder-diagnose {
  display: block;
  text-align: center;
  background: rgba(243,246,252,.8);
  color: var(--db-muted) !important;
  border-radius: 8px;
  padding: 9px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s;
}
body.db-page .db-finder-diagnose:hover { background: rgba(220,228,242,.9); color: var(--db-navy) !important; }

/* ============================================================
   KENTEKEN WIDGET — embedded in second tile
   ============================================================ */
body.db-page .db-kp-tile {
  cursor: default !important;
  padding: 24px 24px 24px !important;
  min-height: 360px !important;
  justify-content: flex-start !important;
}
body.db-page .db-kp-tile::after { display: none !important; }

body.db-page .db-kp-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex: 1;
  justify-content: center;
  width: 100%;
}

/* Dutch license plate */
/* ── Dutch license plate ────────────────────────────────────── */
.kp-plate-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.kp-wrap {
  display: flex;
  align-items: stretch;
  border-radius: 5px;
  overflow: hidden;
  /* Plate border: black outer frame */
  box-shadow: 0 0 0 2.5px #111, 0 6px 22px rgba(0,0,0,.35);
  cursor: text;
  /* Realistic NL plate proportions: ~520×114mm → ~4.56:1 */
  width: 100%;
  max-width: 370px;
  height: 82px;
  margin: 0 auto;
}
/* EU blue strip — left side */
.kp-flag {
  background: #003DA5;
  width: 54px;
  min-width: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 6px;
  flex-shrink: 0;
  border-right: 1.5px solid #1a1a1a;
}
/* 12 EU stars using SVG */
.kp-eu-stars {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.kp-flag-nl {
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-family: 'Arial Narrow', Arial, sans-serif;
  line-height: 1;
}
/* Yellow input area */
.kp-input-area {
  background: #FFD500;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
#kp-input, #mob-kp-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Arial Black', 'Impact', Arial, sans-serif;
  font-weight: 900;
  font-size: 38px;
  color: #111;
  letter-spacing: 5px;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  caret-color: #111;
  padding: 0;
}
#kp-input::placeholder,
#mob-kp-input::placeholder {
  color: rgba(17,17,17,.28);
  letter-spacing: 3px;
  font-size: 30px;
}

.db-kp-hint {
  font-size: 11px;
  color: var(--db-muted);
  text-align: center;
}

/* Typing dots animation for kenteken chat */
@keyframes kp-dot {
  0%, 80%, 100% { opacity: .2; transform: scale(.8); }
  40%            { opacity: 1;  transform: scale(1); }
}

/* ── Results / Unknown overlays ─────────────────────────── */
#aif-overlay, #aif-unknown-overlay {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(10,10,20,.72); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s ease;
}
#aif-overlay.aif-open, #aif-unknown-overlay.aif-open { opacity: 1; }
#aif-box {
  background: #f8f9fb; border-radius: 22px;
  width: 96%; max-width: 960px; max-height: 92vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.5);
  transform: translateY(32px) scale(.96);
  transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .38s ease;
  opacity: 0;
}
#aif-overlay.aif-open #aif-box { transform: translateY(0) scale(1); opacity: 1; }
.aif-box-head {
  background: linear-gradient(135deg,#ee7b03,#c96000);
  padding: 20px 26px; display: flex; align-items: center;
  justify-content: space-between; flex-shrink: 0;
}
.aif-box-head-left { display: flex; align-items: center; gap: 14px; }
.aif-box-head-icon {
  width: 44px; height: 44px; background: rgba(255,255,255,.2);
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 22px; flex-shrink: 0;
}
.aif-box-head-title { color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -.2px; }
.aif-box-head-sub   { color: rgba(255,255,255,.8); font-size: 12px; margin-top: 2px; }
#aif-close {
  width: 36px; height: 36px; background: rgba(255,255,255,.2);
  border: none; border-radius: 10px; color: #fff; font-size: 20px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s; flex-shrink: 0; line-height: 1;
}
#aif-close:hover { background: rgba(255,255,255,.35); }
#aif-list-viewport { overflow-x: hidden; overflow-y: auto; flex: 1; position: relative; }
#aif-list {
  padding: 22px 26px;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
  will-change: transform, opacity;
}
@media(max-width:700px){ #aif-list { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ #aif-list { grid-template-columns: 1fr; } }
.aif-rc {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.07); border: 1.5px solid #ebebeb;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.aif-rc:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(238,123,3,.15); border-color: rgba(238,123,3,.2); }
.aif-rc-img { height: 140px; background: linear-gradient(135deg,#1a1a2e,#0f3460); overflow: hidden; position: relative; }
.aif-rc-img img { width: 100%; height: 140px; object-fit: cover; display: block; }
.aif-rc-badge { position: absolute; top: 9px; left: 9px; background: rgba(238,123,3,.93); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 5px; }
.aif-rc-badge-prob { position: absolute; top: 9px; left: 9px; background: rgba(255,255,255,.22); color: #fff; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 5px; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(2px); }
.aif-rc-body { padding: 13px 14px 10px; }
.aif-rc-title { font-weight: 700; font-size: 13px; color: #1a1a2e; line-height: 1.4; margin: 0 0 5px; }
.aif-rc-desc  { font-size: 11px; color: #888; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.aif-rc-foot  { padding: 9px 14px 13px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f3f3f3; gap: 8px; }
.aif-rc-price { font-weight: 800; font-size: 14px; color: #ee7b03; }
.aif-rc-time  { font-size: 10px; color: #bbb; margin-top: 1px; }
.aif-rc-btns  { display: flex; gap: 5px; flex-shrink: 0; }
.aif-rc-btn-info { background: #f3f4f6; color: #444; border-radius: 7px; padding: 6px 10px; font-size: 11px; font-weight: 600; text-decoration: none; display: inline-block; white-space: nowrap; }
.aif-rc-btn-info:hover { background: #e8e9ec; color: #222; }
.aif-rc-btn-book { background: linear-gradient(135deg,#ee7b03,#c96000); color: #fff; border-radius: 7px; padding: 6px 11px; font-size: 11px; font-weight: 700; text-decoration: none; display: inline-block; white-space: nowrap; box-shadow: 0 2px 7px rgba(238,123,3,.35); }
.aif-rc-btn-book:hover { opacity: .88; color: #fff; }
.aif-rc-notfound { background: linear-gradient(135deg,#fafafa,#f5f0e8); border: 2px dashed rgba(238,123,3,.25); display: flex; flex-direction: column; }
.aif-rc-notfound:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(238,123,3,.12); border-color: rgba(238,123,3,.45); }
.aif-box-foot {
  padding: 14px 26px 18px; border-top: 1px solid #e8e8e8; background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; gap: 12px; flex-wrap: wrap;
}
#aif-result-info { font-size: 12px; color: #999; white-space: nowrap; }
#aif-pagination { display: flex; align-items: center; gap: 5px; }
.aif-pg-btn {
  width: 34px; height: 34px; border: 1.5px solid #e8e8e8; background: #fff;
  border-radius: 8px; font-size: 13px; font-weight: 600; color: #555;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.aif-pg-btn:hover { background: #fff8f0; border-color: #ee7b03; color: #ee7b03; }
.aif-pg-btn.active { background: #ee7b03; border-color: #ee7b03; color: #fff; }
.aif-pg-btn:disabled { opacity: .3; cursor: default; pointer-events: none; }
.aif-pg-ellipsis { font-size: 13px; color: #bbb; padding: 0 4px; }
#aif-unknown-overlay { z-index: 100000; }
#aif-unknown-box {
  background: #fff; border-radius: 20px; width: 92%; max-width: 460px;
  overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.45);
  transform: translateY(28px) scale(.97);
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  opacity: 0;
}
#aif-unknown-overlay.aif-open #aif-unknown-box { transform: translateY(0) scale(1); opacity: 1; }
.aif-unk-head { background: linear-gradient(135deg,#1a1a2e,#0f3460); padding: 28px; text-align: center; }
.aif-unk-body { padding: 28px 28px 24px; text-align: center; }
.aif-unk-foot { padding: 0 28px 28px; display: flex; flex-direction: column; gap: 10px; }
#aif-yes-btn {
  background: linear-gradient(135deg,#ee7b03,#c96000); color: #fff;
  border-radius: 12px; padding: 14px; font-size: 14px; font-weight: 700;
  text-decoration: none; display: block; text-align: center;
  box-shadow: 0 4px 16px rgba(238,123,3,.4); transition: opacity .2s;
}
#aif-yes-btn:hover { opacity: .88; color: #fff; }
#aif-no-btn {
  background: #f3f4f6; color: #555; border: none; border-radius: 12px;
  padding: 13px; font-size: 14px; cursor: pointer;
  transition: background .15s; width: 100%; font-family: 'Inter', sans-serif;
}
#aif-no-btn:hover { background: #e8e9ec; }

/* ── B2B Partner Portaal tile (light) ──────────────────────── */
body.db-page .db-b2b-tile {
  cursor: default !important;
  padding: 22px 24px 24px !important;
  min-height: 360px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
body.db-page .db-b2b-tile::after { display: none !important; }

body.db-page .db-b2b-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(238,123,3,.1);
  border: 1px solid rgba(238,123,3,.3);
  color: #ee7b03;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
  align-self: flex-start;
}

body.db-page .db-b2b-hd { margin-bottom: 16px; }
body.db-page .db-b2b-icon {
  background: rgba(238,123,3,.1) !important;
  border: 1px solid rgba(238,123,3,.2) !important;
}
body.db-page .db-b2b-icon svg { stroke: #ee7b03 !important; }

body.db-page .db-b2b-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
  margin-bottom: 18px;
}
body.db-page .db-b2b-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(238,123,3,.04);
  border: 1px solid rgba(238,123,3,.12);
  border-radius: 10px;
  padding: 12px;
}
body.db-page .db-b2b-feat svg {
  width: 20px;
  height: 20px;
  stroke: #ee7b03;
  flex-shrink: 0;
  margin-top: 1px;
}
body.db-page .db-b2b-feat div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.db-page .db-b2b-feat strong {
  font-size: 11px;
  font-weight: 700;
  color: var(--db-navy);
  line-height: 1.3;
}
body.db-page .db-b2b-feat span {
  font-size: 10px;
  color: var(--db-muted);
  line-height: 1.4;
}

body.db-page .db-b2b-actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
body.db-page .db-b2b-btn-login {
  background: linear-gradient(135deg, #ee7b03, #c96000);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  transition: opacity .15s, transform .15s;
  box-shadow: 0 4px 14px rgba(238,123,3,.28);
}
body.db-page .db-b2b-btn-login:hover { opacity: .88; transform: translateY(-1px); color: #fff !important; }
body.db-page .db-b2b-btn-register {
  background: transparent;
  color: var(--db-navy) !important;
  text-decoration: none !important;
  border: 1.5px solid rgba(26,43,74,.18);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background .15s, border-color .15s;
}
body.db-page .db-b2b-btn-register:hover {
  background: rgba(26,43,74,.05);
  border-color: rgba(26,43,74,.32);
  color: var(--db-navy) !important;
}

/* ── Partner Portaal tile (light, blue accent) ─────────────── */
body.db-page .db-pp-tile {
  cursor: default !important;
  padding: 22px 24px 24px !important;
  min-height: 360px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
body.db-page .db-pp-tile::after { display: none !important; }

body.db-page .db-pp-badge {
  /* display: inline-flex; */
  align-items: center;
  gap: 6px;
  background: rgba(30,95,168,.1);
  border: 1px solid rgba(30,95,168,.25);
  color: var(--db-blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
  align-self: flex-end;
}

body.db-page .db-pp-hd { margin-bottom: 16px; }
body.db-page .db-pp-icon {
  background: rgba(30,95,168,.1) !important;
  border: 1px solid rgba(30,95,168,.2) !important;
}
body.db-page .db-pp-icon svg { stroke: var(--db-blue) !important; }

body.db-page .db-pp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
  margin-bottom: 18px;
}
body.db-page .db-pp-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(30,95,168,.04);
  border: 1px solid rgba(30,95,168,.1);
  border-radius: 10px;
  padding: 12px;
}
body.db-page .db-pp-feat svg {
  width: 20px;
  height: 20px;
  stroke: var(--db-blue);
  flex-shrink: 0;
  margin-top: 1px;
}
body.db-page .db-pp-feat div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.db-page .db-pp-feat strong {
  font-size: 11px;
  font-weight: 700;
  color: var(--db-navy);
  line-height: 1.3;
}
body.db-page .db-pp-feat span {
  font-size: 10px;
  color: var(--db-muted);
  line-height: 1.4;
}

body.db-page .db-pp-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
body.db-page .db-pp-btn-login {
  background: linear-gradient(135deg, var(--db-blue), #1a4d8f);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  transition: opacity .15s, transform .15s;
  box-shadow: 0 4px 14px rgba(30,95,168,.28);
}
body.db-page .db-pp-btn-login:hover { opacity: .88; transform: translateY(-1px); color: #fff !important; }
body.db-page .db-pp-btn-register {
  flex: 1;
  background: transparent;
  color: var(--db-navy) !important;
  text-decoration: none !important;
  border: 1.5px solid rgba(26,43,74,.18);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background .15s, border-color .15s;
}
body.db-page .db-pp-btn-register:hover {
  background: rgba(26,43,74,.05);
  border-color: rgba(26,43,74,.32);
  color: var(--db-navy) !important;
}

/* ── R.O.T. tile — map fills full card ─────────────────────── */
body.db-page .db-rot-tile {
  cursor: default !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  min-height: 200px !important;
}
#db-sp-map {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.db-rot-map-overlay {
  position: relative;
  z-index: 2;
  background: linear-gradient(to top, rgba(10,16,32,.88) 0%, rgba(10,16,32,.55) 60%, transparent 100%);
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.db-rot-map-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.85);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.db-rot-map-label svg { stroke: #ee7b03; }
body.db-page .db-rot-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
body.db-page .db-rot-btn-primary {
  width: 100%;
  background: linear-gradient(135deg, #ee7b03, #c96000);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s, transform .15s;
  box-shadow: 0 3px 10px rgba(238,123,3,.4);
  font-family: 'Inter', sans-serif;
}
body.db-page .db-rot-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
body.db-page .db-rot-btn-secondary {
  width: 100%;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.88) !important;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  display: block;
  transition: background .15s, border-color .15s;
  backdrop-filter: blur(4px);
}
body.db-page .db-rot-btn-secondary:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.38);
  color: #fff !important;
}

/* ── Contact tile ──────────────────────────────────────────── */
body.db-page .db-contact-tile {
  cursor: default !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 16px 16px 16px !important;
}
.db-contact-hd {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db-contact-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--db-navy);
}
.db-contact-address {
  font-size: 10px;
  color: var(--db-muted);
  padding-left: 19px;
}
.db-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  flex: 1;
}
.db-contact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 10px;
  padding: 9px 6px;
  text-decoration: none !important;
  font-size: 10px;
  font-weight: 700;
  transition: transform .15s, opacity .15s;
  line-height: 1;
}
.db-contact-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.db-contact-btn:hover { transform: translateY(-2px); opacity: .9; }

.db-cb-phone {
  background: rgba(30,95,168,.08);
  color: var(--db-blue) !important;
  border: 1px solid rgba(30,95,168,.15);
}
.db-cb-phone svg { stroke: var(--db-blue); }

.db-cb-wa {
  background: rgba(37,211,102,.08);
  color: #128C7E !important;
  border: 1px solid rgba(37,211,102,.2);
}
.db-cb-wa svg { fill: #25D366; }

.db-cb-mail {
  background: rgba(238,123,3,.08);
  color: #c96000 !important;
  border: 1px solid rgba(238,123,3,.18);
}
.db-cb-mail svg { stroke: #ee7b03; }

.db-cb-nav {
  background: rgba(26,43,74,.07);
  color: var(--db-navy) !important;
  border: 1px solid rgba(26,43,74,.12);
}
.db-cb-nav svg { stroke: var(--db-navy); }

.db-contact-form-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--db-navy), #0f3460);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: opacity .15s, transform .15s;
  box-shadow: 0 3px 10px rgba(26,43,74,.25);
}
.db-contact-form-btn svg { stroke: rgba(255,255,255,.7); }
.db-contact-form-btn:hover { opacity: .88; transform: translateY(-1px); }

/* contact form overlay */
#cf-overlay {
  opacity: 0;
  transition: opacity .3s ease;
}

/* ── Service Point modal form ──────────────────────────────── */
#sp-overlay {
  opacity: 0;
  transition: opacity .3s ease;
}
.sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.sp-full { grid-column: 1 / -1; }
.sp-field { display: flex; flex-direction: column; gap: 5px; }
.sp-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--db-muted);
}
.sp-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sp-ico {
  position: absolute;
  left: 11px;
  width: 14px;
  height: 14px;
  stroke: #aaa;
  flex-shrink: 0;
  pointer-events: none;
}
.sp-inp {
  width: 100%;
  padding: 10px 12px 10px 34px;
  border: 1.5px solid rgba(220,220,222,.9);
  border-radius: 9px;
  font-size: 13px;
  color: var(--db-navy);
  background: rgba(243,246,252,.8);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
}
.sp-inp:focus {
  border-color: var(--db-orange);
  box-shadow: 0 0 0 3px rgba(238,123,3,.12);
  background: #fff;
}
.sp-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #1a2b4a, #0f3460);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  transition: background .2s, transform .15s, box-shadow .15s;
}
.sp-submit-btn:hover {
  background: linear-gradient(135deg, #ee7b03, #c96000);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(238,123,3,.3);
}
.sp-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@media (max-width: 500px) { .sp-grid { grid-template-columns: 1fr; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  body.db-page .db-wrapper { width: 94%; }
}
@media (max-width: 992px) {
  body.db-page .db-wrapper { width: 96%; }
  body.db-page .db-row-hub { grid-template-columns: 1fr 230px 1fr; }
  body.db-page .db-hub-ring { width: 230px; height: 230px; }
  body.db-page .db-hub-inner { width: 182px !important; height: 182px !important; }
  body.db-page .db-hub-orbit { width: 268px; height: 268px; }
  body.db-page .db-hub-symbol { width: 112px !important; height: 112px !important; }
  body.db-page .db-hub-inner-ring { inset: 14px; }
  body.db-page .db-tile-hub-left,
  body.db-page .db-tile-hub-right { padding: 22px 18px !important; }
  body.db-page .db-tile-top-left::before,
  body.db-page .db-tile-top-right::before,
  body.db-page .db-tile-bot-left::before,
  body.db-page .db-tile-bot-right::before { width: 48px; height: 48px; }
}
@media (max-width: 768px) {
  body.db-page .db-wrapper { width: 100%; padding: 16px 12px 0; }
  body.db-page .db-hero-inner { flex-direction: column !important; padding: 24px 22px !important; min-height: auto !important; }
  body.db-page .db-hero-car { max-width: 100%; width: 100%; }
  body.db-page .db-hero-text p { max-width: 100%; }
  body.db-page .db-row-2col { grid-template-columns: 1fr !important; }
  body.db-page .db-row-hub  { grid-template-columns: 1fr !important; align-items: center !important; }
  body.db-page .db-tile-hub-left,
  body.db-page .db-tile-hub-right { align-items: flex-start !important; padding: 22px 18px 44px !important; }
  body.db-page .db-tile-wide { max-height: none; }
  body.db-page .db-hub-ring { width: 170px; height: 170px; }
  body.db-page .db-hub-inner { width: 134px !important; height: 134px !important; }
  body.db-page .db-hub-orbit { width: 202px; height: 202px; }
  body.db-page .db-hub-symbol { width: 78px !important; height: 78px !important; }
  body.db-page .db-hub::before,
  body.db-page .db-hub::after,
  body.db-page .db-tile-hub-left::before,
  body.db-page .db-tile-hub-right::before { display: none; }
  body.db-page .db-statusbar { flex-direction: column !important; gap: 14px; border-radius: 0; padding: 20px 18px; }
  body.db-page .db-statusbar-item { border-left: none !important; padding: 0 !important; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px !important; width: 100%; }
  body.db-page .db-statusbar-item:first-child { border-top: none !important; padding-top: 0 !important; }
}

/* ============================================================
   MOBILE HUB — full-screen dial interface (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Hide everything except the hub row */
  body.db-page .db-grid-section .db-row-2col,
  body.db-page .db-biz-tile,
  body.db-page .db-statusbar,
  body.db-page footer { display: none !important; }

  /* Grid section: flex column so hub row can expand */
  body.db-page .db-grid-section {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100svh !important;
    padding: 0 !important;
  }

  /* Hub row becomes the full viewport */
  body.db-page .db-wrapper { padding: 0 !important; }
  body.db-page .db-row-hub {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    /* KMS automotive background: dot-grid pattern + layered gradients for depth */
    background-color: #eef3fb !important;
    background-image:
      radial-gradient(ellipse 90% 55% at 50% 54%, rgba(30,95,168,.09) 0%, transparent 65%),
      radial-gradient(circle at 8% 92%,  rgba(238,123,3,.06) 0%, transparent 38%),
      radial-gradient(circle at 92% 8%,  rgba(30,95,168,.06) 0%, transparent 38%),
      url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='1.2' fill='rgba(30%2C95%2C168%2C0.07)'/%3E%3C/svg%3E"),
      linear-gradient(148deg, #f2f7ff 0%, #edf3fb 45%, #f7faff 100%) !important;
    background-size: auto, auto, auto, 32px 32px, 100% !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* ══ Mobile title — KMS brand identity ══ */
  .db-mob-title {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 28px 0;
    flex-shrink: 0;
    gap: 0;
    margin-top: -100px;
    margin-bottom: 50px;
    height: 125px;
  }

  /* Eyebrow row: line — text — line */
  .db-mob-eyebrow {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; width: 100%;
  }
  .db-mob-eyebrow-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(30,95,168,.3), transparent);
  }
  .db-mob-eyebrow-text {
    font-size: 9px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    color: #ee7b03;
    white-space: nowrap;
    font-family: 'Inter','Segoe UI',sans-serif;
  }

  /* Main title */
  .db-mob-title-h {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 0 6px !important;
    letter-spacing: -.04em !important;
    line-height: 1.05 !important;
    font-family: 'Inter','Segoe UI',sans-serif !important;
  }
  .db-mob-title-kms {
    color: #1e5fa8;
    position: relative;
  }

  /* Accent bar: ● ━━━━━━━━ ● */
  .db-mob-title-accent {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px;
  }
  .db-mob-accent-dot {
    width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  }
  .db-mob-accent-orange { background: #ee7b03; }
  .db-mob-accent-blue   { background: #1e5fa8; }
  .db-mob-accent-bar {
    flex: 1; height: 2px; border-radius: 2px; max-width: 80px;
    background: linear-gradient(90deg, #ee7b03, #1e5fa8);
  }

  /* Subtitle wrapper */
  .db-mob-title-sub-wrap {
    height: 2.4em;
    position: relative;
    width: 100%;
  }
  .db-mob-title-sub {
    font-size: 12.5px !important;
    color: #475569 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .32s ease !important;
    display: block !important;
    text-align: center !important;
    padding: 0 4px !important;
    font-style: italic !important;
    font-family: 'Inter','Segoe UI',sans-serif !important;
  }
  .db-mob-title-sub.sub-exit  { transform: translateY(-20px) !important; opacity: 0 !important; }
  .db-mob-title-sub.sub-enter { transform: translateY(20px)  !important; opacity: 0 !important; }

  /* Dot progress indicators */
  .db-mob-sub-dots {
    display: flex; gap: 12px; justify-content: center; align-items: center;
    margin-top: 24px;
  }
  .db-mob-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(30,95,168,.2);
    transition: width .3s ease, background .3s ease, border-radius .3s ease;
    flex-shrink: 0;
  }
  .db-mob-dot.active {
    width: 18px; border-radius: 3px;
    background: linear-gradient(90deg,#ee7b03,#1e5fa8);
  }

  /* ══ Arrival celebration ══════════════════════════════════════ */
.db-mob-arrived {
  display: none; pointer-events: none; /* NEVER blocks hub or pills */
}
@media (max-width: 767px) {
  .db-mob-arrived {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: fixed; inset: 0;
    z-index: 9988; /* below pill(9990) and balloons(9992) */
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
  }
  .db-mob-arrived.show { opacity: 1; }

  /* Pulsing ring behind the toast */
  .db-arrived-ring {
    position: absolute;
    width: 260px; height: 260px; border-radius: 50%;
    border: 3px solid rgba(238,123,3,.4);
    animation: db-ring-pulse 1.4s ease-in-out infinite;
  }
  @keyframes db-ring-pulse {
    0%,100% { transform: scale(1);    opacity: .8; }
    50%      { transform: scale(1.18); opacity: .2; }
  }

  /* Toast card */
  .db-arrived-toast {
    position: relative; z-index: 1;
    background: linear-gradient(135deg,#1e5fa8 0%,#0f3460 100%);
    color: #fff; border-radius: 24px;
    padding: 28px 32px 24px;
    text-align: center; max-width: 300px; width: 85%;
    box-shadow:
      0 24px 60px rgba(30,95,168,.5),
      0 0 0 1px rgba(255,255,255,.08),
      inset 0 1px 0 rgba(255,255,255,.12);
    animation: db-toast-pop .55s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes db-toast-pop {
    from { transform: scale(.6) translateY(40px); opacity: 0; }
    to   { transform: scale(1)  translateY(0);    opacity: 1; }
  }
  .db-arrived-icon {
    font-size: 44px; line-height: 1; margin-bottom: 12px;
    animation: db-icon-bounce .6s cubic-bezier(.22,1,.36,1) .3s both;
  }
  @keyframes db-icon-bounce {
    0%   { transform: scale(0) rotate(-20deg); }
    60%  { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  .db-arrived-title {
    font-size: 22px; font-weight: 900;
    letter-spacing: -.03em; margin-bottom: 6px;
  }
  .db-arrived-sub {
    font-size: 13px; color: rgba(255,255,255,.7);
    line-height: 1.5; margin-bottom: 8px;
  }
  .db-arrived-address {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(238,123,3,.2); border: 1px solid rgba(238,123,3,.4);
    border-radius: 99px; padding: 5px 12px;
    font-size: 12px; font-weight: 700; color: #fbbf24;
    letter-spacing: .01em;
  }
  .db-arrived-address::before { content: '📍'; font-size: 11px; }

  /* Confetti pieces */
  .db-confetti-piece {
    position: absolute; width: 9px; height: 9px;
    border-radius: 2px; opacity: 0;
    animation: db-confetti-fly var(--dur,1.8s) ease-out var(--delay,0s) both;
  }
  @keyframes db-confetti-fly {
    0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
    80%  { opacity: .8; }
    100% { transform: translate(var(--tx,0px),var(--ty,-160px)) rotate(var(--rot,360deg)) scale(.4); opacity: 0; }
  }
}

/* ── Contact balloon submenu ── */
.db-mob-balloons {
  display: none;
}
@media (max-width: 767px) {
  .db-mob-balloons {
    display: flex;
    position: fixed;
    bottom: 110px; left: 50%;
    transform: translateX(-50%);
    gap: 10px;
    z-index: 9992;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .db-mob-balloons.active {
    pointer-events: all;
    opacity: 1;
  }
  .db-mob-balloon {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px 14px 10px;
    font-size: 11px; font-weight: 700;
    color: #1a2b4a;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .28s ease, background .15s;
    font-family: 'Inter','Segoe UI',sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
  .db-mob-balloons.active .db-mob-balloon {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  /* Staggered explosion — each balloon pops in 60ms apart */
  .db-mob-balloons.active .db-mob-balloon:nth-child(1) { transition-delay: 0ms; }
  .db-mob-balloons.active .db-mob-balloon:nth-child(2) { transition-delay: 60ms; }
  .db-mob-balloons.active .db-mob-balloon:nth-child(3) { transition-delay: 120ms; }
  .db-mob-balloons.active .db-mob-balloon:nth-child(4) { transition-delay: 180ms; }
  .db-mob-balloon:active { background: #f0f9ff; transform: scale(.93) !important; }
  .db-balloon-icon { font-size: 22px; line-height: 1; }

  /* Call = blue accent */
  #db-balloon-call  { border-color: rgba(30,95,168,.3);  }
  /* Email = orange accent */
  #db-balloon-email { border-color: rgba(238,123,3,.3);  }
  /* WhatsApp = green accent */
  #db-balloon-wa    { border-color: rgba(5,150,105,.3);  }
  /* Message = purple accent */
  #db-balloon-msg   { border-color: rgba(99,102,241,.3); }
}

  /* Arrow between title and hub */
  .db-mob-arrow {
    display: flex !important;
    justify-content: center; align-items: center;
    flex-shrink: 0; padding: 2px 0 0;
    animation: db-mob-bounce 1.8s ease-in-out infinite;
    opacity: .65;
  }
  @keyframes db-mob-bounce {
    0%,100% { transform: translateY(0);  opacity: .55; }
    50%      { transform: translateY(5px); opacity: .9; }
  }
  body.db-page .db-tile-hub-left,
  body.db-page .db-tile-hub-right { display: none !important; }

  /* Hub: full-size, touch target */
  body.db-page .db-hub {
    padding: 0 !important;
    cursor: grab !important;
    touch-action: none !important;
  }
  body.db-page .db-hub:active { cursor: grabbing !important; }

  /* Override mobile shrink from existing rule */
  body.db-page .db-hub-ring   { width: 280px !important; height: 280px !important; }
  body.db-page .db-hub-inner  { width: 224px !important; height: 224px !important; }
  body.db-page .db-hub-symbol { width: 210px !important; height: 210px !important; }
  body.db-page .db-hub::before,
  body.db-page .db-hub::after { display: none !important; }

  /* Drag hint text below hub */
  body.db-page .db-mob-drag-hint {
    display: block !important;
    position: absolute;
    bottom: 24px; left: 0; right: 0;
    text-align: center;
    font-size: 12px; font-weight: 600;
    color: rgba(30,95,168,.5);
    letter-spacing: .06em;
    pointer-events: none;
  }
}

/* Mobile title — hidden on desktop */
.db-mob-title { display: none; }

/* Arrow indicator is now a flex item in the hub row — no absolute positioning */
.db-mob-arrow { display: none; }
@media (max-width: 767px) { .db-mob-arrow { display: flex !important; } }

/* ── Mobile pill ── */
.db-mob-pill {
  display: none;
}
@media (max-width: 767px) {
  .db-mob-pill {
    display: flex;
    position: fixed;
    bottom: 36px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    align-items: center; gap: 10px;
    background: #1e5fa8;
    color: #fff;
    padding: 15px 30px;
    border-radius: 99px;
    font-size: 15px; font-weight: 700;
    font-family: 'Inter','Segoe UI',sans-serif;
    box-shadow: 0 8px 32px rgba(30,95,168,.45), 0 2px 8px rgba(0,0,0,.12);
    cursor: pointer;
    opacity: 0;
    transition: opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1);
    z-index: 9990;
    pointer-events: none;
    white-space: nowrap;
    border: none;
    -webkit-tap-highlight-color: transparent;
  }
  .db-mob-pill.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: all;
  }
  .db-mob-pill svg { flex-shrink: 0; }
}

/* ── Mobile bottom-sheet modal ── */
.db-mob-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 99998;
  background: rgba(10,16,32,.65);
  backdrop-filter: blur(5px);
  align-items: flex-end;
  justify-content: center;
}
.db-mob-modal.open { display: flex; }
.db-mob-modal-box {
  background: #fff;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  animation: db-mob-up .32s cubic-bezier(.22,1,.36,1);
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
@keyframes db-mob-up {
  from { transform: translateY(100%); opacity: .4; }
  to   { transform: translateY(0);    opacity: 1;  }
}
.db-mob-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky; top: 0; background: #fff; z-index: 1;
  border-radius: 24px 24px 0 0;
}
.db-mob-modal-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 800; color: #1a2b4a;
}
.db-mob-modal-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: #f0f4f8; border: none; font-size: 20px;
  cursor: pointer; color: #64748b; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-family: sans-serif;
}
.db-mob-modal-body { padding: 20px 22px 32px; }
.db-mob-btn-primary {
  display: block; width: 100%; padding: 15px;
  background: linear-gradient(135deg,#1e5fa8,#0f3460);
  color: #fff; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  text-align: center; text-decoration: none;
  font-family: 'Inter','Segoe UI',sans-serif;
  margin-bottom: 10px;
}
.db-mob-btn-secondary {
  display: block; width: 100%; padding: 15px;
  background: #f0f4f8; color: #1e5fa8;
  border: 1.5px solid #dde6f0; border-radius: 12px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  text-align: center; text-decoration: none;
  font-family: 'Inter','Segoe UI',sans-serif;
}
.db-mob-feature-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #f5f5f5;
}
.db-mob-feature-row:last-child { border-bottom: none; }
.db-mob-feature-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: #eff6ff; display: flex;
  align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.db-mob-sel {
  width: 100%; padding: 13px 14px;
  border: 1.5px solid #dde6f0; border-radius: 10px;
  font-size: 15px; background: #fff;
  font-family: 'Inter','Segoe UI',sans-serif;
  margin-bottom: 10px; appearance: auto;
}
.db-mob-drag-hint { display: none; }