/**
 * Audi Clean Motion — additive design tokens & opt-in primitives.
 * Source: aligned with audi-dealerub/public/css/audi-clean-motion.css
 * Load AFTER existing styles (styles.css, audi.css, overides.css).
 * Does NOT restyle global body/nav/footer/legacy .btn until .acm-* or
 * .theme-audi-clean-motion is applied in markup. Live chrome stays intact.
 *
 * Design: Audi Clean Motion (audi.co.za-aligned)
 * Fonts: map design "AudiType" → project stacks 'Audi' / 'Audi Extended'
 */

:root {
  /* Colors */
  --acm-color-primary: #181d25;
  --acm-color-secondary: #6e7684;
  --acm-color-tertiary: #dbdfe6;
  --acm-color-neutral: #ffffff;
  --acm-color-surface: #fcfcfd;
  --acm-color-on-surface: #000000;
  --acm-color-error: #d92d20;
  --acm-color-border: #e5e7eb;
  --acm-color-overlay: #000000cc;

  /* Typography families (inherit project @font-face) */
  --acm-font-body: 'Audi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --acm-font-display: 'Audi Extended', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale */
  --acm-type-headline-display-size: 40px;
  --acm-type-headline-display-line: 48px;
  --acm-type-headline-lg-size: 28px;
  --acm-type-headline-lg-line: 40px;
  --acm-type-headline-md-size: 24px;
  --acm-type-headline-md-line: 36px;
  --acm-type-headline-sm-size: 21px;
  --acm-type-headline-sm-line: 24px;
  --acm-type-title-md-size: 18px;
  --acm-type-title-md-line: 24px;
  --acm-type-body-lg-size: 16px;
  --acm-type-body-lg-line: 24px;
  --acm-type-body-md-size: 14px;
  --acm-type-body-md-line: 20px;
  --acm-type-body-sm-size: 12px;
  --acm-type-body-sm-line: 16px;
  --acm-type-label-lg-size: 16px;
  --acm-type-label-lg-line: 24px;
  --acm-type-label-md-size: 14px;
  --acm-type-label-md-line: 20px;
  --acm-type-label-sm-size: 12px;
  --acm-type-label-sm-line: 16px;
  --acm-font-weight: 400;
  --acm-letter-spacing: 0px;

  /* Radius */
  --acm-radius-none: 0px;
  --acm-radius-sm: 4px;
  --acm-radius-md: 8px;
  --acm-radius-lg: 12px;
  --acm-radius-xl: 24px;
  --acm-radius-full: 9999px;

  /* Spacing (8px base) */
  --acm-space-xs: 8px;
  --acm-space-sm: 16px;
  --acm-space-md: 24px;
  --acm-space-lg: 32px;
  --acm-space-xl: 40px;
  --acm-space-gutter: 24px;
  --acm-space-section: 40px;

  /* Controls */
  --acm-btn-height: 48px;
  --acm-btn-padding-y: 12px;
  --acm-btn-padding-x: 24px;
  --acm-input-padding-y: 12px;
  --acm-input-padding-x: 16px;
  --acm-chip-padding-y: 10px;
  --acm-chip-padding-x: 18px;
  --acm-icon-btn-size: 40px;
  --acm-icon-btn-padding: 12px;

  /* Table row hover (matches secondary button) */
  --acm-table-row-hover: #000000;
}

/* -------------------------------------------------------------------------- */
/* Opt-in theme scope — only affects descendants when wrapper is present       */
/* -------------------------------------------------------------------------- */

.theme-audi-clean-motion {
  /* Dark guest panel tokens (scoped — :root light tokens stay unchanged) */
  --acm-color-surface: #101319;
  --acm-color-on-surface: #ffffff;
  --acm-color-secondary: #a0a6b0;
  --acm-color-tertiary: #3a404c;
  --acm-color-border: #3a404c;
  --acm-color-primary: #ffffff;
  --acm-color-neutral: #ffffff;
  --acm-input-bg: #181d25;

  color: var(--acm-color-on-surface);
  font-family: var(--acm-font-body);
  font-weight: var(--acm-font-weight);
  letter-spacing: var(--acm-letter-spacing);
}

.theme-audi-clean-motion h1,
.theme-audi-clean-motion h2,
.theme-audi-clean-motion h3,
.theme-audi-clean-motion h4,
.theme-audi-clean-motion h5,
.theme-audi-clean-motion h6 {
  font-family: var(--acm-font-display);
  font-weight: var(--acm-font-weight);
  color: var(--acm-color-on-surface);
}

/* -------------------------------------------------------------------------- */
/* Color utilities                                                             */
/* -------------------------------------------------------------------------- */

