/**
 * SDH Handwerkerclub – „Meine Gutscheine".
 *
 * Guthaben-Banner + Partner-Gutschein-Grid + Einlöse-Modal.
 * Eigene Tokens (--gs-*), per Elementor überschreibbar. Scoped auf `.sdh-gutscheine`.
 *
 * @package SDH_Core
 */

.sdh-gutscheine {
	--gs-accent:  #be1623;
	--gs-text:    #2a2a29;
	--gs-muted:   #868583;
	--gs-card-bg: #ffffff;
	--gs-border:  #e2e1dd;
	--gs-radius:  0px;
	--gs-green:   #2d8653;
	--gs-font:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	font-family: var(--gs-font);
	color: var(--gs-text);
	border-radius: var(--gs-radius);
}
.sdh-gutscheine *,
.sdh-gutscheine *::before,
.sdh-gutscheine *::after { box-sizing: border-box; }

.sdh-gutscheine .sdh-club-content { padding: 20px 24px; }

.sdh-gs-demo-hint {
	font-size: 11px;
	color: var(--gs-muted);
	background: #f4f3f0;
	border: 1px dashed var(--gs-border);
	padding: 6px 10px;
	margin-bottom: 14px;
}

/* ── Guthaben-Banner ── */
.sdh-gs-credits {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid var(--gs-accent);
	background: #f9eaeb;
	border-radius: var(--gs-radius);
	margin-bottom: 14px;
}
.sdh-gs-credits-icon { color: var(--gs-accent); flex-shrink: 0; display: flex; }
.sdh-gs-credits-icon svg { width: 24px; height: 24px; }
.sdh-gs-credits-text { font-size: 15px; font-weight: 600; color: var(--gs-text); }

.sdh-gs-intro { font-size: 14px; color: var(--gs-muted); line-height: 1.5; margin: 0 0 18px; }
.sdh-gs-empty { font-size: 14px; color: var(--gs-muted); padding: 8px 0; }

/* ── Grid ── */
.sdh-gs-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.sdh-gs-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	background: var(--gs-card-bg);
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius);
}
.sdh-gs-card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	min-height: 60px;
}
.sdh-gs-logo { max-height: 60px; height: auto; width: auto; max-width: 150px; object-fit: contain; }
.sdh-gs-logo-text { font-size: 15px; font-weight: 700; letter-spacing: 0.4px; color: var(--gs-text); }
.sdh-gs-gift { color: var(--gs-accent); flex-shrink: 0; display: flex; }
.sdh-gs-gift svg { width: 22px; height: 22px; }

.sdh-gs-branche {
	display: inline-block;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 600;
	color: var(--gs-muted);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.sdh-gs-title { font-size: 15px; font-weight: 700; color: var(--gs-text); }
.sdh-gs-desc { font-size: 13px; line-height: 1.5; color: var(--gs-muted); flex: 1; }

.sdh-gs-vorteil {
	font-size: 12px;
	line-height: 1.5;
	color: var(--gs-text);
	padding: 10px 12px;
	background: #f9eaeb;
	border: 1px solid #f0cfd2;
	border-radius: var(--gs-radius);
}
.sdh-gs-vorteil strong { color: var(--gs-accent); }

.sdh-gs-choose {
	margin-top: 2px;
	padding: 10px 14px;
	border: 1px solid var(--gs-accent);
	border-radius: var(--gs-radius);
	background: var(--gs-accent);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.sdh-gs-choose:hover:not(:disabled) { opacity: 0.9; }
.sdh-gs-choose:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Modal ── */
.sdh-gs-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--gs-font, 'Roboto', sans-serif);
}
.sdh-gs-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.sdh-gs-modal-box {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: var(--gs-radius, 0);
	padding: 26px;
	max-width: 440px;
	width: 92%;
	text-align: center;
}
.sdh-gs-modal-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f9eaeb;
	color: #be1623;
	border-radius: var(--gs-radius, 0);
}
.sdh-gs-modal-icon svg { width: 28px; height: 28px; }
.sdh-gs-modal-icon-ok { background: #eaf5ee; color: #2d8653; }
.sdh-gs-modal-box h4 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.sdh-gs-modal-box p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: #575756; }
.sdh-gs-modal-warn { font-size: 12px !important; color: #b86b00 !important; }
.sdh-gs-modal-error {
	margin: 0 0 12px;
	padding: 8px 12px;
	background: #f8d7da;
	color: #721c24;
	font-size: 13px;
	border-radius: var(--gs-radius, 0);
}
.sdh-gs-modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.sdh-gs-btn {
	padding: 10px 18px;
	border-radius: var(--gs-radius, 0);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
}
.sdh-gs-btn-primary { background: #be1623; border-color: #be1623; color: #fff; }
.sdh-gs-btn-primary:hover { opacity: 0.9; }
.sdh-gs-btn-primary.loading { color: transparent; position: relative; pointer-events: none; }
.sdh-gs-btn-primary.loading::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sdh-gs-spin 0.6s linear infinite;
}
@keyframes sdh-gs-spin { to { transform: rotate(360deg); } }
.sdh-gs-btn-secondary { background: #fff; border-color: var(--gs-border, #e2e1dd); color: #2a2a29; }
.sdh-gs-btn-secondary:hover { background: #f4f3f0; }

/* ── Responsive ── */
@media (max-width: 1024px) { .sdh-gs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .sdh-gs-grid { grid-template-columns: 1fr; } }