/**
 * GoLab Linked Figures — Frontend
 *
 * Το στυλ κληρονομεί τα CSS variables που ήδη ορίζει το golabacademy.com
 * στο :root (--primary, --accent-yellow, --light-bg, --border-color) και
 * πέφτει πίσω στις ακριβείς τιμές του site αν λείπουν.
 *
 * Hand-drawn γλώσσα σχεδίασης (όπως το .handdrawn-btn του site):
 *   border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
 *   border: 3px solid #333;
 *   box-shadow: 3px 3px 0 #333;
 *   hover: translate(-2px,-2px) + 5px 5px 0
 */

.glf-swatches {
	--glf-primary: var(--primary, #52899b);
	--glf-accent: var(--accent-yellow, #f8e16c);
	--glf-light: var(--light-bg, #f5f9fa);
	--glf-border: var(--border-color, #333);
	--glf-size: 66px;
	--glf-radius: 255px 15px 225px 15px/15px 225px 15px 255px;

	margin: 0 0 22px;
	font-family: "Comfortaa", "Balsamiq Sans", "Segoe UI", Roboto, sans-serif;
}

/* ---------- Επικεφαλίδα ---------- */

.glf-swatches__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 6px;
}

.glf-swatches__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--glf-border);
	letter-spacing: 0.2px;
}

.glf-swatches__count {
	font-size: 12px;
	color: #6b7785;
	background: var(--glf-light);
	border: 2px dashed var(--glf-border);
	border-radius: 50px;
	padding: 1px 10px;
	line-height: 1.6;
}

/* ---------- Οριζόντια κυλιόμενη σειρά ----------
   Το padding-bottom κρατάει χώρο για το tooltip, επειδή το overflow-x: auto
   θα το έκοβε αν έβγαινε έξω από το κουτί. */

.glf-swatches__row {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 6px 4px 46px;
	margin-bottom: -26px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--glf-primary) transparent;
}

.glf-swatches__row::-webkit-scrollbar {
	height: 6px;
}

.glf-swatches__row::-webkit-scrollbar-track {
	background: var(--glf-light);
	border-radius: 50px;
}

.glf-swatches__row::-webkit-scrollbar-thumb {
	background: var(--glf-primary);
	border-radius: 50px;
}

/* ---------- Το swatch ---------- */

.linked-figure-swatch {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: var(--glf-size);
	height: var(--glf-size);
	padding: 3px;
	background: #fff;
	border: 3px solid rgba(51, 51, 51, 0.22);
	border-radius: var(--glf-radius);
	box-shadow: 2px 2px 0 rgba(51, 51, 51, 0.13);
	scroll-snap-align: start;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, opacity 0.2s;
}

.linked-figure-swatch__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px 4px 14px 4px/4px 14px 4px 12px;
}

.linked-figure-swatch:hover,
.linked-figure-swatch:focus-visible {
	transform: translate(-2px, -2px) rotate(-1.5deg);
	box-shadow: 4px 4px 0 var(--glf-border);
	border-color: var(--glf-border);
	outline: none;
	z-index: 3;
}

/* ---------- Ενεργό (τρέχον προϊόν) ---------- */

.linked-figure-swatch.is-active {
	border: 3px solid var(--glf-border);
	box-shadow: 3px 3px 0 var(--glf-primary);
	background: var(--glf-light);
	cursor: default;
	transform: none;
}

.linked-figure-swatch.is-active:hover {
	transform: none;
	box-shadow: 3px 3px 0 var(--glf-primary);
}

/* Κίτρινη "ζωγραφιστή" κουκκίδα στο ενεργό */
.linked-figure-swatch.is-active::before {
	content: "";
	position: absolute;
	top: -7px;
	right: -7px;
	width: 15px;
	height: 15px;
	background: var(--glf-accent);
	border: 2px solid var(--glf-border);
	border-radius: 60% 40% 55% 45%/45% 55% 40% 60%;
	z-index: 4;
}

/* ---------- Εξαντλημένο ---------- */

.linked-figure-swatch.is-oos {
	cursor: not-allowed;
	border-style: dashed;
	background: repeating-linear-gradient(
		45deg,
		#fff,
		#fff 6px,
		rgba(51, 51, 51, 0.05) 6px,
		rgba(51, 51, 51, 0.05) 12px
	);
}

/* Το grayscale μπαίνει ΜΟΝΟ στην εικόνα, ώστε το κόκκινο "Χ" και το
   tooltip να παραμείνουν ευανάγνωστα. */
.linked-figure-swatch.is-oos .linked-figure-swatch__img {
	opacity: 0.4;
	filter: grayscale(100%);
}

.linked-figure-swatch.is-oos:hover {
	transform: none;
	box-shadow: 2px 2px 0 rgba(51, 51, 51, 0.13);
	border-color: rgba(51, 51, 51, 0.22);
}

.linked-figure-swatch.is-oos:hover .linked-figure-swatch__img {
	opacity: 0.55;
}

/* Το "Χ" πάνω στη μικρογραφία */
.linked-figure-swatch__x {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.linked-figure-swatch__x::before,
.linked-figure-swatch__x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 12%;
	width: 76%;
	height: 3px;
	background: #c0392b;
	border-radius: 3px;
	opacity: 0.85;
}

.linked-figure-swatch__x::before {
	transform: rotate(-24deg);
}

.linked-figure-swatch__x::after {
	transform: rotate(24deg);
}

/* ---------- Tooltip (CSS-only, κάτω από το swatch) ---------- */

.linked-figure-swatch[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	background: var(--glf-border);
	color: #fff;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.2px;
	padding: 5px 10px;
	border-radius: 14px 5px 16px 5px/5px 16px 5px 14px;
	white-space: nowrap;
	max-width: 210px;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 20;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.linked-figure-swatch[data-tooltip]:hover::after,
.linked-figure-swatch[data-tooltip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Το ενεργό swatch δεν χρειάζεται tooltip κουκκίδα να συγκρούεται */
.linked-figure-swatch.is-active[data-tooltip]::after {
	background: var(--glf-primary);
}

/* ---------- Κατάσταση φόρτωσης κατά το AJAX ---------- */

.glf-swatches.is-loading .glf-swatches__row {
	opacity: 0.55;
	pointer-events: none;
}

.glf-swatches .linked-figure-swatch.is-loading {
	animation: glf-pulse 0.9s ease-in-out infinite;
}

@keyframes glf-pulse {
	0%,
	100% {
		box-shadow: 3px 3px 0 var(--glf-primary);
	}
	50% {
		box-shadow: 3px 3px 0 var(--glf-accent);
	}
}

/* Διακριτικό flash στην κύρια εικόνα όταν αλλάζει */
.glf-image-swapping {
	transition: opacity 0.18s ease;
	opacity: 0.25 !important;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.glf-swatches {
		--glf-size: 58px;
	}

	.glf-swatches__row {
		gap: 8px;
	}

	.linked-figure-swatch[data-tooltip]::after {
		font-size: 11px;
		max-width: 150px;
	}
}

/* ---------- Σεβασμός στις προτιμήσεις κίνησης ---------- */

@media (prefers-reduced-motion: reduce) {
	.linked-figure-swatch,
	.linked-figure-swatch[data-tooltip]::after,
	.glf-image-swapping {
		transition: none;
	}

	.linked-figure-swatch:hover {
		transform: none;
	}

	.glf-swatches .linked-figure-swatch.is-loading {
		animation: none;
	}
}