/* ============================================================
   WooCommerce Checkout Free Gift

   Ουδέτερο στυλ, ώστε να δένει με οποιοδήποτε θέμα.
   Για να το προσαρμόσεις, άλλαξε μόνο τις μεταβλητές παρακάτω —
   δεν χρειάζεται να πειράξεις τους κανόνες.
   ============================================================ */

.golab-wcg {
	--golab-wcg-accent: #2f6b7e;
	--golab-wcg-gift: #1f7a4d;
	--golab-wcg-border: #d9dee3;
	--golab-wcg-bg: #fff;
	--golab-wcg-bg-active: #f3f9fb;
	--golab-wcg-text: inherit;
	--golab-wcg-muted: #6b7280;
	--golab-wcg-radius: 10px;

	margin: 16px 0;
	padding: 0;
	background: var(--golab-wcg-bg);
	border: 1px solid var(--golab-wcg-border);
	border-radius: var(--golab-wcg-radius);

	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* Η κλάση μπαίνει από το JS στο κλικ, ώστε το κουτί να «ανάβει» αμέσως
   και να μην περιμένει τον κύκλο του AJAX. */
.golab-wcg.is-checked {
	background: var(--golab-wcg-bg-active);
	border-color: var(--golab-wcg-accent);
	box-shadow: inset 0 0 0 1px var(--golab-wcg-accent);
}

/* ------------------------------------------------------------
   Η σειρά
   ------------------------------------------------------------ */

/**
 * ΤΟ !important ΕΔΩ ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ — μην το αφαιρέσεις.
 *
 * Το κουτί τυπώνεται μέσα σε .form-row του checkout, και τα θέματα
 * στυλάρουν εκεί ΟΛΑ τα labels. Μετρημένο στο Motta:
 *
 *   form.checkout .form-row label   →  ειδικότητα 0,2,2  →  display:block
 *   .golab-wcg__label               →  ειδικότητα 0,1,0  →  χάνει
 *
 * Χωρίς το !important το display:flex ακυρώνεται αθόρυβα: το κουτί
 * εμφανίζεται, αλλά η τιμή πέφτει σε δική της σειρά.
 *
 * Μόνο αυτές οι τρεις ιδιότητες χρειάζονται προστασία. Οι υπόλοιπες
 * (padding, χρώματα, γραμματοσειρά) μένουν κανονικές, ώστε να μπορείς
 * να τις αλλάξεις από το θέμα σου.
 */
.golab-wcg .golab-wcg__label {
	display: flex !important;
	float: none !important;
	width: auto !important;

	align-items: flex-start;
	gap: 12px;

	margin: 0;
	padding: 14px 16px;
	cursor: pointer;

	font-weight: 400;
	line-height: 1.45;
	color: var(--golab-wcg-text);
}

/* ------------------------------------------------------------
   Το κουτάκι
   ------------------------------------------------------------ */

/* Ίδιος λόγος με το label: τα θέματα βάζουν συχνά width:100% σε κάθε
   input μέσα στο checkout, που θα έκανε το κουτάκι να καταλάβει όλη
   τη σειρά. */
.golab-wcg .golab-wcg__input {
	flex: 0 0 auto;
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	margin: 2px 0 0 0 !important;
	padding: 0 !important;

	accent-color: var(--golab-wcg-accent);
	cursor: pointer;
}

/* ------------------------------------------------------------
   Κείμενο
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Η εικόνα του δώρου
   ------------------------------------------------------------ */

.golab-wcg .golab-wcg__thumb {
	flex: 0 0 auto;
	display: block;
	width: 52px;
	height: 52px;

	overflow: hidden;
	background: #f6f7f8;
	border-radius: 6px;
}

.golab-wcg .golab-wcg__thumb .golab-wcg__img {
	/* Τα θέματα βάζουν συχνά width:100% + height:auto στις εικόνες του
	   καλαθιού, που εδώ θα παραμόρφωνε το τετράγωνο πλαίσιο. */
	width: 52px !important;
	height: 52px !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}

.golab-wcg .golab-wcg__text {
	display: flex;
	flex-direction: column;
	gap: 3px;

	/* Επιτρέπει στο κείμενο να σπάσει αντί να σπρώξει την τιμή εκτός κουτιού. */
	flex: 1 1 auto;
	min-width: 0;
}

.golab-wcg .golab-wcg__title {
	font-weight: 600;
}

/* Το όνομα του προϊόντος που θα πάρει ο πελάτης. */
.golab-wcg .golab-wcg__product {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--golab-wcg-gift);
}

