/* ===== Theme – gebruikt CSS variabelen uit base.html.twig ===== */

body {
  background-color: var(--background-color);
  color: var(--body-text-color);
}

/* Header / Navbar */
.navbar { background: transparent !important; }
.navbar .navbar-brand span {
  color: var(--site-title-color) !important; /* aparte kleur site-titel */
}
.navbar .nav-link { color: var(--menu-item-color) !important; }
.navbar .nav-link:hover { color: var(--item-hover-color) !important; }

/* Footer */
footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  padding: 1rem 0;
  margin-top: 2rem;
}
footer a { color: var(--footer-text-color); }
footer a:hover { color: var(--item-hover-color); }

/* Headings */
h1,h2,h3,h4,h5,h6 { color: var(--title-text-color); }

/* Product detail */
.product-detail h1 { color: var(--product-title-color) !important; }
.product-detail .product-description,
.product-detail .lead { color: var(--description-color) !important; }

/* Product overview titles (cards) */
.card .card-title,
.card .card-title a,
.product-grid .card-title a {
  color: var(--product-overview-title-color) !important;
  text-decoration: none;
}

/* Categorie namen/knoppen – brede selectors zodat het altijd pakt */
.category-label,
.category-name,
.category-chip,
.category-button,
.category-list a,
.category-grid .card .card-title a,
.category-list .btn,
.category-tags a {
  color: var(--category-color) !important;
}

/* Iconen en review-sterren */
.fas, .fa, .far { color: var(--icon-color); }
.review-stars .fa-star,
.rating .fa-star,
.stars .fa-star { color: var(--rating-star-color) !important; }

/* Links (geen knoppen) */
a:not(.btn), a.text-reset { color: var(--menu-item-color); }
a:not(.btn):hover, a.text-reset:hover, a:not(.btn):focus { color: var(--item-hover-color); }

/* Header logo grootte (optioneel) */
.site-logo img { max-height: var(--header-height, 80px); width: auto; }

/* Language dropdown scroll */
.dropdown-menu { max-height: 300px; overflow-y: auto; }

/* ===== Buttons (filled vs outline) ===== */

/* Alle buttons behalve outlines */
.btn:not([class*="btn-outline"]) {
  background-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border-color: var(--btn-bg) !important;
}
.btn:not([class*="btn-outline"]):hover,
.btn:not([class*="btn-outline"]):focus {
  background-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
  border-color: var(--btn-hover-bg) !important;
}

/* Alle outline-varianten */
.btn[class*="btn-outline"] {
  color: var(--btn-outline-text) !important;
  border-color: var(--btn-outline-color) !important;
  background-color: transparent !important;
}
.btn[class*="btn-outline"]:hover,
.btn[class*="btn-outline"]:focus {
  background-color: var(--btn-outline-hover-bg) !important;
  color: var(--btn-outline-hover-text) !important;
  border-color: var(--btn-outline-hover-bg) !important;
}

/* Button-icoontjes los */
.btn i, .btn .fa, .btn .fas, .btn .far {
  color: var(--button-icon-color) !important;
}
.btn:hover i, .btn:hover .fa, .btn:hover .fas, .btn:hover .far,
.btn:focus i, .btn:focus .fa, .btn:focus .fas, .btn:focus .far {
  color: var(--button-icon-hover-color) !important;
}

/* Menu-icoontjes los (overrulet algemene icon_color) */
.navbar .nav-link i,
.navbar .nav-link .fa,
.navbar .nav-link .fas,
.navbar .nav-link .far {
  color: var(--menu-icon-color) !important;
}

/* ALGEMENE iconen (laat bestaan, maar staat bewust boven de specifieke regels)
.fas, .fa, .far { color: var(--icon-color); }
   → bij jou staat die al; onze specifiekere regels hierboven winnen. */

/* ===== Sterren – vol en half exact zelfde kleur ===== */
.review-stars .fa-star,
.rating .fa-star,
.stars .fa-star,
.review-stars .fa-star-half-alt,
.rating .fa-star-half-alt,
.stars .fa-star-half-alt,
.review-stars .fa-star-half-stroke,
.rating .fa-star-half-stroke,
.stars .fa-star-half-stroke,
.review-stars .fa-star-half,
.rating .fa-star-half,
.stars .fa-star-half {
  color: var(--rating-star-color) !important;
}