.acm-text-primary { color: var(--acm-color-primary); }
.acm-text-secondary { color: var(--acm-color-secondary); }
.acm-text-tertiary { color: var(--acm-color-tertiary); }
.acm-text-neutral { color: var(--acm-color-neutral); }
.acm-text-on-surface { color: var(--acm-color-on-surface); }
.acm-text-error { color: var(--acm-color-error); }

.acm-bg-primary { background-color: var(--acm-color-primary); }
.acm-bg-secondary { background-color: var(--acm-color-secondary); }
.acm-bg-tertiary { background-color: var(--acm-color-tertiary); }
.acm-bg-neutral { background-color: var(--acm-color-neutral); }
.acm-bg-surface { background-color: var(--acm-color-surface); }
.acm-bg-overlay { background-color: var(--acm-color-overlay); }

.acm-border { border-color: var(--acm-color-border); }
.acm-border-tertiary { border-color: var(--acm-color-tertiary); }

/* -------------------------------------------------------------------------- */
/* Typography helpers                                                          */
/* -------------------------------------------------------------------------- */

.acm-headline-display,
.acm-headline-lg,
.acm-headline-md,
.acm-headline-sm,
.acm-title-md {
  font-family: var(--acm-font-display);
  font-weight: var(--acm-font-weight);
  letter-spacing: var(--acm-letter-spacing);
}

.acm-body-lg,
.acm-body-md,
.acm-body-sm,
.acm-label-lg,
.acm-label-md,
.acm-label-sm {
  font-family: var(--acm-font-body);
  font-weight: var(--acm-font-weight);
  letter-spacing: var(--acm-letter-spacing);
}

.acm-headline-display {
  font-size: var(--acm-type-headline-display-size);
  line-height: var(--acm-type-headline-display-line);
}

.acm-headline-lg {
  font-size: var(--acm-type-headline-lg-size);
  line-height: var(--acm-type-headline-lg-line);
}

.acm-headline-md {
  font-size: var(--acm-type-headline-md-size);
  line-height: var(--acm-type-headline-md-line);
}

.acm-headline-sm {
  font-size: var(--acm-type-headline-sm-size);
  line-height: var(--acm-type-headline-sm-line);
}

.acm-title-md {
  font-size: var(--acm-type-title-md-size);
  line-height: var(--acm-type-title-md-line);
}

.acm-body-lg {
  font-size: var(--acm-type-body-lg-size);
  line-height: var(--acm-type-body-lg-line);
}

.acm-body-md {
  font-size: var(--acm-type-body-md-size);
  line-height: var(--acm-type-body-md-line);
}

.acm-body-sm {
  font-size: var(--acm-type-body-sm-size);
  line-height: var(--acm-type-body-sm-line);
}

.acm-label-lg {
  font-size: var(--acm-type-label-lg-size);
  line-height: var(--acm-type-label-lg-line);
}

.acm-label-md {
  font-size: var(--acm-type-label-md-size);
  line-height: var(--acm-type-label-md-line);
}

.acm-label-sm {
  font-size: var(--acm-type-label-sm-size);
  line-height: var(--acm-type-label-sm-line);
}

/* -------------------------------------------------------------------------- */
/* Button primitives (new class names only — does not touch existing buttons)  */
/* -------------------------------------------------------------------------- */

.acm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--acm-font-body);
  font-size: var(--acm-type-label-md-size);
  line-height: var(--acm-type-label-md-line);
  font-weight: var(--acm-font-weight);
  letter-spacing: var(--acm-letter-spacing);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.acm-btn:disabled,
.acm-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.acm-btn-primary,
.acm-btn-secondary {
  background-color: var(--acm-color-primary);
  color: var(--acm-color-surface);
  border-radius: var(--acm-radius-full);
  padding: var(--acm-btn-padding-y) var(--acm-btn-padding-x);
  min-height: var(--acm-btn-height);
}

.acm-btn-primary:hover:not(:disabled):not([aria-disabled='true']),
.acm-btn-secondary:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: #242a34;
}

.acm-btn-primary:active:not(:disabled):not([aria-disabled='true']),
.acm-btn-secondary:active:not(:disabled):not([aria-disabled='true']) {
  background-color: #10141a;
}

/* Dark theme: primary charcoal / secondary slate (audi.co.za) */
.theme-audi-clean-motion .acm-btn-primary {
  background-color: #181d25;
  color: #fcfcfd;
  border-color: #181d25;
  border-radius: var(--acm-radius-full);
}

.theme-audi-clean-motion .acm-btn-primary:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: #242a34;
  color: #fcfcfd;
  border-color: #242a34;
}

.theme-audi-clean-motion .acm-btn-primary:active:not(:disabled):not([aria-disabled='true']) {
  background-color: #10141a;
  color: #fcfcfd;
  border-color: #10141a;
}

.theme-audi-clean-motion .acm-btn-secondary {
  background-color: #657081;
  color: #ffffff;
  border-color: #657081;
  border-radius: var(--acm-radius-full);
}

