/**
 * Styling for the WP-ImmoMakler Widerruf button, form and modal.
 *
 * The button adopts the active theme's / page-builder's own button styles by
 * default (see the zero-specificity fallback below). Our colour is applied only
 * when explicitly configured via the "Farbe des Buttons" setting, the shortcode
 * `color` attribute, or the block's colour control.
 */

/*
 * Default button & submit appearance — a ZERO-SPECIFICITY fallback (`:where()`,
 * specificity 0,0,0). The active theme's / page-builder's own button styles
 * (a bare `button {}` is already 0,0,1) win on the frontend, so the Widerruf
 * button matches the surrounding site design out of the box. This fallback only
 * fills the void where nothing else styles the button: a page-builder editor
 * canvas (Divi, Bricks, WPBakery, Oxygen) that doesn't load the theme's
 * frontend button CSS, or a theme that leaves <a>/<button> unstyled. The
 * fallback colour is a deliberately neutral grey, not our brand red — red is
 * applied only when explicitly configured (see the `--colored` rules below).
 *
 * Font (incl. weight) is left to `font: inherit` — we deliberately do NOT force
 * a bold weight, so the text matches the theme's buttons / surrounding content.
 * Forcing `font-weight` here made the link-mode <a> render bold while a
 * theme-styled <button> stayed at its normal weight (inconsistent).
 */
