/* ===============================
   BASE
   =============================== */
body{
  font-family: Arial, sans-serif;
  background:#f1f4f8;
  padding:20px;
  max-width:900px;
  margin:auto;
}

h1{
  text-align:center;
  margin-bottom:20px;
  font-weight:700;
  color:#222;
}

/* ===============================
   SEARCH
   =============================== */
form#searchForm{width:100%;text-align:center;margin-bottom:12px;}
form#searchForm input[type="text"]{
  width:350px;max-width:100%;
  padding:10px 12px;border-radius:12px;
  border:1px solid #ccc;font-size:16px;
  box-sizing:border-box;
}

/* ===============================
   FILTERS
   =============================== */
.filters{ text-align:center; margin-bottom:20px; }
.filters a,
.filters button{
  display:inline-block;
  padding:8px 16px;
  margin:0 6px;
  border-radius:20px;
  font-weight:600;
  color:#555;
  background:#ddd;
  border:none;
  cursor:pointer;
  transition:background-color .3s,color .3s;
}

.filters button.selected-all,
.filters button.selected-man,
.filters button.selected-woman,
.filters button.selected-unisex,
.filters button.selected-ritual{ color:#fff; }

.filters button.selected-all{background:#607d8b;}
.filters button.selected-man{background:#1e88e5;}
.filters button.selected-woman{background:#e91e63;}
.filters button.selected-unisex{background:#4caf50;}
.filters button.selected-ritual{background:#9c27b0;}

/* ===============================
   TABLE (SMART FIXED LAYOUT)
   =============================== */
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  table-layout:fixed;              /* 🔑 strak */
}

th,td{
  padding:12px 15px;
  border-bottom:1px solid #eee;
  text-align:left;
  font-size:15px;
  color:#333;
  vertical-align:middle;
}

th{
  background:#273142;
  color:#fff;
  font-weight:600;
  letter-spacing:.2px;
}

.premium-star{
  display:inline-block;
  color:#f5b301;
  font-size:1.08em;
  line-height:1;
  margin-left:5px;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  transform:translateY(-1px);
}

.premium-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  border-radius:999px;
  background:#f5b301;
  color:#111;
  font-size:12px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
}

tr:hover td{ background:#f9f9f9; }

/* Links */
a{ color:#1e88e5; font-weight:600; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===============================
   COLUMN SIZING (PRO LOOK)
   =============================== */
th.col-code, td.col-code{
  width:80px;
  white-space:nowrap;
  font-weight:600;
}

th.col-name, td.col-name{
  width:220px;                  /* naam krijgt vaste nette ruimte */
  white-space:normal;
  overflow-wrap:break-word;
  word-break:break-word;
}

th.col-inspired, td.col-inspired{
  width:auto;                   /* rest ruimte */
  white-space:normal;
  overflow-wrap:break-word;
  word-break:break-word;
}

th.col-image, td.col-image{
  width:90px;
  text-align:center;
  white-space:nowrap;
}

th.col-fragrantica, td.col-fragrantica{
  width:120px;
  text-align:center;
  white-space:nowrap;
}

th.col-category, td.col-category{
  width:120px;
  text-align:left;
  white-space:nowrap;
}

th.col-shop, td.col-shop{
  width:120px;
  text-align:center;
  white-space:nowrap;
}

/* ===============================
   STRIPES PER CATEGORY
   =============================== */
.custom-striped tr.row-man:nth-child(odd) td{ background-color:#cce5ff !important; }
.custom-striped tr.row-man:nth-child(even) td{ background-color:#e6f2ff !important; }

.custom-striped tr.row-woman:nth-child(odd) td{ background-color:#f8d7da !important; }
.custom-striped tr.row-woman:nth-child(even) td{ background-color:#fdecee !important; }

.custom-striped tr.row-unisex:nth-child(odd) td{ background-color:#d4edda !important; }
.custom-striped tr.row-unisex:nth-child(even) td{ background-color:#e9f7ef !important; }

.custom-striped tr.row-ritual:nth-child(odd) td{ background-color:#e2d6f3 !important; }
.custom-striped tr.row-ritual:nth-child(even) td{ background-color:#f3eafa !important; }

/* ===============================
   THUMB
   =============================== */
.perfume-thumb{
  width:45px;
  height:auto;
  border-radius:6px;
  display:block;
  margin:0 auto;
  cursor:pointer;
  touch-action:manipulation;
}

/* ===============================
   LIGHTBOX (voor jouw huidige HTML)
   =============================== */
#imgModal{display:none;position:fixed;inset:0;z-index:999999;}
#imgModal .img-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.70);}
#imgModal .img-modal__dialog{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(92vw,560px);max-height:88vh;background:#fff;border-radius:18px;
  padding:12px;box-shadow:0 10px 40px rgba(0,0,0,.35);overflow:hidden;
}
#imgModal .img-modal__dialog{position:relative;}
#imgModal .img-modal__dialog img{display:block;max-width:100%;max-height:78vh;margin:0 auto;border-radius:12px;}
#imgModal .img-modal__close{
  position:absolute;top:6px;right:10px;font-size:34px;border:0;background:none;cursor:pointer;line-height:1;
}
body.no-scroll{overflow:hidden;}

/* ===============================
   MOBILE: tabel scroll (beste UX)
   =============================== */
@media (max-width:820px){
  body{ padding:10px; }

  table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  th,td{ white-space:nowrap; }

  .filters{
    overflow-x:auto;
    white-space:nowrap;
    padding-bottom:8px;
  }
}


/* Primaire actieknop – identiek aan PDF download */
.btn-primary-action {
  background: #1e88e5;
  color: #ffffff !important;
  padding: 10px 25px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

.btn-primary-action:hover {
  background: #1565c0;
  transform: translateY(-1px);
}

/* Info knop – groen */
.btn-info-action {
  background: #28a745;       /* groen */
  border-color: #28a745;
}

.btn-info-action:hover {
  background: #218838;       /* donkerder groen */
  border-color: #1e7e34;
}


/* KADERKLEUR PER TYPE (PDF exact gelijk aan gridview) */
.type-man{
  border-color:#1e88e5;      /* blauw */
}

.type-woman{
  border-color:#e91e63;      /* roze */
}

.type-unisex{
  border-color:#4caf50;      /* groen */
}

.type-ritual{
  border-color:#9c27b0;      /* paars */
}