/* =======================================================
   El Tayeb Modern Elevators - Premium Light Mode Overrides
   ======================================================= */

:root {
    /* Light Mode Palette */
    --color-bg: #FCFAF7; /* Luxury warm champagne off-white */
    --color-surface: #FFFFFF; /* Clean pure white for cards */
    --color-surface-light: #F4F1EA; /* Warm soft sand for inputs and secondary backgrounds */
    --color-text: #2D2D30; /* Deep charcoal/anthracite for readable text */
    --color-text-muted: #555559; /* Muted dark grey for descriptions and metadata */
    --color-gold: #F2C94C; /* Normal bright yellow */
    --color-gold-dim: rgba(242, 201, 76, 0.1);
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Loader fixes for Light Mode */
.loader-inverted {
    background-color: #111113 !important; /* Start black */
}

.loader-original {
    background-color: #FCFAF7 !important; /* Bloom white / champagne */
}

.loader-original .loader-logo,
.loader-inverted .loader-logo {
    filter: none !important; /* No filters, show original colors of the SVG logo */
}

.loader-logo {
    /* Logo size matches dark mode */
}

/* Noise overlay opacity reduction for cleaner light backgrounds */
.noise-overlay {
    opacity: 0.015 !important;
}

/* Header */
.header {
    background: rgba(252, 250, 247, 0.92) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 1rem 0 !important; /* Reduce vertical padding to keep header height compact with larger logo */
}

.logo-img {
    height: 56px !important; /* Make the light SVG logo larger to match the dark mode image's presence */
}

/* Button & Trigger Text Colors (Force readability) */
.btn-submit,
.btn-menu,
.btn-primary,
.lang-selector-trigger {
    color: #111113 !important; /* Elegant dark text on yellow/gold base */
}

/* Hero Section Image Visibility - Preventing washed-out look */
.hero-image-wrapper img {
    opacity: 0.2 !important; /* 0.6 opacity with NO gradients, fully covered */
    filter: brightness(1.1) contrast(0.9) saturate(0.95) !important;
    object-position: center center !important; /* Fully covered/centered */
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.hero-overlay {
    display: none !important; /* Remove overlay on desktop so the gear remains 100% crisp */
}

/* Explicit colors & contrast settings for Hero Text */
.hero-badge {
    background: rgba(163, 127, 26, 0.15) !important;
    color: #A37F1A !important;
    border: 1px solid rgba(163, 127, 26, 0.25) !important;
}

.hero-title .line-inner {
    color: #2D2D30 !important; /* Force elegant dark charcoal top line */
}

.hero-title .line-inner.accent {
    color: #A37F1A !important; /* Force high-contrast deep luxury gold bottom line */
}

/* Add protective subtle ambient halo/shadow to hero text elements to ensure readability over gear background */
.hero-title, .hero-title * {
    text-shadow: 0 0 35px var(--color-bg), 0 0 15px var(--color-bg), 0 0 5px rgba(252, 250, 247, 0.6) !important;
}

.hero-subtitle {
    color: #555559 !important; /* Force dark grey description text */
    text-shadow: 0 0 25px var(--color-bg), 0 0 10px var(--color-bg) !important;
}

@media (max-width: 991px) {
    .hero-image-wrapper img {
        opacity: 0.2 !important;
        filter: brightness(1.1) contrast(0.9) saturate(0.95) !important;
        object-position: center bottom !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

/* Partner Brands Marquee */
.marquee-section {
    background: #F4F1EA !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.flip-card-front {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.flip-card-back {
    background: #F4F1EA !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
}

/* About Stats Divider */
.about-stats {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Brand Cards Deep Section */
.brand-card {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.brand-card:hover {
    background: rgba(212, 175, 55, 0.04) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}

/* Products Section Subtle Gradient */
.products::before {
    background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 70%) !important;
}

/* Product Cards */
.product-card {
    background: var(--color-surface) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

.product-card:hover {
    border-color: rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.12) !important;
}

.product-card-bg {
    background: radial-gradient(circle at 100% 100%, rgba(212, 175, 55, 0.1), transparent 60%) !important;
}

.product-number {
    opacity: 0.4 !important;
    color: var(--color-gold) !important;
}

.product-arrow {
    color: #111113 !important; /* Dark arrow on gold background */
}

/* Product 3D Images - Removing luminosity blend mode which ghosts the image in light mode */
.product-3d-img {
    mix-blend-mode: normal !important; /* Full, crisp rendering */
    opacity: 0.95 !important;
    filter: drop-shadow(-8px 12px 16px rgba(0, 0, 0, 0.15)) !important;
}

.product-card:hover .product-3d-img {
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

/* Products Features Banner */
.products-features-banner {
    background: var(--color-surface) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

/* Text Ticker Bar */
.text-ticker-bar {
    color: #111113 !important; /* Force dark text on gold bar */
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.ticker-content span {
    color: #111113 !important;
}

/* Custom CTA Box */
.custom-cta-box {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04) !important;
}

.custom-cta-bg {
    opacity: 0.2 !important; /* 0.2 opacity, no gradients, fully covered */
    filter: brightness(1.1) contrast(0.9) saturate(0.95) !important;
    object-position: center center !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.custom-cta-overlay {
    display: none !important; /* No gradient overlay */
}

.custom-cta-content h2 {
    color: #2D2D30 !important; /* Dark charcoal */
}

.custom-cta-content h2 .text-gold {
    color: var(--color-gold) !important; /* Normal yellow */
}

.custom-cta-content p {
    color: #555559 !important; /* Dark grey for optimal contrast */
}

/* Light text shadow protection for custom CTA */
.custom-cta-content h2,
.custom-cta-content h2 *,
.custom-cta-content p {
    text-shadow: 0 0 30px #FFFFFF, 0 0 15px rgba(255, 255, 255, 0.9) !important;
}

@media (max-width: 767px) {
    .custom-cta-bg {
        opacity: 0.2 !important;
        filter: brightness(1.1) contrast(0.9) saturate(0.95) !important;
        object-position: center bottom !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

/* Timeline Pipeline Step */
.step-content {
    background: var(--color-surface) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

/* Bento Grid */
.bento-item {
    background: var(--color-surface) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

.bento-item:hover {
    border-color: rgba(212, 175, 55, 0.3) !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

.bento-image img {
    opacity: 0.8 !important; /* mostly opaque */
    filter: brightness(1.0) contrast(1.0) saturate(0.95) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 85%) !important;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 85%) !important;
}

.bento-item:hover .bento-image img {
    opacity: 1 !important;
}

/* Ensure images are full-bleed on all cards */
.bento-large .bento-image,
.bento-medium .bento-image,
.bento-item .bento-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 85%) !important;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 85%) !important;
}

.bento-large::after,
.bento-medium::after,
.bento-item::after {
    display: none !important; /* No gradient overlay */
}

.bento-tag {
    color: var(--color-gold) !important;
}

.bento-item h3 {
    color: #2D2D30 !important;
}

.bento-item p {
    color: #555559 !important;
}

/* Subtle glow to protect text on cards just in case */
.bento-content h3,
.bento-content h3 *,
.bento-content p {
    text-shadow: 0 0 20px var(--color-surface), 0 0 8px var(--color-surface) !important;
}

/* Contact Section Wrapper */
.contact-wrapper {
    background: var(--color-surface) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03) !important;
}

.contact-item-icon {
    background: var(--color-surface-light) !important;
}

.input-group input,
.input-group textarea {
    background: var(--color-surface-light) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: var(--color-text) !important;
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: var(--color-gold) !important;
}

/* Footer Section */
.footer {
    background: var(--color-surface-light) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Desktop Dropdown for Languages */
.lang-dropdown {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.lang-option:hover {
    background: rgba(212, 175, 55, 0.08) !important;
}

.lang-option.active {
    background: rgba(212, 175, 55, 0.12) !important;
}

/* Mobile Drawers */
@media (max-width: 991px) {
    .nav {
        background: rgba(252, 250, 247, 0.98) !important;
        border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    .nav-link {
        color: var(--color-text) !important;
    }
}

.lang-drawer {
    background: rgba(252, 250, 247, 0.98) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.lang-drawer-option {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: var(--color-text) !important;
}

.lang-drawer-close {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--color-text) !important;
}

/* Modal Dialogs */
.modal-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
}

.modal-container {
    background: var(--color-surface) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15) !important;
}

.modal-close {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--color-text) !important;
}

.modal-image {
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.06), transparent 70%) !important;
}

/* Product Flip Cards Light Theme */
.product-card-front {
    background: #ffffff;
    border-color: rgba(0,0,0,0.05);
}
.product-card-back {
    background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
    border: 1px solid var(--color-gold) !important;
    color: var(--color-text) !important;
}
.product-card-back .product-desc {
    color: var(--color-text) !important;
}

.product-card-back ul li { color: #333 !important; }

@media (max-width: 991px) {
    .about-image-wrapper {
        height: auto !important;
        display: block !important;
    }
}