/*
  contact-dark-text-red.css
  Purpose: In DARK MODE, make ONLY the text (and icons) inside the Contact Us boxes red,
  without changing backgrounds, borders, shadows, or layout.
  Drop-in override: load this AFTER your main CSS.
*/

/* Detect dark mode on common patterns */
:where(html.dark, body.dark, [data-theme="dark"], .dark) :is(#contact, .contact, .contact-us) {
  --contact-red: #ff3b30; /* Adjust as desired */
}

/* TEXT-ONLY color inside the boxes */
:where(html.dark, body.dark, [data-theme="dark"], .dark) :is(#contact, .contact, .contact-us)
:is(a, button, .btn, .chip, .pill, .badge, .contact-item, .contact-box, .rate-us, input, .link, .cta) {
  color: var(--contact-red) !important;
}

/* Ensure nested text spans/icons also turn red */
:where(html.dark, body.dark, [data-theme="dark"], .dark) :is(#contact, .contact, .contact-us)
:is(a, button, .btn, .chip, .pill, .badge, .contact-item, .contact-box, .rate-us, input, .link, .cta) * {
  color: var(--contact-red) !important;
}

/* SVG icons adopt text color (no background change) */
:where(html.dark, body.dark, [data-theme="dark"], .dark) :is(#contact, .contact, .contact-us)
:is(a, button, .btn, .chip, .pill, .badge, .contact-item, .contact-box, .rate-us, .icon, .link, .cta) svg,
:where(html.dark, body.dark, [data-theme="dark"], .dark) :is(#contact, .contact, .contact-us)
:is(a, button, .btn, .chip, .pill, .badge, .contact-item, .contact-box, .rate-us, .icon, .link, .cta) svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Inputs/placeholder text inside Contact Us red (text-only) */
:where(html.dark, body.dark, [data-theme="dark"], .dark) :is(#contact, .contact, .contact-us) input,
:where(html.dark, body.dark, [data-theme="dark"], .dark) :is(#contact, .contact, .contact-us) input::placeholder {
  color: var(--contact-red) !important;
  opacity: 1;
}

/* Optional: hover/focus slightly brighter for clarity */
:where(html.dark, body.dark, [data-theme="dark"], .dark) :is(#contact, .contact, .contact-us)
:is(a, button, .btn, .chip, .pill, .badge, .contact-item, .contact-box, .rate-us, .link, .cta):is(:hover, :focus) {
  color: #ff5e57 !important;
}

/* Safety: never touch backgrounds/borders here */
/* (Intentionally no background-color/border-color rules) */


/* iOS video visibility baseline */
video { display:block; width:100%; height:auto; background:#000; }