/* SHOP.HTML VISIBILITY FIX - Ensure all text is readable */

/* Fix header with proper Navy background and white text */
.header {
    background: var(--secondary-navy) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.logo-text,
.nav-links a,
.header a,
.header span,
.header p {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.nav-links a:hover {
    color: var(--accent-gold) !important;
}

/* Fix all service cards to have Navy background with white text */
.service-card,
.product-card,
.pricing-card,
.feature-card,
.card {
    background: var(--secondary-navy) !important;
    color: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 2px solid var(--accent-gold) !important;
}

.service-card *,
.product-card *,
.pricing-card *,
.feature-card *,
.card * {
    color: white !important;
}

/* Fix card headers */
.card-header,
.service-header,
.product-header {
    background: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    border-bottom: 2px solid var(--accent-gold) !important;
}

/* Fix card titles */
.card-title,
.service-title,
.product-title,
.service-card h2,
.service-card h3,
.product-card h2,
.product-card h3 {
    color: var(--accent-gold) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Fix descriptions and paragraphs */
.card-description,
.service-description,
.product-description,
.service-card p,
.product-card p,
.pricing-card p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Fix pricing text */
.price,
.pricing-amount,
.price-value {
    color: var(--accent-gold) !important;
    font-weight: bold !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.price-currency,
.price-period {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Fix feature lists */
.features li,
.feature-item,
.service-features li,
ul.features li {
    color: rgba(255, 255, 255, 0.9) !important;
}

.features li::before,
.feature-item::before {
    color: var(--accent-gold) !important;
}

/* Fix buttons */
.btn,
.button,
.cta-button {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #B8821F 100%) !important;
    color: white !important;
    border: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn:hover,
.button:hover,
.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(214, 158, 46, 0.4) !important;
}

/* Fix badges and labels */
.badge,
.label,
.tag {
    background: var(--accent-gold) !important;
    color: var(--secondary-navy) !important;
    font-weight: 600 !important;
}

/* Fix input fields and forms */
input,
textarea,
select {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border: 1px solid var(--accent-gold) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Fix footer */
.footer {
    background: var(--primary-navy) !important;
    color: white !important;
}

.footer a {
    color: var(--accent-gold) !important;
}

.footer a:hover {
    color: white !important;
}

/* Fix stats and numbers */
.stats-number,
.counter,
.stat-value {
    color: var(--accent-gold) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.stats-label,
.stat-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Fix section backgrounds */
.section,
.content-section {
    background: transparent !important;
}

/* Fix modals and overlays */
.modal-content,
.popup-content {
    background: var(--secondary-navy) !important;
    color: white !important;
    border: 2px solid var(--accent-gold) !important;
}

/* Fix tables */
.table,
table {
    background: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
}

.table th,
table th {
    background: var(--secondary-navy) !important;
    color: var(--accent-gold) !important;
    border-bottom: 2px solid var(--accent-gold) !important;
}

.table td,
table td {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Fix icons */
.icon,
.service-icon,
.feature-icon {
    color: var(--accent-gold) !important;
}

/* Fix breadcrumbs */
.breadcrumb {
    background: transparent !important;
}

.breadcrumb a {
    color: var(--accent-gold) !important;
}

.breadcrumb .active {
    color: white !important;
}

/* Fix alerts and notifications */
.alert {
    background: rgba(214, 158, 46, 0.1) !important;
    border: 1px solid var(--accent-gold) !important;
    color: white !important;
}

/* Fix progress bars */
.progress {
    background: rgba(255, 255, 255, 0.1) !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--accent-gold) 0%, #B8821F 100%) !important;
}

/* Fix tooltips */
.tooltip {
    background: var(--secondary-navy) !important;
    color: white !important;
    border: 1px solid var(--accent-gold) !important;
}

/* Ensure no transparent backgrounds causing visibility issues */
* {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Override any white backgrounds that might cause issues */
.bg-white,
.background-white,
[style*="background: white"],
[style*="background:#fff"],
[style*="background:#ffffff"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background:white"] {
    background: var(--secondary-navy) !important;
    color: white !important;
}

/* Fix any remaining white text on white background issues */
.text-white {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    .service-card,
    .product-card,
    .pricing-card,
    .card {
        background: var(--secondary-navy) !important;
        border: 2px solid var(--accent-gold) !important;
    }

    .mobile-menu {
        background: var(--secondary-navy) !important;
    }

    .mobile-menu a {
        color: white !important;
    }

    .hamburger span {
        background: white !important;
    }
}

/* High contrast mode for better accessibility */
@media (prefers-contrast: high) {
    * {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    }

    .service-card,
    .product-card,
    .card {
        border: 3px solid var(--accent-gold) !important;
    }
}

/* CRITICAL: Ensure all interactive elements are visible */
button,
a,
input,
textarea,
select,
.clickable,
[onclick],
[role="button"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Fix specific shop page elements */
.shop-header {
    background: var(--secondary-navy) !important;
    color: white !important;
}

.shop-categories {
    background: rgba(0, 0, 0, 0.3) !important;
}

.category-button {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border: 1px solid var(--accent-gold) !important;
}

.category-button.active,
.category-button:hover {
    background: var(--accent-gold) !important;
    color: var(--secondary-navy) !important;
}

.product-grid {
    background: transparent !important;
}

/* Ensure OYROPA branding is consistent */
.oyropa-gold {
    color: var(--accent-gold) !important;
}

.oyropa-navy {
    background: var(--secondary-navy) !important;
    color: white !important;
}