.golab-wcg .golab-wcg__desc {
	font-size: 0.86em;
	line-height: 1.45;
	color: var(--golab-wcg-muted);
}

/* ------------------------------------------------------------
   Το σηματάκι «ΔΩΡΕΑΝ»
   ------------------------------------------------------------ */

.golab-wcg .golab-wcg__price {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 3px 9px;

	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;

	color: #fff;
	background: var(--golab-wcg-gift);
	border-radius: 999px;
}

/* ------------------------------------------------------------
   Η γραμμή του δώρου μέσα στο καλάθι και στα σύνολα

   Αυτά τα δύο τυπώνονται από την PHP μέσα στους πίνακες του
   WooCommerce, δηλαδή ΕΞΩ από το .golab-wcg — γι' αυτό δεν
   μπορούν να έχουν το ίδιο πρόθεμα με τα υπόλοιπα.
   ------------------------------------------------------------ */

.golab-wcg-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;

	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.04em;
	vertical-align: middle;
	white-space: nowrap;

	color: #fff;
	background: #1f7a4d;
	border-radius: 999px;
}

.golab-wcg-free {
	font-weight: 700;
	color: #1f7a4d;
}

/* ------------------------------------------------------------
   Προσβασιμότητα: ορατό περίγραμμα στο πληκτρολόγιο
   ------------------------------------------------------------ */

.golab-wcg .golab-wcg__input:focus-visible {
	outline: 2px solid var(--golab-wcg-accent) !important;
	outline-offset: 2px;
}

/* ------------------------------------------------------------
   Κινητό
   ------------------------------------------------------------ */

@media (max-width: 480px) {

	.golab-wcg .golab-wcg__label {
		flex-wrap: wrap;
		padding: 12px 14px;
		gap: 10px;
	}

	/**
	 * flex-basis 0 αντί για auto.
	 *
	 * Με flex-wrap ενεργό, το «auto» σημαίνει ότι η αφετηρία του κειμένου
	 * είναι το φυσικό του πλάτος. Επειδή η περιγραφή είναι μεγάλη, δεν
	 * χωρούσε δίπλα στο κουτάκι και έπεφτε ολόκληρη από κάτω. Με 0, το
	 * κείμενο απλώς μοιράζεται τον χώρο που περισσεύει στη σειρά.
	 */
	.golab-wcg .golab-wcg__text {
		flex: 1 1 0;
	}

	.golab-wcg .golab-wcg__thumb,
	.golab-wcg .golab-wcg__thumb .golab-wcg__img {
		width: 44px !important;
		height: 44px !important;
	}

	/**
	 * Το σηματάκι σε δική του σειρά.
	 *
	 * Το width:100% είναι αυτό που το σπρώχνει κάτω — χωρίς αυτό θα χωρούσε
	 * στην πρώτη σειρά και θα στρίμωχνε το κείμενο σε ~97px.
	 *
	 * Το margin-left το στοιχίζει με το κείμενο: 18px κουτάκι + 10px κενό.
	 */
	.golab-wcg .golab-wcg__price {
		width: 100%;
		margin-left: 28px;
	}

	/* Όταν υπάρχει εικόνα, το κείμενο ξεκινά πιο δεξιά: +44px +10px κενό. */
	.golab-wcg .golab-wcg__thumb ~ .golab-wcg__price {
		margin-left: 82px;
	}
}

/* ------------------------------------------------------------
   Σεβασμός στη ρύθμιση «λιγότερη κίνηση»
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.golab-wcg {
		transition: none;
	}
}