/*
 * GOODSTUFFF – centraal kleurenthema
 *
 * Belangrijk:
 * - .container wordt bewust NIET als kaart opgemaakt.
 * - De homepagekaarten worden afzonderlijk gestyled.
 * - Er worden geen brede selectors zoals [class*="button"] gebruikt.
 * - Bestaande pagina-opmaak blijft daardoor intact.
 */

:root {
  --theme-primary: #78864A;
  --theme-primary-dark: #5F6B3A;
  --theme-primary-soft: #1F2718;
  --theme-background: #070806;
  --theme-background-soft: #0B0D09;
  --theme-card: #11130F;
  --theme-text: #5F6B3A;
  --theme-muted: #C7CFB2;
  --theme-line: #78864A;
  --theme-accent: #78864A;
  --theme-footer: #050605;
  --theme-button-text: #FFFFFF;
  --theme-icon: #FFFFFF;
  --theme-header: #050605;
  --theme-menu: #050605;
  --theme-success: #2F7D4A;
  --theme-warning: #C9B37E;
  --theme-danger: #B42318;

  --bg: var(--theme-background);
  --bg-soft: var(--theme-background-soft);
  --card: var(--theme-card);
  --card-2: color-mix(in srgb, var(--theme-card) 86%, #000 14%);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --line: color-mix(in srgb, var(--theme-line) 38%, transparent);
  --blue: var(--theme-primary);
  --blue-dark: var(--theme-primary-dark);
  --blue-soft: var(--theme-primary-soft);
  --green: var(--theme-primary);
  --green-soft: color-mix(in srgb, var(--theme-primary) 72%, #fff 28%);
  --accent: var(--theme-accent);
  --footer-bg: var(--theme-footer);

  --gs-bg: var(--theme-background);
  --gs-bg-2: var(--theme-background-soft);
  --gs-panel: var(--theme-card);
  --gs-panel-2: color-mix(in srgb, var(--theme-card) 86%, #000 14%);
  --gs-panel-3: var(--theme-primary-soft);
  --gs-army: var(--theme-primary);
  --gs-army-dark: var(--theme-primary-dark);
  --gs-army-soft: color-mix(in srgb, var(--theme-primary) 72%, #fff 28%);
  --gs-gold: var(--theme-warning);
  --gs-text: var(--theme-text);
  --gs-muted: var(--theme-muted);
  --gs-line: color-mix(in srgb, var(--theme-line) 62%, transparent);
  --gs-line-soft: color-mix(in srgb, var(--theme-line) 32%, transparent);
  --gs-danger: var(--theme-danger);
  --gs-success: var(--theme-success);
  --gs-shadow: 0 18px 55px rgba(0, 0, 0, .38);
}

/* Basis */
html,
body {
  background: var(--theme-background) !important;
  color: var(--theme-text) !important;
}

body {
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--theme-primary) 18%, transparent), transparent 34%),
    linear-gradient(135deg, var(--theme-background), var(--theme-background-soft) 50%, #050605) !important;
}

a {
  color: color-mix(in srgb, var(--theme-primary) 74%, #fff 26%);
}

a:hover {
  color: #fff;
}

h1,
h2,
h3,
h4,
strong,
b {
  color: var(--theme-text);
}

p,
li,
small,
label,
.muted,
.intro {
  color: var(--theme-muted);
}

/* Header, navigatie en footer */
.header,
.site-header {
  background: var(--theme-header) !important;
  border-color: color-mix(in srgb, var(--theme-line) 34%, transparent) !important;
}

.navbar,
.good-menu-panel {
  background: var(--theme-menu) !important;
  border-color: color-mix(in srgb, var(--theme-line) 34%, transparent) !important;
}

.footer,
footer,
.site-footer,
.main-footer,
.footer-area,
.footer-wrapper,
#footer {
  background: var(--theme-footer) !important;
  color: #d6d6d6 !important;
  border-color: color-mix(in srgb, var(--theme-primary) 45%, transparent) !important;
}

.footer a,
footer a,
.site-footer a,
.main-footer a,
.footer-area a,
.footer-wrapper a,
#footer a {
  color: #d6d6d6 !important;
  background: transparent !important;
  border-color: transparent !important;
}

/*
 * Alleen echte kaarten/panelen.
 * .container en form staan hier bewust niet tussen.
 */
.card,
.product,
.product-card,
.contact-box,
.selector-box,
.legal-content,
.cart,
.portal-card,
.review-card,
.review-score,
.public-rem-card,
.auth-card,
.login-card,
.customer-login-box,
.portal-order-card,
.admin-panel,
.admin-stat,
.pro-panel,
.pro-kpi,
.pro-profile-card,
.pro-login-card {
  background: linear-gradient(180deg, var(--theme-card), color-mix(in srgb, var(--theme-card) 86%, #000 14%)) !important;
  color: var(--theme-text) !important;
  border: 1px solid color-mix(in srgb, var(--theme-line) 32%, transparent) !important;
  box-shadow: var(--gs-shadow) !important;
}

/* Formuliervelden */
input,
select,
textarea {
  background: var(--theme-background-soft) !important;
  color: var(--theme-text) !important;
  border-color: color-mix(in srgb, var(--theme-line) 36%, transparent) !important;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--theme-muted) 78%, transparent);
}

option {
  background: var(--theme-card);
  color: var(--theme-text);
}

/* Algemene knoppen – alleen bekende knopclasses */
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
a.btn,
.service-btn,
.category-filter-btn,
.portal-small-btn,
.pro-btn,
.pro-action,
.admin-primary,
.admin-secondary,
.admin-logout,
.admin-topbar-logout,
.checkout-pay-button,
.cart-terms-button,
.buy,
.rem-btn,
.gs-account-popup-actions a,
.gs-account-popup-actions button,
.cart-actions a,
.cart-actions button,
.winkelwagen-actions a,
.winkelwagen-actions button,
.checkout-actions a,
.checkout-actions button,
.summary-actions a,
.summary-actions button,
.offerte-actions a,
.offerte-actions button,
.offer-actions a,
.offer-actions button,
.cleaningz-summary a,
.cleaningz-summary button {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark)) !important;
  background-color: var(--theme-primary) !important;
  color: var(--theme-button-text) !important;
  -webkit-text-fill-color: var(--theme-button-text) !important;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 70%, #fff 30%) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .30) !important;
  text-decoration: none !important;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.btn:hover,
