/* =========================================================
   BEUKK visual override for Inkoopgemak leverancier
   Target: Bootstrap 3 + Unify
   Safe: CSS only, no layout JS impact
   ========================================================= */


/* BEUKK color variables (auto-generated) */
:root {
  --beukk-page-bg: #e9f7e9;
  --beukk-text-primary: #1d1f1d;
  --beukk-brand-primary: #5f7f62;
  --beukk-surface-base: #ffffff;
  --beukk-shadow-soft: rgba(0,0,0,0.06);
  --beukk-border-soft: #e3ddcd;
  --beukk-shadow-medium: rgba(0,0,0,0.08);
  --beukk-surface-muted: #eef4ef;
  --beukk-panel-header-bg: #fbf8f0;
  --beukk-text-secondary: #333333;
  --beukk-brand-tint-strong: rgba(95,127,98,0.25);
  --beukk-table-row-even-bg: #e6e6e6;
  --beukk-brand-primary-hover: #54735a;
  --beukk-button-primary-bg: #c46a4a;
  --beukk-button-primary-bg-hover: #b85f44;
  --beukk-input-border: #9fb8a6;
  --beukk-input-disabled-border: #c8d6cc;
  --beukk-text-disabled: #6f7a73;
  --beukk-link-highlight: #c46a4a;
  --beukk-link-visited: #8a4f3a;
  --beukk-link-active-bg: #ffd8b0;
  --beukk-link-visited-bg: #ffe7c8;
  --beukk-footer-bg: #4f6b53;
  --beukk-control-border: #ababab;
  --beukk-control-bg: #efefef;
  --beukk-control-indicator: #9b9b9b;
  --beukk-toggle-bg: #d8ddd8;
  --beukk-shadow-strong: rgba(0,0,0,0.2);
  --beukk-border-subtle: #d7d7cc;
  --beukk-border-product: #e4e4dc;
}

/* ---------- Base ---------- */
body {
  background: var(--beukk-page-bg);
  color: var(--beukk-text-primary);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Forceer lettergrootte sitebreed */
html,
body,
body * {
  font-size: 1.0em !important;
}

/* Hyperlinks: sterk highlight tijdens klik + duidelijk zichtbaar na bezoek */
a:any-link {
  transition: color 0.15s ease, background-color 0.15s ease;
}

a:active,
a:focus-visible {
  color: var(--beukk-text-primary) !important;
  background-color: var(--beukk-link-active-bg);
  text-decoration: underline;
  text-decoration-color: var(--beukk-link-highlight);
  text-decoration-thickness: 3px;
  outline: 2px solid var(--beukk-link-highlight);
  outline-offset: 2px;
  border-radius: 3px;
}

a:visited {
  color: var(--beukk-link-visited) !important;
  background-color: var(--beukk-link-visited-bg);
  text-decoration: underline;
  text-decoration-color: var(--beukk-link-visited);
  text-decoration-thickness: 3px;
}

/* Capitalize alleen voor koppen, tabelheaders en expliciet gemarkeerde database-tekstvelden */
h1,
h2,
h3,
h4,
th,
.db-text,
.db-value,
[data-db-text] {
  text-transform: capitalize;
}

/* Nooit capitalize binnen panel-body (vraag/antwoord en gewone content) */
.panel-body,
.panel-body * {
  text-transform: none !important;
}

/* Nooit capitalize binnen panelgroepen (incl. vraag in panel-title) */
.panel-group .panel-heading,
.panel-group .panel-heading *,
.panel-group .panel-title,
.panel-group .panel-title *,
.panel-group .accordion-toggle,
.panel-group .accordion-toggle *,
.panel-group .panel-body,
.panel-group .panel-body * {
  text-transform: none !important;
}

.wrapper {
  background: transparent;
}

/* ---------- Topbar ---------- */
.topbar-v1 {
  background: var(--beukk-brand-primary);
  border-bottom: none;
}

.topbar-v1,
.topbar-v1 a,
.topbar-v1 span,
.topbar-v1 li,
.topbar-v1 i {
  color: var(--beukk-surface-base) !important;
}

.top-v1-contacts li,
.top-v1-data li {
  opacity: 0.9;
}

/* ---------- Header / Navbar ---------- */
.header-v4 {
  background: var(--beukk-surface-base);
  box-shadow: 0 6px 20px var(--beukk-shadow-soft);
}

.header.header-v4 .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 30px;
  padding-right: 30px;
}