.theme-audi-clean-motion .acm-btn-secondary:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: #556070;
  color: #ffffff;
  border-color: #556070;
}

.theme-audi-clean-motion .acm-btn-secondary:active:not(:disabled):not([aria-disabled='true']) {
  background-color: #4a5563;
  color: #ffffff;
  border-color: #4a5563;
}

/* Guest auth panel (div wrapper): keep white primary CTAs */
div.theme-audi-clean-motion .acm-btn-primary {
  background-color: #ffffff;
  color: #101319;
  border-color: #ffffff;
}

div.theme-audi-clean-motion .acm-btn-primary:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: #e8eaed;
  color: #101319;
  border-color: #e8eaed;
}

div.theme-audi-clean-motion .acm-btn-primary:active:not(:disabled):not([aria-disabled='true']) {
  background-color: #d0d4db;
  color: #101319;
  border-color: #d0d4db;
}

.theme-audi-clean-motion .acm-btn-outline {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
  border-radius: var(--acm-radius-full);
}

.theme-audi-clean-motion .acm-btn-outline:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.theme-audi-clean-motion .acm-btn-tertiary {
  color: #ffffff;
}

.theme-audi-clean-motion .acm-btn-tertiary:hover:not(:disabled):not([aria-disabled='true']) {
  color: var(--acm-color-secondary);
}

/* Sticky campaign download bar — frosted surface */
body.theme-audi-clean-motion #download-assets-section {
  background-color: #101319f2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.theme-audi-clean-motion .acm-btn-danger {
  background-color: var(--acm-color-error);
  color: #ffffff;
  border-color: var(--acm-color-error);
  border-radius: var(--acm-radius-full);
  padding: var(--acm-btn-padding-y) var(--acm-btn-padding-x);
  min-height: var(--acm-btn-height);
}

body.theme-audi-clean-motion .acm-btn-danger:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: #b8251a;
  border-color: #b8251a;
  color: #ffffff;
}

body.theme-audi-clean-motion .acm-btn-danger:active:not(:disabled):not([aria-disabled='true']) {
  background-color: #9f1f16;
  border-color: #9f1f16;
  color: #ffffff;
}

.acm-btn-tertiary {
  background-color: transparent;
  color: var(--acm-color-on-surface);
  border-radius: var(--acm-radius-none);
  padding: 0;
  min-height: auto;
}

.acm-btn-tertiary:hover:not(:disabled):not([aria-disabled='true']) {
  color: var(--acm-color-secondary);
}

.acm-btn-outline {
  background-color: transparent;
  color: var(--acm-color-on-surface);
  border-color: var(--acm-color-primary);
  border-radius: var(--acm-radius-full);
  padding: var(--acm-btn-padding-y) var(--acm-btn-padding-x);
  min-height: var(--acm-btn-height);
}

.acm-btn-outline:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--acm-color-tertiary);
}

.acm-btn-outline:active:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--acm-color-border);
}

/* Guest auth: checkbox accents only when ACM theme is active */
.theme-audi-clean-motion .custom-checkbox .checkmark {
  background-color: transparent;
  border-color: var(--acm-color-border);
  border-radius: var(--acm-radius-sm);
}

.theme-audi-clean-motion .custom-checkbox input[type='checkbox']:checked + .checkmark {
  background-color: transparent;
  border-color: #ffffff;
}

.theme-audi-clean-motion .custom-checkbox .checkmark:after {
  border-color: #ffffff;
}

.theme-audi-clean-motion .custom-checkbox:hover .checkmark {
  border-color: var(--acm-color-secondary);
  box-shadow: none;
}

.theme-audi-clean-motion .custom-checkbox input[type='checkbox']:focus + .checkmark {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.theme-audi-clean-motion a.acm-link {
  color: #ffffff;
  text-decoration: underline;
}

.theme-audi-clean-motion a.acm-link:hover {
  color: var(--acm-color-secondary);
}

/* Ensure text-input merge classes don't fight ACM focus ring */
.theme-audi-clean-motion .acm-input:focus {
  border-color: #ffffff;
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
}

/* -------------------------------------------------------------------------- */
/* Optional card / input / chip / icon-button primitives                       */
/* -------------------------------------------------------------------------- */

.acm-card {
  background-color: var(--acm-color-surface);
  color: var(--acm-color-on-surface);
  font-family: var(--acm-font-body);
  font-size: var(--acm-type-body-md-size);
  line-height: var(--acm-type-body-md-line);
  border: 1px solid var(--acm-color-border);
  border-radius: var(--acm-radius-md);
  padding: var(--acm-space-sm);
}

.acm-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--acm-color-surface);
  color: var(--acm-color-on-surface);
  font-family: var(--acm-font-body);
  font-size: var(--acm-type-body-md-size);
  line-height: var(--acm-type-body-md-line);
  font-weight: var(--acm-font-weight);
  border: 1px solid var(--acm-color-border);
  border-radius: var(--acm-radius-sm);
  padding: var(--acm-input-padding-y) var(--acm-input-padding-x);
  height: auto;
  min-height: 48px;
  box-shadow: none;
}

