/* ================================
   Hafasci Bestelsite — Berghorst Theme (Material-ish)
   Palette geïnspireerd op Berghorst Dranken logo:
   - goud/bronze + antraciet + zacht wit
   ================================ */

/* -------------------------------
   BRAND TOKENS
-------------------------------- */
:root{
  /* Brand */
  --gold: #b58a3a;
  --gold-dark: #8c6728;
  --gold-soft: rgba(181,138,58,.18);

  --charcoal: #3b3f40;
  --charcoal-2: #2b2e2f;

  /* Base UI */
  --bg: #0f1115;
  --bg2: #12141a;
  --card: #171a21;
  --card2: #1c202a;

  --text: #e9edf5;
  --muted: #a7b0c2;

  --line: rgba(255,255,255,.08);
  --line2: rgba(181,138,58,.25);

  --shadow: 0 10px 30px rgba(0,0,0,.38);
  --r: 18px;

  /* States */
  --success: #2ecc71;
  --danger: #e74c3c;
  --warning: #f1c40f;

  /* Login watermark parallax vars (set by JS in _layout) */
  --px: 0;
  --py: 0;
  --ps: 0;
}

/* -------------------------------
   RESET / BASE
-------------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 650px at 18% 0%, rgba(181,138,58,.10), transparent 60%),
    radial-gradient(900px 520px at 95% 8%, rgba(59,63,64,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
code, pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* -------------------------------
   LAYOUT HELPERS
-------------------------------- */
.wrap{ max-width:1100px; margin:0 auto; padding:18px 16px; }
.grid{ display:grid; grid-template-columns:260px 1fr; gap:16px; }
@media (max-width: 900px){
  .grid{ grid-template-columns:1fr; }
}

/* -------------------------------
   TOPBAR
-------------------------------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(15,17,21,.65);
  border-bottom: 1px solid var(--line);
}
.topbar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
}
.brand .material-icons{ color: var(--gold); }

/* ✅ HEADER MINI LOGO’S (links van titel) */
.brand-logos{
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:200px;
}
.brand-logos img{
  height:60px;
  width:auto;
  opacity:.95;
  filter: brightness(1.08) contrast(1.01);
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.brand-logos img:nth-child(2){
  /* wijnimport iets lichter in header */
  filter: brightness(1.08) contrast(1.01) saturate(1.05);
  opacity:.95;
}
.brand-logos img:hover{
  opacity:1;
  transform: translateY(-1px) scale(1.05);
}
@media (max-width: 720px){
  .brand-logos img{ height:22px; }
}

/* -------------------------------
   CHIPS / PILLS
-------------------------------- */
.pill, .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,.02);
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip strong{ color: var(--text); font-weight:800; }

/* -------------------------------
   CARDS
-------------------------------- */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.card .hd{
  padding:14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.card .bd{ padding:14px; }

/* -------------------------------
   TYPOGRAPHY
-------------------------------- */
h1,h2,h3{ margin:0 0 10px; }
.muted{ color: var(--muted); }
small, .small{ font-size: 13px; color: var(--muted); }

/* -------------------------------
   NAV (SIDEBAR)
-------------------------------- */
.nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius: 14px;
  color: var(--muted);
  border: 1px solid transparent;
}
.nav a:hover{
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-color: rgba(255,255,255,.06);
}
.nav a.active{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-color: rgba(255,255,255,.10);
}
.nav a.active::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(181,138,58,1), rgba(140,103,40,1));
  opacity:.95;
}

