/* Framekleur-bolletjes (rechthoekige spiegelkasten).
   Gedeelde basis + twee varianten:
   - --card : kleine overlay linksonder OP de productthumbnail in de shop.
   - --pdp  : grotere bolletjes met kleurnaam op de productpagina, boven .atc_wrappek. */

/* ---------- Gedeelde basis ---------- */
.frame-color-swatches {
	display: flex;
	align-items: center;
}

.frame-color-swatch {
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #b4b4b4;
	cursor: pointer;
	box-shadow: 0 0 0 2px transparent;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.frame-color-swatch:hover {
	transform: scale(1.08);
}

.frame-color-swatch.is-grey {
	background: #b6b6b6;
}

.frame-color-swatch.is-black {
	background: #1a1a1a;
}

.frame-color-swatch.is-white {
	background: #ffffff;
	border-color: #cfcfcf;
}

/* Geselecteerd bolletje krijgt een duidelijke ring. */
.frame-color-swatch.is-selected {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #7a5d4c;
}

/* ---------- Variant: shopkaart (overlay op thumbnail) ---------- */
.frame-color-swatches--card {
	position: absolute;
	left: 5px;
	bottom: 5px;
	z-index: 2;
	gap: 7px;
	padding: 5px 10px;
	border-radius: 20px;
	/* Gedeeltelijk transparante achtergrond voor contrast op de foto. */
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.frame-color-swatches--card .frame-color-label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: #2b2b2b;
	white-space: nowrap;
	margin-right: 1px;
}

/* Standaard de volledige label tonen; de korte ("Kleur:") alleen op mobiel. */
.frame-color-swatches--card .frame-color-label-short {
	display: none;
}

.frame-color-swatches--card .frame-color-swatch {
	width: 15px;
	height: 15px;
}

/* Kleurnaam alleen tonen in de PDP-variant. */
.frame-color-swatches--card .frame-color-name {
	display: none;
}

/* ---------- Variant: productpagina (PDP) ---------- */
.frame-color-swatches--pdp {
	/* Tussenruimte tussen de bolletjes. */
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 18px;
}

/* Label + info-icoon + dubbele punt staan strak bij elkaar als één geheel. */
.frame-color-swatches--pdp .frame-color-heading {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	/* Extra ruimte tussen de dubbele punt en het eerste bolletje. */
	margin-right: 6px;
}

.frame-color-swatches--pdp .frame-color-label {
	font-size: 15px;
	font-weight: 600;
	color: #2b2b2b;
	white-space: nowrap;
}

.frame-color-swatches--pdp .frame-color-colon {
	font-size: 15px;
	font-weight: 600;
	color: #2b2b2b;
	/* Dubbele punt strak achter het info-icoon. */
	margin-left: -2px;
}

/* Info-icoon, hergebruikt het icoon van de spiegel-op-maat configurator. */
.frame-color-swatches--pdp .frame-color-info {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.frame-color-swatches--pdp .info_icon {
	width: 18px;
	height: 18px;
	background-image: url(/wp-content/plugins/mirror-configurator/assets/images/info.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* Info-tooltip (hover) — vergelijkbaar met de spiegel-op-maat configurator. */
.frame-color-swatches--pdp .info_popup {
	display: none;
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
	width: 500px;
	max-width: 80vw;
	padding: 16px 18px;
	background: #ffffff;
	border: 1px solid rgba(30, 46, 56, 0.1);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.03), 0 10px 6px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04);
	border-radius: 4px;
	z-index: 100000;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.45;
	color: #2b2b2b;
	text-align: left;
	cursor: default;
}

/* Sluitknop is alleen voor de mobiele fullscreen-overlay; op desktop nooit tonen. */
.frame-color-swatches--pdp .frame-color-info-close {
	display: none;
}

/* Onzichtbare "brug" zodat de tooltip niet sluit als je vanaf het icoon
   omhoog naar de popup beweegt. */
.frame-color-swatches--pdp .frame-color-info::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: 44px;
	height: 12px;
	transform: translateX(-50%);
}

.frame-color-swatches--pdp .frame-color-info:hover .info_popup,
.frame-color-swatches--pdp .frame-color-info:focus-within .info_popup {
	display: block;
}

/* Klein pijltje onderaan de tooltip. */
.frame-color-swatches--pdp .info_popup::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: #ffffff;
}

.frame-color-swatches--pdp .info_content p {
	margin: 0 0 8px;
}

.frame-color-swatches--pdp .info_content p:last-child {
	margin-bottom: 0;
}

.frame-color-swatches--pdp .info_content h4 {
	color: var(--blue);
	margin-bottom: 10px;
}

.frame-color-swatches--pdp .info_content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 8px 0;
}

/* Afbeelding met onderschrift (.wp-caption) compact houden in de tooltip. */
.frame-color-swatches--pdp .info_content .wp-caption {
	width: auto !important;
	max-width: calc(33.333% - 10px);
}

.frame-color-swatches--pdp .info_content .wp-caption img {
	max-width: 100%;
}

.frame-color-swatches--pdp .info_content .wp-caption.alignleft {
	margin-right: 15px !important;
}

.frame-color-swatches--pdp .info_content .wp-caption.alignleft:last-child {
	margin-right: 0 !important;
}

.frame-color-swatches--pdp .info_content .wp-caption-text {
	margin: 4px 0 0;
	font-size: 11px;
	font-style: italic;
	line-height: 1.3;
	color: #8a8a8a;
	text-align: center;
}