a.btn:hover,
.service-btn:hover,
.category-filter-btn:hover,
.portal-small-btn:hover,
.pro-btn:hover,
.pro-action:hover,
.admin-primary:hover,
.admin-secondary:hover,
.checkout-pay-button:hover,
.cart-terms-button:hover,
.buy:hover,
.rem-btn:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-primary) 76%, #fff 24%),
    var(--theme-primary)
  ) !important;
  color: var(--theme-button-text) !important;
}

/* Witte knopiconen */
.button svg,
.button svg *,
button svg,
button svg *,
.btn svg,
.btn svg *,
.service-btn svg,
.service-btn svg *,
.portal-small-btn svg,
.portal-small-btn svg *,
.pro-btn svg,
.pro-btn svg * {
  color: var(--theme-button-text) !important;
  fill: var(--theme-button-text) !important;
  stroke: var(--theme-button-text) !important;
}

/* Headericonen wit */
header a[href*="login"] i,
header a[href*="login"] svg,
header a[href*="login"] svg *,
header a[href*="account"] i,
header a[href*="account"] svg,
header a[href*="account"] svg *,
header a[href*="winkelwagen"] i,
header a[href*="winkelwagen"] svg,
header a[href*="winkelwagen"] svg *,
header a[href*="cart"] i,
header a[href*="cart"] svg,
header a[href*="cart"] svg *,
.fa-user,
.fa-user-circle,
.fa-shopping-cart,
.fa-cart-shopping {
  color: var(--theme-icon) !important;
  fill: var(--theme-icon) !important;
  stroke: var(--theme-icon) !important;
  opacity: 1 !important;
}

