/**
 * ΕΟΠΥΥ (inc/eopyy.php): πλαίσιο στη σελίδα προϊόντος, παράθυρο + φόρμα αιτήματος, ενημέρωση στην κατηγορία.
 * Markup: template-parts/eopyy/{product-box,dialog,category-box}.php + φόρμα Contact Form 7 (.of-eopyy-form)
 *
 * Λευκά πάνελ πάνω στο μωβ φόντο, με τα χρώματα του design system (χωρίς mockup: ίδια γλώσσα με τα
 * πάνελ λογαριασμού/ταμείου). Mobile-first: ποσά σε 1 στήλη, 2 από 521px· φόρμα 2 στηλών από 521px.
 */

.of-eopyy-box,
.of-eopyy-intro,
.of-eopyy-dialog {
	--eo-radius: 18px;
	--eo-padding: 18px;
	--eo-field-height: 46px;
}

@media (min-width: 521px) {
	.of-eopyy-box,
	.of-eopyy-intro,
	.of-eopyy-dialog {
		--eo-padding: 24px;
	}
}

.of-eopyy-box [hidden],
.of-eopyy-dialog [hidden] {
	display: none;
}

/* ==========================================================================
   Πλαίσιο στη σελίδα προϊόντος
   ========================================================================== */

.of-eopyy-box {
	margin-top: 18px;
	padding: var(--eo-padding);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--eo-radius);
	background-color: var(--color-surface);
	color: var(--color-text);
}

.of-eopyy-box__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.of-eopyy-box__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background-color: var(--color-purple-soft);
	color: var(--color-primary);
}

