/* ═══════════════════════════════════════════════════════════════════════════
   LEADER HELLAS — ΣΕΛΙΔΑ ΠΡΟΣΦΟΡΑΣ
   Figma @1920: ενότητα min-height 1700 · padding 77/0/92
                tabs 246 & 266 πλάτος, min-height 49, κέντρο, margin-bottom 96
                φόρμα 721 πλάτος · 2 στήλες · column-gap 24 · row-gap 30
                checkboxes 30×30 σε πλέγμα 2 στηλών με gap 10/118
   ═══════════════════════════════════════════════════════════════════════════ */

.lh-quote,
.lh-quote * {
	box-sizing: border-box;
}

.lh-quote {
	--lh-quote-form-w: 72.1rem;   /* 721px */

	width: 100%;
	min-height: 170rem;
	padding: 7.7rem 0 9.2rem;
}

.lh-quote--dark {
	background: var(--lh-navy);
	color: var(--lh-white);
}

.lh-quote--light {
	background: var(--lh-pale);
	color: var(--lh-navy);
}

/* ─── Tabs ─────────────────────────────────────────────────────────────── */

.lh-quote__tabs {
	margin-bottom: 9.6rem;   /* 96px */
	display: flex;
	justify-content: center;
	gap: 1.8rem;
}

.lh-quote__tab {
	width: 24.6rem;          /* 246px */
	min-height: 4.9rem;      /*  49px */
	padding: 1.3rem 2rem;
	border: .1rem solid var(--lh-navy);
	border-radius: var(--lh-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--lh-white);
	color: var(--lh-navy);
	font-family: var(--lh-display);
	font-size: 2rem;         /* 20px */
	font-weight: 800;
	line-height: 2.2rem;
	letter-spacing: .08rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s var(--lh-ease), color .2s var(--lh-ease);
	-webkit-tap-highlight-color: transparent;
}

.lh-quote__tab:nth-child(2) {
	width: 26.6rem;          /* 266px */
}

/*
 * Τα hover ακολουθούν το static ακριβώς:
 *   ανοιχτό  → hover navy, ενεργό ink
 *   σκούρο   → hover ΔΕΝ αλλάζει (το `.quote-area--dark .tab` με ειδικότητα
 *              (0,2,0) νικάει το `.tab:hover` (0,1,1)), ενεργό λευκό
 */
.lh-quote__tab,
.lh-quote__tab:focus {
	background: var(--lh-white);
	color: var(--lh-navy);
}

.lh-quote__tab:hover {
	background: var(--lh-navy);
	color: var(--lh-white);
}

.lh-quote--dark .lh-quote__tab,
.lh-quote--dark .lh-quote__tab:hover {
	border-color: var(--lh-white);
	background: transparent;
	color: var(--lh-white);
}

.lh-quote--dark .lh-quote__tab.is-active {
	background: var(--lh-white);
	color: var(--lh-navy);
}

.lh-quote--light .lh-quote__tab.is-active {
	background: var(--lh-ink);
	color: var(--lh-white);
}

/* ─── Η φόρμα μέσα στην ενότητα προσφοράς ──────────────────────────────── */

.lh-quote .lh-form {
	--lh-form-width: var(--lh-quote-form-w);
	--lh-form-col-gap: 2.4rem;
	--lh-form-row-gap: 3rem;
	--lh-form-actions-top: 3.9rem;

	min-height: 0;
	padding: 0;
	background: transparent;
	color: inherit;
}

/* Στο σκούρο φόντο η λίστα του select πρέπει να μένει αναγνώσιμη. */
.lh-quote--dark select.lh-field__input option {
	color: var(--lh-navy);
}

.lh-quote .lh-form__actions--start .lh-btn {
	min-width: 26.1rem;
}

/*
 * Το πεδίο περιγραφής έχει δικά του κενά στο Figma.
 * Ειδικότητα (0,3,1) — πρέπει να νικά το `.lh-form.lh-form--quote
 * .lh-field--full` (0,3,0) του leader-contact.css, αλλιώς χάνει το margin-top.
 */
