/**
 * Dutch Balance — components.css
 *
 * DE CANONIEKE COMPONENT-LAAG. Eén bron van waarheid voor herbruikbare
 * UI-componenten: knoppen, cards, badges, pills, form-velden.
 *
 * Regel: een component hoort HIER, niet per blok opnieuw. Wil je een knop?
 * Gebruik .db-btn (+ variant). Geen nieuwe .db-xxx-cta meer aanmaken.
 *
 * Geladen VÓÓR extra.css, zodat bestaande (nog niet-gemigreerde) bespoke
 * regels tijdens de migratie nog winnen. Na migratie verdwijnen die uit
 * extra.css en blijft alleen deze laag over.
 *
 * Alle waarden trekken uit de tokens in extra.css :root + theme.json palette.
 */

/* ============================================================
   KNOP — .db-btn
   Eén knop, varianten via modifier-class. Vervangt:
   .db-hero-cta / .db-stack-cta / .db-founder-cta / .db-footer-cta /
   .db-pdp-review-form-cta / .db-shop-card-cta
   ============================================================ */
.db-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem; /* 15px — vast, NIET de fluid preset (die schiet op desktop naar 20px) */
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	padding: 0.75rem 1.75rem;
	border: 1.5px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease,
		border-color 0.18s ease, transform 0.18s ease;
}
.db-btn:hover { transform: translateY(-1px); }
.db-btn:active { transform: translateY(0); }
.db-btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }

/* Primary — gevuld forest (default als geen variant) */
.db-btn,
.db-btn--primary {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--forest);
}
.db-btn:hover,
.db-btn--primary:hover {
	background: var(--wp--preset--color--forest-light);
	border-color: var(--wp--preset--color--forest-light);
	color: var(--wp--preset--color--cream);
}

/* Outline — forest rand + tekst, vult op hover */
.db-btn--outline {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--forest);
}
.db-btn--outline:hover {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--forest);
}

/* Ghost — geen rand, alleen tekst; zachte cream-vulling op hover */
.db-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border-color: transparent;
	padding-inline: 1rem;
}
.db-btn--ghost:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--forest-deep);
}

/* Sale — zelfde vorm, sale-rood (gebruik spaarzaam, bv. kortingsacties) */
.db-btn--sale {
	background: var(--db-sale);
	color: #fff;
	border-color: var(--db-sale);
}
.db-btn--sale:hover { filter: brightness(0.94); color: #fff; }

/* Maten */
.db-btn--sm { padding: 0.5rem 1.15rem; font-size: 0.8125rem; }   /* 13px */
.db-btn--lg { padding: 0.95rem 2.25rem; font-size: 1.0625rem; }  /* 17px */

/* Full-width (mobiel CTA, cart-knoppen) */
.db-btn--block { display: flex; width: 100%; }

/* Disabled */
.db-btn:disabled,
.db-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* ============================================================
   CARD — .db-card
   Eén card-skelet (radius/border/shadow/hover gelijk), inhoud verschilt
   via modifier. Vervangt de losse radius/border/shadow op:
   .db-doel-card / .db-product-card / .db-stack-card / .db-kennis-card /
   .db-review-card / .db-related-card / .db-shop-card
   ============================================================ */
.db-card {
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-soft);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.db-card--hover:hover {
	box-shadow: var(--db-shadow-md);
	transform: translateY(-2px);
	border-color: rgba(0, 0, 0, 0.04);
}

/* Image-cushion — cream vlak waarin productfoto's "vallen" (mix-blend) */
.db-card__media {
	background: var(--wp--preset--color--cream);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.db-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.db-card__body { padding: 1.15rem 1.25rem 1.25rem; }

/* ============================================================
   BADGE — .db-badge  (kleine status/label-tag, rechthoekig met radius)
   ============================================================ */
.db-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem; /* 11px */
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: var(--db-radius-input-shape);
	line-height: 1;
}
.db-badge--dark { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--cream); }
.db-badge--sage { background: var(--wp--preset--color--sage); color: var(--wp--preset--color--forest-deep); }
.db-badge--new  { background: var(--wp--preset--color--goal-energie); color: #fff; }
.db-badge--sale { background: var(--db-sale); color: #fff; }

/* ============================================================
   PILL — .db-pill  (afgeronde status-indicator, 999px — bv. voorraad)
   ============================================================ */
.db-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.71875rem; /* 11.5px */
	font-weight: 500;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	line-height: 1;
}
.db-pill--stock { background: rgba(127, 166, 142, 0.14); color: var(--wp--preset--color--forest); }
.db-pill--muted { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--text-muted); }
.db-pill__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--wp--preset--color--sage);
	flex-shrink: 0;
}

/* ============================================================
   FORM-CONTROL — .db-field  (input / select / textarea)
   Eén radius (input-shape 6px), één border-token, teal focus.
   ============================================================ */
.db-field {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem; /* 16px — vast (voorkomt iOS-zoom + fluid-blowup) */
	color: var(--wp--preset--color--charcoal);
	background: #fff;
	border: 1px solid var(--db-border-input);
	border-radius: var(--db-radius-input-shape);
	padding: 0.7rem 0.85rem;
	line-height: 1.4;
	width: 100%;
	box-sizing: border-box; /* anders telt padding bovenop width:100% → overflow rechts */
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.db-field:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal);
	box-shadow: 0 0 0 3px rgba(74, 124, 111, 0.12);
}
.db-field::placeholder { color: var(--wp--preset--color--text-muted); }
select.db-field {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	padding-right: 2.25rem;
}