/* --- Almashriq Premium Industrial Theme v3 (Glass & Glow) --- */


:root {
    /* Default Dark Mode Variables */
    --bg-dark: #050505;
    --bg-panel: #111111;
    --primary: #ff6600;
    /* Vibrant Orange */
    --primary-glow: rgba(255, 102, 0, 0.4);
    --secondary: #ffffff;
    --text-main: #ffffff;
    --text-muted: #f0f0f0;
    --text-inverse: #000000;
    --border-color: rgba(255, 255, 255, 0.15);
    --glass-bg: rgba(20, 20, 20, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --radius-sm: 8px;
    --radius-lg: 24px;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --nav-bg: rgba(5, 5, 5, 0.85);
    --footer-bg: #000;
    --card-hover-bg: rgba(255, 255, 255, 0.07);
    --input-bg: rgba(255, 255, 255, 0.05);
    /* Added for potential inputs */
}

[data-theme="light"] {
    --bg-dark: #f8f9fa;
    /* Light grey/white bg */
    --bg-panel: #ffffff;
    --primary: #ff6600;
    /* Keep orange */
    --primary-glow: rgba(255, 102, 0, 0.2);
    --secondary: #000000;
    /* Headings become black */
    --text-main: #000000;
    /* Main text black */
    --text-muted: #555555;
    --text-inverse: #ffffff;
    --border-color: rgba(0, 0, 0, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.85);
    /* Frosty white glass */
    --glass-border: rgba(0, 0, 0, 0.05);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --footer-bg: #1a1a1a;
    /* Keep footer dark for contrast, or make it light? User said "site in light mode", usually footers can be dark. I'll make it dark by default or I can make it light. Let's make it light for consistency with "all text black". Actually, a dark footer is common in light themes. I'll stick to dark footer for now to preserve design integrity unless it looks bad, but I'll make sure TEXT in footer is readable. Wait, user said "in light mode all text must be in black". This implies a white background. I will make the footer light too to be safe. */
    --footer-bg: #eeeeee;
    --card-hover-bg: rgba(0, 0, 0, 0.03);
    --input-bg: rgba(0, 0, 0, 0.05);
    /* Darker input bg for visibility */
}

/* Allow footer to stay dark in light mode if preferred, but for now enforcing light footer per 'all text black' somewhat implying full light theme. 
   Actually, let's override footer text in light mode just to be safe.
*/
[data-theme="light"] .main-footer {
    background-color: var(--footer-bg);
    color: var(--text-main);
}

[data-theme="light"] .main-footer .text-white {
    color: #000000 !important;
    /* Force black headings in footer */
}

[data-theme="light"] .main-footer .text-muted {
    color: #444444 !important;
}

[data-theme="light"] .main-footer .footer-link {
    color: #333333;
}

[data-theme="light"] .main-footer .footer-link:hover {
    color: var(--primary);
}

/* Better Light Mode Readability */
[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .form-control {
    background-color: var(--input-bg) !important;
    color: #000 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .feature-icon-box {
    background: rgba(255, 102, 0, 0.1);
    color: var(--primary);
}

[data-theme="light"] .text-muted {
    color: #666 !important;
}


body {
    background-color: var(--bg-dark);
    font-family: 'Cairo', sans-serif;
    color: var(--text-main);
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 500;
    overflow-x: hidden;
    margin: 0;
    transition: background-color 0.4s ease, color 0.4s ease;
    /* Smooth toggle */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Background pattern adjusted for light mode visibility? */
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 102, 0, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(255, 102, 0, 0.03) 0%, transparent 40%);
}

main {
    flex: 1;
    /* Pushes footer down */
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Typography --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--secondary);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 1rem;
    /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);  Remove fixed shadow, maybe add variable if needed */
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 {
    text-shadow: none;
    /* Cleaner look in light mode */
}


.display-title {
    font-size: 4rem;
    line-height: 1.1;
    /* text-shadow: 0 0 30px rgba(0, 0, 0, 0.5); */
}

