/* GreeceRace Donation
 * Όλες οι κλάσεις έχουν πρόθεμα grd- ώστε να μην τις «πιάνει» το θέμα.
 * Χωρίς JS: φαίνεται το κανονικό select και το πεδίο ποσού.
 * Με JS (.grd-js στο <html>, μπαίνει από το <head> πριν σχεδιαστεί η σελίδα): φαίνονται τα κουτιά, το πεδίο ποσού μόνο στο ελεύθερο ποσό.
 */

:root {
	--grd-accent: #CC0059;
	--grd-accent-soft: #fff5f9;
	--grd-border: #d9d9d9;
	--grd-dot-border: #b5b5b5;
	--grd-text: #1a1a1a;
	--grd-radius: 10px;
}

/* ---------- Χωρίς JS ---------- */
.grd-options { display: none; }

/* ---------- Με JS ---------- */
.grd-js .grd-field > :not(.grd-options) { display: none !important; } /* select (και τυχόν wrapper του θέματος) */

.grd-js .grd-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Ο πίνακας του WooCommerce: τίτλος πάνω, επιλογές από κάτω σε όλο το πλάτος */
.grd-js table.variations,
.grd-js table.variations tbody,
.grd-js table.variations tr,
.grd-js table.variations th,
.grd-js table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
}
.grd-js table.variations th.label { margin-bottom: 10px; font-weight: 700; }
.grd-js .reset_variations { display: inline-block; margin-top: 10px; }

/* ---------- Κουτί επιλογής ---------- */
.grd-options .grd-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 16px 20px;
	border: 2px solid var(--grd-border);
	border-radius: var(--grd-radius);
	background: #fff;
	color: var(--grd-text);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}

/* Το πραγματικό radio: κρυφό οπτικά, αλλά προσβάσιμο από πληκτρολόγιο/screen reader */
.grd-options .grd-option__control {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Ο κύκλος */
.grd-options .grd-option__dot {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border: 2px solid var(--grd-dot-border);
	border-radius: 50%;
	background: #fff;
	transition: border-color .15s, background-color .15s;
}

.grd-options .grd-option__text { flex: 1 1 auto; }

.grd-options .grd-option:hover { border-color: var(--grd-accent); }

.grd-options .grd-option.is-checked,
.grd-options .grd-option:has(.grd-option__input:checked) {
	border-color: var(--grd-accent);
	background: var(--grd-accent-soft);
	box-shadow: 0 0 0 1px var(--grd-accent);
}
.grd-options .grd-option.is-checked .grd-option__dot,
.grd-options .grd-option:has(.grd-option__input:checked) .grd-option__dot {
	border-color: var(--grd-accent);
	background: var(--grd-accent);
	box-shadow: inset 0 0 0 4px #fff;
}

.grd-options .grd-option:has(.grd-option__input:focus-visible) {
	outline: 3px solid var(--grd-accent);
	outline-offset: 2px;
}

/* ---------- Πεδίο ελεύθερου ποσού ---------- */
.grd-js .grd-amount:not(.is-active) { display: none; }

.grd-amount { margin: 14px 0; }

.grd-amount .grd-amount__label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	color: var(--grd-text);
	font-size: 16px;
	font-weight: 700;
}

.grd-amount .grd-amount__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 16px 20px;
	border: 2px solid var(--grd-border);
	border-radius: var(--grd-radius);
	background: #fff;
	color: var(--grd-text);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	-webkit-appearance: textfield;
	appearance: textfield;
}
.grd-amount .grd-amount__input:focus {
	border-color: var(--grd-accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--grd-accent);
}

.grd-amount .grd-amount__hint {
	margin: 6px 0 0;
	font-size: 14px;
	opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
	.grd-options .grd-option,
	.grd-options .grd-option__dot { transition: none; }
}