.lh-form--quote .lh-field:has(textarea),
.lh-quote .lh-form--quote .lh-field:has(textarea) {
	margin-top: 1.8rem;
	gap: 1.4rem;
}

.lh-quote .lh-field:has(textarea) .lh-field__label {
	width: 34.9rem;   /* 349px */
}

/* ─── Ομάδα επιλογών ποσότητας ─────────────────────────────────────────── */

.lh-choiceset {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Ο browser δίνει στο <legend> 2px padding ανά πλευρά και το static το κρατά.
 * Το normalize του hello-elementor το μηδενίζει (`legend { padding: 0 }`),
 * οπότε η ετικέτα έβγαινε 4px στενότερη. Το επαναφέρουμε ως .2rem, που είναι
 * ακριβώς 2px στα 1920 και κλιμακώνεται σωστά παντού αλλού.
 */
.lh-choiceset__legend {
	margin-bottom: 1.6rem;
	padding-inline: .2rem;
	font-size: 2.4rem;    /* 24px */
	line-height: 3rem;
}

.lh-choiceset__note {
	grid-column: 1 / -1;
	margin: 2rem 0 0;
	opacity: .5;
	font-size: 2rem;
	line-height: 3rem;
}

/* Το CF7 βγάζει τη λίστα ως <span class="wpcf7-checkbox">· την κάνουμε grid. */
.lh-quote .lh-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 11.8rem;
}

.lh-quote .lh-choices .wpcf7-list-item {
	margin: 0;
}

.lh-quote .lh-choices .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	font-size: 2rem;
	line-height: 3rem;
	cursor: pointer;
}

/*
 * Ρητό χρώμα, ΟΧΙ currentColor: τα <input> δεν κληρονομούν `color` από το UA
 * stylesheet, οπότε το currentColor έβγαινε μαύρο αντί για navy.
 */
.lh-quote .lh-choices input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	margin: 0;
	border: .1rem solid var(--lh-navy);
	border-radius: var(--lh-radius);
	background: transparent;
	cursor: pointer;
	transition: background-color .15s var(--lh-ease), border-color .15s var(--lh-ease);
}

.lh-quote--dark .lh-choices input[type="checkbox"] {
	border-color: var(--lh-white);
}

.lh-quote .lh-choices input[type="checkbox"]:checked {
	border-color: var(--lh-blue);
	background: var(--lh-blue);
	box-shadow: inset 0 0 0 .6rem var(--lh-navy);
}

.lh-quote--light .lh-choices input[type="checkbox"]:checked {
	box-shadow: inset 0 0 0 .6rem var(--lh-pale);
}

.lh-quote .lh-choices input[type="checkbox"]:focus-visible {
	outline: .2rem solid var(--lh-blue);
	outline-offset: .3rem;
}

/* Το CF7 προσθέτει ένα ::after στα labels της λίστας — δεν το θέλουμε. */
.lh-quote .lh-choices .wpcf7-list-item-label::after,
.lh-quote .lh-choices .wpcf7-list-item-label::before {
	content: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ≤1024px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

	.lh-quote {
		min-height: 0;
		padding: 6rem var(--lh-gutter) 8rem;
	}

	.lh-quote__tabs {
		margin-bottom: 6.5rem;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1.2rem;
	}

	.lh-quote__tab,
	.lh-quote__tab:nth-child(2) {
		width: 100%;
	}

	.lh-quote .lh-form {
		--lh-form-width: 100%;
		--lh-form-actions-top: 2.5rem;
	}

	.lh-quote .lh-choices {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.2rem;
	}

	.lh-quote .lh-field:has(textarea) .lh-field__label {
		width: 100%;
	}

	.lh-quote .lh-form__actions--start {
		justify-content: stretch;
	}

	.lh-quote .lh-form__actions--start .lh-btn {
		width: 100%;
	}
}