/* =========================================================
   modern.css – Modernes UI Override für AtAuktion.at
   Einbindung: NACH deiner bestehenden theme.css laden.
   ========================================================= */

/* -------- Viewport Safe Area (iOS) Hinweis:
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
------------------------------------------------------------ */

/* -------------------------
   1) Design Tokens
-------------------------- */
:root{
  --bg: #f6f7fb;
  --surface: rgba(255,255,255,0.92);
  --card: #ffffff;

  --text: #0f172a;
  --muted: #64748b;

  --primary: #AEFFD1;
  --primaryText: #0b0b0b;

  --danger: #ff4c00;

  --border: rgba(15, 23, 42, 0.10);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shadow-sm: 0 8px 20px rgba(2, 6, 23, 0.08);
  --shadow-md: 0 16px 40px rgba(2, 6, 23, 0.12);

  --ring: 0 0 0 4px rgba(174, 255, 209, 0.35);
}

/* -------------------------
   2) Base / Typo
-------------------------- */
html, body{ height: 100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Standard-Abstände etwas “appiger” */
main{ padding-top: 8px; }
h1,h2,h3,h4,h5,h6{ letter-spacing: -0.02em; }

/* Media/Images */
img, video, iframe{ border-radius: 14px; max-width: 100%; }

/* Links */
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--text); text-decoration: none; }

/* -------------------------
   3) Layout Helpers (Bootstrap)
-------------------------- */
.container, .container-fluid{ --bs-gutter-x: 1.25rem; }

/* -------------------------
   4) Cards – “modern pill cards”
-------------------------- */
.card{
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--card) !important;
  box-shadow: var(--shadow-sm) !important;
}
.card:hover{
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
  transition: .18s ease;
}
.card-header, .card-footer{
  background: transparent !important;
  border-color: var(--border) !important;
}

/* “Surface” Panels (z.B. Filterboxen) */
.surface{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* -------------------------
   5) Buttons
-------------------------- */
.btn{
  border-radius: 14px !important;
  font-weight: 650;
  border-width: 1px !important;
  transition: transform .16s ease, filter .16s ease, background .16s ease;
}
.btn-primary{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primaryText) !important;
}
.btn-primary:hover{ filter: brightness(0.98); }
.btn-light{
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}
.btn-outline-secondary{
  border-color: rgba(15, 23, 42, 0.15) !important;
}
.btn:focus, .btn:active{ box-shadow: var(--ring) !important; }
.btn:active{ transform: scale(0.98); }

