/*
 * ============================================================
 * SHEREHE EVENTS — CUSTOM CSS OVERRIDES
 * ============================================================
 * Purpose: Custom classes that cannot be expressed with
 * Tailwind utility classes alone (buttons, badges, keyframes,
 * pseudo-elements, complex hover states).
 *
 * COLOR TOKENS (synced with Tailwind config in header.php):
 *   Cream:      #FAFAF8 | Dark:  #EDEBE6
 *   Moss:       #1B1B1B | Light: #444444 | Dark: #000000
 *   Sage:       #16A34A | Light: #4ADE80 | Dark: #15803D
 *   Champagne:  #FACC15 | Light: #FDF0CD | Dark: #C49010
 *   Accent:     #DC2626 | Light: #F87171 | Dark: #B91C1C
 *   Navy:       #1E3A5F | Light: #2563EB | Dark: #0F172A
 *   Amethyst:   #7C3AED | Light: #A78BFA | Dark: #5B21B6
 *   Plum:       #3D1A27 | Light: #5C2A3B | Dark: #2A0F1A
 *
 * DO NOT add layout or spacing rules here — use Tailwind.
 * DO NOT duplicate anything already achievable with Tailwind.
 * ============================================================
 */

/* ── Base ── */
body {
    background-color: #FAFAF8;
    color: #1B1B1B;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.smooth-transition { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FAFAF8; }
::-webkit-scrollbar-thumb { background: #16A34A; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #15803D; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Typography ── */
.text-gradient-gold {
    background: linear-gradient(135deg, #C49010, #FACC15);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Buttons ── */
.btn-primary {
    background-color: #3D1A27;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(61, 26, 39, 0.15);
}
.btn-primary:hover {
    background-color: #5C2A3B;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61, 26, 39, 0.22);
}

.btn-accent {
    background-color: #DC2626;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.btn-accent:hover {
    background-color: #B91C1C;
    transform: translateY(-2px);
}

.btn-outline {
    border: 2px solid #16A34A;
    color: #1B1B1B;
    border-radius: 6px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    background: transparent;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background-color: #16A34A;
    color: white;
}

/* ── Topbar & Header ── */
.category-sidebar {
    box-shadow: 10px 0 30px rgba(0,0,0,0.02);
}
.sidebar-item { border-left: 3px solid transparent; }
.sidebar-item:hover {
    background-color: rgba(22, 163, 74, 0.06);
    border-left-color: #16A34A;
    padding-left: 1.5rem;
}

/* ── Desktop Mega Menu ── */
.sidebar-mega {
    opacity: 0; visibility: hidden; transform: translateX(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.sidebar-item:hover .sidebar-mega {
    opacity: 1; visibility: visible; transform: translateX(0);
    pointer-events: auto;
}

/* ── Swiper Customisations ── */
.swiper-pagination-bullet { background: #FAFAF8; opacity: 0.5; }
.swiper-pagination-bullet-active { background: #FACC15; opacity: 1; width: 24px; border-radius: 4px; }

/* ── Badges ── */
.badge-hot {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
}
.badge-deal {
    background: #FACC15;
    color: #000000;
    font-weight: 800;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
}

/* ── Product Cards ── */
.product-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #EDEBE6;
    transition: all 0.3s ease;
    overflow: hidden;
}
.product-card:hover {
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.1);
    border-color: #4ADE80;
    transform: translateY(-4px);
}
.product-card .img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.product-card:hover img { transform: scale(1.08); }
.quick-view-btn {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.95);
    color: #1B1B1B;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.product-card:hover .quick-view-btn { bottom: 15px; opacity: 1; }

/* ── Setup Builder ── */
.setup-tab.active {
    background-color: #1B1B1B;
    color: white;
    border-color: #1B1B1B;
}

/* ── Decorative ── */
.pattern-bg {
    background-image: radial-gradient(#4ADE80 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.4;
}

/* ── Mobile Tab Pulse Animation ── */
@keyframes tab-hint-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
    40%       { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.35); }
    70%       { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.0); }
}
.tab-hint-animate {
    animation: tab-hint-pulse 2.2s ease-in-out infinite;
    position: relative;
}
.tab-hint-animate::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 12px;
    width: 7px;
    height: 7px;
    background: #FACC15;
    border-radius: 50%;
    animation: tab-dot-fade 2.2s ease-in-out infinite;
}
@keyframes tab-dot-fade {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.5); }
}

/* ── Wishlist Drawer Smooth Slide Transition ── */
#wishlist-drawer {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#tray-overlay {
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-badge-trigger {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#desktop-bar-trigger {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Marquee for trust strip on mobile ── */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.animate-marquee {
    animation: marquee-scroll 22s linear infinite;
}
.marquee-track {
    display: flex;
    flex-shrink: 0;
    gap: 2rem;
    align-items: center;
    padding-right: 2rem;
}

/* ── Premium Icon Badges ── */
.icon-badge-green {
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.3);
    color: #16A34A;
}
.icon-badge-gold {
    background: rgba(250, 204, 21, 0.14);
    border: 1px solid rgba(250, 204, 21, 0.35);
    color: #FACC15;
}
.icon-badge-red {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #DC2626;
}
.icon-badge-blue {
    background: rgba(30, 58, 95, 0.12);
    border: 1px solid rgba(30, 58, 95, 0.3);
    color: #1E3A5F;
}
.icon-badge-purple {
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: #7C3AED;
}