/* Statuskleuren */
.status-betaald,
.status-verzonden,
.status-afgerond,
.status-gepland,
.badge.success {
  background: color-mix(in srgb, var(--theme-success) 22%, transparent) !important;
  color: color-mix(in srgb, var(--theme-success) 55%, #fff 45%) !important;
  border-color: color-mix(in srgb, var(--theme-success) 48%, transparent) !important;
}

.status-open,
.status-nieuw,
.badge.warning {
  background: color-mix(in srgb, var(--theme-warning) 18%, transparent) !important;
  color: var(--theme-warning) !important;
  border-color: color-mix(in srgb, var(--theme-warning) 42%, transparent) !important;
}

.status-geannuleerd,
.status-mislukt,
.badge.danger {
  background: color-mix(in srgb, var(--theme-danger) 18%, transparent) !important;
  color: color-mix(in srgb, var(--theme-danger) 55%, #fff 45%) !important;
  border-color: color-mix(in srgb, var(--theme-danger) 42%, transparent) !important;
}

/* =========================================================
   HOMEPAGE
   De hero-container blijft transparant.
   Alleen STORE, CLEANINGZ en SERVICE worden losse groene kaarten.
   ========================================================= */

main.container.hero {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

main.container.hero .main-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

main.container.hero .main-buttons .big-button {
  position: relative;
  display: block;
  min-height: 190px;
  padding: 34px 28px;
  overflow: hidden;
  isolation: isolate;

  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--theme-primary) 72%, #fff 28%),
      var(--theme-primary) 48%,
      var(--theme-primary-dark)
    ) !important;

  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 2px solid color-mix(in srgb, var(--theme-primary) 68%, #fff 32%) !important;
  border-radius: 18px;
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--theme-primary) 24%, transparent),
    0 16px 35px rgba(0, 0, 0, .38) !important;
  text-decoration: none !important;
  transition:
    transform .20s ease,
    box-shadow .20s ease,
    filter .20s ease;
}

/* Binnenste groene laag */
main.container.hero .main-buttons .big-button::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 11px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .06),
      rgba(0, 0, 0, .10)
    );
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--theme-primary-dark) 62%, transparent),
    inset 0 0 24px rgba(255, 255, 255, .05);
}

main.container.hero .main-buttons .big-button h2,
main.container.hero .main-buttons .big-button p {
  position: relative;
  z-index: 1;
}

main.container.hero .main-buttons .big-button h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

main.container.hero .main-buttons .big-button p {
  color: rgba(255, 255, 255, .88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
}

main.container.hero .main-buttons .big-button:hover {
  transform: translateY(-4px);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--theme-primary) 30%, transparent),
    0 20px 42px rgba(0, 0, 0, .45) !important;
}

/* Verwijder effecten die eventueel door JavaScript zijn toegevoegd */
main.container.hero .main-buttons,
main.container.hero .main-buttons .big-button {
  opacity: 1 !important;
  visibility: visible !important;
}

main.container.hero .main-buttons .big-button.pba-reveal,
main.container.hero .main-buttons .big-button.is-visible {
  transform: none;
}

main.container.hero .main-buttons .big-button:hover {
  transform: translateY(-4px);
}

