/**
 * SDH Handwerkerclub – Mitglieder-Flow (Onboarding → Checkout → Abschluss).
 *
 * Eigener, in sich geschlossener Stil im Dashboard-Look (eckige Kanten,
 * Lovable-/Dashboard-Palette). Alles unter `.sdh-club-flow` gescoped, damit
 * Mitglieder-Dashboard und Vorteilswelt (ohne diese Klasse) unverändert bleiben.
 *
 * Farben/Eckenradius sind über die lokalen CSS-Variablen (--cf-*) gesetzt und
 * lassen sich pro Widget über Elementor überschreiben.
 *
 * @package SDH_Core
 */

.sdh-club-flow {
	/* Palette analog Dashboard (--sdh-db-*) – hier lokal, damit der Flow auch
	   außerhalb der Dashboard-CPTs (z. B. auf normalen Seiten) korrekt aussieht. */
	--cf-red:         #be1623;
	--cf-red-dark:    #9a1019;
	--cf-red-light:   #f9eaeb;
	--cf-text:        #2a2a29;
	--cf-muted:       #868583;
	--cf-border:      #e2e1dd;
	--cf-white:       #ffffff;
	--cf-gray:        #575756;
	--cf-gray-light:  #f4f3f0;
	--cf-green:       #2d8653;
	--cf-green-light: #eaf5ee;
	--cf-radius:      0px;
	--cf-font:        'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	font-family: var(--cf-font);
	color: var(--cf-text);
}

.sdh-club-flow *,
.sdh-club-flow *::before,
.sdh-club-flow *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Container / Header / Content (überschreibt sdh-club.css → eckig + Palette)
   ========================================================================== */
.sdh-club-flow.sdh-club-widget {
	background: var(--cf-white);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
}

.sdh-club-flow .sdh-club-header {
	padding: 20px 24px;
	border-bottom: 1px solid var(--cf-border);
}

.sdh-club-flow .sdh-club-header h3 {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--cf-text);
}

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

.sdh-club-flow-intro {
	font-size: 14px;
	line-height: 1.6;
	color: var(--cf-gray);
	margin: 0 0 22px;
}

/* ==========================================================================
   Stepper (horizontal, links → rechts, volle Breite)
   ========================================================================== */
.sdh-club-steps {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	width: 100%;
}

.sdh-club-step {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
}

/* Verbindungslinie füllt den Raum bis zum nächsten Schritt */
.sdh-club-step:not(:last-child) {
	flex: 1;
}
.sdh-club-step:not(:last-child)::after {
	content: '';
	flex: 1;
	height: 2px;
	margin: 0 12px;
	background: var(--cf-border);
}
.sdh-club-step.is-done:not(:last-child)::after {
	background: var(--cf-red);
}

.sdh-club-step-marker {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	background: var(--cf-white);
	border: 2px solid var(--cf-border);
	border-radius: var(--cf-radius);
	color: var(--cf-muted);
}
.sdh-club-step-marker svg {
	width: 16px;
	height: 16px;
}
.sdh-club-step.is-current .sdh-club-step-marker {
	border-color: var(--cf-red);
	color: var(--cf-red);
}
.sdh-club-step.is-done .sdh-club-step-marker {
	background: var(--cf-red);
	border-color: var(--cf-red);
	color: #fff;
}

.sdh-club-step-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--cf-muted);
	white-space: nowrap;
}
.sdh-club-step.is-current .sdh-club-step-label,
.sdh-club-step.is-done .sdh-club-step-label {
	color: var(--cf-text);
}

/* ==========================================================================
   Voraussetzungs-Karten (Requirements)
   ========================================================================== */
.sdh-club-req {
	display: flex;
	gap: 14px;
	padding: 18px;
	border: 1.5px solid var(--cf-border);
	border-radius: var(--cf-radius);
	background: var(--cf-white);
	margin-bottom: 14px;
}
.sdh-club-req.is-done {
	border-color: var(--cf-green);
	background: var(--cf-green-light);
}

.sdh-club-req-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sdh-club-req-icon svg {
	width: 22px;
	height: 22px;
}
.sdh-club-req.is-open .sdh-club-req-icon  { color: var(--cf-red); }
.sdh-club-req.is-done .sdh-club-req-icon  { color: var(--cf-green); }

.sdh-club-req-body { flex: 1; min-width: 0; }

.sdh-club-req-title {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 15px;
	font-weight: 700;
	color: var(--cf-text);
	margin: 0 0 6px;
}