/* -------------------------
   6) Forms / Inputs
-------------------------- */
.form-control, .form-select, .input-group-text{
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: #fff !important;
}
.form-control::placeholder{ color: #94a3b8; }
.form-control:focus, .form-select:focus{
  box-shadow: var(--ring) !important;
  border-color: rgba(174,255,209,0.85) !important;
}
.form-check-input:checked{
  background-color: #111 !important;
  border-color: #111 !important;
}

/* -------------------------
   7) Badges / Chips
-------------------------- */
.badge{
  border-radius: 999px !important;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.badge.text-bg-danger{ background: var(--danger) !important; }

/* Chips (falls du sie nutzt) */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background: rgba(255,255,255,0.7);
}

/* -------------------------
   8) Navigation / Header
-------------------------- */
header .navbar,
.mobile-navbar .navbar{
  background: rgba(255,255,255,0.90) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: none !important;
}
.navbar .nav-link{
  border-radius: 12px;
}
.navbar .nav-link:hover{
  background: rgba(15, 23, 42, 0.04);
}

/* Dropdowns */
.dropdown-menu{
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Breadcrumb (falls vorhanden) */
.breadcrumb{
  padding: 10px 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* -------------------------
   9) Tabs / Pills (Produktdetail & Event)
-------------------------- */
.nav-tabs, .nav-pills{
  border: 0 !important;
  gap: 8px;
}
.nav-tabs .nav-link, .nav-pills .nav-link{
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-weight: 750;
  color: var(--text) !important;
  background: rgba(255,255,255,0.7);
}
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover{
  background: rgba(15, 23, 42, 0.04);
}
.nav-tabs .nav-link.active, .nav-pills .nav-link.active{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primaryText) !important;
}

/* -------------------------
   10) Listings/Stores Grid Cards
-------------------------- */
.listings-cards .card,
.stores-cards .card{
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.listings-cards .card-grid,
.stores-cards .card-grid{
  border: none !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
}
.listings-cards .card-grid .card-body,
.stores-cards .card-grid .card-body{
  padding: 12px !important;
}
.listings-cards .card-grid .card-title a,
.stores-cards .card-grid .card-title a{
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}
.listings-cards .card .price,
.stores-cards .card .price{
  font-weight: 900;
}
.listings-cards:not(.no-highlighting) .card-home-page-featured,
.stores-cards:not(.no-highlighting) .card-home-page-featured{
  background-color: rgba(174,255,209,0.25) !important;
  border-radius: var(--r-lg) !important;
}
.listings-cards .btn-wishlist-async,
.stores-cards .btn-wishlist-async{
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.10) !important;
}

/* -------------------------
   11) Sidebar / Filter Boxen
-------------------------- */
.sidebar-content,
.listings-browse .sidebar-content,
.stores-browse .sidebar-content{
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.sidebar-content-neu{
  border-top: 5px solid var(--primary) !important;
  border-radius: var(--r-lg) !important;
}

/* -------------------------
   12) Categories Page
-------------------------- */
.categories-card-columns .card{
  margin-bottom: 16px !important;
}
.categories-card-columns .card .card-body{
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #fff !important;
  padding: 14px 14px !important;
}
.categories-card-columns .card .card-title a{ font-weight: 900; }
.categories-card-columns .card .card-text{ color: var(--muted); }

/* -------------------------
   13) Accordion
-------------------------- */
.accordion-item{
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  background: #fff !important;
}
.accordion-button{
  font-weight: 800;
}
.accordion-button:focus{ box-shadow: var(--ring) !important; }
button.accordion-button.collapsed,
.accordion-button:not(.collapsed){
  background-color: rgba(174,255,209,0.55) !important;
}

/* -------------------------
   14) Tables / Pagination
-------------------------- */
.table{ border-color: var(--border) !important; }
.table thead th{
  color: var(--muted);
  font-weight: 900;
}
.pagination .page-link{
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.pagination .page-item.active .page-link{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primaryText) !important;
}

/* -------------------------
   15) Alerts / Toasts / Modals / Offcanvas
-------------------------- */
.alert{
  border-radius: var(--r-lg) !important;
  border-color: var(--border) !important;
}
.modal-content, .offcanvas{
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
}
.modal-backdrop.show{
  opacity: 0.55;
}
.offcanvas-backdrop.show{
  opacity: 0.55;
}

/* -------------------------
   16) Footer
-------------------------- */
footer,
.light footer{
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: rgba(255,255,255,0.80) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
footer .footer-links a{
  color: var(--muted) !important;
}
footer .footer-links a:hover{
  color: var(--text) !important;
}

/* -------------------------
   17) Cookie Banner
-------------------------- */
.cookie-usage{
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

/* -------------------------
   18) Bottom Nav (Mobile) – optional helpers
   (Desktop blendest du separat aus.)
-------------------------- */
body{
  /* wenn Bottom-Nav aktiv ist: Content nicht überdecken */
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}

/* Desktop/PC: Bottom-Nav komplett aus */
@media (min-width: 768px){
  .bottom-nav{ display: none !important; }
  body{ padding-bottom: 0 !important; }
}

/* Mobile-Feinschliff */
@media (max-width: 767px){
  .card{ border-radius: 18px !important; }
}

/* =========================================================
   PRODUCT DETAIL / LISTING – Modern Look
   Ziel-Selektor: .listing-details (kommt in theme.css bereits vor)
========================================================= */

/* Layout-Hintergrund & Abstände */
.listing-details{
  --pd-gap: 14px;
}

/* Titel & Breadcrumbs */
.listing-details .title{
  margin-bottom: 12px !important;      /* theme.css hat teils negative Margins */
  font-weight: 900;
  letter-spacing: -0.02em;
}

.listing-details .top-section .breadcrumb{
  margin: 0 0 10px 0 !important;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--border);
}

/* Die 3 Hauptboxen wie “Cards” */
.listing-details .media-section,
.listing-details .information-section,
.listing-details .description-section{
  padding: 16px !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Media / Carousel: Bilder groß, clean, rund */
.listing-details .media-section .carousel,
.listing-details .media-section .carousel-inner{
  border-radius: var(--r-lg);
  overflow: hidden;
}

.listing-details .media-section .carousel-item .img-thumbnail{
  border: none !important;
  padding: 0 !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important; /* wir wollen clean */
}

/* Wishlist-Button moderner (schwebend, glassy) */
.listing-details .media-section .btn-wishlist-async{
  border-radius: 999px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(2,6,23,0.14) !important;
}

/* Expand-Button (falls vorhanden) */
.listing-details .carousel-expand{
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(2,6,23,0.14) !important;
}

/* Info-Tabs moderner (falls Bootstrap Tabs/Pills genutzt) */
.listing-details .information-section .nav-tabs,
.listing-details .information-section .nav-pills{
  border: 0 !important;
  gap: 8px;
}

.listing-details .information-section .nav-tabs .nav-link,
.listing-details .information-section .nav-pills .nav-link{
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-weight: 800;
  background: rgba(255,255,255,0.75);
}

.listing-details .information-section .nav-link.active{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primaryText) !important;
}

/* Tab-Inhalt “ruhiger” */
.listing-details .information-section .tab-pane{
  background: rgba(15,23,42,0.02);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: var(--r-md);
  padding: 12px;
}

/* Buttons-Bereich (Gebot/Kaufen) als Card */
.listing-details .buttons-section{
  padding: 16px !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Forms/Buttons auf Produktdetail wirken oft “alt”: jetzt modern */
.listing-details .buttons-section .btn,
.listing-details .buttons-section input[type="submit"],
.listing-details .buttons-section button{
  border-radius: 14px !important;
  font-weight: 850;
}

/* Versand-Accordion in der Detailseite modernisieren */
.listing-details .accordion-postage-rates{
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  border: 1px solid var(--border) !important;
}

.listing-details .accordion-postage-rates .accordion-button{
  font-weight: 850;
}

/* Mobile: mehr Luft & schöne Reihenfolge */
@media (max-width: 767px){
  .listing-details .media-section,
  .listing-details .information-section,
  .listing-details .description-section,
  .listing-details .buttons-section{
    border-radius: 18px !important;
    padding: 14px !important;
  }

  .listing-details .top-section .breadcrumb{
    border-radius: 16px;
  }
}
/* ===== Fix: Kategorien – doppelte “Box” entfernen ===== */

/* Die Card selbst ist die weiße Box */
.categories-card-columns .card{
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  margin-bottom: 16px !important;
}

/* Innen NICHT nochmal eine Box bauen */
.categories-card-columns .card .card-body{
  background: transparent !important; /* nimmt das #fff aus theme.css raus */
  border: 0 !important;
  box-shadow: none !important;
  padding: 14px !important;
}

/* Falls irgendwo pseudo-elements eine Fläche zeichnen */
.categories-card-columns .card::before,
.categories-card-columns .card::after{
  content: none !important;
}
/* SELL PAGE – Footer Hintergrund auf Mobile ausblenden */
@media (max-width: 767px){
  body.is-sell-page .footer-background.no-print{
    display: none !important;
  }
}