/* ==========================================================================
   KMD Cancellation – Inline Multi-Step Kündigungsformular
   Light-Mode · Gold-Akzent – konsistent mit kmd-signup.css
   ========================================================================== */

:root {
	--kmd-gold:         #9a7420;
	--kmd-gold-light:   #b8922e;
	--kmd-gold-bg:      rgba(184,146,46,.10);
	--kmd-gold-border:  rgba(154,116,32,.30);
	--kmd-bg:           #ffffff;
	--kmd-bg-card:      #f8f8f8;
	--kmd-bg-field:     #f2f2f4;
	--kmd-bg-header:    #1e1e20;
	--kmd-border:       #d8d8dc;
	--kmd-border-focus: #9a7420;
	--kmd-text:         #1a1a1a;
	--kmd-text-muted:   #636368;
	--kmd-text-label:   #3a3a3c;
	--kmd-error:        #c0392b;
	--kmd-error-bg:     #fdf0ef;
	--kmd-success:      #1e7e34;
	--kmd-success-bg:   #f0faf2;
	--kmd-radius:       8px;
	--kmd-radius-lg:    12px;
	--kmd-shadow:       0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
}

/* ── Basis ────────────────────────────────────────────────────────────────── */

.kmd-cancel-wrap *,
.kmd-cancel-wrap *::before,
.kmd-cancel-wrap *::after {
	box-sizing: border-box;
}

.kmd-cancel-wrap {
	font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color:        var(--kmd-text);
	line-height:  1.5;
	max-width:    680px;
	margin:       0 auto;
	padding:      0 16px;
}

/* ── Schritte ─────────────────────────────────────────────────────────────── */

.kmd-cancel-step {
	animation: kmdCancelFadeIn .25s ease;
}

@keyframes kmdCancelFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0);    }
}

/* ── Überschriften ────────────────────────────────────────────────────────── */

