/* custom.css - Dark-Mode fuer ovh_cart Orderform (Lagom2 html.lagom-dark-mode)
   Zweck: Die ovh-Vorlage hat feste Hell-Hintergruende (#fff/#f8f8f8/#def8ff) mit
   dunklem Text. Im Lagom2-Dunkelmodus faerbt das Theme Text hell (rgb 179),
   sodass hell-auf-hell entsteht (unlesbar). Diese Datei gibt den ovh-Containern
   im Dunkelmodus dunkle Flaechen + hellen Text (WCAG-tauglich). Scope streng auf
   html.lagom-dark-mode, damit der Hellmodus unveraendert bleibt. !important ist
   noetig, weil einzelne Vendor-Regeln (z.B. .field-container) selbst !important nutzen.
   Angelegt 2026-09-08. Backup Vendor-CSS: css/style-ovh.css.bak_20260908 */

html.lagom-dark-mode {
  --ovhd-surface: #1f2128;
  --ovhd-surface-2: #262a33;
  --ovhd-surface-3: #2d323d;
  --ovhd-text: #d7dae1;
  --ovhd-muted: #a7adba;
  --ovhd-border: #363b46;
  --ovhd-accent: #4a90ff;
}

/* ---- Karten / Container ---- */
html.lagom-dark-mode .product-info,
html.lagom-dark-mode .field-container,
html.lagom-dark-mode #order-standard_cart .field-container,
html.lagom-dark-mode .summary-container,
html.lagom-dark-mode #order-standard_cart .summary-container,
html.lagom-dark-mode #order-standard_cart .order-summary,
html.lagom-dark-mode #orderSummary,
html.lagom-dark-mode .addon-promo-container,
html.lagom-dark-mode div#productConfigurableOptions,
html.lagom-dark-mode div#productConfigurableOptions .col-md-4 {
  background: var(--ovhd-surface) !important;
  background-color: var(--ovhd-surface) !important;
  border-color: var(--ovhd-border) !important;
  color: var(--ovhd-text) !important;
}

/* Standardtext in den Containern hell */
html.lagom-dark-mode .product-info,
html.lagom-dark-mode .product-info *,
html.lagom-dark-mode .field-container,
html.lagom-dark-mode .field-container *,
html.lagom-dark-mode .summary-container,
html.lagom-dark-mode .summary-container *,
html.lagom-dark-mode .addon-promo-container,
html.lagom-dark-mode .addon-promo-container * {
  color: var(--ovhd-text) !important;
}

/* Gedaempfte Sekundaertexte */
html.lagom-dark-mode .product-info p,
html.lagom-dark-mode .billingcycle-box p,
html.lagom-dark-mode .summary-container .clearfix,
html.lagom-dark-mode .summary-container span.pull-right.float-right,
html.lagom-dark-mode .total-due-today span,
html.lagom-dark-mode label,
html.lagom-dark-mode .radio-inline,
html.lagom-dark-mode .radioname,
html.lagom-dark-mode ins.iCheck-helper {
  color: var(--ovhd-muted) !important;
}

/* Wichtige/kraeftige Texte voll hell */
html.lagom-dark-mode .product-info .product-title,
html.lagom-dark-mode .billingcycle-box p strong,
html.lagom-dark-mode .billingcycle-box h4,
html.lagom-dark-mode .config-box p strong,
html.lagom-dark-mode .bil-title h3,
html.lagom-dark-mode .bil-title h4,
html.lagom-dark-mode label#billingcycleheader,
html.lagom-dark-mode #order-standard_cart .order-summary h2,
html.lagom-dark-mode .summary-container .product-name,
html.lagom-dark-mode .total-due-today .amt {
  color: #ffffff !important;
}

/* Produktgruppe / kursiver Untertitel dezent */
html.lagom-dark-mode .summary-container .product-group {
  color: var(--ovhd-muted) !important;
}

/* ---- Billing-/Config-/Options-Boxen ---- */
html.lagom-dark-mode .billingcycle-box,
html.lagom-dark-mode .billingcycle-box.config-box,
html.lagom-dark-mode .billingcycle-box.tabbox,
html.lagom-dark-mode .operating-box,
html.lagom-dark-mode .op-select,
html.lagom-dark-mode .htmlOS {
  background: var(--ovhd-surface-2) !important;
  border-color: var(--ovhd-border) !important;
  box-shadow: none !important;
  color: var(--ovhd-text) !important;
}