.acm-input:focus {
  outline: 2px solid var(--acm-color-primary);
  outline-offset: 1px;
  border-color: var(--acm-color-primary);
  box-shadow: none;
}

/* Beat Tailwind CDN utilities on guest auth forms */
.theme-audi-clean-motion input.acm-input,
.theme-audi-clean-motion select.acm-input,
.theme-audi-clean-motion textarea.acm-input {
  background-color: var(--acm-input-bg, #181d25);
  color: #ffffff;
  border: 1px solid var(--acm-color-border);
  border-radius: var(--acm-radius-sm);
  padding: var(--acm-input-padding-y) var(--acm-input-padding-x);
  height: auto;
  min-height: 48px;
  box-shadow: none;
}

.theme-audi-clean-motion input.acm-input::placeholder,
.theme-audi-clean-motion textarea.acm-input::placeholder {
  color: var(--acm-color-secondary);
}

.theme-audi-clean-motion select.acm-input {
  color-scheme: dark;
}

.theme-audi-clean-motion input.acm-input:focus,
.theme-audi-clean-motion select.acm-input:focus,
.theme-audi-clean-motion textarea.acm-input:focus {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
  border-color: #ffffff;
  box-shadow: none;
}

/* Icon-prefixed search fields (landing) — not dependent on Tailwind pl-* utilities */
.theme-audi-clean-motion .acm-input-icon-left {
  padding-left: 3rem !important;
}

.theme-audi-clean-motion .acm-input-icon-right {
  padding-right: 3rem !important;
}

.theme-audi-clean-motion .acm-btn.w-full {
  width: 100%;
  display: inline-flex;
}

.acm-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--acm-color-primary);
  color: var(--acm-color-surface);
  font-family: var(--acm-font-body);
  font-size: var(--acm-type-label-md-size);
  line-height: var(--acm-type-label-md-line);
  font-weight: var(--acm-font-weight);
  border-radius: var(--acm-radius-full);
  padding: var(--acm-chip-padding-y) var(--acm-chip-padding-x);
  border: 1px solid transparent;
}

.acm-chip-outline {
  background-color: transparent;
  color: var(--acm-color-on-surface);
  border-color: var(--acm-color-border);
}

.acm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--acm-icon-btn-size);
  height: var(--acm-icon-btn-size);
  padding: var(--acm-icon-btn-padding);
  box-sizing: border-box;
  background-color: var(--acm-color-primary);
  color: var(--acm-color-surface);
  border: none;
  border-radius: var(--acm-radius-sm);
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/* Admin / client shell chrome (dark ACM)                                      */
/* -------------------------------------------------------------------------- */

.theme-audi-clean-motion .acm-shell-header {
  background-color: #181d25;
  color: #ffffff;
  border-bottom: 1px solid var(--acm-color-border);
}

.theme-audi-clean-motion .acm-shell-user-btn {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
}

.theme-audi-clean-motion .acm-shell-user-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.theme-audi-clean-motion .acm-shell-nav,
.theme-audi-clean-motion .acm-shell-sidebar {
  background-color: #181d25;
  color: #ffffff;
  border-right: 1px solid var(--acm-color-border);
}

.theme-audi-clean-motion .acm-shell-nav-link {
  color: #ffffff;
  text-decoration: none;
}

.theme-audi-clean-motion .acm-shell-nav-link:hover {
  color: var(--acm-color-secondary);
}

.theme-audi-clean-motion .acm-shell-nav-heading {
  color: var(--acm-color-secondary);
}

.theme-audi-clean-motion .acm-shell-nav-item.border-y,
.theme-audi-clean-motion .acm-shell-nav-item.border-b,
.theme-audi-clean-motion .acm-shell-nav-item.border-t {
  border-color: var(--acm-color-border);
}

.theme-audi-clean-motion .acm-shell-hr {
  border: 0;
  border-top: 1px solid var(--acm-color-border);
}

.theme-audi-clean-motion .acm-shell-border {
  border-color: var(--acm-color-border);
}