/* ── Line Clamping Overrides ── */
.line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
 * READABILITY & CONTRAST OVERRIDES
 * ============================================================
 * Baseline: "How to Book Rentals" section (14px body, 75% opacity)
 * No important text should be smaller than ~13px on mobile.
 * No text color should be washed out below 80% opacity.
 * ============================================================ */

/* ── A. "All We Offer" Category Grid Cards ── */
/* Card titles: from 11px to 13px mobile, 14px desktop */
.popular-rental-card .font-display.font-black[class*="tracking-wider"] {
    font-size: 13px !important;
    color: #1B1B1B !important;
}
@media (min-width: 640px) {
    .popular-rental-card .font-display.font-black[class*="tracking-wider"] {
        font-size: 14px !important;
    }
}
/* Card descriptions: from 9-10px & 60% opacity → 12px & 85% */
.popular-rental-card p[class*="text-moss"] {
    font-size: 12px !important;
    color: rgba(27, 27, 27, 0.85) !important;
    line-height: 1.45 !important;
}
/* Track header labels (Individual Hire, Occasion Packages, etc.) */
section h4[class*="tracking-widest"][class*="text-moss"] {
    font-size: 13px !important;
}

/* ── B. Popular Rentals Strip Cards ── */
/* "From KSh 500" label: from 11px/50% → 13px/80% */
.popular-rental-card .border-t span[class*="text-moss\\/50"],
.popular-rental-card .border-t span[class*="text-moss/50"] {
    font-size: 13px !important;
    color: rgba(27, 27, 27, 0.8) !important;
}
/* "Shop Tables →" link: from 11px → 13px */
.popular-rental-card .border-t a[class*="font-bold"] {
    font-size: 13px !important;
}
/* Featured slide "Featured item" label: keep small but boost to 10px */
.popular-rental-card .popular-slide span[class*="tracking-widest"] {
    font-size: 10px !important;
}

/* ── C. Trust / USP Strip ── */
/* Desktop: subtitle descriptions from 12px/60% → 13px/85% */
section[class*="border-b"] p[class*="text-moss\\/60"],
section[class*="border-b"] p[class*="text-moss/60"] {
    font-size: 13px !important;
    color: rgba(27, 27, 27, 0.85) !important;
}
/* Mobile trust badge titles: from 11px → 13px */
.marquee-track h4[class*="text-moss"],
div[class*="icon-badge"] + div h4[class*="text-moss"] {
    font-size: 13px !important;
}
/* Mobile trust descriptions: from 9px/60% → 11px/80% */
.marquee-track p[class*="text-moss"],
div[class*="icon-badge"] ~ p[class*="text-moss"] {
    font-size: 11px !important;
    color: rgba(27, 27, 27, 0.8) !important;
}

/* ── D. Section Headers (output by section_header() function) ── */
/* Eyebrow text: from 11px → 12px */
span[class*="tracking-widest"][class*="text-sage-dark"] {
    font-size: 12px !important;
}
/* Section description: from text-moss/70 → text-moss/88 */
div[data-aos] > p[class*="text-moss"][class*="leading-relaxed"] {
    color: rgba(27, 27, 27, 0.88) !important;
    font-size: 0.9375rem !important; /* 15px */
}