/* -------------------------------
   BUTTONS
-------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  user-select:none;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ background: rgba(255,255,255,.06); }
.btn:active{ transform: translateY(1px); }

.btn.pri{
  background: linear-gradient(180deg, rgba(181,138,58,.95), rgba(140,103,40,.95));
  border-color: rgba(181,138,58,.55);
  color: #0b0c10;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(181,138,58,.18);
}
.btn.pri:hover{
  background: linear-gradient(180deg, rgba(181,138,58,1), rgba(140,103,40,1));
  border-color: rgba(181,138,58,.75);
}
.btn.ghost{
  background: transparent;
  border-color: rgba(181,138,58,.22);
}
.btn.danger{
  background: rgba(231,76,60,.12);
  border-color: rgba(231,76,60,.28);
}
.btn.success{
  background: rgba(46,204,113,.12);
  border-color: rgba(46,204,113,.28);
}

/* -------------------------------
   FORMS
-------------------------------- */
.field{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
label{ font-size: 13px; color: var(--muted); }

input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(181,138,58,.22);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder{ color: rgba(167,176,194,.65); }

input:focus, select:focus, textarea:focus{
  border-color: rgba(181,138,58,.72);
  box-shadow: 0 0 0 3px rgba(181,138,58,.18);
  background: rgba(0,0,0,.28);
}

input[type="checkbox"], input[type="radio"]{
  width:auto;
  padding:0;
  border-radius:6px;
}

/* -------------------------------
   TABLE
-------------------------------- */
table{ width:100%; border-collapse: collapse; }
th, td{
  padding:10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
  vertical-align: top;
}
th{
  color: var(--muted);
  font-weight: 700;
  letter-spacing:.2px;
  text-transform: none;
}
tbody tr:hover{
  background: rgba(255,255,255,.03);
}

/* -------------------------------
   ALERTS
-------------------------------- */
.alert{
  border-radius: 14px;
  padding:12px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.alert .material-icons{ font-size: 18px; margin-top:1px; }
.alert.error{
  border-color: rgba(231,76,60,.35);
  background: rgba(231,76,60,.10);
  color: #fecaca;
}
.alert.success{
  border-color: rgba(46,204,113,.35);
  background: rgba(46,204,113,.10);
  color: #d1fae5;
}
.alert.warn{
  border-color: rgba(241,196,15,.35);
  background: rgba(241,196,15,.10);
  color: #fde68a;
}

/* -------------------------------
   DIVIDERS
-------------------------------- */
.hr{
  height:1px;
  background: rgba(255,255,255,.06);
  margin:12px 0;
}

/* Material icons align */
.material-icons{ vertical-align: middle; }

/* ============================================
   FOOTER netjes onder login-card
============================================ */
body.login-page .site-footer{
  position: relative;
  z-index: 5;

  /* exact onder card */
  max-width: 420px;          /* match login-wrap */
  margin: 18px auto 0;

  text-align: center;
  font-size: 13px;
  color: rgba(167,176,194,.65);

  padding: 0;
}

/* ============================================
   LOGIN PAGE — PREMIUM WATERMARKS + CARD WIDTH
============================================ */
body.login-page{
  position: relative;
  overflow-x: hidden;
}

/* subtle extra vignette depth */
body.login-page::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 520px at 20% 30%, rgba(181,138,58,.10), transparent 60%),
    radial-gradient(700px 520px at 82% 70%, rgba(255,255,255,.04), transparent 65%);
}

/* Ensure content sits above watermark overlays */
body.login-page .wrap,
body.login-page .topbar{
  position: relative;
  z-index: 3;
}

/* login card above */
body.login-page .card{
  position: relative;
  z-index: 3;
}

/* watermarks layer 1: logo-dranken */
body.login-page::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events:none;

  background-image: url("/public/img/logo-dranken.jpg");
  background-repeat: no-repeat;
  background-position: left 9% top 26%;
  background-size: 295px auto;

  opacity: 0.07;
  filter: grayscale(1) brightness(1.55);

  transform:
    translate(calc(var(--px) * 1.25px), calc(var(--py) * 1.25px))
    translateY(calc(var(--ps) * -0.8px))
    rotate(-8deg);

  transform-origin: center;
  transition: transform .14s ease-out;
  animation: wmFloatA 12s ease-in-out infinite; /* iets meer beweging */
}

/* wijnimport overlay — ✅ LICHTER + PREMIUM */
body.login-page .wm-wijnimport{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events:none;

  background-image: url("/public/img/logo-wijnimport.jpg");
  background-repeat: no-repeat;
  background-position: right 10% bottom 46%;
  background-size: 295px auto;

  opacity: 0.08;                 /* iets zichtbaarder */

  /* ✅ 'screen' maakt donkere pixels veel minder zichtbaar */
  mix-blend-mode: screen;

  /* ✅ extra lift: blauw + donker weg, richting warme tint */
  filter:
    grayscale(1)
    brightness(0.65)
    contrast(.95)
    sepia(1)
    hue-rotate(18deg)
    saturate(3.5);

  transform:
    translate(calc(var(--px) * -1.55px), calc(var(--py) * -1.55px))
    translateY(calc(var(--ps) * 1.10px))
    rotate(10deg);

  transform-origin: center;
  transition: transform .14s ease-out;
  animation: wmFloatB 12s ease-in-out infinite; /* iets meer beweging */
}

