/**
 * Caly Widerruf – Frontend-Styles
 * Präfix .caly- · niedrige Spezifität · dockt an Theme-CSS-Variablen an.
 */

/* Honeypot immer verstecken */
.caly-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Basis-Layout des Formulars (gilt für neutral & theme)
 * ------------------------------------------------------------------ */
.caly-widerruf-form {
	max-width: 640px;
	margin: 1.5em 0;
}

.caly-widerruf-form .caly-field {
	margin: 0 0 1.1em;
}

.caly-widerruf-form label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

.caly-widerruf-form .caly-field-confirm label,
.caly-widerruf-form .caly-field-comment label {
	font-weight: 600;
}

.caly-widerruf-form .caly-field-confirm label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 400;
}

.caly-widerruf-form input[type="text"],
.caly-widerruf-form input[type="email"],
.caly-widerruf-form select,
.caly-widerruf-form textarea {
	width: 100%;
	box-sizing: border-box;
}

.caly-widerruf-form .caly-req {
	color: #c0392b;
}

/* Zwei-Spalten-Reihe */
.caly-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}

@media (max-width: 540px) {
	.caly-two-col {
		grid-template-columns: 1fr;
	}
}

/* Fehlermeldung / Erfolg */
.caly-form-error {
	padding: 0.85em 1em;
	margin: 0 0 1.2em;
	border-radius: 6px;
	background: #fdecea;
	border: 1px solid #f5c6cb;
	color: #842029;
}

.caly-widerruf-success {
	padding: 1em 1.25em;
	border-radius: 6px;
	background: #e8f5e9;
	border: 1px solid #c3e6cb;
	color: #1e4620;
}

.caly-no-orders {
	display: block;
	margin-top: 0.4em;
	color: #842029;
	font-size: 0.9em;
}

.caly-privacy-note {
	font-size: 0.85em;
	opacity: 0.85;
}

/* Positions-Auswahl (AJAX) */
.caly-order-items {
	margin: 0 0 1.2em;
}

.caly-order-items .caly-item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.6em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.caly-order-items .caly-item-name {
	flex: 1 1 auto;
}

.caly-order-items .caly-item-meta {
	font-size: 0.85em;
	opacity: 0.7;
}

.caly-order-items .caly-item-qty {
	flex: 0 0 auto;
	width: 90px;
}

.caly-order-items .caly-item-excluded,
.caly-order-items .caly-item-done {
	opacity: 0.5;
}

.caly-order-items .caly-item-excluded .caly-item-qty {
	display: none;
}

.caly-loading {
	padding: 0.6em 0;
	font-style: italic;
	opacity: 0.7;
}

/* ------------------------------------------------------------------ *
 * Modus: neutral – dezentes Plugin-Design über Theme-Variablen
 * ------------------------------------------------------------------ */
.caly-style-neutral input[type="text"],
.caly-style-neutral input[type="email"],
.caly-style-neutral select,
.caly-style-neutral textarea {
	padding: 0.6em 0.7em;
	border: 1px solid var(--wp--preset--color--contrast, #cbd2d9);
	border-radius: 6px;
	background: #fff;
	font-size: 1em;
	line-height: 1.4;
}

.caly-style-neutral input:focus,
.caly-style-neutral select:focus,
.caly-style-neutral textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary, #2563eb);
	outline-offset: 1px;
	border-color: transparent;
}

/* Button im neutral-Modus */
.caly-widerruf-button.caly-style-neutral,
.caly-style-neutral .caly-widerruf-button,
button.caly-widerruf-button.caly-style-neutral {
	display: inline-block;
	padding: 0.7em 1.4em;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--primary, #2563eb);
	color: var(--wp--preset--color--base, #fff);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.caly-widerruf-button.caly-style-neutral:hover,
.caly-style-neutral .caly-widerruf-button:hover {
	opacity: 0.9;
	color: var(--wp--preset--color--base, #fff);
}

/* ------------------------------------------------------------------ *
 * Modus: theme – möglichst wenig eigene Regeln, Theme bestimmt Optik.
 * Nur minimales Spacing, damit Felder nicht zusammenkleben.
 * ------------------------------------------------------------------ */
.caly-style-theme .caly-widerruf-button {
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Footer-Wrapper (Auto-Anzeige)
 * ------------------------------------------------------------------ */
.caly-widerruf-footer {
	text-align: center;
	padding: 1em 0;
}

.caly-widerruf-block {
	margin: 1em 0;
}

.caly-widerruf-block.aligncenter {
	text-align: center;
}

.caly-widerruf-block.alignright {
	text-align: right;
}