/* === Admin Settings polish (scoped) === */
.settings-form .card { border-radius: .75rem; }
.settings-form .card-header { background: #f8f9fa; }
.settings-form hr { border-color: rgba(0,0,0,.08); opacity: 1; }
.settings-form .flag { border-radius: 2px; }
.settings-form .settings-tabs .nav-link { border-top-left-radius: .75rem; border-top-right-radius: .75rem; }

/* Sticky action bar */
.settings-form .settings-actions{
  position: sticky; bottom: 0;
  background: #fff; padding: .75rem 0;
  border-top: 1px solid rgba(0,0,0,.1);
  z-index: 30;
}

/* Branding previews gelijk uitlijnen (admin settings) */
.settings-form .brand-preview{
  height: 80px;                /* zelfde hoogte als logo max-height */
  display: flex;
  align-items: flex-end;       /* beeld onderaan uitlijnen */
}
.settings-form .brand-preview img{
  max-height: 80px;            /* respecteer logo-grootte */
  width: auto;
}

/* ===== Modern Footer ===== */
.modern-footer .footer-main{
  background: var(--footer-bg-color);
  color: var(--footer-text-color);
  padding: 2.5rem 0;
}
.modern-footer a { color: var(--menu-item-color); }
.modern-footer a:hover { color: var(--item-hover-color); }

.modern-footer .footer-heading{
  font-weight: 600;
  margin-bottom: .75rem;
  position: relative;
  color: var(--title-text-color);
}
.modern-footer .footer-heading::after{
  content: "";
  display: block;
  width: 48px; height: 3px;
  background: var(--footer-heading-accent);
  border-radius: 999px;
  margin-top: .35rem;
}

.modern-footer .footer-links li{ margin:.4rem 0; }
.modern-footer .text-muted{ color: var(--footer-bottom-text-color) !important; }

.modern-footer .footer-newsletter input.form-control{
  background: var(--footer-input-bg);
  color: var(--footer-input-text);
  border: 1px solid rgba(0,0,0,.1);
}
.modern-footer .footer-newsletter input::placeholder{ color: rgba(0,0,0,.45); }
.modern-footer .footer-news-btn{
  background: var(--footer-news-btn-bg) !important;
  color: var(--footer-news-btn-text) !important;
  border-color: var(--footer-news-btn-bg) !important;
}
.modern-footer .footer-news-btn:hover,
.modern-footer .footer-news-btn:focus{
  background: var(--footer-news-btn-hover-bg) !important;
  color: var(--footer-news-btn-hover-text) !important;
  border-color: var(--footer-news-btn-hover-bg) !important;
}

.modern-footer .social{
  display:inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px;
  border-radius: .75rem;
  background: var(--footer-social-bg);
  color: var(--footer-social-color);
  border: 1px solid rgba(0,0,0,.06);
}
.modern-footer .social:hover{ filter: brightness(0.95); }

.modern-footer .footer-bottom{
  background: var(--footer-bottom-bg-color);
  color: var(--footer-bottom-text-color);
  padding: .9rem 0;
}
.modern-footer .footer-bottom a{ color: var(--menu-item-color); }
.modern-footer .footer-bottom a:hover{ color: var(--item-hover-color); }

/* ===== Order detail fixes ===== */

/* Zorg dat productfoto’s in de order tabel nooit het layout breken */
.order-detail .order-item-img{
  display:block;
  max-height:120px;   /* ≈ 80–120px werkt mooi; pas aan naar smaak */
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:.5rem;
}
@media (max-width: 576px){
  .order-detail .order-item-img{ max-height:80px; }
}

/* Tabel netjes centreren en afstand tussen thumbnail en titel */
.order-detail .table td,
.order-detail .table th{ vertical-align:middle; }
.order-detail .table .d-flex{ gap:.75rem; }

/* Optioneel: kleine ‘box’ look voor de info-blokjes in je kaart */
.order-detail .order-box{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.75rem;
}

/* ===== Tijdlijn (mini) ===== */
.order-timeline{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 0;
  overflow-x:auto;               /* blijft netjes op mobiel */
}
.order-timeline .timeline-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.25rem;
  min-width:110px;
  text-align:center;
}
.order-timeline .timeline-step .dot{
  width:12px; height:12px;
  border-radius:999px;
  background:#e5e7eb;            /* grijs */
  border:2px solid #e5e7eb;
}
.order-timeline .timeline-step.active .dot{
  background:var(--menu-icon-color);
  border-color:var(--menu-icon-color);
}
.order-timeline .timeline-step .label{
  font-size:.85rem;
  line-height:1.1;
  color:var(--body-text-color);
  opacity:.6;
  white-space:nowrap;
}
.order-timeline .timeline-step.active .label{
  opacity:1; font-weight:600;
}
.order-timeline .timeline-line{
  flex:1;
  height:2px;
  background:#e5e7eb;
  min-width:24px;
}
.order-timeline .timeline-line.active{
  background:var(--menu-icon-color);
}

