/**
 * Edes Print Options — front end.
 *
 * Every value that the admin Appearance tab can change is read from a CSS
 * custom property with a fallback baked in here, e.g. var(--edes-po-accent,
 * #f5ce1d). That way the stylesheet is complete on its own and the admin's
 * settings, injected after it via wp_add_inline_style(), only override what was
 * actually changed — no !important anywhere, and no styling lost if the inline
 * block is stripped by a caching layer.
 *
 * Scoped under .edes-po throughout so the module can never restyle the theme.
 */

.edes-po {
	--edes-po-card-min: 140px;

	box-sizing: border-box;
	color: var(--edes-po-card-text, #4a4a4a);
	font-size: inherit;
	line-height: 1.45;
}

.edes-po *,
.edes-po *::before,
.edes-po *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------- headings */

.edes-po__heading,
.edes-po__subheading {
	color: var(--edes-po-heading-color, #1f1f1f);
	font-weight: var(--edes-po-heading-weight, 700);
	margin: 0;
	padding: 0;
}

.edes-po__heading {
	font-size: var(--edes-po-heading-size, 20px);
	margin-bottom: calc(var(--edes-po-block-gap, 18px) * 0.55);
}

.edes-po__subheading {
	font-size: calc(var(--edes-po-heading-size, 20px) * 0.85);
}

/* ------------------------------------------------------- „Да / Не“ answers */

.edes-po__answers {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--edes-po-gap, 14px) * 0.7);
	margin-bottom: var(--edes-po-block-gap, 18px);
}

