/* EEE-Cloud Shop – Checkout (Version 1.01) */
/* Kein eigener Accent: die Farben kommen aus den Plugin-Design-Tokens (.eeefr).
   Alle Farbangaben nutzen var(--eeefr-*, <Fallback>). */
.eeefr-shop { color: var(--eeefr-ink, #1c2b2a); }
.eeefr-shop *, .eeefr-shop *::before, .eeefr-shop *::after { box-sizing: border-box; }

.eeefr-shop-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 1.75rem;
	align-items: start;
}
@media (max-width: 760px) {
	.eeefr-shop-grid { grid-template-columns: 1fr; }
}

.eeefr-shop-h { color: var(--eeefr-heading, #0f766e); margin: 0 0 .75rem; font-size: 1.25rem; }

.eeefr-fs {
	border: 1px solid #e2e8e7;
	border-radius: 12px;
	padding: 1rem 1.15rem 1.15rem;
	margin: 0 0 1.1rem;
}
.eeefr-fs > legend {
	padding: 0 .5rem;
	font-weight: 700;
	color: var(--eeefr-heading, #0f766e);
	font-size: .95rem;
}

.eeefr-field { margin: 0 0 .8rem; }
.eeefr-field > label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.eeefr-field input, .eeefr-field select {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid #cbd5d3;
	border-radius: 9px;
	font-size: 1rem;
	background: #fff;
}
.eeefr-field input:focus, .eeefr-field select:focus {
	outline: none;
	border-color: var(--eeefr-accent);
	box-shadow: 0 0 0 3px var(--eeefr-accent-soft, #ccfbf1);
}
.eeefr-field-2 { display: flex; gap: .8rem; }
.eeefr-field-2 > .eeefr-field { flex: 1 1 0; margin-bottom: .8rem; }
.eeefr-field-2 > .eeefr-narrow { flex: 0 0 30%; }
.eeefr-field-2 > .eeefr-grow { flex: 1 1 auto; }
@media (max-width: 480px) { .eeefr-field-2 { flex-direction: column; gap: 0; } .eeefr-field-2 > .eeefr-narrow { flex: 1 1 auto; } }

.eeefr-radio-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.eeefr-radio {
	display: inline-flex; align-items: center; gap: .5rem;
	border: 1px solid #cbd5d3; border-radius: 9px;
	padding: .55rem .85rem; cursor: pointer; font-size: .95rem;
}
.eeefr-radio input { accent-color: var(--eeefr-accent); }
.eeefr-radio:has(input:checked) { border-color: var(--eeefr-accent, #0f766e);
	/* Aus der Akzentfarbe gemischt, damit der Text auch bei kräftigen
	   Markenfarben lesbar bleibt (--eeefr-accent-soft ist frei setzbar). */
	background: color-mix(in srgb, var(--eeefr-accent, #0f766e) 8%, #fff); }

.eeefr-check { display: flex; align-items: flex-start; gap: .55rem; margin: .5rem 0; font-size: .9rem; line-height: 1.4; }
.eeefr-check input { margin-top: .15rem; accent-color: var(--eeefr-accent); }
.eeefr-check a { color: var(--eeefr-link, #0b554f); }

.eeefr-legal-note { font-size: .82rem; color: #5a6b69; background: #f4f8f7; border-left: 3px solid var(--eeefr-accent); padding: .6rem .75rem; border-radius: 0 8px 8px 0; margin: .5rem 0; }

.eeefr-btn {
	display: inline-block; text-decoration: none; text-align: center;
	background: #eef2f1; color: var(--eeefr-ink, #1c2b2a);
	border: 1px solid #cbd5d3; border-radius: 10px;
	padding: .7rem 1.2rem; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.eeefr-btn-pay { background: var(--eeefr-accent, #0f766e); color: var(--eeefr-btn-text, #fff); border-color: var(--eeefr-accent, #0f766e); width: 100%; }
.eeefr-btn-pay:hover { background: var(--eeefr-accent-dark, #0b554f); }
.eeefr-btn.is-loading { opacity: .6; pointer-events: none; }
button.eeefr-btn:disabled { opacity: .6; cursor: default; }

.eeefr-shop-error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: .6rem .75rem; margin: .5rem 0; font-size: .9rem; }

/* Zusammenfassung */
.eeefr-shop-summary {
	position: sticky; top: 1rem;
	border: 1px solid #e2e8e7; border-radius: 14px;
	padding: 1.1rem 1.2rem; background: #fafcfb;
}
.eeefr-shop-summary h4 { margin: 0 0 .8rem; color: var(--eeefr-heading, #0f766e); }
.eeefr-sum-row { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; font-size: .92rem; }
.eeefr-sum-sep { height: 1px; background: #e2e8e7; margin: .5rem 0; }
.eeefr-sum-total { font-size: 1.15rem; font-weight: 700; color: var(--eeefr-ink, #1c2b2a); border-top: 2px solid #e2e8e7; margin-top: .3rem; padding-top: .6rem; }
.eeefr-sum-hint { font-size: .78rem; color: #6b7a78; margin: .6rem 0 0; }

/* Ergebnis */
.eeefr-shop-result { border: 1px solid #e2e8e7; border-radius: 14px; padding: 1.5rem; }
.eeefr-shop-result h3 { margin-top: 0; color: var(--eeefr-heading, #0f766e); }
.eeefr-result-success { border-left: 5px solid #15803d; }
.eeefr-result-pending { border-left: 5px solid #b45309; }
.eeefr-result-failed { border-left: 5px solid #b91c1c; }
.eeefr-shop-result .eeefr-btn { margin-top: .4rem; }