.navbar {
  border: none;
  margin-bottom: 0;
}

.navbar-brand img {
  max-height: 32px;
}

.navbar-nav > li > a {
  color: var(--beukk-text-primary) !important;
  font-weight: 600;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.open > a {
  background: var(--beukk-brand-tint-strong) !important;
  color: var(--beukk-text-primary) !important;
}

.dropdown-menu {
  border-radius: 10px;
  border: 1px solid var(--beukk-border-soft);
  box-shadow: 0 12px 28px var(--beukk-shadow-medium);
}

.dropdown-menu > li > a:hover {
  background: var(--beukk-surface-muted);
  color: var(--beukk-text-primary);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  background: transparent;
  padding-left: 0;
  margin-top: 8px;
}

.breadcrumb > li > a {
  color: var(--beukk-brand-primary);
  font-weight: 600;
}

/* ---------- Content container ---------- */
.container.content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 30px 30px 0;
  background-color: var(--beukk-page-bg);
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Headlines ---------- */
.headline h2 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.6px;
  border-bottom: none;
  padding-bottom: 0;
}

/* ---------- Panels (cards) ---------- */
.panel {
  border-radius: 14px;
  border: 1px solid var(--beukk-border-soft);
  box-shadow: 0 10px 26px var(--beukk-shadow-soft);
  background: var(--beukk-surface-base);
}

.panel-heading {
  background: var(--beukk-panel-header-bg) !important;
  border-bottom: 1px solid var(--beukk-border-soft);
  border-radius: 14px 14px 0 0;
}

.panel-heading h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--beukk-text-primary);
}

.panel-body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--beukk-text-secondary);
}

/* ---------- Accordion ---------- */
.panel-group .panel + .panel {
  margin-top: 18px;
}

.accordion-toggle {
  text-decoration: none !important;
}

/* ---------- Tables ---------- */
table {
  background: var(--beukk-surface-base);
}

table > tbody > tr > td,
table > tbody > tr > th {
  transition: background-color 0.15s ease-in-out;
}

table > tbody > tr:hover > td,
table > tbody > tr:hover > th {
  background-color: var(--beukk-brand-tint-strong);
  box-shadow: inset 0 0 0 1px var(--beukk-brand-tint-strong);
}

.table > thead > tr > th {
  font-size: 13px;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--beukk-border-soft);
  background-color: var(--beukk-brand-primary);
  color: var(--beukk-surface-base);
  border-color: var(--beukk-brand-primary);
  border-right: 1px solid var(--beukk-surface-base);
}

.table > thead > tr > th:last-child {
  border-right: none;
}

.table > tbody > tr > td {
  border-color: var(--beukk-brand-tint-strong);
}

.table > tbody > tr:hover {
  background-color: var(--beukk-brand-tint-strong);
}

.table > tbody > tr.active,
.table > tbody > tr.active:hover {
  background-color: var(--beukk-brand-tint-strong);
}

th {
  background-color: var(--beukk-brand-primary) !important;
  color: var(--beukk-surface-base) !important;
  border-color: var(--beukk-brand-primary) !important;
}

/* om-en-om rijen voor alle tables */
table > tbody > tr:nth-of-type(odd) > td,
table > tbody > tr:nth-of-type(odd) > th,
table > tbody > tr:nth-child(odd) > td,
table > tbody > tr:nth-child(odd) > th,
table > tr:nth-of-type(odd) > td,
table > tr:nth-of-type(odd) > th,
table > tr:nth-child(odd) > td,
table > tr:nth-child(odd) > th {
  background-color: var(--beukk-surface-base);
}

table > tbody > tr:nth-of-type(even) > td,
table > tbody > tr:nth-of-type(even) > th,
table > tbody > tr:nth-child(even) > td,
table > tbody > tr:nth-child(even) > th,
table > tr:nth-of-type(even) > td,
table > tr:nth-of-type(even) > th,
table > tr:nth-child(even) > td,
table > tr:nth-child(even) > th {
  background-color: var(--beukk-table-row-even-bg);
}