.edes-po__answer {
	align-items: center;
	background: var(--edes-po-badge-bg, #f5ce1d);
	border: var(--edes-po-card-border-width, 2px) solid transparent;
	border-radius: var(--edes-po-button-radius, 6px);
	color: var(--edes-po-badge-text, #1f1f1f);
	cursor: pointer;
	display: inline-flex;
	font-weight: 600;
	gap: 8px;
	margin: 0;
	min-height: var(--edes-po-input-height, 44px);
	padding: 6px 20px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	user-select: none;
}

.edes-po__answer:focus-within {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.edes-po__answer.is-selected {
	border-color: var(--edes-po-card-border-active, #f5ce1d);
}

/* The real input stays in the DOM for keyboard and no-JS use; only its
   appearance is replaced by .edes-po__radio. */
.edes-po__answer-input {
	height: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 0;
}

.edes-po__radio {
	background: #fff;
	border: 2px solid rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	display: inline-block;
	flex: none;
	height: 16px;
	position: relative;
	width: 16px;
}

.edes-po__answer.is-selected .edes-po__radio::after {
	background: #1f5fd8;
	border-radius: 50%;
	content: "";
	inset: 3px;
	position: absolute;
}

.edes-po__answer-input:focus-visible + .edes-po__radio {
	outline: 2px solid #1f5fd8;
	outline-offset: 2px;
}

/* ------------------------------------------------------------ section head */

.edes-po__section-head {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: calc(var(--edes-po-block-gap, 18px) * 0.7);
}

.edes-po__step {
	align-items: center;
	background: var(--edes-po-step-bg, transparent);
	border: 2px solid var(--edes-po-accent, #f5ce1d);
	border-radius: 50%;
	color: var(--edes-po-heading-color, #1f1f1f);
	display: inline-flex;
	flex: none;
	font-size: calc(var(--edes-po-heading-size, 20px) * 0.7);
	font-weight: 700;
	height: calc(var(--edes-po-heading-size, 20px) * 1.6);
	justify-content: center;
	width: calc(var(--edes-po-heading-size, 20px) * 1.6);
}

/* -------------------------------------------------------------------- grid */

/*
 * The column count is the admin's, but it is a maximum rather than a promise:
 * auto-fit drops to fewer columns as soon as a card would be squeezed below
 * --edes-po-card-min. Expressing the responsive behaviour inside the track
 * definition instead of in media queries is what keeps a 2-column set from
 * being widened to 3 on a tablet by a rule that could not know better.
 */
.edes-po__grid {
	display: grid;
	gap: var(--edes-po-gap, 14px);
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				var(--edes-po-card-min, 140px),
				calc(100% / var(--edes-po-columns, 4) - var(--edes-po-gap, 14px))
			),
			1fr
		)
	);
}

.edes-po__card {
	cursor: pointer;
	display: block;
	margin: 0;
	position: relative;
}

.edes-po__input {
	height: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 0;
}

.edes-po__card-inner {
	background: var(--edes-po-card-bg, #fff);
	border: var(--edes-po-card-border-width, 2px) solid var(--edes-po-card-border, #e6e6e6);
	border-radius: var(--edes-po-card-radius, 8px);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.edes-po__card:hover .edes-po__card-inner {
	background: var(--edes-po-card-hover-bg, #fffdf2);
	border-color: var(--edes-po-card-border-active, #f5ce1d);
}

.edes-po__input:checked + .edes-po__card-inner {
	background: var(--edes-po-card-hover-bg, #fffdf2);
	border-color: var(--edes-po-card-border-active, #f5ce1d);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.edes-po__input:focus-visible + .edes-po__card-inner {
	outline: 2px solid #1f5fd8;
	outline-offset: 2px;
}

/* A tick in the corner, so selection is not conveyed by colour alone. */
.edes-po__input:checked + .edes-po__card-inner::after {
	align-items: center;
	background: var(--edes-po-accent, #f5ce1d);
	border-radius: 50%;
	color: var(--edes-po-accent-text, #1f1f1f);
	content: "\2713";
	display: flex;
	font-size: 13px;
	font-weight: 700;
	height: 22px;
	justify-content: center;
	position: absolute;
	right: 8px;
	top: 8px;
	width: 22px;
}

.edes-po__badge {
	background: var(--edes-po-badge-bg, #f5ce1d);
	border-radius: var(--edes-po-badge-radius, 0);
	color: var(--edes-po-badge-text, #1f1f1f);
	display: block;
	font-size: var(--edes-po-badge-size, 12px);
	font-weight: 600;
	line-height: 1.35;
	padding: 5px 8px;
	text-align: center;
	text-transform: var(--edes-po-badge-transform, none);
}

/* Bulgarisation appends the converted amount inside the same price node, so
   both currencies inherit the badge's own type — nothing to style per plugin. */
.edes-po__badge .woocommerce-Price-amount,
.edes-po__badge .edes-po-price__alt {
	white-space: nowrap;
}

.edes-po__thumb {
	align-items: center;
	color: var(--edes-po-card-border, #e6e6e6);
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	padding: var(--edes-po-card-padding, 10px);
}

.edes-po__img {
	display: block;
	height: var(--edes-po-thumb-height, 150px);
	max-width: 100%;
	object-fit: var(--edes-po-thumb-fit, contain);
	width: 100%;
}

.edes-po__placeholder {
	display: block;
	height: var(--edes-po-thumb-height, 150px);
	width: 100%;
}

.edes-po__placeholder svg {
	display: block;
	height: 100%;
	margin: 0 auto;
	width: auto;
}

.edes-po__name {
	color: var(--edes-po-card-text, #4a4a4a);
	display: block;
	font-size: var(--edes-po-label-size, 15px);
	padding: 0 var(--edes-po-card-padding, 10px) calc(var(--edes-po-card-padding, 10px) + 2px);
	text-align: center;
}

.edes-po__card-note {
	display: block;
	font-size: calc(var(--edes-po-label-size, 15px) * 0.8);
	opacity: 0.75;
	padding: 0 var(--edes-po-card-padding, 10px) var(--edes-po-card-padding, 10px);
	text-align: center;
}

.edes-po__note {
	font-size: calc(var(--edes-po-label-size, 15px) * 0.9);
	margin-top: calc(var(--edes-po-block-gap, 18px) * 0.6);
	opacity: 0.8;
}

/* ------------------------------------------------------- text and uploads */

.edes-po__extras {
	display: flex;
	flex-direction: column;
	gap: calc(var(--edes-po-block-gap, 18px) * 0.55);
	margin-top: var(--edes-po-block-gap, 18px);
}

.edes-po__button {
	align-items: center;
	align-self: flex-start;
	background: var(--edes-po-button-bg, #f5ce1d);
	border: 0;
	border-radius: var(--edes-po-button-radius, 6px);
	color: var(--edes-po-button-text, #1f1f1f);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--edes-po-button-size, 15px);
	font-weight: 600;
	gap: 8px;
	line-height: 1.2;
	min-height: var(--edes-po-input-height, 44px);
	padding: 10px 22px;
	text-align: left;
	transition: filter 0.15s ease;
}

.edes-po__button:hover,
.edes-po__button:focus {
	filter: brightness(0.95);
}

.edes-po__button[aria-expanded="true"] {
	filter: brightness(0.92);
}

.edes-po__button-price {
	font-size: 0.85em;
	font-weight: 500;
	opacity: 0.85;
}

.edes-po__panel {
	margin-top: calc(var(--edes-po-block-gap, 18px) * 0.4);
}

.edes-po__panel[hidden] {
	display: none;
}

.edes-po__text {
	background: var(--edes-po-input-bg, #fff);
	border: var(--edes-po-card-border-width, 2px) solid var(--edes-po-input-border, #f5ce1d);
	border-radius: var(--edes-po-input-radius, 999px);
	color: inherit;
	font-family: inherit;
	font-size: var(--edes-po-button-size, 15px);
	height: var(--edes-po-input-height, 44px);
	max-width: 100%;
	padding: 0 20px;
	width: 100%;
}

.edes-po__text:focus {
	outline: 2px solid var(--edes-po-accent, #f5ce1d);
	outline-offset: 1px;
}

.edes-po__upload {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.edes-po__file {
	font-family: inherit;
	font-size: calc(var(--edes-po-button-size, 15px) * 0.9);
	max-width: 100%;
}

.edes-po__hint {
	font-size: calc(var(--edes-po-label-size, 15px) * 0.8);
	margin: 0;
	opacity: 0.7;
}

.edes-po__file-state {
	align-items: center;
	background: var(--edes-po-summary-bg, #faf7e8);
	border-radius: var(--edes-po-button-radius, 6px);
	color: var(--edes-po-summary-text, #1f1f1f);
	display: flex;
	flex-wrap: wrap;
	font-size: calc(var(--edes-po-label-size, 15px) * 0.9);
	gap: 10px;
	max-width: 100%;
	padding: 8px 12px;
}

.edes-po__file-state[hidden] {
	display: none;
}

.edes-po__file-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.edes-po__file-remove {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
}

.edes-po__file-state.is-error {
	background: rgba(214, 54, 56, 0.08);
	color: var(--edes-po-error-color, #d63638);
}

/* ------------------------------------------------------ errors and summary */

.edes-po__error {
	color: var(--edes-po-error-color, #d63638);
	font-size: calc(var(--edes-po-label-size, 15px) * 0.95);
	margin: calc(var(--edes-po-block-gap, 18px) * 0.5) 0 0;
}

.edes-po__error[hidden] {
	display: none;
}

.edes-po__summary {
	align-items: baseline;
	background: var(--edes-po-summary-bg, #faf7e8);
	border-radius: var(--edes-po-button-radius, 6px);
	color: var(--edes-po-summary-text, #1f1f1f);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	margin-top: var(--edes-po-block-gap, 18px);
	padding: 12px 16px;
}

.edes-po__summary[hidden] {
	display: none;
}

.edes-po__summary-label {
	font-weight: 600;
}

.edes-po__summary-value {
	font-weight: 700;
}

.edes-po__body[hidden] {
	display: none;
}

/* ----------------------------------------------------------------- preview */

/* The admin preview renders the real markup with the form names removed, so it
   needs no styling of its own beyond keeping it from feeling clickable. */
.edes-po--preview .edes-po__file {
	pointer-events: none;
}

/* --------------------------------------------------- product page price */

/*
 * These two live *outside* `.edes-po`: the script writes them into the theme's
 * own price element, wherever that is on the page, so they cannot be scoped to
 * the module's wrapper. Both class names are unique to this plugin.
 */
.edes-po-price {
	white-space: nowrap;
}

.edes-po-price-note {
	color: var(--edes-po-summary-text, #1f1f1f);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 0;
}

.edes-po-price-note[hidden] {
	display: none;
}

.edes-po-price-note__label {
	opacity: 0.75;
}

.edes-po-price-note__amount {
	font-weight: 700;
	white-space: nowrap;
}