[data-theme="dark"] .display-title {
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .display-title {
        font-size: 2.2rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    .section-padding {
        padding: 4rem 0;
    }

    .hero-wrapper {
        min-height: 70vh;
        margin-top: -70px;
        padding-top: 70px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        /* Single column on mobile */
        gap: 1.5rem;
    }

    .container {
        padding: 0 1.25rem;
    }

    .navbar-container {
        padding: 0.5rem 0;
    }
}

.text-gradient {
    background: linear-gradient(135deg, var(--text-main) 0%, var(--primary) 100%);
    /* Adjusted to use text-main for better contrast in light mode? Or keep white? lighter gradient might need adjustment */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Revert gradient for dark mode to ensure it pops */
:root:not([data-theme="light"]) .text-gradient {
    background: linear-gradient(135deg, #ffffff 0%, var(--primary) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* --- Layout Utilites --- */
.container {
    max-width: 1300px;
    padding: 0 1.5rem;
    margin: 0 auto;
}

.section-padding {
    padding: 6rem 0;
}

/* --- Components: Buttons --- */
.btn-glow {
    background: var(--primary);
    color: white;
    /* Always white text on orange button */
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: none;
    box-shadow: 0 10px 20px -5px var(--primary-glow);
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: inline-block;
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, var(--primary), #ff8533);
    z-index: -1;
    opacity: 0;
    transition: var(--transition);
}

.btn-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px var(--primary-glow);
    color: white;
}

.btn-glow:hover::before {
    opacity: 1;
}

.btn-glass {
    background: rgba(255, 255, 255, 0.05);
    /* Default for dark */
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    backdrop-filter: blur(5px);
}

[data-theme="light"] .btn-glass {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
    /* Black */
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-main);
    transform: translateY(-3px);
}

[data-theme="light"] .btn-glass:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* --- Components: Glass Card --- */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    transition: var(--transition);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    height: 100%;
    position: relative;
    overflow: hidden;
    color: var(--text-main);
}

.glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    /* Might need dark gradient for light mode */
}

[data-theme="light"] .glass-card::after {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}


.glass-card:hover {
    background: var(--card-hover-bg);
    border-color: rgba(255, 102, 0, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

/* --- Header / Navbar --- */
.navbar {
    background: var(--nav-bg);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-color);
    padding: 1.2rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.4s ease;
}

.nav-link {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-muted) !important;
    /* Use variable */
    position: relative;
    padding: 0.5rem 0;
    margin: 0 1rem;
}

[data-theme="light"] .nav-link {
    color: #555 !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: var(--text-main) !important;
    /* White in dark, Black in light */
}

/* Ensure hover also triggers white/black */
.nav-link:hover {
    color: var(--text-main) !important;
}


/* --- Hero Section --- */
.hero-wrapper {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('../images/hero-bg.png') center/cover no-repeat;
    margin-top: -85px;
    padding-top: 85px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.7), var(--bg-dark));
    z-index: 1;
}

[data-theme="light"] .hero-overlay {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), var(--bg-dark));
}


.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 2rem;
}

/* Force white text in hero for dark mode if background image is dark? 
   Actually if we use overlay, we control contrast. 
   Light mode overlay is white-ish, so text must be black.
   Dark mode overlay is dark, so text must be white.
   Our variables handle this via --text-main.
*/


/* --- Value Props (Floating Cards) --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: -100px;
    position: relative;
    z-index: 3;
    padding-bottom: 4rem;
}

.feature-icon-box {
    width: 70px;
    height: 70px;
    background: rgba(255, 102, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--primary);
    border: 1px solid rgba(255, 102, 0, 0.2);
}

/* --- Categories (Masonry-ish) --- */
.category-card-modern {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
}

.category-card-modern img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card-modern:hover img {
    transform: scale(1.05);
    filter: brightness(0.6);
}

/* In light mode, maybe don't darken as much? or keep consistent */

.cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    opacity: 0.9;
    transition: var(--transition);
}

/* Categories usually have text ON image, so keep white text there? 
   Yes, usually text on image overlays should remain white regardless of theme.
*/
.cat-title {
    font-size: 1.5rem;
    transform: translateY(0);
    transition: var(--transition);
    color: #ffffff;
    /* Always white on overlay */
}

.cat-arrow {
    opacity: 0;
    transform: translateX(10px);
    transition: var(--transition);
    color: var(--primary);
    font-size: 1.5rem;
}