/* Hover / ausgewaehlt: leicht heller + Akzentrand */
html.lagom-dark-mode .billingcycle-box:hover,
html.lagom-dark-mode .billingcycle-box.active,
html.lagom-dark-mode .billingcycle-box:has(.checked),
html.lagom-dark-mode .operating-box:hover,
html.lagom-dark-mode .billingcycle-box:has(.checked) .op-select {
  background: var(--ovhd-surface-3) !important;
  border-color: var(--ovhd-accent) !important;
  cursor: pointer;
}
html.lagom-dark-mode .billingcycle-box:hover p strong,
html.lagom-dark-mode .billingcycle-box:has(.checked) p strong {
  color: var(--ovhd-accent) !important;
}

/* ---- Formularfelder ---- */
html.lagom-dark-mode .form-control,
html.lagom-dark-mode #order-standard_cart .form-control,
html.lagom-dark-mode .tabbox select,
html.lagom-dark-mode select,
html.lagom-dark-mode input[type="text"],
html.lagom-dark-mode input[type="password"],
html.lagom-dark-mode input[type="email"],
html.lagom-dark-mode textarea {
  background: var(--ovhd-surface-2) !important;
  background-color: var(--ovhd-surface-2) !important;
  color: var(--ovhd-text) !important;
  border: 1px solid var(--ovhd-border) !important;
}
html.lagom-dark-mode .form-control:focus,
html.lagom-dark-mode select:focus,
html.lagom-dark-mode input:focus,
html.lagom-dark-mode textarea:focus {
  border-color: var(--ovhd-accent) !important;
  box-shadow: 0 0 0 2px rgba(74,144,255,0.25) !important;
}
html.lagom-dark-mode select option { background: #1f2128 !important; color: var(--ovhd-text) !important; }
html.lagom-dark-mode ::placeholder { color: #7c8290 !important; }

/* ---- Radios / Checkboxen: Raender sichtbar ---- */
html.lagom-dark-mode .custom-radios .radio-custom+.radio-custom-label:before,
html.lagom-dark-mode .custom-radios .checkbox-custom+.checkbox-custom-label:before,
html.lagom-dark-mode .radio-styled {
  border-color: var(--ovhd-border) !important;
}

/* ---- Trenner ---- */
html.lagom-dark-mode #order-standard_cart hr,
html.lagom-dark-mode .field-container hr,
html.lagom-dark-mode hr { border-color: var(--ovhd-border) !important; }

/* Akzent-Links im Dunkelmodus heller */
html.lagom-dark-mode .field-container a,
html.lagom-dark-mode .product-info a,
html.lagom-dark-mode .summary-container a { color: var(--ovhd-accent) !important; }

/* ---- Nachtrag: id-gescopte Vendor-Regeln (#order-standard_cart ... !important)
   ueberbieten. Diese haben (1,1,0)-Spezifitaet; hier mit gleicher id + Extra-Klasse. */
html.lagom-dark-mode #order-standard_cart .product-info,
html.lagom-dark-mode #order-standard_cart .summary-container,
html.lagom-dark-mode #order-standard_cart .order-summary,
html.lagom-dark-mode #order-standard_cart div#productConfigurableOptions,
html.lagom-dark-mode #order-standard_cart .addon-promo-container {
  background: var(--ovhd-surface) !important;
  background-color: var(--ovhd-surface) !important;
  border-color: var(--ovhd-border) !important;
}
html.lagom-dark-mode #order-standard_cart .product-info,
html.lagom-dark-mode #order-standard_cart .product-info li,
html.lagom-dark-mode #order-standard_cart .summary-container,
html.lagom-dark-mode #order-standard_cart .order-summary { color: var(--ovhd-text) !important; }
html.lagom-dark-mode #order-standard_cart .product-info .product-title,
html.lagom-dark-mode #order-standard_cart .order-summary h2 { color: #ffffff !important; }

/* ---- Weitere Sektions-Wrapper (Config-Options, OS, Datacenter, Billing) ---- */
html.lagom-dark-mode .location-center,
html.lagom-dark-mode .location-center.bil-title,
html.lagom-dark-mode .choose-os.location-center,
html.lagom-dark-mode .location-center.addonSection,
html.lagom-dark-mode .header-lined,
html.lagom-dark-mode .header-lined.customHeader,
html.lagom-dark-mode .list-radio-btn,
html.lagom-dark-mode .billing-inner,
html.lagom-dark-mode #order-standard_cart .location-center,
html.lagom-dark-mode #order-standard_cart .header-lined,
html.lagom-dark-mode #order-standard_cart .list-radio-btn {
  background: var(--ovhd-surface) !important;
  background-color: var(--ovhd-surface) !important;
  border-color: var(--ovhd-border) !important;
  color: var(--ovhd-text) !important;
}
/* aktive/ausgewaehlte innere Billing-Kachel */
html.lagom-dark-mode .billing-inner.active {
  background: var(--ovhd-surface-3) !important;
  border-color: var(--ovhd-accent) !important;
}
/* Sektions-Titel klar lesbar */
html.lagom-dark-mode .header-lined h2,
html.lagom-dark-mode .header-lined h3,
html.lagom-dark-mode .header-lined h4,
html.lagom-dark-mode .header-lined h5,
html.lagom-dark-mode .customHeader h2,
html.lagom-dark-mode .customHeader h3,
html.lagom-dark-mode .customHeader h4,
html.lagom-dark-mode .bil-title h2,
html.lagom-dark-mode .bil-title h3,
html.lagom-dark-mode .bil-title h4,
html.lagom-dark-mode .choose-os h2,
html.lagom-dark-mode .choose-os h3,
html.lagom-dark-mode .choose-os h4 {
  color: #ffffff !important;
}
/* Beschreibungstexte in Sektionen */
html.lagom-dark-mode .location-center p,
html.lagom-dark-mode .header-lined p,
html.lagom-dark-mode .choose-os p,
html.lagom-dark-mode .list-radio-btn p,
html.lagom-dark-mode .list-radio-btn label { color: var(--ovhd-muted) !important; }