/* ── E. Hero Section ── */
/* Hero subtitle: ensure at least 14px on mobile */
.cta-parallax-container p[class*="text-white"],
section[class*="relative"] > div p[class*="text-white\\/95"] {
    font-size: 14px !important;
}
@media (min-width: 768px) {
    .cta-parallax-container p[class*="text-white"],
    section[class*="relative"] > div p[class*="text-white\\/95"] {
        font-size: 15px !important;
    }
}
/* Hero CTA buttons: from 12px → 13px */
.cta-parallax-container a[class*="font-bold"][class*="rounded-xl"] {
    font-size: 13px !important;
}
/* Hero feature list items: from 11px → 13px */
ul[class*="text-white"] li,
ul[class*="text-\\[11px\\]"] {
    font-size: 13px !important;
}

/* ── F. Horizontal Tab Navigation (Shop Page) ── */
/* Tab buttons: 20% bigger (from 9.5px → 12px mobile, 12px → 14.5px desktop) */
.shop-tab-btn {
    font-size: 12px !important;
    padding: 8px 16px !important;
}
@media (min-width: 640px) {
    .shop-tab-btn {
        font-size: 14px !important;
        padding: 9px 22px !important;
    }
}
/* Active tab: GREEN instead of plum */
.shop-tab-btn.active {
    background-color: #16A34A !important;
    border-color: #16A34A !important;
    color: #fff !important;
}
.shop-tab-btn:not(.active):hover {
    border-color: #16A34A !important;
    color: #16A34A !important;
}

/* ── G. Shop Product Cards (catalog-card) ── */
/* Card badge (HIRE / PACKAGE): from 9px → 11px */
.catalog-card span[class*="tracking-widest"][class*="text-champagne-dark"] {
    font-size: 11px !important;
}
/* Card title: ensure at least 13px mobile, 15px desktop */
.catalog-card h3.font-display {
    font-size: 13px !important;
}
@media (min-width: 640px) {
    .catalog-card h3.font-display {
        font-size: 15px !important;
    }
}
/* Card description: from 12px/70% → 13px/85% */
.catalog-card p[class*="text-moss"] {
    font-size: 13px !important;
    color: rgba(27, 27, 27, 0.85) !important;
}
/* Rate label: from 10px/65% → 12px/85% */
.catalog-card span[class*="text-moss"][class*="tracking-wider"] {
    font-size: 12px !important;
    color: rgba(27, 27, 27, 0.85) !important;
}
/* Pricing label prefix (e.g. "starting"): from 7-8px/65% → 10px/80% */
.catalog-card span[class*="text-moss\\/65"],
.catalog-card span[class*="text-moss/65"] {
    font-size: 10px !important;
    color: rgba(27, 27, 27, 0.8) !important;
}
/* Price itself: ensure at least 13px mobile */
.catalog-card span.font-display.font-black {
    font-size: 13px !important;
}
@media (min-width: 640px) {
    .catalog-card span.font-display.font-black {
        font-size: 16px !important;
    }
}
/* Add to Quote button: from 10px → 12px mobile, 13px desktop */
.catalog-card .add-to-list-btn,
.catalog-card a[class*="rounded-lg"][class*="font-bold"] {
    font-size: 12px !important;
}
@media (min-width: 640px) {
    .catalog-card .add-to-list-btn,
    .catalog-card a[class*="rounded-lg"][class*="font-bold"] {
        font-size: 13px !important;
    }
}
/* Qty input: ensure readable */
.catalog-card .card-qty-input {
    font-size: 13px !important;
    color: #1B1B1B !important;
}
/* Qty stepper buttons: full color */
.catalog-card .card-qty-minus-btn,
.catalog-card .card-qty-plus-btn {
    color: rgba(27, 27, 27, 0.7) !important;
    font-size: 16px !important;
}
/* Category badge on card image: from 8-9px → 10px */
.catalog-card .img-wrapper span[class*="tracking-wider"] {
    font-size: 10px !important;
}

/* ── H. "How It Works" Section (baseline - minor contrast fix) ── */
/* Swipe hint text: keep intentionally small (decorative) */
/* Body descriptions in step cards: from text-moss/75 → 90% */
section[class*="bg-cream"] .space-y-4 p[class*="text-moss"] {
    color: rgba(27, 27, 27, 0.9) !important;
}

