/* Dental Republic — global styles. All values pull from theme CSS vars. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

#dr-root {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base, 16px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-spacing);
  line-height: 1.08;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.dr-wrap { width: 100%; max-width: var(--maxw, 1240px); margin: 0 auto; padding: 0 32px; }

/* ---- Buttons ---- */
.dr-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  padding: 11px 18px; line-height: 1; white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.dr-btn:active { transform: translateY(1px); }
.dr-btn--primary { background: var(--accent); color: var(--on-accent); }
.dr-btn--primary:hover { background: var(--accent-strong); box-shadow: var(--shadow-md); }
.dr-btn--outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.dr-btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.dr-btn--ghost { background: transparent; color: var(--text-muted); }
.dr-btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.dr-btn--soft { background: var(--accent-soft); color: var(--accent-strong); }
.dr-btn--soft:hover { background: var(--accent); color: var(--on-accent); }
.dr-btn--lg { padding: 15px 26px; font-size: 16px; }
.dr-btn--sm { padding: 8px 13px; font-size: 13px; }
.dr-btn--block { width: 100%; }
.dr-btn--icon { padding: 10px; }

/* ---- Inputs ---- */
.dr-input, .dr-select, .dr-textarea {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 12px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.dr-input:focus, .dr-select:focus, .dr-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dr-input::placeholder, .dr-textarea::placeholder { color: var(--text-faint); }
.dr-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 7px; }

/* ---- Chips / badges ---- */
.dr-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 550; color: var(--text-muted);
  transition: all .15s ease; cursor: pointer; white-space: nowrap;
}
.dr-chip:hover { border-color: var(--accent); color: var(--accent); }
.dr-chip[data-active="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.dr-badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 4px 9px; border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  font-family: var(--font-body);
}
.dr-badge--new { background: oklch(58% 0.14 150 / .14); color: oklch(45% 0.13 150); }
.dr-badge--like-new { background: oklch(60% 0.13 195 / .15); color: oklch(44% 0.12 200); }
.dr-badge--good { background: var(--accent-soft); color: var(--accent-strong); }
.dr-badge--used { background: oklch(70% 0.08 70 / .2); color: oklch(48% 0.09 65); }
.dr-badge--parts { background: var(--surface-2); color: var(--text-faint); }
.dr-badge--feat { background: var(--text); color: var(--bg); }

/* ---- Cards ---- */
.dr-card {
  background: var(--surface); border: var(--card-border);
  border-radius: var(--radius-lg); box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  overflow: hidden;
}
.dr-pcard { display: flex; flex-direction: column; cursor: pointer; }
.dr-pcard:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-3px); }
.dr-pcard:hover .dr-pcard-img { transform: scale(1.03); }
.dr-pcard-img { transition: transform .35s ease; }

/* ---- Misc ---- */
.dr-divider { height: 1px; background: var(--border); border: 0; }
.dr-muted { color: var(--text-muted); }
.dr-faint { color: var(--text-faint); }
.dr-mono { font-family: var(--font-mono); }
.dr-eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.dr-link { color: var(--accent); font-weight: 600; }
.dr-link:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

