/* ==========================================================================
   KMD Wallet – Mitgliedsausweis anfordern
   Light-Mode · Gold-Akzent – konsistent mit kmd-cancellation.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-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);
}

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

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

/* ── Titel & Intro ─────────────────────────────────────────────────────────── */

.kmd-wallet-title {
	color:         var(--kmd-gold);
	font-size:     1.5rem;
	font-weight:   700;
	margin:        0 0 8px;
}

.kmd-wallet-intro {
	color:   var(--kmd-text-muted);
	margin:  0 0 28px;
}

/* ── Zeilen & Felder ───────────────────────────────────────────────────────── */

.kmd-wallet-row {
	margin-bottom: 20px;
}

.kmd-wallet-row--2col {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   16px;
}

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

.kmd-wallet-label {
	display:       block;
	font-size:     .8125rem;
	font-weight:   600;
	color:         var(--kmd-text-label);
	margin-bottom: 6px;
	letter-spacing:.01em;
	text-transform: uppercase;
}

.kmd-wallet-input {
	width:         100%;
	padding:       10px 14px;
	border:        1.5px solid var(--kmd-border);
	border-radius: var(--kmd-radius);
	background:    var(--kmd-bg-field);
	color:         var(--kmd-text);
	font-size:     1rem;
	outline:       none;
	transition:    border-color .15s;
}

.kmd-wallet-input:focus {
	border-color: var(--kmd-border-focus);
	background:   var(--kmd-bg);
}

.kmd-wallet-input.kmd-is-invalid {
	border-color: var(--kmd-error);
	background:   var(--kmd-error-bg);
}

/* ── OS-Auswahl ────────────────────────────────────────────────────────────── */

.kmd-wallet-os-fieldset {
	border:  none;
	margin:  0;
	padding: 0;
}

.kmd-wallet-os-fieldset legend {
	float: left;
	width: 100%;
}

.kmd-wallet-os-options {
	display: flex;
	gap:     16px;
	margin-top: 8px;
}

.kmd-wallet-os-option {
	display:        flex;
	align-items:    center;
	gap:            12px;
	padding:        14px 20px;
	border:         2px solid var(--kmd-border);
	border-radius:  var(--kmd-radius-lg);
	background:     var(--kmd-bg-card);
	cursor:         pointer;
	flex:           1;
	transition:     border-color .15s, background .15s;
}

.kmd-wallet-os-option:has(input:checked) {
	border-color: var(--kmd-gold);
	background:   var(--kmd-gold-bg);
}

.kmd-wallet-os-option input[type="radio"] {
	position: absolute;
	opacity:  0;
	width:    0;
	height:   0;
}

.kmd-wallet-os-icon {
	flex-shrink: 0;
	width:       32px;
	height:      32px;
	display:     flex;
	align-items: center;
}

.kmd-wallet-os-icon svg {
	width:  28px;
	height: 28px;
	fill:   var(--kmd-text);
}

.kmd-wallet-os-label {
	font-size:   .9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.kmd-wallet-os-label small {
	font-weight: 400;
	color:       var(--kmd-text-muted);
}

/* Disabled-Option (Android – in Planung) */
.kmd-wallet-os-option--disabled {
	opacity: .5;
	cursor:  not-allowed;
}

.kmd-wallet-os-badge {
	display:          inline-block;
	background:       var(--kmd-gold-bg);
	color:            var(--kmd-gold);
	border:           1px solid var(--kmd-gold-border);
	border-radius:    4px;
	font-size:        .7rem;
	font-weight:      600;
	padding:          1px 6px;
	letter-spacing:   .02em;
	text-transform:   uppercase;
}

/* ── Button ────────────────────────────────────────────────────────────────── */

.kmd-wallet-btn {
	display:          inline-flex;
	align-items:      center;
	gap:              10px;
	padding:          13px 32px;
	background:       var(--kmd-gold);
	color:            #fff;
	border:           none;
	border-radius:    var(--kmd-radius);
	font-size:        1rem;
	font-weight:      600;
	cursor:           pointer;
	transition:       background .15s;
	width:            100%;
	justify-content:  center;
}

.kmd-wallet-btn:hover {
	background: var(--kmd-gold-light);
}

.kmd-wallet-btn:disabled {
	opacity: .65;
	cursor:  not-allowed;
}

.kmd-wallet-btn-spinner {
	width:        18px;
	height:       18px;
	border:       2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation:    kmdWalletSpin .7s linear infinite;
}

@keyframes kmdWalletSpin {
	to { transform: rotate(360deg); }
}

/* ── Fehlermeldung ─────────────────────────────────────────────────────────── */

.kmd-wallet-error {
	background:    var(--kmd-error-bg);
	border:        1.5px solid var(--kmd-error);
	border-radius: var(--kmd-radius);
	color:         var(--kmd-error);
	padding:       12px 16px;
	margin-bottom: 20px;
	font-size:     .9375rem;
}

/* ── Erfolg ────────────────────────────────────────────────────────────────── */

.kmd-wallet-success-box {
	background:    var(--kmd-success-bg);
	border:        1.5px solid #b2dfbc;
	border-radius: var(--kmd-radius-lg);
	padding:       32px 28px;
	text-align:    center;
}

.kmd-wallet-success-icon {
	width:  48px;
	height: 48px;
	fill:   var(--kmd-success);
	margin: 0 auto 16px;
	display: block;
}

.kmd-wallet-success-title {
	color:       var(--kmd-success);
	font-size:   1.25rem;
	font-weight: 700;
	margin:      0 0 12px;
}

.kmd-wallet-success-text {
	color:  var(--kmd-text-muted);
	margin: 0 0 20px;
}

.kmd-wallet-google-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             10px;
	padding:         13px 28px;
	background:      #1a73e8;
	color:           #fff;
	border-radius:   var(--kmd-radius);
	font-size:       1rem;
	font-weight:     600;
	text-decoration: none;
	transition:      background .15s;
}

.kmd-wallet-google-btn:hover {
	background: #1557b0;
	color:      #fff;
}