.of-eopyy-box__eyebrow {
	margin: 0 0 2px;
	color: var(--color-accent-text);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.of-product .of-eopyy-box__title,
.of-eopyy-box__title {
	margin: 0;
	color: var(--color-primary);
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.of-eopyy-box__text {
	margin: 14px 0 0;
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 1.6;
}

.of-eopyy-box__rates {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 521px) {
	.of-eopyy-box__rates {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

.of-eopyy-box__rate {
	display: grid;
	align-content: start;
	gap: 4px;
	margin: 0;
	padding: 14px 16px;
	border-radius: 12px;
	background-color: var(--color-purple-soft);
}

.of-eopyy-box__rate-label {
	color: var(--color-primary);
	font-size: 12px;
	font-weight: var(--fw-bold);
}

.of-eopyy-box__rate-text {
	color: var(--color-text-muted);
	font-size: 11px;
	line-height: 1.4;
}

.of-eopyy-box__rate-amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin-top: 4px;
}

.of-eopyy-box__from {
	color: var(--color-text-muted);
	font-size: 12px;
}

.of-eopyy-box__rate-amount strong {
	color: var(--color-text);
	font-size: 22px;
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.of-eopyy-box__meta,
.of-eopyy-box__details,
.of-eopyy-box__note {
	margin: 12px 0 0;
	color: var(--color-text-muted);
	font-size: 12px;
	line-height: 1.55;
}

.of-eopyy-box__meta strong {
	color: var(--color-text);
}

.of-eopyy-box__details {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}

.of-eopyy-box__note {
	font-size: 11px;
}

.of-eopyy-box__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin-top: 16px;
}

@media (min-width: 521px) {
	.of-eopyy-box__actions {
		flex-direction: row;
		align-items: center;
		gap: 18px;
	}
}

.of-eopyy-box .of-eopyy-box__cta {
	min-height: var(--btn-height-cta);
}

.of-eopyy-box__info,
.of-eopyy-box__info:visited,
.of-eopyy-intro__link,
.of-eopyy-intro__link:visited {
	color: var(--color-primary);
	font-size: 13px;
	font-weight: var(--fw-bold);
	text-align: center;
	text-decoration: none;
}

.of-eopyy-box__info:hover,
.of-eopyy-box__info:focus,
.of-eopyy-intro__link:hover,
.of-eopyy-intro__link:focus {
	color: var(--color-accent-text);
	text-decoration: underline;
}

/* ==========================================================================
   Ενημέρωση στη σελίδα της κατηγορίας ΕΟΠΥΥ
   ========================================================================== */

.of-eopyy-intro {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px 16px;
	align-items: center;
	margin: 0 0 24px;
	padding: var(--eo-padding);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--eo-radius);
	background-color: var(--color-surface);
	color: var(--color-text);
}

.of-eopyy-intro__rates,
.of-eopyy-intro__link {
	grid-column: 1 / -1;
}

@media (min-width: 1024px) {
	.of-eopyy-intro {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		gap: 24px;
	}

	.of-eopyy-intro__rates,
	.of-eopyy-intro__link {
		grid-column: auto;
	}
}

.of-eopyy-intro__title {
	margin: 0 0 4px;
	color: var(--color-primary);
	font-size: 18px;
	line-height: 1.3;
}

.of-eopyy-intro__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 1.6;
}

.of-eopyy-intro__rates {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.of-eopyy-intro__rate {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 10px 14px;
	border-radius: 12px;
	background-color: var(--color-purple-soft);
}

.of-eopyy-intro__rate strong {
	color: var(--color-primary);
	font-size: 13px;
}

.of-eopyy-intro__rate span {
	color: var(--color-text-muted);
	font-size: 11px;
}

.of-eopyy-intro__link {
	text-align: left;
	white-space: nowrap;
}

/* ==========================================================================
   Παράθυρο αιτήματος (native <dialog>)
   ========================================================================== */

html:has(.of-eopyy-dialog[open]) {
	overflow: hidden;
}

.of-eopyy-dialog {
	width: min(560px, calc(100% - 24px));
	max-width: none;
	max-height: calc(100dvh - 24px);
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text);
	overflow: visible;
}

.of-eopyy-dialog::backdrop {
	background-color: color-mix(in srgb, var(--color-primary-dark) 62%, transparent);
}

.of-eopyy-dialog__panel {
	max-height: calc(100dvh - 24px);
	padding: var(--eo-padding);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 20px;
	background-color: var(--color-surface);
	box-shadow: 0 24px 60px color-mix(in srgb, var(--color-primary-dark) 35%, transparent);
}

.of-eopyy-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.of-eopyy-dialog .of-eopyy-dialog__title {
	margin: 0;
	color: var(--color-primary);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.of-eopyy-dialog button.of-eopyy-dialog__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: var(--border-width) solid var(--color-border);
	border-radius: 50%;
	background-color: var(--color-surface);
	color: var(--color-primary);
	cursor: pointer;
}

.of-eopyy-dialog button.of-eopyy-dialog__close:hover,
.of-eopyy-dialog button.of-eopyy-dialog__close:focus-visible {
	background-color: var(--color-purple-soft);
}

.of-eopyy-dialog button.of-eopyy-dialog__close:focus-visible {
	outline: var(--focus-outline);
	outline-offset: var(--focus-offset);
}

.of-eopyy-dialog__text {
	margin: 12px 0 18px;
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 1.6;
}

/* ==========================================================================
   Φόρμα αιτήματος (Contact Form 7): στο παράθυρο και στη σελίδα «Πώς λειτουργεί»
   ========================================================================== */

.of-eopyy-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	color: var(--color-text);
	text-align: left;
}

@media (min-width: 521px) {
	.of-eopyy-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.of-eopyy-form__field {
	display: grid;
	gap: 7px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.of-eopyy-form__field--full,
.of-eopyy-form__consent,
.of-eopyy-form__hint,
.of-eopyy-form__submit {
	grid-column: 1 / -1;
}

.of-eopyy-form label,
.of-eopyy-form legend {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	color: var(--color-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1.4;
}

.of-eopyy-form__required {
	color: var(--color-accent-text);
}

.of-eopyy-form__optional {
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
}

.of-eopyy-form .wpcf7-form-control-wrap {
	display: block;
}

.of-eopyy-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--eo-field-height);
	margin: 0;
	padding: 0 12px;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-input);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-body);
	box-shadow: none;
}

