/* FORCE ALL TEXT TO BE VISIBLE */
/* Using !important and high specificity */

/* Global dark text */
html body,
html body * {
  --tw-text-opacity: 1 !important;
}

/* ========== YELLOW/ORANGE/AMBER BACKGROUNDS ========== */
/* These need DARK BROWN text */

[class*="from-yellow"],
[class*="to-yellow"],
[class*="from-orange"],
[class*="to-orange"],
[class*="from-amber"],
[class*="to-amber"],
[class*="bg-yellow"],
[class*="bg-orange"],
[class*="bg-amber"],
[class*="border-yellow"],
[class*="border-orange"],
[class*="border-amber"] {
  color: #713f12 !important;
}

[class*="from-yellow"] *,
[class*="to-yellow"] *,
[class*="from-orange"] *,
[class*="to-orange"] *,
[class*="from-amber"] *,
[class*="to-amber"] *,
[class*="bg-yellow"] *,
[class*="bg-orange"] *,
[class*="bg-amber"] *,
[class*="border-yellow"] *,
[class*="border-orange"] *,
[class*="border-amber"] * {
  color: #713f12 !important;
}

[class*="from-yellow"] h1,
[class*="from-yellow"] h2,
[class*="from-yellow"] h3,
[class*="from-yellow"] h4,
[class*="from-yellow"] p,
[class*="from-yellow"] span,
[class*="from-yellow"] li,
[class*="from-orange"] h1,
[class*="from-orange"] h2,
[class*="from-orange"] h3,
[class*="from-orange"] h4,
[class*="from-orange"] p,
[class*="from-orange"] span,
[class*="from-orange"] li {
  color: #713f12 !important;
}

/* ========== GRAY BACKGROUNDS ========== */
[class*="from-gray-5"],
[class*="from-gray-1"],
[class*="bg-gray-5"],
[class*="bg-gray-1"],
[class*="border-gray"] {
  color: #1f2937 !important;
}

[class*="from-gray-5"] *,
[class*="from-gray-1"] *,
[class*="bg-gray-5"] *,
[class*="bg-gray-1"] *,
[class*="border-gray"] * {
  color: #1f2937 !important;
}

/* ========== GREEN BACKGROUNDS ========== */
[class*="from-green-5"],
[class*="from-green-1"],
[class*="bg-green-5"],
[class*="bg-green-1"],
[class*="to-emerald"],
[class*="border-green"] {
  color: #14532d !important;
}

[class*="from-green-5"] *,
[class*="from-green-1"] *,
[class*="bg-green-5"] *,
[class*="bg-green-1"] *,
[class*="to-emerald"] *,
[class*="border-green"] * {
  color: #14532d !important;
}

/* ========== RED/PINK LIGHT BACKGROUNDS ========== */
[class*="from-red-5"],
[class*="bg-red-5"],
[class*="border-red"],
[class*="from-pink-5"],
[class*="bg-pink-5"] {
  color: #991b1b !important;
}

[class*="from-red-5"] *,
[class*="bg-red-5"] *,
[class*="border-red"] *,
[class*="from-pink-5"] *,
[class*="bg-pink-5"] * {
  color: #991b1b !important;
}

/* ========== BLUE LIGHT BACKGROUNDS ========== */
[class*="from-blue-5"],
[class*="from-blue-1"],
[class*="bg-blue-5"],
[class*="bg-blue-1"] {
  color: #1e3a8a !important;
}

[class*="from-blue-5"] *,
[class*="from-blue-1"] *,
[class*="bg-blue-5"] *,
[class*="bg-blue-1"] * {
  color: #1e3a8a !important;
}

/* ========== WHITE/LIGHT CARDS ========== */
.card,
.bg-white,
[class*="rounded-xl"],
[class*="rounded-2xl"] {
  color: #1a1a1a !important;
}

/* ========== BUTTONS - KEEP WHITE TEXT ========== */
button[class*="bg-primary"],
button[class*="bg-gradient"],
button[class*="btn-primary"],
.btn-primary,
[class*="bg-primary"]:not([class*="bg-primary\/"]),
[class*="from-primary"]:not([class*="from-primary\/"]) {
  color: white !important;
}

button[class*="bg-primary"] *,
button[class*="bg-gradient"] *,
button[class*="btn-primary"] *,
.btn-primary *,
[class*="bg-primary"]:not([class*="bg-primary\/"]) *,
[class*="from-primary"]:not([class*="from-primary\/"]) * {
  color: white !important;
}

/* Pink gradient timer block */
.sticky[class*="from-primary"],
[class*="bg-gradient-to-r"][class*="from-primary"][class*="to-pink"] {
  color: white !important;
}

.sticky[class*="from-primary"] *,
[class*="bg-gradient-to-r"][class*="from-primary"][class*="to-pink"] * {
  color: white !important;
}

/* Dark solid backgrounds */
[class*="bg-red-500"],
[class*="bg-green-500"],
[class*="bg-blue-500"],
[class*="bg-orange-500"],
[class*="bg-purple-500"] {
  color: white !important;
}

[class*="bg-red-500"] *,
[class*="bg-green-500"] *,
[class*="bg-blue-500"] *,
[class*="bg-orange-500"] *,
[class*="bg-purple-500"] * {
  color: white !important;
}

