/* =========================================================
   OUTDO SYSTEM — DARK BROWSER PROTECTION
   Keeps the website identical to its normal/light appearance
   when the browser or operating system uses a dark theme.
   ========================================================= */

/* Tell supported browsers not to auto-darken the page or controls. */
:root {
  color-scheme: only light;
  supported-color-schemes: light;
}

html,
body,
input,
textarea,
select,
button,
.form-control,
.form-select,
.dropdown-menu, {
  color-scheme: light !important;
}

/* Preserve authored colors in forced-color environments as well. */
img,
picture,
video,
canvas,
svg {
  forced-color-adjust: none;
}

@media (prefers-color-scheme: dark) {
  /* Restore the same variables used by the normal/light website. */
  :root {
    --red: #e31e24;
    --red-dark: #c81920;
    --red-light: rgba(227, 30, 36, 0.08);
    --red-glow: rgba(227, 30, 36, 0.18);

    --black: #f4f6f8;
    --black2: #ffffff;
    --black3: #eef2f5;
    --white: #1f2937;
    --gray: #6b7280;
    --gray-light: #fafafa;

    --text: #1a1a1a;
    --text-muted: #666666;
    --text-light: #999999;
    --bg: #ffffff;
    --bg2: #f8f8f8;
    --bg3: #f2f2f2;
    --dark: #111111;
    --dark2: #1e1e1e;

    --border: rgba(0, 0, 0, 0.09);
    --border-light: rgba(0, 0, 0, 0.05);
    --shadow: 0 8px 40px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 16px 60px rgba(0, 0, 0, 0.11);
    --shadow-red: 0 8px 32px rgba(227, 30, 36, 0.28);
  }

  /* The original dark-mode rule changes these cards to #1c1c1c.
     Restore every component to its normal browser background. */
  .svc-card,
  .pf-card,
  .dm-card,
  .award-card,
  .value-card,
  .team-card,
  .stat-card,
  .mv-card,
  .ind-item,
  .tech-pill,
  .t-card {
    background: #ffffff !important;
  }

  .related-card {
    background: var(--bg);
  }

  .dark-section{
    background-color: #f4f6f8 !important;
  }

  .faq-item,
  .info-box,
  .contact-form {
    background: var(--bg2);
  }

  /* Keep the highlighted statistics card red, as in normal mode. */
  .stat-card.featured {
    background: linear-gradient(135deg, var(--red), var(--red-dark));
  }

  .svc-card h4,
  .pf-body h4,
  .dm-card h4 {
    color: var(--text);
  }

  /* This card belongs to an intentionally dark section. */
  .ps-card h4 {
    color: #ffffff;
  }

  /* Normal white sticky navigation instead of the dark-browser version. */
  #mainNav.scrolled {
    background: rgba(255, 255, 255, 0.97);
    border-bottom-color: var(--border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  }

  /* Match the regular light preloader. */
  #preloader {
    background: #ffffff;
  }

  .faq-answer {
    background: var(--bg);
  }

  /* Restore form fields and native dropdown options. */
  .form-group input,
  .form-group textarea,
  .form-group select {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border);
  }

  .form-group input::placeholder,
  .form-group textarea::placeholder,
  .form-control::placeholder {
    color: var(--text-light);
    opacity: 1;
  }

  select,
  option,
  #service option {
    background-color: #ffffff;
    color: #333333;
  }

  /* Prevent browser autofill from adding a dark field background. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    box-shadow: 0 0 0 1000px #ffffff inset;
    transition: background-color 9999s ease-out 0s;
  }
}