.sdh-club-req-status {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 2px 8px;
	border-radius: var(--cf-radius);
}
.sdh-club-req-status.is-open { background: var(--cf-red-light); color: var(--cf-red); }
.sdh-club-req-status.is-done { background: var(--cf-green); color: #fff; }

.sdh-club-req-desc {
	font-size: 13px;
	line-height: 1.55;
	color: var(--cf-gray);
	margin: 0 0 12px;
}

.sdh-club-req-missing {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.sdh-club-req-missing li {
	font-size: 12px;
	background: var(--cf-gray-light);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	padding: 3px 10px;
	color: var(--cf-text);
}

/* ==========================================================================
   Inline-Upload
   ========================================================================== */
.sdh-club-upload { margin-top: 4px; }

.sdh-club-upload-row { margin-bottom: 12px; }

.sdh-club-upload-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--cf-text);
	margin-bottom: 6px;
}

.sdh-club-upload select {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--cf-border);
	border-radius: var(--cf-radius);
	background: var(--cf-white);
	font-family: inherit;
	font-size: 14px;
	color: var(--cf-text);
}

.sdh-club-dropzone {
	position: relative;
	border: 1.5px dashed var(--cf-border);
	border-radius: var(--cf-radius);
	background: var(--cf-gray-light);
	padding: 24px 16px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.sdh-club-dropzone:hover,
.sdh-club-dropzone.is-drag {
	border-color: var(--cf-red);
	background: var(--cf-red-light);
}
.sdh-club-dropzone svg {
	width: 28px;
	height: 28px;
	color: var(--cf-muted);
	margin-bottom: 8px;
}
.sdh-club-dropzone-text {
	font-size: 13px;
	color: var(--cf-gray);
	margin: 0;
	line-height: 1.5;
}
.sdh-club-dropzone-hint {
	display: block;
	font-size: 11px;
	color: var(--cf-muted);
	margin-top: 4px;
}
.sdh-club-dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.sdh-club-upload-file {
	display: none;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 12px;
	background: var(--cf-white);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	font-size: 13px;
	color: var(--cf-text);
}
.sdh-club-upload-file.is-visible { display: flex; }
.sdh-club-upload-file-name { word-break: break-all; }

.sdh-club-upload .sdh-club-btn-lg { margin-top: 14px; }

/* ==========================================================================
   Buttons / Toggles / Preis – auf Dashboard-Look ziehen (eckig + Palette)
   ========================================================================== */
.sdh-club-flow .sdh-club-btn {
	border-radius: var(--cf-radius);
	font-family: inherit;
	font-weight: 600;
}
.sdh-club-flow .sdh-club-btn-primary {
	background: var(--cf-red);
	border-color: var(--cf-red);
}
.sdh-club-flow .sdh-club-btn-primary:hover:not(:disabled) {
	background: var(--cf-red-dark);
	border-color: var(--cf-red-dark);
}
.sdh-club-flow .sdh-club-btn-secondary {
	background: var(--cf-white);
	color: var(--cf-text);
	border-color: var(--cf-border);
}
.sdh-club-flow .sdh-club-btn-secondary:hover:not(:disabled) {
	background: var(--cf-gray-light);
}

.sdh-club-flow .sdh-club-benefits-list h4,
.sdh-club-flow .sdh-club-plan-section h4,
.sdh-club-flow .sdh-club-interval-section h4 {
	font-size: 14px;
	font-weight: 700;
	color: var(--cf-text);
}
.sdh-club-flow .sdh-club-check { color: var(--cf-green); }

.sdh-club-flow .sdh-club-plan-btn,
.sdh-club-flow .sdh-club-interval-btn {
	border-width: 1.5px;
	border-color: var(--cf-border);
	border-radius: var(--cf-radius);
	font-family: inherit;
	color: var(--cf-text);
}
.sdh-club-flow .sdh-club-plan-btn.active,
.sdh-club-flow .sdh-club-interval-btn.active {
	border-color: var(--cf-red);
	background: var(--cf-red-light);
	color: var(--cf-red);
}
.sdh-club-flow .sdh-club-badge-recommended { background: var(--cf-green); }

.sdh-club-flow .sdh-club-price-display { border-top-color: var(--cf-border); }
.sdh-club-flow .sdh-club-price-amount { color: var(--cf-text); }
.sdh-club-flow .sdh-club-innung-hint a { color: var(--cf-red); }
.sdh-club-flow .sdh-club-checkbox-label a { color: var(--cf-red); }

.sdh-club-flow .sdh-club-error {
	border-radius: var(--cf-radius);
}

/* ==========================================================================
   Checkout: zweispaltiges Layout (Leistungen | Paket)
   ========================================================================== */
.sdh-club-checkout-cols {
	display: block;
}
.sdh-club-checkout-cols.is-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}

.sdh-club-included-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--cf-text);
	margin: 0 0 12px;
}