.of-eopyy-form textarea {
	min-height: 96px;
	padding: 12px;
	line-height: 1.5;
	resize: vertical;
}

.of-eopyy-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea):focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
	outline: none;
}

.of-eopyy-form :is(input, textarea).wpcf7-not-valid {
	border-color: var(--color-error);
}

.of-eopyy-form .wpcf7-not-valid-tip {
	margin-top: 5px;
	color: var(--color-error);
	font-size: 11px;
}

/* Ποσοστό συμμετοχής: «κουμπάκια» */
.of-eopyy-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.of-eopyy-form .wpcf7-radio .wpcf7-list-item {
	margin: 0;
}

.of-eopyy-form .wpcf7-radio .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-size: 13px;
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.of-eopyy-form .wpcf7-radio .wpcf7-list-item label:has(input:checked) {
	border-color: var(--color-primary);
	background-color: var(--color-purple-soft);
	color: var(--color-primary);
}

.of-eopyy-form :is(input[type="radio"], input[type="checkbox"]) {
	width: 16px;
	height: 16px;
	min-height: 0;
	margin: 0;
	accent-color: var(--color-primary);
}

/* Συγκατάθεση */
.of-eopyy-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.of-eopyy-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: var(--fw-regular);
	line-height: 1.55;
	cursor: pointer;
}

.of-eopyy-form .wpcf7-acceptance input {
	flex: none;
	margin-top: 2px;
}

.of-eopyy-form .wpcf7-acceptance a {
	color: var(--color-primary);
	font-weight: var(--fw-bold);
}

.of-eopyy-form__hint {
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	background-color: var(--color-purple-soft);
	color: var(--color-text-muted);
	font-size: 12px;
	line-height: 1.55;
}

.of-eopyy-form__hint strong {
	color: var(--color-primary);
}

.of-eopyy-form__submit {
	position: relative;
}

.of-eopyy-form input.wpcf7-submit {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: var(--radius-button);
	background-color: var(--color-accent);
	color: var(--color-on-accent);
	font-size: 15px;
	font-weight: var(--fw-bold);
	cursor: pointer;
	transition: background-color var(--transition-default);
}

.of-eopyy-form input.wpcf7-submit:hover,
.of-eopyy-form input.wpcf7-submit:focus {
	background-color: var(--color-accent-hover);
}

.of-eopyy-form input.wpcf7-submit:focus-visible {
	outline: var(--focus-outline);
	outline-offset: var(--focus-offset);
}

/* Spinner του Contact Form 7 πάνω στο κουμπί (όχι σε δική του σειρά κάτω από αυτό) */
.of-eopyy-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 12px;
	margin: 0;
	transform: translateY(-50%);
}

/* Μήνυμα αποτελέσματος του Contact Form 7 */
.wpcf7 form.of-eopyy-request .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: var(--border-width) solid var(--color-border);
	border-radius: 12px;
	color: var(--color-text);
	font-size: 13px;
	line-height: 1.5;
}

.wpcf7 form.of-eopyy-request.sent .wpcf7-response-output {
	border-color: var(--color-success);
	background-color: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
}

.wpcf7 form.of-eopyy-request:is(.invalid, .unaccepted, .failed, .spam, .aborted) .wpcf7-response-output {
	border-color: var(--color-error);
	background-color: color-mix(in srgb, var(--color-error) 6%, var(--color-surface));
}

/* Στη σελίδα «Πώς λειτουργεί» η φόρμα κάθεται σε λευκό πάνελ (όπως στο παράθυρο) */
.of-text-page .wpcf7:has(form.of-eopyy-request) {
	margin-top: 18px;
	padding: var(--eo-padding, 24px);
	border: var(--border-width) solid var(--color-border);
	border-radius: 18px;
	background-color: var(--color-surface);
}