/*
 * MediDoceo styling for the Tutor checkout page (Kasse).
 * Wider layout, warm cards, navy/red brand colors — matches the course
 * detail pages and the login modal.
 */

.tutor-checkout-page {
	--mdo-navy: var(--theme-palette-color-2, #1c3063);
	--mdo-red: var(--theme-palette-color-1, #772020);
	--mdo-red-dark: #5d1a1a;
	/* Same warm card tone as the course detail meta sidebar */
	--mdo-warm: #f3efeb;
	--mdo-border: #ddd6cf;
	--mdo-text: var(--theme-palette-color-4, #192a3d);
	--mdo-muted: #6d7686;
	/* Course detail CTA green ("Jetzt anmelden" button) */
	--mdo-cta-bg: #a3d9a5;
	--mdo-cta-bg-hover: #8fcf92;
}

/* --- Layout: break out of the narrow content width --- */

.entry-content > .tutor-checkout-page,
.is-layout-constrained > .tutor-checkout-page {
	max-width: min(1160px, 94vw) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.tutor-checkout-page .tutor-checkout-container {
	max-width: none;
	padding: 16px 0 72px;
}

/* --- Section headings --- */

/* Section headings in the detail page's dark red, not navy */
.tutor-checkout-page h5.tutor-fs-5 {
	font-family: var(--theme-heading-font-family, inherit);
	font-size: 22px;
	font-weight: 700;
	color: var(--mdo-red) !important;
	border: none;
}

/* --- Order details (left card) --- */

/* Same card recipe as .md-course-meta-card on the course detail page:
   warm bg, 36px radius, all text in the dark red accent.
   (Full class chain: Tutor styles this at 3-class specificity.) */
.tutor-checkout-page .tutor-checkout-container .tutor-checkout-details .tutor-checkout-details-inner {
	background: var(--mdo-warm);
	border-radius: 36px;
	padding: 28px 28px 32px;
	color: var(--mdo-red);
}

.tutor-checkout-page .tutor-checkout-details-inner h5.tutor-fs-5 {
	padding-bottom: 16px;
	border-bottom: 1px solid color-mix(in srgb, var(--mdo-red) 18%, transparent);
}

.tutor-checkout-page .tutor-checkout-course-title,
.tutor-checkout-page .tutor-checkout-details-inner .tutor-fw-bold,
.tutor-checkout-page .tutor-checkout-details-inner .tutor-fw-medium {
	color: var(--mdo-red);
}

.tutor-checkout-page .tutor-checkout-summary-item {
	color: var(--mdo-red);
}

/* Coupon link */
.tutor-checkout-page .tutor-btn-link {
	color: var(--mdo-red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- "Bereits registriert?" banner --- */

.tutor-checkout-page .tutor-checkout-billing-inner > .tutor-border {
	background: #fff;
	border: 1px solid var(--mdo-border) !important;
	border-radius: 16px !important;
	padding: 14px 18px !important;
}

.tutor-checkout-page .tutor-checkout-billing-inner > .tutor-border p {
	color: var(--mdo-text);
	font-weight: 600;
}

.tutor-checkout-page .tutor-btn-secondary.tutor-open-login-modal {
	background: #fff;
	border: 1px solid var(--mdo-navy);
	color: var(--mdo-navy);
	border-radius: 999px;
	padding: 8px 18px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.tutor-checkout-page .tutor-btn-secondary.tutor-open-login-modal:hover {
	background: var(--mdo-navy);
	color: #fff;
}

/* --- Billing form --- */

/*
 * A11y: Tutor hides the field labels (display:none) and relies on
 * placeholders only — that fails WCAG (labels are removed from the
 * accessibility tree). We bring the labels back.
 */
.tutor-checkout-page .tutor-checkout-billing .tutor-billing-fields .tutor-form-label {
	display: inline-block;
}

/* Tutor collapses the field margins (margin:0!important) — restore spacing. */
.tutor-checkout-page .tutor-billing-fields .tutor-mb-16 {
	margin: 0 0 18px !important;
}

/*
 * Tutor joins the fields into one block via border-bottom/right:none!important
 * per column — neutralize so every field is a clean standalone input.
 * Extra .tutor-checkout-billing level: must out-rank Tutor's per-column
 * !important longhands (same trick fails at equal specificity).
 */
.tutor-checkout-page .tutor-checkout-billing .tutor-billing-fields [class*="tutor-col-"] .tutor-form-control {
	border-top: 1px solid var(--mdo-border) !important;
	border-right: 1px solid var(--mdo-border) !important;
	border-bottom: 1px solid var(--mdo-border) !important;
	border-left: 1px solid var(--mdo-border) !important;
	border-radius: 12px !important;
	height: auto;
}

.tutor-checkout-page .tutor-checkout-billing .tutor-billing-fields [class*="tutor-col-"] .tutor-form-control:focus {
	border-color: var(--mdo-navy) !important;
}

/* Kill stray column borders left over from Tutor's joined-grid look */
.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"],
.tutor-checkout-page .tutor-billing-fields .tutor-mb-16 {
	border: none !important;
}

/*
 * Field layout: sensible German order instead of Tutor's default.
 *   Vorname | Nachname
 *   E-Mail  | Telefon
 *   Adresse
 *   PLZ     | Stadt
 *   Land
 * The Staat/Bundesland field is hidden (irrelevant for DE, tax rate is
 * nationwide; the field submits its default value unchanged).
 */

.tutor-checkout-page .tutor-billing-fields > .tutor-row {
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
	margin: 0 !important;
}

.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"] {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	padding: 0 !important;
}

/* Nothing may clip the field borders/shadows */
.tutor-checkout-page .tutor-checkout-billing-inner,
.tutor-checkout-page .tutor-billing-fields {
	overflow: visible;
}

.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_first_name"]) { order: 1; }
.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_last_name"])  { order: 2; }
.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_email"])      { order: 3; }
.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_phone"])      { order: 4; }
.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_address"])    { order: 5; }
.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_zip_code"])   { order: 6; }
.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_city"])       { order: 7; }
.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_country"])    { order: 8; }

.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_state"]) {
	display: none;
}

@media (min-width: 577px) {
	.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_first_name"]),
	.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_last_name"]),
	.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_email"]),
	.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_phone"]),
	.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_zip_code"]),
	.tutor-checkout-page .tutor-billing-fields [class*="tutor-col-"]:has([name="billing_city"]) {
		flex: 0 0 calc(50% - 8px);
		max-width: calc(50% - 8px);
	}
}

/* Required fields: mark the label, explain below the heading (hint via JS) */
.tutor-checkout-page .tutor-billing-fields .tutor-mb-16:has(.tutor-form-control:required) .tutor-form-label::after {
	content: " *";
	color: var(--mdo-red);
}

.tutor-checkout-page .mdo-required-hint {
	color: var(--mdo-muted);
	font-size: 13px;
	margin: -4px 0 12px;
}

.tutor-checkout-page .mdo-tax-note {
	color: var(--mdo-muted);
	font-size: 13px;
	margin: 4px 0 0;
	text-align: right;
}

/* Consent-Links (AGB, Datenschutz, Widerruf) */
.tutor-checkout-page .tutor-consent-link,
.tutor-login-modal .tutor-consent-link {
	color: var(--mdo-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Keyboard focus indicator (WCAG 2.4.7) */
.tutor-checkout-page a:focus-visible,
.tutor-checkout-page button:focus-visible,
.tutor-checkout-page input:focus-visible,
.tutor-checkout-page select:focus-visible {
	outline: 2px solid var(--mdo-navy);
	outline-offset: 2px;
}

.tutor-checkout-page .tutor-form-label {
	color: var(--mdo-text);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	display: inline-block;
}

.tutor-checkout-page .tutor-form-control {
	background: #fff !important;
	border: 1px solid var(--mdo-border) !important;
	border-radius: 12px !important;
	padding: 12px 16px !important;
	min-height: 48px;
	font-size: 15px !important;
	color: var(--mdo-text) !important;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tutor-checkout-page .tutor-form-control:focus {
	border-color: var(--mdo-navy) !important;
	box-shadow: 0 0 0 3px rgba(28, 48, 99, 0.12);
	outline: none;
}

.tutor-checkout-page .tutor-form-control::placeholder {
	/* 4.7:1 contrast on white — readable but visually secondary to the label */
	color: #667085;
	opacity: 1;
}


/* --- Payment methods as cards --- */

.tutor-checkout-page .tutor-checkout-payment-options {
	border: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tutor-checkout-page .tutor-checkout-payment-item {
	background: #fff;
	border: 1px solid var(--mdo-border);
	border-radius: 14px;
	padding: 16px 20px;
	font-weight: 600;
	color: var(--mdo-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tutor-checkout-page .tutor-checkout-payment-item:hover {
	border-color: var(--mdo-navy);
}

.tutor-checkout-page .tutor-checkout-payment-item:has(input:checked) {
	border-color: var(--mdo-navy);
	box-shadow: 0 0 0 3px rgba(28, 48, 99, 0.12);
}

.tutor-checkout-page .tutor-checkout-payment-item input[type="radio"]:checked {
	accent-color: var(--mdo-red);
}

/* --- Agreement checkbox --- */

.tutor-checkout-page label.tutor-label,
.tutor-checkout-page .tutor-form-check label {
	color: var(--mdo-muted) !important;
	font-size: 13.5px;
	line-height: 1.55;
}

.tutor-checkout-page label.tutor-label a {
	color: var(--mdo-navy);
	text-decoration: underline;
}

/* --- Pay button --- */

/* Same CTA style as "Jetzt anmelden" on the course detail page:
   sage green with dark red text (contrast ~7:1). */
.tutor-checkout-page #tutor-checkout-pay-now-button {
	background: var(--mdo-cta-bg) !important;
	border: 1px solid var(--mdo-cta-bg) !important;
	color: var(--mdo-red) !important;
	border-radius: 16px !important;
	padding: 16px 24px !important;
	font-size: 17px;
	font-weight: 700;
	transition: all 0.2s ease;
}

.tutor-checkout-page #tutor-checkout-pay-now-button:hover,
.tutor-checkout-page #tutor-checkout-pay-now-button:focus {
	background: var(--mdo-cta-bg-hover) !important;
	border-color: var(--mdo-cta-bg-hover) !important;
	color: var(--mdo-red-dark) !important;
}

/* --- Mobile --- */

@media (max-width: 768px) {
	.tutor-checkout-page .tutor-checkout-container .tutor-checkout-details .tutor-checkout-details-inner {
		padding: 24px 20px 24px;
		border-radius: 24px;
	}

	.tutor-checkout-page .tutor-checkout-container {
		padding-bottom: 48px;
	}
}