/* ── I. Blog Cards ── */
/* Blog card text: ensure 13px minimum */
section a[class*="rounded"] h3,
section a[class*="rounded"] h4 {
    font-size: 14px !important;
}

/* ── J. Review Cards ── */
/* Review text: ensure readable */
section[class*="bg-cream"] blockquote,
section[class*="bg-cream"] p[class*="italic"] {
    font-size: 14px !important;
    color: rgba(27, 27, 27, 0.9) !important;
}

/* ── K. Navigation Sidebar Items ── */
/* Sidebar sub-items: from text-gray-400 → darker */
span[class*="text-gray-400"] {
    color: #6B7280 !important; /* gray-500 instead of 400 */
}

/* ── L. "View full catalogue" link ── */
a[class*="text-moss\\/50"],
a[class*="text-moss/50"] {
    color: rgba(27, 27, 27, 0.75) !important;
}

/* ── M. Results count and filter summary text ── */
#results-count {
    color: rgba(27, 27, 27, 0.7) !important;
    font-size: 13px !important;
}

/* ============================================================
 * GLOBAL CROSS-PAGE OVERRIDES
 * ============================================================
 * Covers: entertainment, category, catalogue, packages,
 * product, occasion, enquiry, blog, contact, search,
 * custom-package, package-detail — and any future pages.
 * ============================================================ */

/* ── N. Global: All Tab/Pill Navigation (entertainment, catalogue, search, etc.) ── */
/* Any rounded-full tab/pill with text-[9px] gets bumped to 12px/14px */
a[class*="rounded-full"][class*="tracking-wider"],
button[class*="rounded-full"][class*="tracking-wider"] {
    font-size: 12px !important;
}
@media (min-width: 640px) {
    a[class*="rounded-full"][class*="tracking-wider"],
    button[class*="rounded-full"][class*="tracking-wider"] {
        font-size: 14px !important;
    }
}
/* Inactive tab text: boost from moss/70 → moss/85 */
a[class*="rounded-full"][class*="text-moss\\/70"],
a[class*="rounded-full"][class*="text-moss/70"] {
    color: rgba(27, 27, 27, 0.85) !important;
}

/* ── O. Global: All Card Descriptions & Subtitles ── */
/* Any text-moss/60 or text-moss/50 paragraph or span = too faded */
p[class*="text-moss\\/60"], p[class*="text-moss/60"],
p[class*="text-moss\\/50"], p[class*="text-moss/50"],
span[class*="text-moss\\/50"], span[class*="text-moss/50"] {
    color: rgba(27, 27, 27, 0.82) !important;
}
p[class*="text-moss\\/65"], p[class*="text-moss/65"],
span[class*="text-moss\\/65"], span[class*="text-moss/65"] {
    color: rgba(27, 27, 27, 0.82) !important;
}
p[class*="text-moss\\/70"], p[class*="text-moss/70"] {
    color: rgba(27, 27, 27, 0.88) !important;
}
/* text-moss/40 = extremely faded → 70% */
*[class*="text-moss\\/40"]:not(i):not(svg),
*[class*="text-moss/40"]:not(i):not(svg) {
    color: rgba(27, 27, 27, 0.68) !important;
}
*[class*="text-moss\\/45"]:not(i):not(svg):not(.animate-pulse),
*[class*="text-moss/45"]:not(i):not(svg):not(.animate-pulse) {
    color: rgba(27, 27, 27, 0.7) !important;
}
/* text-moss/30 on icons/chevrons = decorative, keep subtle but boost slightly */
i[class*="text-moss\\/30"], i[class*="text-moss/30"] {
    color: rgba(27, 27, 27, 0.45) !important;
}

/* ── P. Global: text-gray-400 → gray-500 (better contrast) ── */
*[class*="text-gray-400"],
*[class*="text-slate-400"] {
    color: #6B7280 !important; /* gray-500 */
}
*[class*="text-gray-300"]:not(.cursor-not-allowed) {
    color: #9CA3AF !important; /* gray-400 */
}