.theme-audi-clean-motion .acm-shell-dropdown {
  background-color: #181d25;
  color: #ffffff;
  border: 1px solid var(--acm-color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.theme-audi-clean-motion .acm-shell-dropdown-link {
  color: #ffffff;
}

.theme-audi-clean-motion .acm-shell-dropdown-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.theme-audi-clean-motion .acm-shell-dropdown-link.acm-shell-danger {
  color: var(--acm-color-error);
}

.theme-audi-clean-motion .acm-shell-dropdown-link.acm-shell-danger:hover {
  background-color: rgba(217, 45, 32, 0.12);
}

.theme-audi-clean-motion .acm-shell-footer {
  background-color: #181d25;
  color: var(--acm-color-secondary);
  border-top: 1px solid var(--acm-color-border);
}

/* -------------------------------------------------------------------------- */
/* Authenticated shells only (body has theme; guest panel does not)            */
/* 8px radius on content images + rectangular buttons; keep circles circular   */
/* ACM pill CTAs (.acm-btn-*) keep full radius                                 */
/* -------------------------------------------------------------------------- */

body.theme-audi-clean-motion .pswp-item-container {
  border-radius: var(--acm-radius-md);
  overflow: hidden;
}

body.theme-audi-clean-motion img:not(.rounded-full):not([class*='rounded-full']) {
  border-radius: var(--acm-radius-md);
}

body.theme-audi-clean-motion button:not(.rounded-full):not([class*='rounded-full']):not(.acm-btn):not([class*='acm-btn']),
body.theme-audi-clean-motion a.w-8.h-8 {
  border-radius: var(--acm-radius-md);
}

body.theme-audi-clean-motion .acm-btn,
body.theme-audi-clean-motion .acm-btn-primary,
body.theme-audi-clean-motion .acm-btn-secondary,
body.theme-audi-clean-motion .acm-btn-outline,
body.theme-audi-clean-motion .acm-btn-danger {
  border-radius: var(--acm-radius-full);
}

body.theme-audi-clean-motion .acm-btn-tertiary {
  border-radius: var(--acm-radius-none);
}

/* Override Tailwind rounded-md / rounded-lg on admin tiles & action links */
body.theme-audi-clean-motion .rounded-md:not(.rounded-full):not(.acm-btn):not([class*='acm-btn']),
body.theme-audi-clean-motion .rounded-lg:not(.rounded-full):not(.acm-btn):not([class*='acm-btn']) {
  border-radius: var(--acm-radius-md);
}

/* Authenticated shells: elevated cards vs page surface */
body.theme-audi-clean-motion .acm-card {
  background-color: #181d25;
  border-color: var(--acm-color-border);
  color: var(--acm-color-on-surface);
}

/* -------------------------------------------------------------------------- */
/* Admin / authenticated main content — dark ACM surfaces                      */
/* Does not restyle table row action icon colors                               */
/* -------------------------------------------------------------------------- */

body.theme-audi-clean-motion main .text-gray-800,
body.theme-audi-clean-motion main .text-gray-900,
body.theme-audi-clean-motion main .text-gray-700,
body.theme-audi-clean-motion main .text-black,
body.theme-audi-clean-motion main .text-\[\#444444\] {
  color: var(--acm-color-on-surface);
}

body.theme-audi-clean-motion main .text-gray-500,
body.theme-audi-clean-motion main .text-gray-600,
body.theme-audi-clean-motion main .text-\[\#444444\] a {
  color: var(--acm-color-secondary);
}

body.theme-audi-clean-motion main a {
  color: var(--acm-color-on-surface);
}

body.theme-audi-clean-motion main a:hover {
  color: var(--acm-color-secondary);
}

body.theme-audi-clean-motion main a.acm-text-secondary {
  color: var(--acm-color-secondary);
}

body.theme-audi-clean-motion main a.acm-text-secondary:hover {
  color: var(--acm-color-on-surface);
}

body.theme-audi-clean-motion main .bg-white {
  background-color: #181d25;
  color: var(--acm-color-on-surface);
  border: 1px solid var(--acm-color-border);
}

body.theme-audi-clean-motion main .bg-gray-50,
body.theme-audi-clean-motion main .bg-gray-100 {
  background-color: #14181f;
  color: var(--acm-color-on-surface);
}

body.theme-audi-clean-motion main .bg-blue-50 {
  background-color: rgba(110, 118, 132, 0.15);
  border-color: #6e7684;
  color: var(--acm-color-on-surface);
}

body.theme-audi-clean-motion main .border-gray-300,
body.theme-audi-clean-motion main .border-dashed.border-gray-300 {
  border-color: var(--acm-color-border);
}

body.theme-audi-clean-motion main table {
  color: var(--acm-color-on-surface);
}

body.theme-audi-clean-motion main thead tr,
body.theme-audi-clean-motion main tr.bg-gray-100 {
  background-color: #14181f;
  color: var(--acm-color-secondary);
}

body.theme-audi-clean-motion main tbody tr {
  border-color: var(--acm-color-border);
}

body.theme-audi-clean-motion main table tbody tr:hover,
body.theme-audi-clean-motion main table tbody tr.hover\:bg-gray-50:hover,
body.theme-audi-clean-motion main table tbody tr.acm-table-row:hover {
  background-color: var(--acm-table-row-hover, #000000) !important;
  color: #ffffff;
}

body.theme-audi-clean-motion main .border-b {
  border-color: var(--acm-color-border);
}

body.theme-audi-clean-motion main .shadow-md,
body.theme-audi-clean-motion main .shadow,
body.theme-audi-clean-motion main .shadow-sm {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

body.theme-audi-clean-motion main .shadow-sm.border-gray-300,
body.theme-audi-clean-motion main a.block.p-6.border {
  background-color: #181d25;
  border-color: var(--acm-color-border);
  color: var(--acm-color-on-surface);
}

body.theme-audi-clean-motion main a.block.p-6.border:hover,
body.theme-audi-clean-motion main a.hover\:bg-gray-200:hover {
  background-color: #1f2530;
  color: var(--acm-color-on-surface);
}

/* Forms: native inputs without acm-input still get dark treatment in main */
body.theme-audi-clean-motion main input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not(.acm-input),
body.theme-audi-clean-motion main select:not(.acm-input),
body.theme-audi-clean-motion main textarea:not(.acm-input) {
  background-color: var(--acm-input-bg, #181d25);
  color: #ffffff;
  border-color: var(--acm-color-border);
  color-scheme: dark;
}

body.theme-audi-clean-motion main input:not([type='checkbox']):not([type='radio']):not([type='hidden'])::placeholder,
body.theme-audi-clean-motion main textarea::placeholder {
  color: var(--acm-color-secondary);
}

body.theme-audi-clean-motion main label,
body.theme-audi-clean-motion main .text-sm.text-gray-700,
body.theme-audi-clean-motion main .text-sm.text-gray-900 {
  color: var(--acm-color-on-surface);
}

/* Soften light status chips on dark tables (keep semantic hue) */
body.theme-audi-clean-motion main .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

body.theme-audi-clean-motion main .bg-green-100 {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

body.theme-audi-clean-motion main .bg-yellow-100 {
  background-color: rgba(234, 179, 8, 0.2);
  color: #fde047;
}

body.theme-audi-clean-motion main .bg-gray-100.text-gray-800,
body.theme-audi-clean-motion main span.bg-gray-100 {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--acm-color-on-surface);
}

/* Pagination */
body.theme-audi-clean-motion main nav[role='navigation'] span,
body.theme-audi-clean-motion main nav[role='navigation'] a {
  color: var(--acm-color-on-surface);
  border-color: var(--acm-color-border);
}

body.theme-audi-clean-motion main nav[role='navigation'] .bg-white {
  background-color: #181d25;
}

/* Modals rendered inside main */
body.theme-audi-clean-motion main .bg-opacity-50,
body.theme-audi-clean-motion main [id$='Modal'] {
  color: var(--acm-color-on-surface);
}

body.theme-audi-clean-motion main [id$='Modal'] .bg-white {
  background-color: #181d25;
  border-color: var(--acm-color-border);
}

/* Success / error alerts in admin layout */
body.theme-audi-clean-motion .bg-green-100 {
  background-color: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border-color: #22c55e;
}

body.theme-audi-clean-motion .bg-red-100 {
  background-color: rgba(217, 45, 32, 0.15);
  color: #fca5a5;
  border-color: var(--acm-color-error);
}


/* -------------------------------------------------------------------------- */
/* myAudiWorld — dark surfaces (#101319) + light text (#ffffff)               */
/* Additive only; requires body.theme-audi-clean-motion                       */
/* -------------------------------------------------------------------------- */

body.theme-audi-clean-motion.my-audi-world-container,
body.theme-audi-clean-motion {
  background-color: #101319 !important;
  color: #ffffff;
}

body.theme-audi-clean-motion h1,
body.theme-audi-clean-motion h2,
body.theme-audi-clean-motion h3,
body.theme-audi-clean-motion h4,
body.theme-audi-clean-motion h5,
body.theme-audi-clean-motion h6,
body.theme-audi-clean-motion .aui-headline-1,
body.theme-audi-clean-motion .aui-headline-2,
body.theme-audi-clean-motion .aui-headline-3,
body.theme-audi-clean-motion .aui-headline-4,
body.theme-audi-clean-motion .aui-headline-5,
body.theme-audi-clean-motion .aui-headline-6,
body.theme-audi-clean-motion p,
body.theme-audi-clean-motion li,
body.theme-audi-clean-motion label,
body.theme-audi-clean-motion span,
body.theme-audi-clean-motion .category-copy,
body.theme-audi-clean-motion .welcomecar,
body.theme-audi-clean-motion .service-reminder-label {
  color: #ffffff;
}

body.theme-audi-clean-motion a {
  color: #ffffff;
}

body.theme-audi-clean-motion a:hover {
  color: #a0a6b0;
}

body.theme-audi-clean-motion .padded-container.bordered,
body.theme-audi-clean-motion nav.navigation,
body.theme-audi-clean-motion .navigation:before,
body.theme-audi-clean-motion .welcome-user,
body.theme-audi-clean-motion .categories > a,
body.theme-audi-clean-motion .categories > a.noul,
body.theme-audi-clean-motion .categories > div.noul,
body.theme-audi-clean-motion .login,
body.theme-audi-clean-motion .register,
body.theme-audi-clean-motion .forgot-password,
body.theme-audi-clean-motion .reset-password,
body.theme-audi-clean-motion .otp-section,
body.theme-audi-clean-motion .js-cookie-consent,
body.theme-audi-clean-motion .cookie-consent,
body.theme-audi-clean-motion .alert-info,
body.theme-audi-clean-motion .alert-success,
body.theme-audi-clean-motion .form-field,
body.theme-audi-clean-motion .form-field.text-field {
  background-color: #101319 !important;
  color: #ffffff !important;
  border-color: #3a404c !important;
  box-shadow: none !important;
}

body.theme-audi-clean-motion .categories {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 40px;
}

body.theme-audi-clean-motion .categories > a,
body.theme-audi-clean-motion .categories > a.noul,
body.theme-audi-clean-motion .categories > div.noul {
  background-color: #181d25 !important;
}

body.theme-audi-clean-motion .categories > a,
body.theme-audi-clean-motion .categories > a.noul,
body.theme-audi-clean-motion .categories > div.noul {
  padding: 20px !important;
  border-radius: 18px !important;
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  height: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  body.theme-audi-clean-motion .categories > a,
  body.theme-audi-clean-motion .categories > a.noul,
  body.theme-audi-clean-motion .categories > div.noul {
    flex: 1 1 100%;
  }
}

/* myAudi card: keep the heading size now that the title sits inside an inner link */
body.theme-audi-clean-motion .categories > div.noul .tittle {
  font-size: 20px !important;
}

/* myAudi app store CTAs: pinned to the card bottom */body.theme-audi-clean-motion .categories .app-store-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}

body.theme-audi-clean-motion .categories .app-store-ctas .acm-btn {
  color: #ffffff;
  text-align: center;
}

body.theme-audi-clean-motion .categories .app-store-ctas .acm-btn:hover {
  color: #fcfcfdb3;
}

body.theme-audi-clean-motion .categories .tittle,
body.theme-audi-clean-motion .categories .category-copy {
  color: #ffffff !important;
}

body.theme-audi-clean-motion .categories .category-copy {
  color: #a0a6b0 !important;
}

body.theme-audi-clean-motion nav.navigation a:not(.my-audi-logo):not(.audi-icon):not(.burger-menu),
body.theme-audi-clean-motion nav.navigation .login_form a,
body.theme-audi-clean-motion nav.navigation .login_form p {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.theme-audi-clean-motion nav.navigation .login_form a.register-btn:hover,
body.theme-audi-clean-motion nav.navigation .login_form a.login-btn:hover,
body.theme-audi-clean-motion nav.navigation .login_form a#register:hover,
body.theme-audi-clean-motion nav.navigation .login_form a#login:hover {
  color: #fcfcfdb3 !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.theme-audi-clean-motion nav.navigation .burger-menu span {
  background-color: #ffffff !important;
}

body.theme-audi-clean-motion .navigation .audi-icon {
  filter: invert(1);
}

body.theme-audi-clean-motion .navigation .my-audi-logo {
  background-image: url(/images/my-audi-world-logo.png) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  background-color: transparent !important;
  filter: none;
  width: 200px;
  height: 28px;
}

body.theme-audi-clean-motion .mega-menu,
body.theme-audi-clean-motion .mega-menu.secondary-menu,
body.theme-audi-clean-motion .navigation .mega-menu,
body.theme-audi-clean-motion .navigation.open .mega-menu {
  background-color: #101319 !important;
  color: #ffffff !important;
}

body.theme-audi-clean-motion .mega-menu a,
body.theme-audi-clean-motion .mega-menu h6,
body.theme-audi-clean-motion .mega-menu li a,
body.theme-audi-clean-motion .mega-menu small {
  color: #ffffff !important;
}

body.theme-audi-clean-motion .mega-menu a:hover {
  color: #a0a6b0 !important;
}

body.theme-audi-clean-motion input[type="text"],
body.theme-audi-clean-motion input[type="email"],
body.theme-audi-clean-motion input[type="password"],
body.theme-audi-clean-motion input[type="tel"],
body.theme-audi-clean-motion input[type="number"],
body.theme-audi-clean-motion input[type="date"],
body.theme-audi-clean-motion input[type="search"],
body.theme-audi-clean-motion select,
body.theme-audi-clean-motion textarea,
body.theme-audi-clean-motion .form-input .input,
body.theme-audi-clean-motion .form-control {
  background-color: #181d25 !important;
  color: #ffffff !important;
  border-color: #3a404c !important;
}

body.theme-audi-clean-motion input::placeholder,
body.theme-audi-clean-motion textarea::placeholder {
  color: #a0a6b0 !important;
}

body.theme-audi-clean-motion footer.footer {
  background-color: #101319 !important;
  color: #ffffff !important;
  border-top: 1px solid #3a404c !important;
}

body.theme-audi-clean-motion footer.footer a,
body.theme-audi-clean-motion footer.footer .nav-link {
  color: #a0a6b0 !important;
}

body.theme-audi-clean-motion footer.footer a:hover {
  color: #ffffff !important;
}

body.theme-audi-clean-motion footer.footer hr {
  border-bottom-color: #3a404c !important;
}

body.theme-audi-clean-motion .alert-danger {
  background-color: rgba(217, 45, 32, 0.15) !important;
  color: #fca5a5 !important;
  border-color: #d92d20 !important;
}

/* Close X icons on dark auth / mega-menu surfaces */
body.theme-audi-clean-motion .mega-menu-close-btn:before,
body.theme-audi-clean-motion .mega-menu-close-btn:after,
body.theme-audi-clean-motion .close-reg:before,
body.theme-audi-clean-motion .close-reg:after {
  background-color: #ffffff;
}

/* Floating labels: inset at rest, flush on focus/active */
body.theme-audi-clean-motion .text-field .field-label {
  left: 15px;
}

body.theme-audi-clean-motion .text-field.active .field-label,
body.theme-audi-clean-motion .text-field .input:focus ~ .field-label {
  left: 0;
}

/* Register panel: body/help/error copy + submit spacing */
body.theme-audi-clean-motion .register p,
body.theme-audi-clean-motion .register .error-msg,
body.theme-audi-clean-motion .register label.error {
  font-size: 13px;
}

body.theme-audi-clean-motion .register button.acm-btn,
body.theme-audi-clean-motion .register button[type="submit"] {
  margin-top: 20px;
}

/* Profile page: consistent dark section surfaces */
body.theme-audi-clean-motion .profile-container .my-details,
body.theme-audi-clean-motion .profile-container .address,
body.theme-audi-clean-motion .profile-container .communication,
body.theme-audi-clean-motion .profile-container .security,
body.theme-audi-clean-motion .profile-container .contact-details,
body.theme-audi-clean-motion .profile-container .padded-container {
  background-color: #101319 !important;
}

/* Profile page: body copy size */
body.theme-audi-clean-motion .profile-container a,
body.theme-audi-clean-motion .profile-container span,
body.theme-audi-clean-motion .profile-container label,
body.theme-audi-clean-motion .profile-container ul li,
body.theme-audi-clean-motion .profile-container p {
  font-size: 13px;
  line-height: 17px;
  color: #ffffff;
}

body.theme-audi-clean-motion .profile-container button.acm-btn-primary {
  margin-bottom: 40px;
}

body.theme-audi-clean-motion .welcomecar {
  background-color: #1d2128 !important;
  border-radius: 18px;
}

/* Homepage hero CTAs (keep register-btn / login-btn hooks) */
body.theme-audi-clean-motion .home .banner-container .register-btn.acm-btn,
body.theme-audi-clean-motion .home .banner-container .login-btn.acm-btn {
  width: auto;
  margin: 0 4px;
  box-sizing: border-box;
  color: #ffffff;
}

body.theme-audi-clean-motion .home .banner-container .register-btn.acm-btn-primary {
  background: #657081;
  background-color: #657081;
  color: #ffffff;
  border-color: #657081;
}

body.theme-audi-clean-motion .home .banner-container .register-btn.acm-btn-primary:hover {
  background: #657081;
  background-color: #657081;
  border-color: #657081;
  color: #fcfcfdb3;
}

body.theme-audi-clean-motion .home .banner-container .login-btn.acm-btn-outline,
body.theme-audi-clean-motion .home .banner-container .login-btn.acm-btn-secondary {
  background: #181d25;
  background-color: #181d25;
  color: #ffffff;
  border-color: #181d25;
}

body.theme-audi-clean-motion .home .banner-container .login-btn.acm-btn-outline:hover,
body.theme-audi-clean-motion .home .banner-container .login-btn.acm-btn-secondary:hover {
  background: #181d25;
  background-color: #181d25;
  border-color: #181d25;
  color: #fcfcfdb3;
}

body.theme-audi-clean-motion .home .banner-container .copy .aui-headline-1,
body.theme-audi-clean-motion .home .banner-container h1 {
  color: #ffffff !important;
}