/* Leistungs-Kacheln (Spaltenzahl via Elementor-Control gesetzt) */
.sdh-club-included-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.sdh-club-included-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	background: var(--cf-white);
}

.sdh-club-included-check {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cf-green-light);
	color: var(--cf-green);
	border-radius: var(--cf-radius);
}
.sdh-club-included-check svg {
	width: 13px;
	height: 13px;
}
.sdh-club-included-check i {
	font-size: 13px;
	line-height: 1;
	color: inherit;
}

.sdh-club-included-text {
	font-size: 13px;
	line-height: 1.45;
	color: var(--cf-text);
}

/* Rechte Spalte: Abschnitte mit etwas Luft */
.sdh-club-checkout-right .sdh-club-interval-section,
.sdh-club-checkout-right .sdh-club-plan-section {
	margin-bottom: 18px;
}
.sdh-club-checkout-right .sdh-club-plan-section h4,
.sdh-club-checkout-right .sdh-club-interval-section h4 {
	margin: 0 0 10px;
}

/* Inline-Innungsnachweis-Upload im Checkout */
.sdh-club-innung-upload {
	margin-top: 12px;
	padding: 14px;
	border: 1px dashed var(--cf-border);
	border-radius: var(--cf-radius);
	background: var(--cf-gray-light);
}
.sdh-club-innung-hint {
	font-size: 12px;
	line-height: 1.5;
	color: var(--cf-gray);
	margin: 0 0 10px;
}
.sdh-club-innung-upload .sdh-club-dropzone {
	background: var(--cf-white);
	padding: 18px 14px;
}

/* In der zweispaltigen Ansicht den Preis links ausrichten (nicht zentriert) */
.sdh-club-checkout-cols.is-two-col .sdh-club-price-display {
	text-align: left;
}

/* Letzte Preis-Zeilen ohne unteren Abstand */
.sdh-club-flow .sdh-club-price-tax,
.sdh-club-flow .sdh-club-setup-fee {
	margin-bottom: 0;
}

/* AGB-Checkbox vertikal mittig zum Text */
.sdh-club-flow .sdh-club-checkbox-label {
	align-items: center;
}
.sdh-club-flow .sdh-club-checkbox-label input[type="checkbox"] {
	margin-top: 0;
}

@media (max-width: 900px) {
	.sdh-club-checkout-cols.is-two-col {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ==========================================================================
   Inline-Profilfelder (Schritt 1) – im Flow-Look
   ========================================================================== */
.sdh-club-profile-form {
	margin-top: 6px;
}
.sdh-club-profile-form .sdh-profile-edit-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
	margin-bottom: 14px;
}
.sdh-club-profile-form .sdh-profile-edit-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.sdh-club-profile-form .sdh-profile-edit-field label {
	font-size: 12px;
	font-weight: 600;
	color: var(--cf-text);
}
.sdh-club-profile-form input,
.sdh-club-profile-form select,
.sdh-club-profile-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--cf-border);
	border-radius: var(--cf-radius);
	background: var(--cf-white);
	font-family: inherit;
	font-size: 14px;
	color: var(--cf-text);
}
.sdh-club-profile-form input:focus,
.sdh-club-profile-form select:focus,
.sdh-club-profile-form textarea:focus {
	outline: none;
	border-color: var(--cf-red);
}
.sdh-club-profile-form .sdh-required {
	color: var(--cf-red);
}
.sdh-club-profile-form .sdh-field-description {
	font-size: 11px;
	color: var(--cf-muted);
	margin: 2px 0 0;
}

@media (max-width: 600px) {
	.sdh-club-profile-form .sdh-profile-edit-fields {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Abschluss (Welcome)
   ========================================================================== */
.sdh-club-flow .sdh-club-success {
	text-align: center;
	padding: 6px 0 2px;
}
.sdh-club-success-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cf-green-light);
	border-radius: var(--cf-radius);
	color: var(--cf-green);
}
.sdh-club-success-icon svg {
	width: 30px;
	height: 30px;
}
.sdh-club-flow .sdh-club-welcome-text {
	font-size: 15px;
	color: var(--cf-text);
	margin-bottom: 22px;
}
.sdh-club-flow .sdh-club-cooling-notice {
	background: var(--cf-gray-light);
	border-radius: var(--cf-radius);
}
.sdh-club-flow .sdh-club-detail-row { border-bottom: 1px solid var(--cf-border); }
.sdh-club-flow .sdh-club-detail-row:last-child { border-bottom: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
	.sdh-club-flow .sdh-club-header,
	.sdh-club-flow .sdh-club-content { padding: 16px; }

	.sdh-club-step-label { font-size: 11px; }

	.sdh-club-req { padding: 14px; }
}