/* ── Q. Global: Small Pixel Sizes Floor ── */
/* Bump text-[9px] elements to at least 11px (except icons) */
*[class*="text-\\[9px\\]"]:not(i):not(svg):not(.animate-pulse):not([class*="chevron"]) {
    font-size: 11px !important;
}
/* Bump text-[9.5px] to 12px */
*[class*="text-\\[9\\.5px\\]"]:not(i):not(svg) {
    font-size: 12px !important;
}
/* Bump text-[10px] elements to at least 12px (except icons) */
*[class*="text-\\[10px\\]"]:not(i):not(svg):not(.soc-strip-icon-sm):not([class*="chevron"]) {
    font-size: 12px !important;
}
/* Bump text-[10.5px] to 12px */
*[class*="text-\\[10\\.5px\\]"]:not(i):not(svg) {
    font-size: 12px !important;
}
/* Bump text-[11px] elements to at least 13px (except icons) */
*[class*="text-\\[11px\\]"]:not(i):not(svg):not(.soc-strip-icon-sm) {
    font-size: 13px !important;
}

/* ── R. Form Labels (contact, enquiry, custom-package) ── */
/* Form labels with text-[10px] tracking-widest → 12px + stronger color */
label[class*="tracking-widest"] {
    font-size: 12px !important;
}
label[class*="text-moss\\/60"], label[class*="text-moss/60"],
label[class*="text-moss\\/40"], label[class*="text-moss/40"] {
    color: rgba(27, 27, 27, 0.75) !important;
}

/* ── S. Product Page: Breadcrumbs & Pricing ── */
/* Breadcrumb links with text-[10px] already covered by Q */
/* Price labels: ensure "Hire Rate" text is visible */
span[class*="text-cream\\/55"], span[class*="text-cream/55"] {
    color: rgba(250, 245, 235, 0.8) !important;
}

/* ── T. Entertainment / Catalogue Card Descriptions ── */
/* Card body text-[11px]/text-moss/50 → 13px/82% */
div[class*="catalog"] p[class*="line-clamp"],
div[class*="group"] p[class*="line-clamp"] {
    font-size: 13px !important;
    color: rgba(27, 27, 27, 0.82) !important;
}
/* "Add to Quote" buttons: floor at 12px */
.add-to-list-btn {
    font-size: 12px !important;
}
@media (min-width: 640px) {
    .add-to-list-btn {
        font-size: 13px !important;
    }
}

/* ── U. Blog Post: Breadcrumb & Metadata ── */
/* Blog breadcrumbs with text-white/60 → 75% */
nav[class*="text-white\\/60"], nav[class*="text-white/60"] {
    color: rgba(255, 255, 255, 0.8) !important;
}
/* Blog metadata text-[11px] already handled by Q */
/* Blog "Join Our Community" type labels */
div[class*="text-white\\/35"], div[class*="text-white/35"] {
    color: rgba(255, 255, 255, 0.6) !important;
}
p[class*="text-white\\/40"], p[class*="text-white/40"] {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
}

/* ── V. Enquiry Page: Step Indicators & Form ── */
/* Step indicator text: from text-moss/45 → 70% */
/* Already covered by global O section */
/* Mobile tab buttons in enquiry */
button[class*="text-moss\\/65"], button[class*="text-moss/65"] {
    color: rgba(27, 27, 27, 0.82) !important;
}

/* ── W. Search Page ── */
/* Search result count: from text-moss/50 → 80% */
/* Already covered by O */
/* Search filter tabs: text-xs already reasonable at 12px, just ensure contrast */
a[class*="border-b-2"][class*="text-moss\\/55"],
a[class*="border-b-2"][class*="text-moss/55"] {
    color: rgba(27, 27, 27, 0.78) !important;
}

/* ── X. Packages / Occasion Pages ── */
/* Package card pricing labels & descriptions share same patterns */
/* All already covered by O, P, Q global rules */

/* ── Y. White Text on Dark Backgrounds (global) ── */
/* text-white/50 → 72% for any non-decorative element */
*[class*="text-white\\/50"]:not(i):not(svg):not(.pattern-bg),
*[class*="text-white/50"]:not(i):not(svg):not(.pattern-bg) {
    color: rgba(255, 255, 255, 0.72) !important;
}
/* text-white/30 = mostly separators/decorative, subtle boost */
span[class*="text-white\\/30"], span[class*="text-white/30"] {
    color: rgba(255, 255, 255, 0.5) !important;
}