.category-card-modern:hover .cat-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- Products Slider/Grid --- */
.product-grid-item {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.product-grid-item:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.product-thumb {
    height: 250px;
    background: #fff;
    /* Always white for product photos */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.product-thumb img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.product-info {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: right;
    direction: rtl;
}

.product-info .btn-glow {
    margin-top: auto;
}

/* --- Footer --- */
.main-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--border-color);
    padding: 5rem 0 2rem;
    margin-top: 5rem;
    transition: background-color 0.4s ease;
}

@media (max-width: 768px) {
    .main-footer {
        padding: 3rem 0 1.5rem;
        margin-top: 3rem;
        text-align: center;
        /* Center align footer on mobile */
    }

    .main-footer .col-6 {
        /* On very small screens, make links stack? Or keep 2 cols */
        /* Let's keep 2 cols but maybe center content */
    }

    .main-footer .text-muted.pe-lg-4 {
        padding-right: 0 !important;
        /* Remove desktop padding */
    }

    .main-footer .d-flex {
        justify-content: center;
        /* Center icons/text in contact section */
    }
}

.footer-link {
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.8rem;
    transition: var(--transition);
}

.footer-link:hover {
    color: var(--primary);
    padding-right: 8px;
}

/* --- Utilities --- */
.text-orange {
    color: var(--primary) !important;
}

.bg-dark-panel {
    background-color: var(--bg-panel);
}

.border-glow {
    border: 1px solid rgba(255, 102, 0, 0.3);
}

/* --- Mobile Menu --- */
/* Mobile styling managed in main media query block */

/* --- Breadcrumbs --- */
.breadcrumb-item a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--primary);
}

.breadcrumb-item.active {
    color: var(--text-main);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--text-muted);
}

/* --- Global Overrides for Text --- */
/* Form Controls (Default Dark Mode) */
.form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.form-control:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
    color: var(--text-main);
    box-shadow: 0 0 0 0.25rem rgba(255, 102, 0, 0.25);
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-white {
    color: var(--text-main) !important;
    /* Map .text-white to text-main so it flips to black in light mode */
}

/* Wait, Bootstrap .text-white is explicit. 
   If used for specific elements that MUST be white (like on dark buttons), this might break them.
   But user said "all text must be in black" in light mode.
   I should be careful about buttons/overlays.
   - .btn-glow (orange bg) -> text white (set explicitly in class)
   - hero overlay -> handled
   - cat overlay -> handled
   - glass card title -> uses .text-white ? 
   
   If I map .text-white to variable, it's safer for general layout text. 
   Buttons usually have their own color styles.
*/

.text-main {
    color: var(--text-main) !important;
}

.lead {
    color: var(--text-main);
    /* Was #ffffff */
    font-weight: 400;
}

/* Theme Toggle Button Style */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.2rem;
    margin-left: 1rem;
}

.theme-toggle-btn:hover {
    background: var(--card-hover-bg);
    color: var(--primary);
    border-color: var(--primary);
}

/* Details Page Alignment */
.detail-title {
    text-align: right;
    direction: rtl;
    color: var(--text-main);
    margin-bottom: 1rem;
    font-weight: 700;
}

.detail-container {
    text-align: right;
    direction: rtl;
}

/* Utility Animations */
.transition-all {
    transition: all 0.3s ease;
}

.hover-glass:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(-5px);
}
/* --- Mobile Sidebar (Offcanvas) --- */
.nav-link-mobile {
    transition: var(--transition);
    border: 1px solid transparent;
}

.nav-link-mobile:hover {
    background: rgba(255, 102, 0, 0.1);
    color: var(--primary) !important;
    border-color: rgba(255, 102, 0, 0.2);
}

.nav-link-mobile i {
    font-size: 1.2rem;
    color: var(--primary);
}

.offcanvas {
    width: 280px !important;
}

[data-theme="light"] .offcanvas {
    background-color: #ffffff !important;
    color: #000000 !important;
}

[data-theme="light"] .offcanvas .text-white {
    color: #000000 !important;
}

[data-theme="light"] .offcanvas-header {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .offcanvas .nav-link-mobile:hover {
    background: rgba(255, 102, 0, 0.05);
}

/* Fix close button in light mode */
[data-theme="light"] .btn-close-white {
    filter: none !important;
}

[data-theme="light"] #sidebar-close i {
    color: #000000 !important;
}