/* AutoPartsX Comprehensive Visibility Fixes */

/* ===================================
   CRITICAL VISIBILITY FIXES
   =================================== */

/* Ensure all buttons are visible with proper contrast */
button,
.btn,
a.btn,
a[class*="bg-gradient"] {
    position: relative;
    z-index: 10;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force visibility on gradient buttons */
.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-bl,
.bg-gradient-to-tr,
.bg-gradient-to-tl {
    position: relative;
    z-index: 10;
}

/* Ensure button text is always visible */
.bg-gradient-to-r *,
.bg-gradient-to-br *,
.bg-gradient-to-bl *,
.bg-gradient-to-tr *,
.bg-gradient-to-tl * {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 11;
}

/* Fix for "Experience Complete Ecosystem" button */
a[href*="demo.comprehensive"] {
    position: relative !important;
    z-index: 100 !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

a[href*="demo.comprehensive"] * {
    color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Fix icon visibility in buttons */
.bg-gradient-to-r i,
.bg-gradient-to-br i,
button i,
.btn i,
a[class*="bg-gradient"] i {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    margin-right: 0.75rem;
}

/* ===================================
   CARD VISIBILITY FIXES
   =================================== */

/* Ensure all cards are visible */
.card,
[class*="rounded-xl"],
[class*="rounded-2xl"],
[class*="rounded-3xl"] {
    position: relative;
    z-index: 5;
    background-clip: padding-box;
}

/* Fix white/light backgrounds with proper contrast */
.bg-white\/10,
.bg-white\/20,
.bg-white\/30 {
    background-color: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Ensure text in semi-transparent cards is visible */
.bg-white\/10 *,
.bg-white\/20 *,
.bg-white\/30 * {
    color: inherit;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Fix for cards on dark backgrounds */
.bg-gradient-to-br.from-slate-900 .bg-white\/10,
.bg-gradient-to-br.from-slate-900 .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ===================================
   TEXT CONTRAST FIXES
   =================================== */

/* Ensure headings are always visible */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-rendering: optimizeLegibility;
}

/* Fix white text on dark backgrounds */
.text-white {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Fix light text colors */
.text-slate-300 {
    color: #cbd5e1 !important;
}

.text-slate-400 {
    color: #94a3b8 !important;
}

/* Ensure text on gradient backgrounds is visible */
.bg-gradient-to-br.from-slate-900 h1,
.bg-gradient-to-br.from-slate-900 h2,
.bg-gradient-to-br.from-slate-900 h3,
.bg-gradient-to-br.from-slate-900 h4,
.bg-gradient-to-br.from-slate-900 p {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===================================
   ICON VISIBILITY FIXES
   =================================== */

/* Ensure all icons are visible */
i.fas,
i.far,
i.fab,
.fa,
.fa-solid,
.fa-regular {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit;
    line-height: 1;
    vertical-align: middle;
}

/* Fix icon colors on gradient backgrounds */
.bg-gradient-to-r i.fas,
.bg-gradient-to-br i.fas,
button i.fas {
    color: #ffffff !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* Icon sizes */
.text-4xl {
    font-size: 2.25rem !important;
}

.text-3xl {
    font-size: 1.875rem !important;
}

.text-2xl {
    font-size: 1.5rem !important;
}

/* ===================================
   LINK VISIBILITY FIXES
   =================================== */

/* Ensure all links are visible */
a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

/* Fix for inline-flex links */
a.inline-flex {
    display: inline-flex !important;
    align-items: center;
    gap: 0.75rem;
}

/* Gradient button links */
a.bg-gradient-to-r,
a.bg-gradient-to-br {
    color: #ffffff !important;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

a.bg-gradient-to-r:hover,
a.bg-gradient-to-br:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ===================================
   OPACITY & VISIBILITY OVERRIDES
   =================================== */

/* Force visibility on critical elements */
button:not([hidden]),
a:not([hidden]),
.card:not([hidden]),
[class*="bg-gradient"]:not([hidden]) {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Remove any accidental hidden states */
[style*="display: none"],
[style*="visibility: hidden"],
[style*="opacity: 0"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===================================
   Z-INDEX MANAGEMENT
   =================================== */

/* Proper layering */
.z-auto {
    z-index: auto;
}

.z-0 {
    z-index: 0;
}

.z-5 {
    z-index: 5;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.z-100 {
    z-index: 100;
}

/* Ensure buttons are above other content */
button,
.btn,
a.btn,
a[class*="bg-gradient"] {
    z-index: 100;
}

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

/* Fix for Journey Cards */
.w-full.bg-gradient-to-r {
    display: block !important;
    text-align: center;
    padding: 0.75rem 1.5rem;
    color: #ffffff !important;
}

/* Fix for metric cards */
.bg-white.rounded-xl,
.bg-white.rounded-2xl {
    background-color: #ffffff !important;
    color: #1f2937;
    border: 1px solid #e5e7eb;
}

/* Fix for glass cards on dark backgrounds */
[class*="from-slate-900"] .bg-white\/10 h4,
[class*="from-slate-900"] .bg-white\/10 p {
    color: #ffffff !important;
}

/* ===================================
   GRADIENT OVERLAY FIXES
   =================================== */

/* Prevent gradients from obscuring content */
.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-bl {
    background-clip: border-box;
    -webkit-background-clip: border-box;
}

/* Ensure gradient text is visible */
.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* ===================================
   SHADOW ENHANCEMENTS
   =================================== */

/* Add shadows for better depth perception */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Text shadows for better legibility */
.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.text-shadow-lg {
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* ===================================
   HOVER STATE FIXES
   =================================== */

/* Ensure hover states don't break visibility */
button:hover,
a:hover,
.btn:hover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===================================
   RESPONSIVE VISIBILITY FIXES
   =================================== */

@media (max-width: 640px) {

    /* Ensure mobile elements are visible */
    button,
    .btn,
    a[class*="bg-gradient"] {
        font-size: 0.875rem;
        padding: 0.75rem 1.5rem;
    }

    /* Fix mobile card visibility */
    .card,
    [class*="rounded-xl"] {
        margin-bottom: 1rem;
    }
}

/* ===================================
   PRINT VISIBILITY
   =================================== */

@media print {

    /* Ensure elements are visible when printing */
    button,
    a,
    .card {
        opacity: 1 !important;
        visibility: visible !important;
        color: #000000 !important;
        background: #ffffff !important;
    }
}

/* ===================================
   DEBUGGING HELPERS
   =================================== */

/* Uncomment to debug invisible elements */
/*
[style*="opacity: 0"],
[style*="visibility: hidden"],
[style*="display: none"] {
    outline: 3px solid red !important;
    opacity: 0.5 !important;
    visibility: visible !important;
}
*/

/* ===================================
   FORCED VISIBILITY (Last Resort)
   =================================== */

/* Use !important to override any conflicting styles */
body button,
body a.btn,
body a[class*="bg-gradient"],
body .card,
body [class*="rounded-xl"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body a.inline-flex,
body button.inline-flex {
    display: inline-flex !important;
}

/* Ensure text content is always visible */
body button *,
body a.btn *,
body a[class*="bg-gradient"] * {
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
}

/* ===================================
   ACCESSIBILITY ENHANCEMENTS
   =================================== */

/* Ensure focus states are always visible */
*:focus,
*:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    opacity: 1 !important;
}

/* Skip link visibility */
.sr-only:focus {
    position: absolute;
    width: auto;
    height: auto;
    padding: 1rem;
    clip: auto;
    white-space: normal;
    background: #3b82f6;
    color: #ffffff;
    z-index: 9999;
}