/**
 * Inline consent gate checkbox styling.
 *
 * These styles are hand-written (not webpack-compiled) and enqueued by
 * GateAssetSubscriber alongside the form-gate JS bundle.
 *
 * @package Soglasie152\Frontend\FormGate
 */

/**
 * Wrapper around the entire inline gate (one or more label rows + hidden inputs).
 * The `display: block` ensures it occupies its own line even inside a flex form.
 */
.soglasie-152-gate-inline {
	margin: 1rem 0;
	display: block;
}

/**
 * Each <label> wrapping a checkbox + text + optional policy link.
 *
 * `flex-wrap: wrap` lets the policy link drop to a new line on narrow viewports
 * without breaking the checkbox / label text alignment.
 */
.soglasie-152-gate-inline > .soglasie-152-gate-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	line-height: 1.5;
	cursor: pointer;
	flex-wrap: wrap;
}

/**
 * Keep the checkbox from shrinking and push it to the text baseline so the
 * first line of the label text is vertically centred with the checkbox.
 */
.soglasie-152-gate-inline > .soglasie-152-gate-label > input[type="checkbox"] {
	margin-top: 0.2rem;
	flex-shrink: 0;
}

/**
 * Mandatory-field asterisk (*).
 *
 * `display: inline-block` + `vertical-align: baseline` prevents the asterisk
 * from being rendered taller than the surrounding text in some WebKit builds,
 * which could cause it to look like a vertical bar when anti-aliased.
 */
.soglasie-152-gate-required-mark {
	color: #b91c1c;
	font-weight: 600;
	margin-left: 0.15rem;
	display: inline-block;
	vertical-align: baseline;
}

/**
 * Validation / error message rendered under a group or a modal mount by
 * `group-attach.js`. It carries `role="alert"`, so it has to look like one:
 * an unstyled paragraph reads as body copy and the visitor keeps clicking a
 * submit button that will not fire.
 */
.soglasie-152-gate-message {
	color: #991b1b;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 4px;
	padding: 0.5rem 0.75rem;
	margin: 0.5rem 0 0 0;
}

/**
 * Privacy-policy link appended after the label text.
 *
 * The `::before` pseudo-element is explicitly cleared (no content) so that
 * themes which inject a separator character before links (e.g. " | " via CSS
 * content) do not produce a spurious vertical bar between the label text and
 * the policy link.
 */
.soglasie-152-gate-policy-link {
	margin-left: 0.5rem;
	text-decoration: underline;
}

.soglasie-152-gate-policy-link::before {
	/* Remove any separator character injected by the active theme. */
	content: '';
}

/* -------------------------------------------------------------------------
 * Modal overlay — full-screen backdrop + centred dialog card.
 * The backdrop uses `position: fixed` + `inset: 0` so it covers the entire
 * viewport regardless of scroll position, and a very high z-index so it
 * stacks above WooCommerce / theme elements.
 * ------------------------------------------------------------------------- */

.soglasie-152-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 2147483600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.soglasie152-modal {
	background: #ffffff;
	color: #111827;
	border-radius: 8px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	padding: 1.5rem;
	max-width: 32rem;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
}

.soglasie152-modal > h2 {
	margin: 0 0 1rem 0;
	font-size: 1.25rem;
	font-weight: 600;
	padding-right: 2rem;
}

.soglasie152-modal > button[data-soglasie152-cancel] {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: transparent;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	color: #6b7280;
}

.soglasie152-modal > button[data-soglasie152-cancel]:hover {
	color: #111827;
}

/*
 * There is no rule for a headline link in this dialog, because the dialog no
 * longer renders one. `.soglasie152-modal > a` used to live here and matched an
 * anchor that `modal.js` appended from a top-level `policyUrl` and never gave
 * any text — an empty tab stop a screen reader announced by reading out its
 * URL. The link was removed rather than named: a consent group binds a document
 * per checkbox, so a single headline link could only ever point at one of
 * several while appearing to cover all of them. Per-checkbox links are styled
 * by `.soglasie-152-gate-policy-link` above and are unaffected.
 */

.soglasie152-modal__error {
	background: #fef2f2;
	color: #991b1b;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	margin-bottom: 1rem;
	border: 1px solid #fecaca;
}

.soglasie152-modal__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem 0;
}

.soglasie152-modal__list label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: 4px;
	cursor: pointer;
	margin-bottom: 0.25rem;
}

.soglasie152-modal__list label:hover {
	background: #f9fafb;
}

.soglasie152-modal__list input[type="checkbox"] {
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.soglasie152-modal__actions {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.soglasie152-modal__actions button {
	padding: 0.5rem 1rem;
	border-radius: 4px;
	border: 1px solid transparent;
	font-size: 0.875rem;
	cursor: pointer;
	font-weight: 500;
}

.soglasie152-modal__actions button[data-soglasie152-confirm] {
	background: #2563eb;
	color: white;
	border-color: #2563eb;
}

.soglasie152-modal__actions button[data-soglasie152-confirm]:hover {
	background: #1d4ed8;
}

.soglasie152-modal__actions button[data-soglasie152-cancel] {
	background: transparent;
	color: #374151;
	border-color: #d1d5db;
}

.soglasie152-modal__actions button[data-soglasie152-cancel]:hover {
	background: #f3f4f6;
}