.kmd-cancel-step-title {
	color:          var(--kmd-gold);
	font-size:      1.5rem;
	font-weight:    700;
	margin:         0 0 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.kmd-cancel-intro {
	color:      var(--kmd-text-muted);
	font-size:  .95rem;
	margin:     0 0 28px;
}

/* ── Felder ───────────────────────────────────────────────────────────────── */

.kmd-cancel-field {
	margin-bottom: 18px;
}

.kmd-cancel-field label {
	display:       block;
	font-size:     .875rem;
	font-weight:   600;
	color:         var(--kmd-text-label);
	margin-bottom: 6px;
}

.kmd-cancel-field input[type="text"],
.kmd-cancel-field input[type="email"],
.kmd-cancel-field input[type="date"],
.kmd-cancel-field select,
.kmd-cancel-field textarea {
	display:       block;
	width:         100%;
	background:    var(--kmd-bg-field);
	border:        1px solid var(--kmd-border);
	border-radius: var(--kmd-radius);
	padding:       10px 14px;
	font-size:     1rem;
	color:         var(--kmd-text);
	transition:    border-color .15s, box-shadow .15s;
	outline:       none;
	appearance:    none;
	-webkit-appearance: none;
}

.kmd-cancel-field input:focus,
.kmd-cancel-field select:focus,
.kmd-cancel-field textarea:focus {
	border-color: var(--kmd-border-focus);
	box-shadow:   0 0 0 3px var(--kmd-gold-bg);
}

.kmd-cancel-field textarea {
	resize:     vertical;
	min-height: 110px;
}

.kmd-cancel-field--error input,
.kmd-cancel-field--error select,
.kmd-cancel-field--error textarea {
	border-color: var(--kmd-error);
	background:   var(--kmd-error-bg);
}

/* Zweispaltige Felder */
.kmd-cancel-field-row {
	display: grid;
	gap:     16px;
	grid-template-columns: 1fr 1fr;
}

@media ( max-width: 480px ) {
	.kmd-cancel-field-row { grid-template-columns: 1fr; }
}

/* Pflichtfeld-Sternchen */
.kmd-cancel-req {
	color: var(--kmd-error);
}

/* Optional-Hinweis */
.kmd-cancel-optional {
	color:       var(--kmd-text-muted);
	font-size:   .8em;
	font-weight: 400;
}

/* Pflichtfeld-Marker */
.kmd-cancel-required {
	color:       #dc2626;
	font-weight: 700;
	margin-left: 2px;
}

/* Hint unterhalb */
.kmd-cancel-hint {
	display:    block;
	font-size:  .8rem;
	color:      var(--kmd-text-muted);
	margin-top: 4px;
}

/* Feldfehler */
.kmd-cancel-field-error {
	display:    block;
	font-size:  .82rem;
	color:      var(--kmd-error);
	margin-top: 4px;
}

/* Checkbox-Feld */
.kmd-cancel-field--checkbox {
	margin-bottom: 24px;
}

.kmd-cancel-checkbox-label {
	display:     flex;
	gap:         10px;
	align-items: flex-start;
	cursor:      pointer;
	font-size:   .9rem;
	font-weight: 400 !important;
	color:       var(--kmd-text) !important;
}

.kmd-cancel-checkbox-label input[type="checkbox"] {
	width:      18px;
	height:     18px;
	min-width:  18px;
	margin-top: 2px;
	cursor:     pointer;
	accent-color: var(--kmd-gold);
}

/* ── Globale Fehlerbox ────────────────────────────────────────────────────── */

.kmd-cancel-global-error {
	background:    var(--kmd-error-bg);
	border:        1px solid var(--kmd-error);
	border-radius: var(--kmd-radius);
	color:         var(--kmd-error);
	padding:       12px 16px;
	font-size:     .9rem;
	margin-bottom: 20px;
}

/* ── Info-Box (manuelle Bearbeitung) ─────────────────────────────────────── */

.kmd-cancel-info-box {
	background:    var(--kmd-gold-bg);
	border:        1px solid var(--kmd-gold-border);
	border-radius: var(--kmd-radius);
	color:         var(--kmd-text);
	padding:       16px 18px;
	font-size:     .9rem;
	margin-bottom: 20px;
	line-height:   1.6;
}

/* ── Info-Box OK-Variante (grün, E-Mail bestätigt) ──────────────────────── */

.kmd-cancel-info-box--ok {
	background:  var(--kmd-success-bg);
	border-color: rgba(30,126,52,.3);
	color:        var(--kmd-text);
}

/* ── Warnung-Box (außerordentlich) ───────────────────────────────────────── */

.kmd-cancel-warning {
	background:    var(--kmd-error-bg);
	border:        1px solid rgba(192,57,43,.3);
	border-radius: var(--kmd-radius);
	color:         var(--kmd-text);
	padding:       14px 18px;
	font-size:     .9rem;
	margin-bottom: 20px;
	line-height:   1.6;
}

/* ── Mitglieds-/Vertrags-Karte ───────────────────────────────────────────── */

.kmd-cancel-card {
	background:    var(--kmd-bg-card);
	border:        1px solid var(--kmd-border);
	border-radius: var(--kmd-radius-lg);
	padding:       20px 24px;
	margin-bottom: 24px;
}

.kmd-cancel-card-row {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	gap:             12px;
	padding:         6px 0;
	border-bottom:   1px solid var(--kmd-border);
	font-size:       .9rem;
}

.kmd-cancel-card-row:last-child {
	border-bottom: none;
}

.kmd-cancel-card-label {
	color:       var(--kmd-text-muted);
	font-size:   .82rem;
	white-space: nowrap;
}

.kmd-cancel-card-value {
	font-weight: 600;
	text-align:  right;
}

/* ── Typ-Radios ──────────────────────────────────────────────────────────── */

.kmd-cancel-type-radios {
	border:        none;
	padding:       0;
	margin:        0 0 24px;
}

.kmd-cancel-type-legend {
	font-size:     .875rem;
	font-weight:   600;
	color:         var(--kmd-text-label);
	margin-bottom: 12px;
	display:       block;
}

.kmd-cancel-type-radio-label {
	display:       flex;
	gap:           12px;
	align-items:   flex-start;
	background:    var(--kmd-bg-card);
	border:        2px solid var(--kmd-border);
	border-radius: var(--kmd-radius-lg);
	padding:       16px 20px;
	margin-bottom: 10px;
	cursor:        pointer;
	transition:    border-color .15s, box-shadow .15s, background .15s;
}

.kmd-cancel-type-radio-label:has( input:checked ) {
	border-color: var(--kmd-gold);
	background:   var(--kmd-gold-bg);
	box-shadow:   0 0 0 1px var(--kmd-gold-border);
}

.kmd-cancel-type-radio-label input[type="radio"] {
	width:      18px;
	height:     18px;
	min-width:  18px;
	margin-top: 3px;
	cursor:     pointer;
	accent-color: var(--kmd-gold);
}

.kmd-cancel-type-radio-title {
	display:     block;
	font-weight: 700;
	font-size:   1rem;
	color:       var(--kmd-text);
}

.kmd-cancel-type-radio-desc {
	display:   block;
	font-size: .82rem;
	color:     var(--kmd-text-muted);
	margin-top: 3px;
}

/* Fallback für Browser ohne :has()-Support */
@supports not ( selector( :has(a) ) ) {
	.kmd-cancel-type-radio-label:focus-within {
		border-color: var(--kmd-gold);
		background:   var(--kmd-gold-bg);
	}
}

/* ── Zusammenfassungs-Tabelle ─────────────────────────────────────────────── */

.kmd-cancel-summary-block {
	background:    var(--kmd-bg-card);
	border:        1px solid var(--kmd-border);
	border-radius: var(--kmd-radius-lg);
	padding:       20px 24px;
	margin-bottom: 24px;
}

.kmd-cancel-summary-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       .9rem;
}