/* om-en-om rijen voor tables met class "table-striped" */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th,
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th,
.table-striped > tr:nth-of-type(odd) > td,
.table-striped > tr:nth-of-type(odd) > th,
.table-striped > tr:nth-child(odd) > td,
.table-striped > tr:nth-child(odd) > th {
  background-color: var(--beukk-surface-base) !important;
}

.table-striped > tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > th,
.table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th,
.table-striped > tr:nth-of-type(even) > td,
.table-striped > tr:nth-of-type(even) > th,
.table-striped > tr:nth-child(even) > td,
.table-striped > tr:nth-child(even) > th {
  background-color: var(--beukk-table-row-even-bg) !important;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 8px;
  font-weight: 600;
}

.btn-primary {
  background: var(--beukk-brand-primary);
  border-color: var(--beukk-brand-primary);
}

.btn-primary:hover {
  background: var(--beukk-brand-primary-hover);
  border-color: var(--beukk-brand-primary-hover);
}

.btn-u {
  background-color: var(--beukk-button-primary-bg) !important;
  border-color: var(--beukk-button-primary-bg) !important;
  color: var(--beukk-surface-base) !important;
  border-radius: 8px;
  font-weight: 600;
}

.btn-u i,
.btn-u span {
  color: var(--beukk-surface-base) !important;
}

.btn-u:hover,
.btn-u:focus,
.btn-u:active {
  background-color: var(--beukk-button-primary-bg-hover) !important;
  border-color: var(--beukk-button-primary-bg-hover) !important;
  color: var(--beukk-surface-base) !important;
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  background-color: var(--beukk-surface-base) !important;
  border: 1.5px solid var(--beukk-input-border) !important;
  color: var(--beukk-text-primary);
  padding: 10px 12px;
  height: auto;
  border-radius: 8px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--beukk-brand-primary) !important;
  box-shadow: 0 0 0 3px var(--beukk-brand-tint-strong) !important;
  outline: none;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly] {
  background-color: var(--beukk-surface-muted) !important;
  border-color: var(--beukk-input-disabled-border) !important;
  color: var(--beukk-text-disabled);
}

/* ---------- Footer ---------- */
.footer-v2 {
  max-height: 50px !important;
  overflow: hidden !important;
}

.footer-v2,
.footer-v2 a {
  color: var(--beukk-surface-base);
}

.footer-v2 .footer {
  background: var(--beukk-brand-primary);
  height: 50px !important;
  padding: 0 !important;
}

.footer-v2 .footer .container,
.footer-v2 .footer .row {
  height: 100% !important;
}

.footer-v2 .copyright {
  background: var(--beukk-footer-bg);
  display: none !important;
}

.footer-v2 img.footer-logo {
  max-height: 30px;
  display: none !important;
}

/* Radio look zoals in filtermockup */
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--beukk-control-border);
  border-radius: 50%;
  background: var(--beukk-control-bg);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

input[type="radio"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--beukk-control-indicator);
  transform: scale(0);
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 20px;
  border: 2px solid var(--beukk-control-border);
  border-radius: 999px;
  background: var(--beukk-toggle-bg);
  display: inline-grid;
  align-items: center;
  vertical-align: middle;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--beukk-surface-base);
  box-shadow: 0 1px 3px var(--beukk-shadow-strong);
  transform: translateX(2px);
  transition: transform 0.2s ease;
}

input[type="checkbox"]:checked {
  background: var(--beukk-brand-primary);
  border-color: var(--beukk-brand-primary);
}

input[type="checkbox"]:checked::before {
  transform: translateX(14px);
}

