/* ============================================================================
   Custom Checkout Design — Thurgau Travel
   ----------------------------------------------------------------------------
   Wird nur angewendet, wenn unter /admin/settings/design im Tab
   "Checkout Design" die Option "Custom Checkout Design" aktiviert ist.
   Alle Regeln sind unter `.checkout-custom` gescoped, damit das normale
   Rivca-Design (Admin + Standard-Checkout) unberuehrt bleibt.
   ========================================================================== */

@font-face {
    font-family: "Cadiz";
    font-display: swap;
    src: url("fonts/CadizWeb-VF-Upright.woff2") format("woff2");
}

@font-face {
    font-family: "El Messiri";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/ElMessiri-Bold.woff2") format("woff2");
}

.checkout-custom {
    /* Marken-Farbpalette Thurgau Travel */
    --cc-primary: #1d4c70;
    --cc-primary-dark: #153752;
    --cc-primary-darker: #133147;
    --cc-primary-light: #d2dff2;
    --cc-accent: #f9b233;
    --cc-accent-dark: #f29e07;
    --cc-success: #53cd6e;
    --cc-text: #1d4c70;
    --cc-body-font: "Cadiz", Helvetica, Arial, sans-serif;
    --cc-heading-font: "El Messiri", "Cadiz", sans-serif;

    font-family: var(--cc-body-font);
    color: var(--cc-text);

    /* Interne Dossier-Details behalten das App-Theme (Sidebar tuerkis).
       Karten nutzen --mud-palette-primary — hier auf Markenblau setzen. */
    --mud-palette-primary: var(--cc-primary);
    --mud-palette-primary-darken: var(--cc-primary-dark);
    --mud-palette-primary-lighten: var(--cc-primary-light);
    --color-primary-rgb: 29, 76, 112;
}

/* Grundtypografie ---------------------------------------------------------- */
.checkout-custom,
.checkout-custom .mud-typography {
    font-family: var(--cc-body-font);
}

.checkout-custom h1, .checkout-custom h2, .checkout-custom h3,
.checkout-custom h4, .checkout-custom h5, .checkout-custom h6,
.checkout-custom .mud-typography-h1, .checkout-custom .mud-typography-h2,
.checkout-custom .mud-typography-h3, .checkout-custom .mud-typography-h4,
.checkout-custom .mud-typography-h5, .checkout-custom .mud-typography-h6,
.checkout-custom .mud-typography-subtitle1, .checkout-custom .mud-typography-subtitle2 {
    font-family: var(--cc-heading-font);
    font-weight: 700;
    color: var(--cc-primary);
    line-height: 1.2;
}

/* Paket-Karussell: Titel/Listen bleiben auf dunklem Kartenhintergrund hell */
.checkout-custom .card-travel-checkout {
    background: var(--cc-primary);
    color: #fff;
}

.checkout-custom .card-travel-checkout h3,
.checkout-custom .card-travel-checkout .card-travel-checkout__title {
    color: #fff;
}

/* Buttons ------------------------------------------------------------------ */
.checkout-custom .mud-button-root {
    font-family: var(--cc-body-font);
    text-transform: none;
    letter-spacing: 0;
    border-radius: 6px;
    font-weight: 600;
}

/* Sekundaeraktion / Highlight = Akzent-Gold mit dunkler Schrift wie auf der Website */
.checkout-custom .mud-button-filled.mud-button-filled-tertiary {
    color: #212529;
}

/* Checkout-Header: RIVCA-Logo/Brand bleibt im Standard-Design (Inter) ---------- */
.checkout-custom .checkout-header,
.checkout-custom .checkout-header__brand,
.checkout-custom .checkout-header__brand-text {
    font-family: "Inter", Helvetica, Arial, sans-serif;
}

.checkout-custom .checkout-header__brand-text {
    color: var(--mud-palette-text-primary, var(--color-slate-900));
    letter-spacing: 0.04em;
}

/* Stepper-Bubbles & Booking-Hero --------------------------------------------*/
.checkout-custom .booking-hero {
    background: linear-gradient(135deg, var(--cc-primary) 0%, var(--cc-primary-darker) 100%);
    color: #fff;
}

.checkout-custom .booking-hero h1,
.checkout-custom .booking-hero .booking-hero__title {
    font-family: var(--cc-heading-font);
    color: #fff;
}

/* Payment-Choice-Karten: ausgewaehlt in Markenfarbe ------------------------ */
.checkout-custom .payment-choice__card--selected {
    border-color: var(--cc-primary);
    background: linear-gradient(135deg, rgba(29, 76, 112, 0.04) 0%, rgba(29, 76, 112, 0.08) 100%);
}