/* ========== SPECIFIC FIXES ========== */

/* Fix text-white being applied to light backgrounds */
[class*="yellow"] .text-white,
[class*="orange"] .text-white,
[class*="amber"] .text-white,
[class*="gray-5"] .text-white,
[class*="gray-1"] .text-white {
  color: inherit !important;
}

/* Colored text classes */
.text-primary { color: #e11d48 !important; }
.text-green-500, .text-green-600, .text-green-700 { color: #16a34a !important; }
.text-red-500, .text-red-600 { color: #dc2626 !important; }
.text-orange-600, .text-orange-700, .text-orange-800 { color: #c2410c !important; }
.text-yellow-600, .text-yellow-700 { color: #a16207 !important; }
.text-blue-500, .text-blue-600 { color: #2563eb !important; }
.text-gray-400 { color: #6b7280 !important; }
.text-gray-500 { color: #4b5563 !important; }
.text-gray-600 { color: #374151 !important; }
.text-gray-700 { color: #1f2937 !important; }

/* ========== Z-INDEX ========== */
header.sticky { z-index: 50 !important; }
.fixed.bottom-0 { z-index: 100 !important; }

/* ========== PHOTO OVERLAY - WHITE TEXT ========== */
/* Name and info on photo must be WHITE */
.bg-gradient-to-t,
[class*="from-black"],
[class*="via-black"],
.absolute.bottom-0[class*="bg-gradient"] {
  color: white !important;
}

.bg-gradient-to-t *,
[class*="from-black"] *,
[class*="via-black"] *,
.absolute.bottom-0[class*="bg-gradient"] * {
  color: white !important;
}

/* Girl name overlay */
.absolute.bottom-0 h2,
.absolute.bottom-0 p,
.absolute.bottom-0 span {
  color: white !important;
}

/* LIVE badge */
.absolute.top-4 .bg-red-500,
.absolute.top-4 .bg-red-500 * {
  color: white !important;
}

/* ========== INCREASE CHANCE BUTTON ========== */
/* Make it more visible */
[class*="from-primary\/10"],
[class*="bg-primary\/10"],
.bg-gradient-to-r[class*="primary"][class*="pink-50"] {
  background: linear-gradient(to right, rgba(225, 29, 72, 0.2), rgba(236, 72, 153, 0.2)) !important;
  color: #be123c !important;
  border: 1px solid rgba(225, 29, 72, 0.3) !important;
}

[class*="from-primary\/10"] *,
[class*="bg-primary\/10"] *,
.bg-gradient-to-r[class*="primary"][class*="pink-50"] * {
  color: #be123c !important;
}

/* ChanceBlock button specific */
button[class*="from-primary\/10"],
button[class*="bg-primary\/10"] {
  background: linear-gradient(to right, #fce7f3, #fdf2f8) !important;
  color: #be123c !important;
  border: 2px solid #f9a8d4 !important;
  font-weight: 600 !important;
}

button[class*="from-primary\/10"] *,
button[class*="bg-primary\/10"] * {
  color: #be123c !important;
}

/* ========== TAGS/BADGES ========== */
/* Interest tags - pink gradient */
[class*="from-primary\/10"][class*="to-pink"] {
  color: #be123c !important;
  background: linear-gradient(to right, #fce7f3, #fbcfe8) !important;
}

/* Tags in interests section */
.flex-wrap span[class*="rounded-full"][class*="primary"] {
  color: #be123c !important;
  background: linear-gradient(to right, #fce7f3, #fbcfe8) !important;
}

/* ========== ADDITIONAL WHITE TEXT AREAS ========== */
/* Ensure photo overlays stay white */
.rounded-2xl .absolute.bottom-0,
.rounded-2xl .absolute.bottom-0 * {
  color: white !important;
}

.aspect-\[3\/4\] .absolute,
.aspect-\[3\/4\] .absolute * {
  color: white !important;
}

/* But cards inside main content should be dark */
.p-4 > .card,
.p-4 > .card *,
.px-4 > .card,
.px-4 > .card * {
  color: #1a1a1a !important;
}

/* Re-apply colored text in cards */
.card .text-primary,
.card .text-green-500,
.card .text-green-600,
.card .text-red-500,
.card .text-blue-500,
.card .text-orange-500 {
  color: inherit;
}

.card .text-primary { color: #e11d48 !important; }
.card .text-green-500, .card .text-green-600 { color: #16a34a !important; }
.card .text-red-500 { color: #dc2626 !important; }

/* ========== FIX TIMER BACKGROUND ========== */
/* Keep pink gradient background for timer */
.sticky.top-14,
.sticky[class*="from-primary"][class*="to-pink"],
[class*="bg-gradient-to-r"][class*="from-primary"][class*="to-pink-500"] {
  background: linear-gradient(to right, #e11d48, #ec4899) !important;
  color: white !important;
}

.sticky.top-14 *,
.sticky[class*="from-primary"][class*="to-pink"] *,
[class*="bg-gradient-to-r"][class*="from-primary"][class*="to-pink-500"] * {
  color: white !important;
}

/* Timer block specific */
.sticky.top-14 .bg-white\/20,
.sticky.top-14 [class*="bg-white"] {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}