:where(.immomakler-widerruf-button),
:where(.immomakler-widerruf-submit) {
	display: inline-block;
	box-sizing: border-box;
	padding: 0.6em 1.4em;
	border: 0;
	border-radius: 4px;
	background-color: #6b7280;
	color: #fff;
	font: inherit;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

:where(.immomakler-widerruf-button:hover),
:where(.immomakler-widerruf-button:focus),
:where(.immomakler-widerruf-submit:hover),
:where(.immomakler-widerruf-submit:focus) {
	background-color: #4b5563;
	text-decoration: none;
}

/*
 * The form's submit button gets a small top margin to separate it from the
 * consent checkboxes above; its colours/appearance come from the rules above.
 */
.immomakler-widerruf-submit {
	margin-top: 0.5em;
}

.immomakler-widerruf-button:focus-visible,
.immomakler-widerruf-submit:focus-visible {
	outline: 3px solid currentcolor;
	outline-offset: 2px;
}

/*
 * Link-mode and builder-popup-trigger buttons render as an <a> (carrying the
 * `--link` modifier); the modal trigger and the form submit render as a
 * <button>. Themes style <button> as a button but treat <a> as a text link
 * (underline, link colour, and a normalize-style
 * `a { background-color: transparent }` reset at 0,0,1 that would strip the
 * :where() fallback background at 0,0,0). Re-assert the neutral button look on
 * the anchor via the `--link` class (0,1,0) so the link reliably looks like a
 * button, not plain text. The <button> deliberately keeps only the :where()
 * fallback above, so it still adopts the theme's own button styles. A
 * configured colour (`--colored`) and page-builder style controls
 * (higher-specificity wrapper selectors) still override the background and text
 * colour here.
 *
 * `padding` / `border-radius` are repeated here (they are also in the :where()
 * base) because theme resets clobber them on anchors — e.g. Divi's global
 * `a, abbr, ... { padding: 0 }` reset (0,0,1) would flatten the link to text
 * with no button box. The class rule (0,1,0) restores the button shape; a
 * page-builder's own padding control still wins via its higher-specificity
 * wrapper selector.
 *
 * `text-decoration` uses !important on purpose: themes underline content links
 * with contextual selectors like `.entry-content a` / `.page-content a`
 * (0,1,1), which would beat a plain (0,1,0) class rule. A button never wants an
 * underline, and !important keeps that intent without forcing the
 * colour/builder overrides into an escalating specificity war (they only touch
 * background/colour).
 */
.immomakler-widerruf-button--link {
	padding: 0.6em 1.4em;
	border-radius: 4px;
	background-color: #6b7280;
	color: #fff;
	text-decoration: none !important;
}

.immomakler-widerruf-button--link:hover,
.immomakler-widerruf-button--link:focus {
	background-color: #4b5563;
	color: #fff;
	text-decoration: none !important;
}

/*
 * The form's submit button sits inside the .immomakler wrapper, where the
 * bootstrap3 skin's `.immomakler button { color: inherit }` reset (0,1,1)
 * overrides the :where() fallback's white text (0,0,0) — leaving dark inherited
 * text on the neutral grey background (poor contrast). Re-assert white at
 * .immomakler scope (0,2,0) for the neutral case; the configured-colour case is
 * handled by the --colored text rules below (also .immomakler-scoped and later
 * in the file, so they win at equal specificity).
 */
.immomakler .immomakler-widerruf-submit,
.immomakler .immomakler-widerruf-submit:hover,
.immomakler .immomakler-widerruf-submit:focus {
	color: #fff;
}

/*
 * Explicit-colour overrides. render_button() / render_form() add the
 * `--colored` modifier class AND the inline custom properties only when a
 * colour is configured. Without a configured colour neither is emitted and the
 * theme keeps full control. These rules sit AFTER the `--link` baseline so, at
 * equal specificity, the configured colour wins via source order.
 */
.immomakler-widerruf-button--colored,
.immomakler-widerruf-submit--colored {
	background-color: var(--immomakler-widerruf-button-bg);
}

.immomakler-widerruf-button--colored:hover,
.immomakler-widerruf-button--colored:focus,
.immomakler-widerruf-submit--colored:hover,
.immomakler-widerruf-submit--colored:focus {
	background-color: var(--immomakler-widerruf-button-bg-hover);
}

/*
 * Text colour for the configured-colour case, element-qualified and
 * .immomakler-scoped so it wins over a theme's `:where(a)` colour (Twenty
 * Twenty-Five and similar) and the bootstrap3 skin's later
 * `.immomakler button { color: inherit }` reset (0,1,1). Page-builder
 * text-colour controls still win — they target the button under their own
 * higher-specificity wrapper selector.
 */
a.immomakler-widerruf-button--colored,
button.immomakler-widerruf-button--colored,
button.immomakler-widerruf-submit--colored,
a.immomakler-widerruf-button--colored:hover,
a.immomakler-widerruf-button--colored:focus,
button.immomakler-widerruf-button--colored:hover,
button.immomakler-widerruf-button--colored:focus,
button.immomakler-widerruf-submit--colored:hover,
button.immomakler-widerruf-submit--colored:focus,
.immomakler .immomakler-widerruf-button--colored,
.immomakler .immomakler-widerruf-submit--colored,
.immomakler .immomakler-widerruf-button--colored:hover,
.immomakler .immomakler-widerruf-button--colored:focus,
.immomakler .immomakler-widerruf-submit--colored:hover,
.immomakler .immomakler-widerruf-submit--colored:focus {
	color: var(--immomakler-widerruf-button-color);
}

/* Honeypot: visually and assistively hidden, but present in the DOM. */
.immomakler-widerruf-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * Keep the form/confirmation content left-aligned regardless of an ancestor's
 * text-align. A page builder may set text-align on its wrapper to position the
 * button (e.g. the Elementor button widget's Style > Button alignment control);
 * in modal mode the form lives inside that same wrapper and would otherwise
 * inherit the alignment. The .immomakler-widerruf token is on the form and
 * confirmation wrappers but NOT on .immomakler-widerruf-button, so the button's
 * own alignment is unaffected.
 */
.immomakler-widerruf {
	text-align: start;
}

.immomakler-widerruf fieldset {
	margin: 0 0 1.5em;
	padding: 0;
	border: 0;
}

.immomakler-widerruf legend {
	margin-bottom: 0.75em;
	padding: 0;
	border: 0;
	font-size: 1.1em;
	font-weight: 600;
}

.immomakler-widerruf .immomakler-widerruf-statement {
	margin: 1em 0;
}

.immomakler-widerruf-intro {
	margin-bottom: 1.5em;
}

/*
 * Form layout. Inputs stay visually theme-native — no borders, backgrounds or
 * colours from the plugin — so they adopt the active theme's / page-builder's
 * look. The one exception is a baseline padding: most builders/themes don't pad
 * raw inputs, which makes the fields look tiny; Elementor is the exception, so
 * we match its `0.5rem 1rem` to keep every builder consistent. Keep additions
 * here to spacing/size only; leave borders/backgrounds/colours to the theme.
 */
.immomakler-widerruf-field {
	margin-bottom: 1em;
}

.immomakler-widerruf-field > label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

.immomakler-widerruf-form input[type="text"],
.immomakler-widerruf-form input[type="email"],
.immomakler-widerruf-form input[type="date"],
.immomakler-widerruf-form select,
.immomakler-widerruf-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.5rem 1rem;
}

.immomakler-widerruf-row {
	display: flex;
	gap: 0.5em;
}

.immomakler-widerruf-col-wide {
	flex: 2;
}

.immomakler-widerruf-col-narrow {
	flex: 1;
}

.immomakler-widerruf-help {
	display: block;
	margin-top: 0.35em;
	font-size: 0.85em;
	opacity: 0.75;
}

.immomakler-widerruf-checkbox {
	margin-bottom: 0.75em;
}

.immomakler-widerruf-checkbox label {
	display: flex;
	gap: 0.5em;
	align-items: flex-start;
}

/*
 * The label's inline content (text + optional Datenschutzerklärung link) is
 * wrapped in a single <span> so flex sees exactly two items: the checkbox and
 * the span. Without the wrapper, the <a> breaks the run of text into separate
 * anonymous flex items and the label renders as multiple columns instead of one
 * line that wraps. flex-shrink: 0 keeps the checkbox from being squashed by a
 * long, wrapping label.
 */
.immomakler-widerruf-checkbox label > input[type="checkbox"] {
	flex-shrink: 0;
}

/*
 * Validation / status notices. Only the error and success cues carry colour
 * (a left accent + faint tint); everything else stays theme-native.
 */
.immomakler-widerruf-field-error > label {
	color: #b3261e;
}

.immomakler-widerruf-field-error input,
.immomakler-widerruf-field-error select,
.immomakler-widerruf-field-error textarea {
	border-color: #b3261e;
}

.immomakler-widerruf-notice {
	margin-bottom: 1.5em;
	padding: 0.75em 1em;
	border-left: 4px solid;
}

.immomakler-widerruf-notice-error {
	border-left-color: #b3261e;
	background: rgba(179, 38, 30, 0.08);
}

.immomakler-widerruf-notice-success {
	border-left-color: #1a7f37;
	background: rgba(26, 127, 55, 0.08);
}

/* Modal */
.immomakler-widerruf-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 5vh 1rem;
	overflow-y: auto;
}

.immomakler-widerruf-modal[hidden] {
	display: none;
}

.immomakler-widerruf-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.immomakler-widerruf-modal-dialog {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	padding: 2rem;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.immomakler-widerruf-modal-title {
	margin: 0 0 1em;
	padding-right: 1.5em;
	font-size: 1.4em;
	font-weight: 600;
	line-height: 1.2;
}

.immomakler-widerruf-modal-close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	padding: 0.25rem 0.5rem;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

body.immomakler-widerruf-modal-open {
	overflow: hidden;
}