/* Trenner-Label (span.primary-bg-color faerbt Text im Markenblau #005588 -> zu dunkel) */
html.lagom-dark-mode span.primary-bg-color { color: var(--ovhd-accent) !important; }

/* ---- Radio-Listen (Festplatte, IPv4 etc.): Vendor faerbt Labels #2f2f2f !important
   und gibt geraden Zeilen weissen Hintergrund. Hier ueberbieten (id-Prefix -> hoehere
   Spezifitaet) auf hellen Text + transparente Flaeche; ausgewaehlte Zeile mit Akzent. */
html.lagom-dark-mode #orderfrm .location-center .list-section .list-radio-btn p label,
html.lagom-dark-mode .location-center .list-section .list-radio-btn p label,
html.lagom-dark-mode .list-section .list-radio-btn p label,
html.lagom-dark-mode .list-radio-btn p label,
html.lagom-dark-mode .list-radio-btn p label span,
html.lagom-dark-mode .panel-check .check h6.check-title,
html.lagom-dark-mode .check-title,
html.lagom-dark-mode h6.check-title {
  color: var(--ovhd-text) !important;
  background-color: transparent !important;
}
html.lagom-dark-mode #orderfrm .list-section .list-radio-btn p label,
html.lagom-dark-mode #orderfrm .list-section .list-radio-btn p label:nth-child(even) {
  background-color: transparent !important;
}
/* ausgewaehlte Radio-Zeile: Akzent statt Weiss */
html.lagom-dark-mode #orderfrm .list-section .list-radio-btn [type="radio"]:checked+label,
html.lagom-dark-mode .list-section .list-radio-btn [type="radio"]:checked+label {
  background-color: var(--ovhd-surface-3) !important;
  color: #ffffff !important;
}
html.lagom-dark-mode .list-section .list-radio-btn [type="radio"]:checked+label p,
html.lagom-dark-mode .list-section .list-radio-btn [type="radio"]:checked+label span { color: #ffffff !important; }