/* ===== Variant pills: standaard grijs, gevuld groen bij selectie ===== */
.variant-group .variant-btn{
  display:inline-flex;
  align-items:center;
  padding:.375rem .75rem;
  border:2px solid #ced4da;           /* neutraal */
  border-radius:.75rem;
  background:#fff;
  color:#495057;
  cursor:pointer;
  user-select:none;
  transition:background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.variant-group .variant-btn:hover{
  border-color:#adb5bd;
  box-shadow:0 0 0 .15rem rgba(0,0,0,.04);
}
.variant-group .variant-btn.is-selected{
  background:var(--dp-accent, #35f33a);
  border-color:var(--dp-accent, #35f33a);
  color:#fff;
}

/* ===== Qty knoppen: volledig neutraal en geïntegreerd ===== */
.qty-group .btn-qty{
  appearance: none;
  border:1px solid #ced4da !important;
  background:#fff !important;
  color:#495057 !important;
  padding:.375rem .75rem;
  line-height:1.25;
}
.qty-group .btn-qty:hover{
  background:#f8f9fa !important;
  color:#212529 !important;
}
.qty-group .border-qty{
  border-top:1px solid #ced4da !important;
  border-bottom:1px solid #ced4da !important;
  border-left:0 !important;
  border-right:0 !important;
  box-shadow:none !important;
}
.qty-group .btn-qty:focus,
.qty-group .border-qty:focus{
  box-shadow:none !important;
}

/* Key features: bullets weg en groene vinkjes */
.feature-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.feature-list li{
  position: relative;
  padding-left: 1.5rem;      /* ruimte voor het icoon */
  margin: .25rem 0;
}
.feature-list li::before{
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0; top: 0;
  color: var(--dp-accent, #28a745);
}

/* ====== Auth (Login/Register) ====== */
.auth-hero{
  background:
    radial-gradient(1100px 450px at 10% -20%, rgba(117,255,186,.25) 0, rgba(117,255,186,0) 60%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  min-height: 70vh;
}

.auth-card{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 40px rgba(0,0,0,.06);
  background: #fff;
}

.auth-side{
  width: 44%;
  min-height: 420px;
  color: #0b3b2e;
  background: linear-gradient(135deg, #9cffb8 0%, #eafff2 100%);
}

.auth-badge{
  display: inline-block;
  font-weight: 600;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 4px 14px rgba(0,0,0,.04) inset;
}

.auth-heading{ font-weight: 800; letter-spacing: .2px; }
.auth-subtle{ opacity:.8; }
.auth-side-footer{ opacity:.7; }

@media (max-width: 991.98px){
  .auth-side{ display:none !important; }
}

.input-icon{
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: #7e8a94;
}
.form-control.has-icon{ padding-left: 2.25rem; }

/* “Brand” primary knop (matcht je groene merkaccent) */
.btn-brand{
  background: #23ff47; /* felgroen dat je overal gebruikt */
  border-color: #23ff47;
  color: #0a2b12;
  font-weight: 700;
  border-radius: 12px;
}
.btn-brand:hover{
  filter: brightness(.95);
  color: #061a0b;
}

/* Kleinere details */
.auth-divider{
  position: relative; text-align: center; color: #76808a; font-size: .9rem;
}
.auth-divider::before, .auth-divider::after{
  content: ""; display: inline-block; width: 38%; height: 1px; background: #e9edf1;
  vertical-align: middle; margin: 0 .75rem;
}

/* Input focus-animatie subtiel */
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(35,255,71,.15);
  border-color: rgba(35,255,71,.5);
}

/* =========================
   AUTH PAGES (login/register)
   ========================= */

/* — kleur-instellingen die je zelf kunt wijzigen — */
:root{
  /* gradient ín de kaart (de box) */
  --auth-grad-from: #ffffff;   /* startkleur */
  --auth-grad-to:   #f6faff;   /* eindkleur */
  --auth-grad-angle: 165deg;   /* richting (0-360) */

  /* accentkleur (knoppen/hover indien gewenst) */
  --auth-accent: #28e93a;
}

/* buitenste wrapper van auth-pagina's */
.auth-shell{
  padding: 36px 0 64px;
  background: none;            /* <— GEEN gradient achter de box */
}

/* wil je tóch een gradient achter de box?
   voeg in de template de class 'with-page-gradient' toe op .auth-shell */
.auth-shell.with-page-gradient{
  background: none;            /* we zetten het in een afgeronde container i.p.v. full-page */
}
.auth-shell.with-page-gradient .auth-page-bg{
  max-width: 960px;
  margin: 0 auto 24px;
  border-radius: 24px;         /* afgeronde hoeken voor de achtergrond */
  background: linear-gradient(145deg, #f8fbff, #eef4ff);
  padding: 1px;                /* subtiele rand */
}
.auth-shell.with-page-gradient .auth-page-bg > .inner{
  border-radius: 24px;
  background: #fff;
  padding: 1px;
}

/* de eigenlijke kaart (de box) */
.auth-card{
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid #eef2f7;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow: hidden;
  background: linear-gradient(var(--auth-grad-angle), var(--auth-grad-from), var(--auth-grad-to));
}

/* card-secties */
.auth-header{ padding: 28px 28px 12px; }
.auth-body{ padding: 24px 28px 28px; background: transparent; }

/* “terug”-link stijl (optioneel) */
.auth-back a{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none;
}

.cms-rounded{
  border-radius: 1rem;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Navbar links nooit onderlijnen */
.navbar .nav-link { text-decoration: none !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus { text-decoration: none !important; }

/* selection tiles used by gallery & image+ */
.gal-item{position:relative;border:1px solid var(--bs-border-color);border-radius:.5rem;overflow:hidden;cursor:pointer}
.gal-item img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.gal-item .check{position:absolute;right:.5rem;bottom:.5rem;width:28px;height:28px;border-radius:50%;background:var(--bs-primary);color:#fff;
  display:none;align-items:center;justify-content:center}
.gal-item.active .check{display:flex}
.gal-dropzone.drag{background:rgba(13,110,253,.05);border-color:var(--bs-primary)}

<style>
  .gal-dropzone.drag { background: rgba(13,110,253,.05); border-color:#0d6efd; }
  #imgPlusGrid .pick, #galLibGrid .gal-item,
  #iconGrid .pick { cursor:pointer; }
  #imgPlusGrid .active .check, #galLibGrid .active .check { opacity: 1; }
  #imgPlusGrid .gal-item, #galLibGrid .gal-item { position:relative; border:1px solid var(--bs-border-color); border-radius:.5rem; overflow:hidden; }
  #imgPlusGrid .gal-item img, #galLibGrid .gal-item img { width:100%; height:120px; object-fit:cover; display:block; }
  #imgPlusGrid .gal-item .check, #galLibGrid .gal-item .check { position:absolute; top:.25rem; right:.25rem; background:#0d6efd; color:#fff; border-radius:.35rem; padding:.1rem .25rem; opacity:0; transition:.1s; }

/* Categorie-kaarten */
.cat-card{
  display:block;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  height: 100%;
}
.cat-card:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.10);
}

/* Titel behoudt jouw thema-styling: kleur/lettertype komen uit settings via bestaande CSS.
   We geven enkel spacing en centrering. */
.cat-card .cat-title{
  text-align:center;
  padding:14px 16px;
  font-weight:600; /* als je ander gewicht gebruikt via settings, mag dit weg */
}

/* Media-blok gemeenschappelijk */
.cat-media{ width:100%; display:block; }

/* Fill: vaste hoogte die mooi oogt */
.cat-media.mode-fill{ aspect-ratio: 16 / 10; }

/* Circle: center, ronde thumb */
.cat-media.mode-circle{
  padding:18px 0;
  min-height: 160px;
}
.cat-media.mode-circle img{
  width:128px; height:128px; object-fit:cover; border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 3px 12px rgba(0,0,0,.05);
}

/* Half: 3/4 beeld */
.cat-media.mode-half{
  aspect-ratio: 16 / 10;
  /* 75% van de kaart visueel door beeld gedomineerd -> kan ook met calc-height,
     maar aspect-ratio is simpel en responsief */
}

/* --- FILL als full-bleed achtergrond + overlay --- */
.cat-card { position: relative; min-height: 220px; overflow: hidden; }
.cat-card.mode-fill .cat-media.mode-fill{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.cat-card.mode-fill::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); pointer-events:none;
}
/* titel bovenop (kleur blijft door jouw thema bepaald, maar op donker is wit beter – daarom fallback) */
.cat-card.mode-fill .cat-title{
  position:absolute; left:0; right:0; bottom:12px;
  text-align:center; font-weight:600;
  color: var(--category-color, #fff);
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* === OVERRIDES: haal gradient + oude fill-logica weg === */
.cat-card{ height:230px; }               /* vaste nette hoogte */
.cat-card.mode-fill::after{ content:none !important; display:none !important; }
.cat-media.mode-fill{ aspect-ratio:auto !important; height:100% !important;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; }
.cat-card.mode-fill .cat-title{ position:absolute; left:12px; right:12px; bottom:12px; text-shadow:none !important; }
/* laat kleur/lettertype gewoon door jouw .category-label regelen */


/* Consistente thumbs op kaarten */
.product-thumb img { object-fit: cover; }

/* Subcategorie knoppen: neutraal met subtiele hover */
.btn.btn-light.border.active { 
  background: #fff; 
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.08);
}

/* Card hover polish */
.product-card { 
  transition: transform .15s ease, box-shadow .15s ease; 
  border: 1px solid rgba(0,0,0,.06);
}
.product-card:hover { 
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}

/* Nav-underline kleur fix — laat jouw themakleuren gelden */
.nav-underline .nav-link.active {
  color: var(--menu-item-color) !important;
  text-decoration: none;
}
.nav-underline .nav-link:hover { color: var(--item-hover-color) !important; }


</style>