/**
 * Styling for the WP-ImmoMakler Widerruf button, form and modal.
 *
 * The button is a plain semantic element. Restyle it from your theme by
 * overriding the CSS custom properties below, or use your page builder's
 * native style controls.
 */

.immomakler-widerruf-button {
	--immomakler-widerruf-button-bg: #b3261e;
	--immomakler-widerruf-button-color: #fff;
	--immomakler-widerruf-button-bg-hover: #8c1c16;
	--immomakler-widerruf-button-radius: 4px;
	--immomakler-widerruf-button-padding: 0.6em 1.4em;

	display: inline-block;
	box-sizing: border-box;
	padding: var(--immomakler-widerruf-button-padding);
	border: 0;
	border-radius: var(--immomakler-widerruf-button-radius);
	background-color: var(--immomakler-widerruf-button-bg);
	color: var(--immomakler-widerruf-button-color);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.immomakler-widerruf-button:hover,
.immomakler-widerruf-button:focus {
	background-color: var(--immomakler-widerruf-button-bg-hover);
	color: var(--immomakler-widerruf-button-color);
	text-decoration: none;
}

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

/* 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;
}

.immomakler-widerruf-submit {
	margin-top: 0.5em;
}

/*
 * 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;
}