/* Trust-Bar / dezente Texte ------------------------------------------------ */
.checkout-custom .booking-trust-bar {
    color: var(--cc-primary);
}

/* Paket-Alternativauswahl & Kartenbuttons im Markendesign ------------------ */
.checkout-custom .card-travel-checkout__alt-option--selected {
    border-color: var(--cc-accent);
    background: rgba(249, 178, 51, 0.18);
    box-shadow: inset 0 0 0 1px rgba(249, 178, 51, 0.4);
}

.checkout-custom .card-travel-checkout__alt-option--selected .card-travel-checkout__alt-radio {
    border-color: var(--cc-accent);
    background: var(--cc-accent);
}

.checkout-custom .card-travel-checkout__alt-option--selected .card-travel-checkout__alt-radio::after {
    background: var(--cc-primary);
}

.checkout-custom .card-travel-checkout__person--selected {
    border-color: var(--cc-accent);
    background: rgba(249, 178, 51, 0.18);
    box-shadow: inset 0 0 0 1px rgba(249, 178, 51, 0.4);
}

.checkout-custom .card-travel-checkout__person--selected .card-travel-checkout__person-check {
    border-color: var(--cc-accent);
    background: var(--cc-accent);
}

.checkout-custom .card-travel-checkout__person--selected .card-travel-checkout__person-check::after {
    border-color: var(--cc-primary);
}

.checkout-custom .card-travel-checkout__person--selected .card-travel-checkout__person-price {
    background: var(--cc-accent);
    color: var(--cc-primary);
}

.checkout-custom .card-travel-checkout__btn--accent {
    background: var(--cc-accent);
    color: #212529;
}

.checkout-custom .card-travel-checkout__btn--accent:not(:disabled):hover {
    background: var(--cc-accent-dark);
}

.checkout-custom .card-travel-checkout__btn--light {
    background: var(--cc-primary-light);
    color: var(--cc-primary);
}

/* Stepper Zurück/Weiter im Checkout-Look */
.checkout-custom .excursion-booking-stepper__actions {
    border-color: color-mix(in srgb, var(--cc-primary, #1d4c70) 18%, transparent);
    background: color-mix(in srgb, var(--cc-primary, #1d4c70) 4%, #fff);
}

.checkout-custom .excursion-booking-stepper__actions .mud-button-filled {
    background: linear-gradient(135deg, var(--cc-primary, #1d4c70) 0%, var(--cc-primary-dark, #153752) 100%);
    box-shadow: 0 4px 12px rgba(29, 76, 112, 0.28);
}

.checkout-custom .excursion-booking-stepper__actions .mud-button-outlined {
    border-width: 2px;
    font-weight: 700;
}

/* Dark Mode: Marken-Navy als Textfarbe ist auf dunklem Grund nicht lesbar. */
html.mud-theme-dark .checkout-custom {
    --cc-text: #e8eef4;
    color: var(--cc-text);
}

html.mud-theme-dark .checkout-custom h1,
html.mud-theme-dark .checkout-custom h2,
html.mud-theme-dark .checkout-custom h3,
html.mud-theme-dark .checkout-custom h4,
html.mud-theme-dark .checkout-custom h5,
html.mud-theme-dark .checkout-custom h6,
html.mud-theme-dark .checkout-custom .mud-typography-h1,
html.mud-theme-dark .checkout-custom .mud-typography-h2,
html.mud-theme-dark .checkout-custom .mud-typography-h3,
html.mud-theme-dark .checkout-custom .mud-typography-h4,
html.mud-theme-dark .checkout-custom .mud-typography-h5,
html.mud-theme-dark .checkout-custom .mud-typography-h6,
html.mud-theme-dark .checkout-custom .mud-typography-subtitle1,
html.mud-theme-dark .checkout-custom .mud-typography-subtitle2 {
    color: #dce8f2;
}

html.mud-theme-dark .checkout-custom .booking-trust-bar,
html.mud-theme-dark .checkout-custom .checkout-legal-link {
    color: #c5d8e8;
}

html.mud-theme-dark .checkout-custom .checkout-header__brand-text {
    color: var(--mud-palette-text-primary, #f8fafc);
}

html.mud-theme-dark .checkout-custom .mud-button-filled.mud-button-filled-primary {
    color: #0f172a;
}

html.mud-theme-dark .checkout-custom .payment-choice__card--selected {
    border-color: #8eb4d4;
    background: linear-gradient(135deg, rgba(142, 180, 212, 0.10) 0%, rgba(142, 180, 212, 0.18) 100%);
}

html.mud-theme-dark .checkout-custom .excursion-booking-stepper__actions {
    border-color: rgba(142, 180, 212, 0.28);
    background: rgba(15, 23, 42, 0.45);
}