input[type="checkbox"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Sky-Forms checkboxen renderen via <label class="checkbox"><input><i></i></label>.
   Daarom toggle-uiterlijk op <i> i.p.v. op de verborgen native input. */
.sky-form .checkbox {
  padding-left: 46px !important;
  line-height: 20px !important;
}

.sky-form .checkbox i {
  top: 1px !important;
  left: 0 !important;
  width: 36px !important;
  height: 20px !important;
  border: 2px solid var(--beukk-control-border) !important;
  border-radius: 999px !important;
  background: var(--beukk-toggle-bg) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.sky-form .checkbox input + i:after {
  content: "" !important;
  top: 2px !important;
  left: 2px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--beukk-surface-base) !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: transform 0.2s ease !important;
  box-shadow: 0 1px 3px var(--beukk-shadow-strong) !important;
}

.sky-form .checkbox input:checked + i {
  background: var(--beukk-brand-primary) !important;
  border-color: var(--beukk-brand-primary) !important;
}

.sky-form .checkbox input:checked + i:after {
  transform: translateX(14px) !important;
}

.sky-form .checkbox input:focus + i {
  box-shadow: 0 0 0 3px var(--beukk-brand-tint-strong);
}

.sky-form .checkbox.state-disabled i,
.sky-form .checkbox input:disabled + i {
  opacity: 0.6;
}

.sky-form .checkbox.state-disabled,
.sky-form .checkbox input:disabled + i,
.sky-form .checkbox.state-disabled:hover i {
  cursor: not-allowed;
}

.radio input[type="radio"] {
  border-radius: 50% !important;
}

.sky-form .radio i {
  border-radius: 50% !important;
}

/* Filter-specifiek: houd radiostip zichtbaar ondanks inline overrides */
#bestel-filter-collapse .radio input[type="radio"] {
  display: inline-grid !important;
  place-content: center !important;
}

#bestel-filter-collapse .radio input[type="radio"]:checked {
  background-image: radial-gradient(circle, var(--beukk-control-indicator) 0 3px, transparent 4px);
  background-repeat: no-repeat;
  background-position: center;
}

/* Header hard-fix: keep v4 header visible on bestellen/favorieten pages */
.header.header-v4 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10001 !important;
  min-height: 1px !important;
  overflow: visible !important;
}

.header.header-v4 .topbar-v1,
.header.header-v4 .navbar,
.header.header-v4 .navbar-header,
.header.header-v4 .navbar-collapse,
.header.header-v4 .navbar-collapse.collapse,
.header.header-v4 .navbar-collapse.collapse.in {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Final border fix for Bestellen.pm templates */
.bestel-module.bestel-regels .table.table-bordered {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: 1px solid var(--beukk-border-subtle) !important;
}

.bestel-module.bestel-regels .table.table-bordered > thead > tr > th,
.bestel-module.bestel-regels .table.table-bordered > tbody > tr > td,
.bestel-module.bestel-regels .table.table-bordered > tbody > tr {
  border: 1px solid var(--beukk-border-subtle) !important;
}

.bestel-module.bestel-matrix-compleet .product-card {
  border: 1px solid var(--beukk-border-subtle) !important;
}

.bestel-module.bestel-matrix-compleet .product-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: 1px solid var(--beukk-border-product) !important;
}

.bestel-module.bestel-matrix-compleet .product-table tr,
.bestel-module.bestel-matrix-compleet .product-table td,
.bestel-module.bestel-matrix-compleet .product-table th,
.bestel-module.bestel-matrix-compleet .product-table .media-cell,
.bestel-module.bestel-matrix-compleet .product-table .content-cell,
.bestel-module.bestel-matrix-compleet .product-table .no-image-content {
  border: 1px solid var(--beukk-border-product) !important;
}

/* Keep Fancybox (iframe) above all page layers */
.fancybox-overlay,
#fancybox-overlay,
.fancybox-wrap,
#fancybox-wrap {
  z-index: 2147483646 !important;
}

.fancybox-opened,
.fancybox-type-iframe,
.fancybox-type-iframe .fancybox-skin,
.fancybox-type-iframe .fancybox-inner,
.fancybox-type-iframe iframe,
iframe.fancybox-iframe {
  z-index: 2147483647 !important;
}

/* Forceer sitebreed tabeltekst + tabelheaders op 1.0em + 10px celpadding */
table,
table th,
table td,
.table,
.table th,
.table td,
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td {
	font-size: 1.0em !important;
	padding: 10px !important;
}