.frame-color-swatches--pdp .frame-color-swatch {
	width: 54px;
	height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.1;
}

.frame-color-swatches--pdp .frame-color-swatch.is-grey {
	color: #2b2b2b;
}

.frame-color-swatches--pdp .frame-color-swatch.is-black {
	color: #ffffff;
}

.frame-color-swatches--pdp .frame-color-swatch.is-white {
	color: #2b2b2b;
}

.frame-color-swatches--pdp .frame-color-swatch:hover {
	transform: scale(1.04);
}

/* Geselecteerde kleur krijgt de huisstijl-blauwe rand op de productpagina.
   Dikte blauw = 2e waarde (4px) min 1e waarde (2px) = 2px. */
.frame-color-swatches--pdp .frame-color-swatch.is-selected {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--blue);
}

.frame-color-name {
	pointer-events: none;
}

/* ---------- Mobiel (≤767px) ---------- */
@media (max-width: 767px) {
	/* Shopkaart: label kleiner; bolletjes inline rechts. */
	.frame-color-swatches--card {
		gap: 6px;
		padding: 4px 8px;
	}

	.frame-color-swatches--card .frame-color-label {
		font-size: 9px;
	}

	/* Korte label op mobiel ("Kleur:") zodat de pil smaller is en de sale-badge
	   rechtsonder kan blijven staan. */
	.frame-color-swatches--card .frame-color-label-full {
		display: none;
	}

	.frame-color-swatches--card .frame-color-label-short {
		display: inline;
	}

	/* Vaste afmeting + een echte rand i.p.v. een box-shadow-halo (die optisch groter
	   oogt en valse tussenruimte geeft). Standaard subtiele grijze rand (basis);
	   bij selectie de huisstijl-blauwe rand. */
	.frame-color-swatches--card .frame-color-swatch {
		width: 14px;
		height: 14px;
	}

	.frame-color-swatches--card .frame-color-swatch.is-selected {
		box-shadow: none;
		border-color: var(--blue);
	}

	/* Sale-badge iets kleiner op kaarten mét kleurkeuze, zodat 'ie rechtsonder
	   naast de pil past (alleen deze kaarten, andere blijven ongemoeid). */
	.product_top:has(.frame-color-swatches) .disc {
		width: 50px;
		height: 50px;
		bottom: 5px;
		right: 5px;
	}

	.product_top:has(.frame-color-swatches) .sale_text {
		font-size: 10px;
		line-height: 1.5;
	}

	.product_top:has(.frame-color-swatches) .sale_discount {
		font-size: 12px;
		line-height: 1.5;
	}

	/* PDP: "Kies je kleur" kleiner en minder dik, meer in lijn met de add-to-cart-tekst. */
	.frame-color-swatches--pdp .frame-color-label,
	.frame-color-swatches--pdp .frame-color-colon {
		font-size: 13px;
		font-weight: 400;
	}

	/* PDP: bolletjes iets kleiner, minder tussenruimte, dichter op de dubbele punt. */
	.frame-color-swatches--pdp {
		gap: 9px;
	}

	.frame-color-swatches--pdp .frame-color-heading {
		margin-right: 2px;
	}

	.frame-color-swatches--pdp .frame-color-swatch {
		width: 46px;
		height: 46px;
		font-size: 10px;
	}

	/* PDP: de hover/focus-tooltip liep op smalle schermen buiten beeld (het icoon
	   staat links, de popup werd erop gecentreerd). Op mobiel daarom geen
	   hover/focus-tooltip, maar een fullscreen-overlay die met een tap opent
	   (JS zet .is-open) en met het kruisje sluit. */
	.frame-color-swatches--pdp .frame-color-info:hover .info_popup,
	.frame-color-swatches--pdp .frame-color-info:focus-within .info_popup {
		display: none;
	}

	.frame-color-swatches--pdp .frame-color-info.is-open .info_popup {
		display: block;
		position: fixed;
		inset: 0;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-width: none;
		transform: none;
		padding: 56px 20px 28px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Het pijltje wijst naar het icoon; bij een fullscreen-overlay klopt dat niet. */
	.frame-color-swatches--pdp .info_popup::after {
		display: none;
	}

	/* Sluitknop (kruisje) rechtsboven in de overlay. */
	.frame-color-swatches--pdp .frame-color-info-close {
		display: none;
		position: absolute;
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.frame-color-swatches--pdp .frame-color-info-close::before,
	.frame-color-swatches--pdp .frame-color-info-close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 22px;
		height: 2px;
		background: #2b2b2b;
	}

	.frame-color-swatches--pdp .frame-color-info-close::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.frame-color-swatches--pdp .frame-color-info-close::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.frame-color-swatches--pdp .frame-color-info.is-open .frame-color-info-close {
		display: block;
	}
}

/* ---------- Apparaten met muis (hover): shopkaart ---------- */
@media (hover: hover) {
	/* Op desktop activeer je geen kleur door te klikken (alleen hover-preview),
	   dus de selectie-ring op de kaart is overbodig. Op touch (mobiel) blijft die. */
	.frame-color-swatches--card .frame-color-swatch.is-selected {
		box-shadow: 0 0 0 2px transparent;
	}

	/* Zonder ring is er ruimte om de bolletjes iets groter en opvallender te maken. */
	.frame-color-swatches--card .frame-color-swatch {
		width: 18px;
		height: 18px;
	}
}