.dr-iconbtn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); transition: all .15s ease;
}
.dr-iconbtn:hover { color: var(--accent); border-color: var(--accent); }
.dr-iconbtn[data-active="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* focus-visible accessibility */
.dr-btn:focus-visible, .dr-chip:focus-visible, .dr-iconbtn:focus-visible,
.dr-input:focus-visible, .dr-select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* scrollbar polish */
#dr-root ::-webkit-scrollbar { height: 8px; width: 8px; }
#dr-root ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }

/* density */
[data-density="compact"] { --row-gap: 18px; }
[data-density="comfy"] { --row-gap: 40px; }

/* gentle entrance — transform only, so content is never trapped invisible */
@keyframes dr-rise { from { transform: translateY(12px); } to { transform: none; } }
/* will-change entfernt 07.06.: machte <main> zum Containing-Block fuer position:fixed (Bottom-Sheet-Falle) */
@media (prefers-reduced-motion: no-preference) {
  /* fill-mode backwards statt both: both laesst eine Identity-Transform stehen -> main bleibt Containing-Block fuer position:fixed */
  .dr-rise { animation: dr-rise .42s cubic-bezier(.2,.7,.3,1) backwards; }
}

/* ============================================================
   RESPONSIVE / MOBILE
   Inline React styles are overridden via attribute selectors.
   ============================================================ */

/* Tablet and below */
@media (max-width: 860px) {
  .dr-wrap { padding-left: 18px !important; padding-right: 18px !important; }

  /* product / card grids -> 2 cols */
  #dr-root [style*="repeat(4,"], #dr-root [style*="repeat(4 ,"],
  #dr-root [style*="repeat(3,"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* category / hub grids */
  #dr-root [style*="repeat(6,"], #dr-root [style*="repeat(5,"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* two-column page layouts -> stack */
  #dr-root [style*="1.5fr 1fr"], #dr-root [style*="1.6fr 1fr"],
  #dr-root [style*="1.05fr"], #dr-root [style*="256px 1fr"],
  #dr-root [style*="300px 1fr"], #dr-root [style*="280px 1fr"] { grid-template-columns: 1fr !important; }

  /* footer */
  #dr-root [style*="1.6fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }

  /* sidebars / sticky columns: drop sticky so stacked content flows */
  #dr-root [style*="position: sticky"] { position: static !important; }
  /* …but the header must KEEP its position + z-index: without it the open
     burger menu loses its stacking context and .dr-rise content paints on top */
  #dr-root header[style*="position: sticky"] { position: sticky !important; z-index: 40 !important; }
}

/* Header: switch to the hamburger below 1200px — the full nav needs the room */
@media (max-width: 1200px) {
  header .dr-wrap { height: 64px !important; gap: 12px !important; }
  .dr-header-desktop { display: none !important; }
  .dr-burger { display: inline-grid !important; }
}
@media (min-width: 1201px) {
  .dr-burger, .dr-mobile-menu { display: none !important; }
  /* keep the desktop cluster tight so it never overflows the 1240 container */
  .dr-header-desktop .dr-btn { padding-left: 11px !important; padding-right: 11px !important; font-size: 14px !important; }
}

/* Phone */
@media (max-width: 560px) {
  .dr-wrap { padding-left: 14px !important; padding-right: 14px !important; }

  /* most grids -> single column */
  #dr-root [style*="repeat(4,"], #dr-root [style*="repeat(3,"],
  #dr-root [style*="1.5fr 1fr"], #dr-root [style*="1.6fr 1fr"] { grid-template-columns: 1fr !important; }
  /* categories / hub -> 2 cols */
  #dr-root [style*="repeat(6,"], #dr-root [style*="repeat(5,"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* account stat tiles + wizard columns -> 2 / 1 */
  #dr-root [style*="repeat(2,"] { grid-template-columns: 1fr !important; }
  /* footer single column */
  #dr-root [style*="1.6fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  /* messages list/thread + add-product wizard -> stack */
  #dr-root [style*="300px 1fr"] { grid-template-columns: 1fr !important; }

  /* list-row product cards (200px img + content + actions) -> stack */
  #dr-root [style*="200px 1fr auto"] { grid-template-columns: 1fr !important; }

  /* hero search row wraps */
  #dr-root form[style*="max-width: 540px"] { flex-wrap: wrap; }

  /* big headings tighten */
  #dr-root h1 { line-height: 1.08; }

  /* tables scroll horizontally inside cards already (overflow-x:auto) */
  /* compare bar / toast stay fixed & centered (fine) */

  /* hide the heavy mega-menu on phones (tap navigates instead) */
  header nav > div > div[style*="width: 600px"] { display: none !important; }
}

/* Small phone */
@media (max-width: 380px) {
  #dr-root [style*="repeat(6,"], #dr-root [style*="repeat(5,"] { grid-template-columns: 1fr 1fr !important; }
}

/* Mobile-Filter (Designer-Spec "Dentalrepublic (4)" 07.06.2026):
   Sticky-Toolbar + Kategorie-Chips + Filter als Bottom-Sheet */
.dr-mobile-only { display: none !important; }
.dr-browse-layout { grid-template-columns: 256px 1fr; }
.dr-m-toolbar, .dr-m-chips, .dr-m-meta, .dr-sheet-grab, .dr-cat-chiplist { display: none; }
@media (max-width: 860px) {
  .dr-mobile-only { display: inline-flex !important; }
  .dr-m-hide, .dr-desktop-controls { display: none !important; }
  .dr-browse-layout { grid-template-columns: 1fr !important; }

  /* ---- Ergebnis-Toolbar (sticky) ---- */
  .dr-m-toolbar { display: flex; gap: 8px; align-items: center; position: sticky; top: 150px;
    z-index: 40; background: var(--surface, #fff); padding: 10px 12px; margin: 0 -12px 2px;
    border-bottom: 1px solid var(--border); }
  .dr-m-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border);
    background: var(--surface); border-radius: 999px; padding: 9px 14px; font-size: 14px;
    font-weight: 650; color: var(--text); cursor: pointer; flex: none; }
  .dr-m-ct { background: var(--accent); color: var(--on-accent, #fff); border-radius: 999px;
    font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; display: grid;
    place-items: center; padding: 0 5px; }
  .dr-m-sort { border: 1px solid var(--border) !important; border-radius: 999px !important;
    padding: 9px 30px 9px 14px !important; font-size: 14px !important; font-weight: 650;
    width: auto !important; background-color: var(--surface) !important; min-width: 0; }
  .dr-m-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--border);
    border-radius: 9px; overflow: hidden; flex: none; }

  /* ---- Kategorie-Chip-Reihe ---- */
  .dr-m-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 6px;
    scrollbar-width: none; -ms-overflow-style: none; }
  .dr-m-chips::-webkit-scrollbar { display: none; }
  .dr-m-chip { white-space: nowrap; border: 1px solid var(--border); border-radius: 999px;
    padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--text-muted);
    background: var(--surface); cursor: pointer; flex: none; }
  .dr-m-chip[data-on="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
  .dr-m-meta { display: block; padding: 10px 0 4px; font-size: 14px; color: var(--text-muted); }
  .dr-m-meta b { color: var(--text); }

  /* ---- Filter als Bottom-Sheet ---- */
  .dr-browse-layout > aside { display: none; }
  /* #dr-root-Prefix noetig: schlaegt die globale sticky->static-Mobilregel (Z.167) */
  #dr-root .dr-browse-layout[data-filters-open="true"] > aside,
  .dr-browse-layout[data-filters-open="true"] > aside {
    display: block;
    position: fixed !important;
    top: auto !important; left: 0; right: 0; bottom: 0;
    width: auto; max-height: 88%;
    background: var(--surface, #fff);
    z-index: 95;
    overflow-y: auto;
    padding: 0 20px calc(86px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
    animation: dr-sheet-in .26s cubic-bezier(.2, .8, .3, 1) both;
  }
  .dr-browse-layout[data-filters-open="true"]::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(20, 28, 45, .45);
    z-index: 94;
    animation: dr-fade-in .2s ease both;
  }
  .dr-sheet-grab { display: block; width: 40px; height: 5px; border-radius: 99px;
    background: #d7dbe2; margin: 10px auto 8px; }
  .dr-filter-apply { display: block !important; }
  /* Kategorie im Sheet: Chips (umbrechend) statt langer Checkbox-Liste */
  .dr-cat-checklist { display: none !important; }
  .dr-cat-chiplist { display: flex !important; flex-wrap: wrap; gap: 8px; }
}
@keyframes dr-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes dr-fade-in { from { opacity: 0; } to { opacity: 1; } }
.dr-filter-apply {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; width: auto;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--surface, #fff);
  border-top: 1px solid var(--border);
  z-index: 96;
}

/* Footer-Spalten (Desktop 4-spaltig, Tablet 2, Mobil 1) */
.dr-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 900px) {
  .dr-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  /* iPhone: Link-Gruppen ZU ZWEIT nebeneinander, Marke volle Breite, alles kompakter */
  .dr-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; padding: 36px 20px 22px !important; }
  .dr-footer-grid > div:first-child { grid-column: 1 / -1; max-width: none !important; }
  .dr-footer-grid a { font-size: 13.5px !important; }
}

/* ---- Mobiler Sell-Flow: kompakt + Sticky-Continue (Desktop unveraendert) ---- */
@media (max-width: 860px) {
  .dr-sell-grid { grid-template-columns: 1fr !important; gap: 14px !important; padding-bottom: 84px; }
  .dr-sell-col { height: auto !important; max-height: 290px; }
  /* Unterkategorie erst zeigen, wenn eine Kategorie gewaehlt ist */
  .dr-sell-col-wrap[data-muted="true"] { display: none !important; }
  /* Weiter-Leiste immer sichtbar am unteren Rand */
  .dr-sell-continue {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    margin: 0 !important; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface, #fff); border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(20, 30, 50, .08);
  }
  .dr-sell-continue .dr-btn { flex: 1; justify-content: center; }
}

/* Kategorie-Leiste: Scrollbalken ausblenden (scrollbar bleibt nutzbar) */
.dr-cat-strip { scrollbar-width: none; -ms-overflow-style: none; }
.dr-cat-strip::-webkit-scrollbar { display: none; }