/* ✅ Login card width (smaller, premium) */
.login-wrap{
  max-width: 420px;
  margin: 0 auto;
  padding-top: 70px;
}
@media (max-width: 520px){
  .login-wrap{ max-width: 94vw; padding-top: 44px; }
}
body.login-page .login-wrap .card{
  width: 100%;
  border-radius: 22px;
  backdrop-filter: blur(14px);
  box-shadow:
    0 20px 55px rgba(0,0,0,.58),
    0 0 0 1px rgba(181,138,58,.18);
}

/* Buttons on login: not full-width */
.login-wrap .btn{
  width: auto;
  min-width: 160px;
}

/* Animations (luxury float) */
@keyframes wmFloatA{
  0%,100%{
    transform:
      translate(calc(var(--px) * 1.25px), calc(var(--py) * 1.25px))
      translateY(calc(var(--ps) * -0.8px))
      translateY(0)
      rotate(-8deg);
  }
  50%{
    transform:
      translate(calc(var(--px) * 1.55px), calc(var(--py) * 1.55px))
      translateY(calc(var(--ps) * -0.8px))
      translateY(-12px)
      rotate(-6deg);
  }
}

@keyframes wmFloatB{
  0%,100%{
    transform:
      translate(calc(var(--px) * -1.55px), calc(var(--py) * -1.55px))
      translateY(calc(var(--ps) * 1.10px))
      translateY(0)
      rotate(10deg);
  }
  50%{
    transform:
      translate(calc(var(--px) * -1.95px), calc(var(--py) * -1.95px))
      translateY(calc(var(--ps) * 1.10px))
      translateY(-14px)
      rotate(12deg);
  }
}
/* =========================
   GLOBAL FOOTER (alle pagina's)
========================= */
.site-footer{
  display:block;
  width:100%;
  margin: 22px auto 0;
  padding: 14px 16px;
  text-align:center;
  font-size: 13px;
  color: rgba(167,176,194,.65);
}

/* login blijft exact onder card */
body.login-page .site-footer{
  max-width: 420px;      /* match login-wrap */
  margin: 18px auto 0;
  padding: 0;
}
/* ================================
   ICON ONLY CART BUTTON (premium)
================================ */

/* knop wordt compact rond icoon */
.icon-btn {
  padding: 10px;
  min-width: 46px;
  width: 46px;
  height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
}

/* icoon groter en strak */
.icon-btn .material-icons {
  font-size: 22px;
}

/* Tooltip luxe */
.icon-btn[title] {
  position: relative;
}

/* Tooltip verschijnt bij hover */
.icon-btn:hover::after {
  content: attr(title);

  position: absolute;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);

  background: rgba(0,0,0,.85);
  color: #fff;

  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;

  white-space: nowrap;
  pointer-events: none;

  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  opacity: 1;
  z-index: 50;
}

/* klein pijltje onder tooltip */
.icon-btn:hover::before {
  content: "";

  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);

  border-width: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,.85) transparent transparent transparent;
}
table th:nth-child(4),
table td:nth-child(4) {
  width: 160px;
}
/* Kalender icoon goud maken */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(79%) sepia(54%) saturate(749%)
            hue-rotate(2deg) brightness(105%) contrast(102%);
}
input[type="date"] {
    color-scheme: dark;
}
/* Cart feedback */
.qty-in-cart {
  outline: 2px solid rgba(35, 170, 90, .55);
  box-shadow: 0 0 0 4px rgba(35, 170, 90, .12);
}

.btn-cart-added {
  background: rgba(35, 170, 90, .22) !important;
  border-color: rgba(35, 170, 90, .55) !important;
  color: #dfffe9 !important;
}

.btn-cart-added .material-icons {
  color: rgba(120, 255, 170, .95) !important;
}

.qty-dirty {
  outline: 2px solid rgba(255, 200, 60, .55);
  box-shadow: 0 0 0 4px rgba(255, 200, 60, .10);
}
.btn.disabled,
.btn[aria-disabled="true"]{
  opacity:.45;
  pointer-events:none;
  cursor:not-allowed;
}
/* Dropdowns beter leesbaar */
select{
  color: #fff;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
}

select:focus{
  outline: none;
  border-color: rgba(230,212,21,.65); /* goud accent */
  box-shadow: 0 0 0 3px rgba(230,212,21,.18);
}

/* De open lijst (options) */
select option{
  color: #111;          /* donkere tekst */
  background: #f4f4f4;  /* licht */
}

/* Optioneel: optgroup ook leesbaar */
select optgroup{
  color: #111;
  background: #eaeaea;
}

/* Date input (kalender dropdown) ook beter */
input[type="date"]{
  color: #fff;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
}