/* Mobiel */
@media (max-width: 800px) {
  main.container.hero .main-buttons {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  main.container.hero .main-buttons .big-button {
    min-height: auto;
    padding: 30px 24px;
  }
}


/* =========================================================
   SVG-ICONEN IN KNOPPEN ALTIJD WIT
   Ondersteunt fill, stroke en currentColor.
   ========================================================= */

.button,
button,
.btn,
a.btn,
.service-btn,
.category-filter-btn,
.portal-small-btn,
.pro-btn,
.pro-action,
.admin-primary,
.admin-secondary,
.admin-logout,
.admin-topbar-logout,
.checkout-pay-button,
.cart-terms-button,
.buy,
.rem-btn,
.gs-account-popup-actions a,
.gs-account-popup-actions button,
.cart-actions a,
.cart-actions button,
.winkelwagen-actions a,
.winkelwagen-actions button,
.checkout-actions a,
.checkout-actions button,
.summary-actions a,
.summary-actions button,
.offerte-actions a,
.offerte-actions button,
.offer-actions a,
.offer-actions button,
.cleaningz-summary a,
.cleaningz-summary button {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.button svg,
button svg,
.btn svg,
a.btn svg,
.service-btn svg,
.category-filter-btn svg,
.portal-small-btn svg,
.pro-btn svg,
.pro-action svg,
.admin-primary svg,
.admin-secondary svg,
.admin-logout svg,
.admin-topbar-logout svg,
.checkout-pay-button svg,
.cart-terms-button svg,
.buy svg,
.rem-btn svg,
.gs-account-popup-actions svg,
.cart-actions svg,
.winkelwagen-actions svg,
.checkout-actions svg,
.summary-actions svg,
.offerte-actions svg,
.offer-actions svg,
.cleaningz-summary svg {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Alle onderdelen binnen SVG's */
.button svg *,
button svg *,
.btn svg *,
a.btn svg *,
.service-btn svg *,
.category-filter-btn svg *,
.portal-small-btn svg *,
.pro-btn svg *,
.pro-action svg *,
.admin-primary svg *,
.admin-secondary svg *,
.admin-logout svg *,
.admin-topbar-logout svg *,
.checkout-pay-button svg *,
.cart-terms-button svg *,
.buy svg *,
.rem-btn svg *,
.gs-account-popup-actions svg *,
.cart-actions svg *,
.winkelwagen-actions svg *,
.checkout-actions svg *,
.summary-actions svg *,
.offerte-actions svg *,
.offer-actions svg *,
.cleaningz-summary svg * {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Specifieke SVG-vormen */
.button svg path,
.button svg circle,
.button svg rect,
.button svg line,
.button svg polyline,
.button svg polygon,
button svg path,
button svg circle,
button svg rect,
button svg line,
button svg polyline,
button svg polygon,
.btn svg path,
.btn svg circle,
.btn svg rect,
.btn svg line,
.btn svg polyline,
.btn svg polygon,
a.btn svg path,
a.btn svg circle,
a.btn svg rect,
a.btn svg line,
a.btn svg polyline,
a.btn svg polygon {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Iconen die alleen met stroke getekend zijn */
svg[fill="none"] path,
svg[fill="none"] circle,
svg[fill="none"] rect,
svg[fill="none"] line,
svg[fill="none"] polyline,
svg[fill="none"] polygon {
  fill: none !important;
  stroke: currentColor !important;
}

/* Header/account/winkelwageniconen */
header a[href*="login"],
header a[href*="account"],
header a[href*="winkelwagen"],
header a[href*="cart"],
.header a[href*="login"],
.header a[href*="account"],
.header a[href*="winkelwagen"],
.header a[href*="cart"] {
  color: #fff !important;
}

header a[href*="login"] svg,
header a[href*="account"] svg,
header a[href*="winkelwagen"] svg,
header a[href*="cart"] svg,
.header a[href*="login"] svg,
.header a[href*="account"] svg,
.header a[href*="winkelwagen"] svg,
.header a[href*="cart"] svg {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

header a[href*="login"] svg *,
header a[href*="account"] svg *,
header a[href*="winkelwagen"] svg *,
header a[href*="cart"] svg *,
.header a[href*="login"] svg *,
.header a[href*="account"] svg *,
.header a[href*="winkelwagen"] svg *,
.header a[href*="cart"] svg * {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}