.kmd-cancel-summary-label {
	color:       var(--kmd-text-muted);
	padding:     7px 16px 7px 0;
	width:       38%;
	vertical-align: top;
}

.kmd-cancel-summary-value {
	color:   var(--kmd-text);
	padding: 7px 0;
	vertical-align: top;
}

.kmd-cancel-summary-table tr + tr td {
	border-top: 1px solid var(--kmd-border);
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.kmd-cancel-form-nav {
	display:         flex;
	gap:             12px;
	justify-content: flex-end;
	align-items:     center;
	margin-top:      28px;
	flex-wrap:       wrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.kmd-cancel-btn {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	gap:            6px;
	padding:        11px 28px;
	border:         none;
	border-radius:  var(--kmd-radius);
	font-size:      1rem;
	font-weight:    600;
	cursor:         pointer;
	transition:     background .15s, transform .1s, box-shadow .15s;
	text-decoration: none;
	white-space:    nowrap;
}

.kmd-cancel-btn:disabled {
	opacity: .6;
	cursor:  default;
}

.kmd-cancel-btn--primary {
	background: var(--kmd-gold);
	color:      #fff;
}

.kmd-cancel-btn--primary:hover:not(:disabled) {
	background:  var(--kmd-gold-light);
	transform:   translateY(-1px);
	box-shadow:  0 4px 12px rgba(154,116,32,.25);
}

.kmd-cancel-btn--secondary {
	background: transparent;
	border:     2px solid var(--kmd-border);
	color:      var(--kmd-text);
}

.kmd-cancel-btn--secondary:hover:not(:disabled) {
	border-color: var(--kmd-gold);
	color:        var(--kmd-gold);
}

.kmd-cancel-btn--submit {
	background: #1e5c24;
	color:      #fff;
}

.kmd-cancel-btn--submit:hover:not(:disabled) {
	background: var(--kmd-success);
	transform:  translateY(-1px);
}

/* ── Erfolgsscreen ────────────────────────────────────────────────────────── */

.kmd-cancel-success-box {
	background:    var(--kmd-success-bg);
	border:        1px solid rgba(30,126,52,.3);
	border-radius: var(--kmd-radius-lg);
	padding:       36px 32px;
	text-align:    center;
}

.kmd-cancel-success-icon {
	font-size:     3rem;
	color:         var(--kmd-success);
	margin-bottom: 12px;
}

.kmd-cancel-success-title {
	color:         var(--kmd-success);
	font-size:     1.4rem;
	font-weight:   700;
	margin:        0 0 16px;
}

.kmd-cancel-success-box p {
	color:         var(--kmd-text);
	font-size:     .95rem;
	line-height:   1.6;
	margin:        0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( max-width: 560px ) {
	.kmd-cancel-step-title { font-size: 1.2rem; }
	.kmd-cancel-btn        { padding: 10px 18px; font-size: .95rem; }
	.kmd-cancel-card       { padding: 16px; }
	.kmd-cancel-success-box { padding: 24px 16px; }
	.kmd-cancel-form-nav   { justify-content: stretch; }
	.kmd-cancel-form-nav .kmd-cancel-btn { flex: 1 1 0; }
	.kmd-cancel-summary-label { width: 44%; }
}