/**
 * SDH Handwerkerclub – „Meine Mitgliedschaft" (Mitglieder-Dashboard).
 *
 * Layout nach Lovable: zwei Daten-Karten + digitaler Mitgliedsausweis.
 * Eigene Tokens (--mc-*), per Elementor überschreibbar. Scoped auf
 * `.sdh-club-membership`, damit andere Club-Ansichten unberührt bleiben.
 *
 * @package SDH_Core
 */

.sdh-club-membership {
	--mc-accent:    #be1623;
	--mc-text:      #2a2a29;
	--mc-muted:     #868583;
	--mc-card-bg:   #ffffff;
	--mc-border:    #e2e1dd;
	--mc-radius:    0px;
	--mc-pass-from: #be1623;
	--mc-pass-to:   #7d0f17;
	--mc-font:      'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	font-family: var(--mc-font);
	color: var(--mc-text);
}
.sdh-club-membership *,
.sdh-club-membership *::before,
.sdh-club-membership *::after { box-sizing: border-box; }

.sdh-club-membership.sdh-club-widget { border-radius: var(--mc-radius); border-color: var(--mc-border); }
.sdh-club-membership .sdh-club-header { border-bottom-color: var(--mc-border); }
.sdh-club-membership .sdh-club-header h3 { color: var(--mc-text); font-weight: 700; }

/* Eigener Content-Default (überschreibt sdh-club.css 20/24) – per Elementor
   „Innenabstand Inhalt" frei steuerbar; 16px Abstand nach oben. */
.sdh-club-membership .sdh-club-content { padding: 16px 24px 24px; }

/* ==========================================================================
   Section-Heads
   ========================================================================== */
.sdh-mc-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 22px 0 12px;
}
.sdh-mc-section-head:first-child { margin-top: 0; }
.sdh-mc-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	color: var(--mc-text);
}
.sdh-mc-dot {
	width: 8px;
	height: 8px;
	background: var(--mc-accent);
	border-radius: var(--mc-radius);
	flex-shrink: 0;
}

/* ==========================================================================
   Daten-Karten
   ========================================================================== */
.sdh-mc-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
}

.sdh-mc-card {
	background: var(--mc-card-bg);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	overflow: hidden;
}
.sdh-mc-card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border-bottom: 1px solid var(--mc-border);
	font-size: 15px;
	font-weight: 700;
	color: var(--mc-text);
}
.sdh-mc-card-head svg { width: 18px; height: 18px; color: var(--mc-accent); flex-shrink: 0; }
.sdh-mc-card-body { padding: 4px 16px 14px; }

.sdh-mc-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--mc-border);
	font-size: 13px;
}
.sdh-mc-row:last-of-type { border-bottom: none; }
.sdh-mc-label { color: var(--mc-muted); flex-shrink: 0; }
.sdh-mc-val {
	color: var(--mc-text);
	font-weight: 500;
	text-align: right;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.sdh-mc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.sdh-mc-hint {
	margin-top: 12px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--mc-muted);
}

/* Inline-Links (Zahlart ändern / Rechnungen / Meine Daten) */
.sdh-mc-link,
.sdh-mc-inline-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 12px;
	color: var(--mc-accent);
	text-decoration: underline;
	cursor: pointer;
}
.sdh-mc-link:hover,
.sdh-mc-inline-link:hover { opacity: 0.8; }

/* ==========================================================================
   Hinweis-Boxen
   ========================================================================== */
.sdh-mc-notice {
	padding: 12px 16px;
	border-radius: var(--mc-radius);
	border-left: 3px solid var(--mc-muted);
	background: #f4f3f0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mc-text);
	margin-bottom: 16px;
}
.sdh-mc-notice .sdh-mc-link { display: inline-block; margin-top: 4px; }
.sdh-mc-notice-warn { border-left-color: #b86b00; background: #fff4e0; }
.sdh-mc-notice-info { border-left-color: #1a56a0; background: #ebf2fc; }
.sdh-mc-notice-ok   { border-left-color: #2d8653; background: #eaf5ee; }

/* ==========================================================================
   Digitaler Mitgliedsausweis
   ========================================================================== */
.sdh-mc-pass-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
}

.sdh-member-pass {
	background: linear-gradient(160deg, var(--mc-pass-from), var(--mc-pass-to));
	color: #fff;
	padding: 22px;
	border-radius: var(--mc-radius);
	display: flex;
	flex-direction: column;
	min-height: 210px;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.sdh-member-pass-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.sdh-member-pass-logo { max-height: 28px; width: auto; object-fit: contain; }
.sdh-member-pass-logo-text { font-weight: 700; font-size: 15px; }
.sdh-member-pass-badge {
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--mc-radius);
	padding: 2px 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
}
.sdh-member-pass-name { font-size: 20px; font-weight: 700; margin-top: auto; padding-top: 22px; }
.sdh-member-pass-trade { font-size: 13px; opacity: 0.85; margin-top: 2px; }
.sdh-member-pass-bottom { display: flex; gap: 32px; margin-top: 18px; }
.sdh-member-pass-plabel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; }
.sdh-member-pass-pval { font-size: 13px; font-weight: 600; margin-top: 2px; }

/* Wallet-/PDF-Aktionen */
.sdh-mc-pass-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.sdh-mc-pass-headline { font-size: 14px; font-weight: 700; color: var(--mc-text); }
.sdh-mc-pass-sub { font-size: 12px; color: var(--mc-muted); line-height: 1.5; margin-bottom: 6px; }

.sdh-wallet-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 16px;
	border: 1px solid #1d1d1f;
	border-radius: var(--mc-radius);
	background: #1d1d1f;
	color: #fff;
	cursor: pointer;
	font-family: var(--mc-font);
	text-align: left;
	transition: opacity 0.15s ease;
}
.sdh-wallet-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.sdh-wallet-btn-text { display: flex; flex-direction: column; line-height: 1.15; }
.sdh-wallet-btn-text small { font-size: 10px; opacity: 0.8; }
.sdh-wallet-btn-text strong { font-size: 13px; font-weight: 700; }
.sdh-wallet-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.sdh-wallet-btn:not([disabled]):hover { opacity: 0.9; }
.sdh-wallet-btn-pdf { background: var(--mc-accent); border-color: var(--mc-accent); }

/* Kündigen-Link */
.sdh-mc-cancel { margin-top: 20px; }
.sdh-mc-cancel-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 12px;
	color: var(--mc-muted);
	text-decoration: underline;
	cursor: pointer;
}
.sdh-mc-cancel-link:hover { color: #b3242f; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
	.sdh-mc-cards,
	.sdh-mc-pass-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Druck → „PDF-Ausweis" (nur die Ausweis-Karte drucken)
   ========================================================================== */
@media print {
	body.sdh-printing-card * { visibility: hidden !important; }
	body.sdh-printing-card .sdh-member-pass,
	body.sdh-printing-card .sdh-member-pass * { visibility: visible !important; }
	body.sdh-printing-card .sdh-member-pass {
		position: fixed;
		left: 50%;
		top: 40px;
		transform: translateX(-50%);
		width: 360px;
		min-height: 220px;
	}
}