/* HI-GAIN Website Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Colors - Flare Inspired */
    --primary-red: #ff3e3e;
    --dark-red: #8a1c1c;
    --accent-red: #ff7676;
    --bg-dark: #000000;
    --bg-darker: #050505;
    --bg-card: rgba(20, 20, 20, 0.8);
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --border-color: rgba(255, 62, 62, 0.2);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.05);

    /* Fonts */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Roboto Mono', monospace;

    /* Availability Colors */
    --success-green: #10b981;
    --warning-yellow: #fbbf24;
    --danger-red: #ff3e3e;
    --secondary-red: var(--secondary-red);

    /* Spacing */
    --section-padding: 120px 5%;
    --container-max: 1400px;
    --neon-glow: 0 0 15px rgba(255, 62, 62, 0.4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    /* Subtle Grid Background */
    background-image:
        linear-gradient(rgba(255, 62, 62, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 62, 62, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
}

/* Container */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ===================
   NAVIGATION
=================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: calc(env(safe-area-inset-top, 0px) + 20px) 5% 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    background: rgba(10, 10, 10, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 15px 5%;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    /* Increased height for image */
}

.logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo:hover img {
    transform: scale(1.05);
}

.logo-text {
    /* Kept for fallback or SEO hidden text if we add it back */
    display: none;
}

/* Language Toggle Button */
.lang-toggle {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-right: 20px;
    /* Spacing from contact/other items */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.lang-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 62, 62, 0.2);
}

.lang-toggle.animate {
    animation: popScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popScale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Restored Navigation Styles */
.nav-links {
    display: flex;
    gap: 40px;
    list-style: none;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-primary);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-red);
    box-shadow: var(--neon-glow);
    transition: width 0.3s ease;
}

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

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    z-index: 2000;
    /* Ensure button is always clickable above menu */
}

.mobile-menu-btn span {
    width: 25px;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.3s ease;
}

/* ===================
   HERO SECTION
=================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    /* Transparent so video shows through */
    padding-top: 120px;
    padding-bottom: 60px;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Video layer */
    opacity: 0.5;
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
    /* Overlay on top of video */
    pointer-events: none;
}

/* Scanline Effect */
.hero-overlay::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.hero-content {
    text-align: center;
    z-index: 2;
    /* Content on top of overlay */
    padding: 0 20px;
    max-width: 900px;
    animation: fadeInUp 1s ease-out;
    position: relative;
    /* Required for z-index */
}

.hero h1 {
    font-family: var(--font-main);
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
    letter-spacing: -2px;
}

.hero h1 span {
    color: var(--primary-red);
    text-shadow: 0 0 30px rgba(255, 62, 62, 0.6);
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero-featured-video {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 40px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 62, 62, 0.3);
    background: #000;
    position: relative;
    z-index: 10;
}

.hero-featured-video video {
    width: 100%;
    height: auto;
    display: block;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 8px;
    /* Sharper corners */
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary {
    background: var(--primary-red);
    color: white;
    box-shadow: 0 0 20px rgba(255, 62, 62, 0.3);
}

.btn-primary:hover {
    background: var(--dark-red);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 62, 62, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-red);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    /* Start invisible */
    transform: translateY(30px);
    /* Start offset */
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-indicator svg {
    width: 30px;
    height: 30px;
    color: var(--text-secondary);
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* ===================
   SECTION STYLES
=================== */
section {
    padding: var(--section-padding);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 15px;
}

.section-header h2 span {
    color: var(--primary-red);
    text-shadow: var(--neon-glow);
}

.section-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ===================
   BRANDS SECTION
=================== */
.brands {
    background: var(--bg-darker);
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.brand-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.brand-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-red);
    box-shadow: var(--neon-glow);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.brand-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 50px rgba(255, 62, 62, 0.15);
}

.brand-card:hover::before {
    opacity: 1;
}

.brand-logo {
    height: 60px;
    margin-bottom: 25px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.brand-card:hover .brand-logo {
    opacity: 1;
}

.brand-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.brand-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* ===================
   TECHNOLOGY SECTION
=================== */
.technology {
    position: relative;
    background: linear-gradient(180deg, var(--bg-dark) 0%, #080202 100%);
    overflow: hidden;
}

.technology::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255, 62, 62, 0.05) 0%, transparent 60%);
    filter: blur(80px);
    z-index: 0;
}

.tech-showcase {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.tech-video-wrapper {
    width: 100%;
    max-width: 900px;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 62, 62, 0.2);
}

.tech-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 40%);
    pointer-events: none;
}

.tech-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 900px;
}

.tech-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.tech-feature-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary-red);
    box-shadow: 0 10px 30px rgba(255, 62, 62, 0.1);
}

.tech-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(255, 62, 62, 0.3));
}

.tech-feature-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.tech-feature-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ===================
   PRODUCTS SECTION
=================== */
.products {
    background: var(--bg-dark);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 40px rgba(255, 62, 62, 0.1);
}

.product-image {
    height: 250px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.product-image img {
    max-height: 200px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-share-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 5;
}

.product-share-btn:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    transform: translateY(0) scale(1.1);
}

.product-card:hover .product-share-btn,
.inventory-card:hover .product-share-btn {
    opacity: 1;
    transform: translateY(0);
}

.product-info {
    padding: 25px;
}

.product-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.product-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.spec-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spec-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-red);
    text-shadow: 0 0 10px rgba(255, 62, 62, 0.2);
}

/* ===================
   INVENTORY SECTION ("Data Terminal")
=================== */
.inventory {
    background: linear-gradient(180deg, var(--bg-dark) 0%, #0a0a0a 100%);
    position: relative;
}

.inventory::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-red), transparent);
    opacity: 0.5;
}

/* Inventory controls */
.inventory-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
    justify-content: flex-end;
    /* Align to right like tools */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-box input {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 10px rgba(255, 62, 62, 0.2);
    background: rgba(0, 0, 0, 0.8);
}

.search-box::before {
    content: '🔍';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    filter: grayscale(1);
    opacity: 0.7;
}

.filter-buttons {
    display: flex;
    gap: 5px;
}

.filter-btn {
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--font-mono);
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.filter-btn.active {
    background: rgba(255, 62, 62, 0.1);
    border-color: var(--primary-red);
    color: var(--primary-red);
    box-shadow: 0 0 10px rgba(255, 62, 62, 0.1);
}

/* Brand filter */
.brand-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}

.brand-btn {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-main);
}

.brand-btn:hover,
.brand-btn.active {
    background: var(--text-primary);
    color: var(--bg-dark);
    border-color: var(--text-primary);
}

/* Category filter */
.category-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}

.category-btn {
    padding: 6px 14px;
    border: 1px solid rgba(206, 17, 38, 0.2);
    border-radius: 20px;
    background: rgba(206, 17, 38, 0.05);
    color: var(--primary-red);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-main);
}

.category-btn:hover,
.category-btn.active {
    background: var(--primary-red);
    color: #fff;
    border-color: var(--primary-red);
}

/* Stats bar - HUD Syle */
.stats-bar {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-item {
    text-align: center;
    padding: 0 20px;
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1.2;
}

.stat-number.available {
    color: var(--success-green);
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.stat-number.low-stock {
    color: var(--warning-yellow);
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.stat-number.unavailable {
    color: var(--danger-red);
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* Inventory grid */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.inventory-card {
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}

.inventory-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-red);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.inventory-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.inventory-card-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.inventory-card:hover .inventory-card-image img {
    transform: scale(1.1);
}

.no-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.3;
}

.no-image-placeholder i {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* New Card Layout */
.card-top-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 5;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    pointer-events: none;
    /* Let clicks pass through to card */
}

.inventory-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    flex: 1;
    margin-right: 10px;
    line-height: 1.3;
}

.inventory-brand {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
    border-radius: 4px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.inventory-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card-info-left {
    display: flex;
    flex-direction: column;
}

.card-actions-right {
    position: relative;
    z-index: 10;
}

.add-to-cart-btn-compact {
    background: var(--primary-red);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 62, 62, 0.3);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.add-to-cart-btn-compact:hover {
    background: var(--dark-red);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 62, 62, 0.5);
}

.qty-selector {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.qty-selector button {
    background: transparent;
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 1rem;
}

.qty-selector span {
    width: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.inventory-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--font-mono);
    margin-top: 10px;
}

.inventory-status.available {
    color: var(--success-green);
}

.inventory-status.low-stock {
    color: var(--warning-yellow);
}

.inventory-status.unavailable {
    color: var(--danger-red);
    opacity: 0.6;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: relative;
}

.available .status-dot {
    background: var(--success-green);
    box-shadow: 0 0 5px var(--success-green);
}

.low-stock .status-dot {
    background: var(--warning-yellow);
    box-shadow: 0 0 5px var(--warning-yellow);
}

.unavailable .status-dot {
    background: var(--danger-red);
}

@keyframes pulse-dot {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.available .status-dot::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: inherit;
    z-index: -1;
    animation: pulse-dot 2s infinite;
}

/* Loading and no results */
.loading {
    text-align: center;
    padding: 60px 20px;
    grid-column: 1 / -1;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    grid-column: 1 / -1;
}

.no-results-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

/* ===================
   CONTACT SECTION
=================== */
.contact {
    background: var(--bg-darker);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* ===================
   SCROLL ANIMATIONS
=================== */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for grids */
.brands-grid .brand-card:nth-child(2) {
    transition-delay: 0.1s;
}

.brands-grid .brand-card:nth-child(3) {
    transition-delay: 0.2s;
}

.brands-grid .brand-card:nth-child(4) {
    transition-delay: 0.3s;
}

.products-grid .product-card:nth-child(2) {
    transition-delay: 0.1s;
}

.products-grid .product-card:nth-child(3) {
    transition-delay: 0.2s;
}


.contact-info h3 {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.contact-text h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.contact-text p,
.contact-text a {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.contact-text a:hover {
    color: var(--primary-red);
}

.map-container {
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.location-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

/* ===================
   FOOTER
=================== */
.footer {
    background: var(--bg-darker);
    border-top: 1px solid var(--border-color);
    padding: 40px 5%;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: 800;
}

.footer-logo span {
    color: var(--primary-red);
}

.footer-copyright {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    gap: 30px;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-red);
}

/* ===================
   WHATSAPP BUTTON
=================== */
.whatsapp-btn {
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom));
    /* QA-CHECK Phase 1 #9 - FIXED */
    right: 30px;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: all 0.3s ease;
    cursor: pointer;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
}

.whatsapp-btn svg {
    width: 30px;
    height: 30px;
    fill: white;
}

/* ===================
   MAP BUTTON
 =================== */
.map-btn {
    position: fixed;
    bottom: calc(100px + env(safe-area-inset-bottom));
    /* QA-CHECK Phase 1 #9 - FIXED */
    right: 30px;
    width: 60px;
    height: 60px;
    background: #4285F4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(66, 133, 244, 0.4);
    z-index: 999;
    transition: all 0.3s ease;
    cursor: pointer;
}

.map-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(66, 133, 244, 0.5);
}

.map-btn svg {
    width: 30px;
    height: 30px;
    fill: white;
}

@media (max-width: 768px) {
    .whatsapp-btn {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }

    .map-btn {
        bottom: 80px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
}

/* ===================
   RESPONSIVE
=================== */
@media (max-width: 992px) {
    .nav-links {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 30px;
        gap: 20px;
        border-bottom: 1px solid rgba(255, 62, 62, 0.2);
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        font-size: 1.1rem;
        padding: 15px 0;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .mobile-menu-btn.active span:nth-child(1) {
        background-color: var(--primary-red) !important;
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
        background-color: var(--primary-red) !important;
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    section {
        padding: 60px 5%;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .inventory-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .inventory-card {
        aspect-ratio: 1 / 1;
    }

    .inventory-card-content {
        padding: 10px;
    }

    .inventory-name {
        font-size: 0.85rem;
    }

    .inventory-brand {
        font-size: 0.55rem;
        padding: 2px 6px;
    }

    .inventory-status {
        font-size: 0.7rem;
    }

    .inventory-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .filter-buttons {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-btn {
        font-size: 0.75rem;
        padding: 8px 12px;
    }

    .tech-video-wrapper {
        height: auto;
        aspect-ratio: 16/9;
    }

    .search-box {
        max-width: none;
    }

    .stats-bar {
        flex-direction: row;
        gap: 8px;
    }

    .stat-item {
        flex: 1;
        min-width: 80px;
        padding: 12px 8px;
    }

    .stat-number {
        font-size: 1.3rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

    .section-header p {
        font-size: 0.9rem;
    }

    .brand-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .brand-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .inventory-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .inventory-card {
        border-radius: 10px;
    }

    .inventory-card-content {
        padding: 8px;
    }

    .inventory-name {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .inventory-brand {
        font-size: 0.5rem;
        padding: 2px 4px;
    }

    .inventory-status {
        font-size: 0.65rem;
    }

    .status-dot {
        width: 5px;
        height: 5px;
    }

    .hero h1 {
        font-size: 1.6rem;
    }

    .stats-bar {
        gap: 5px;
    }

    .stat-item {
        padding: 10px 5px;
    }

    .stat-number {
        font-size: 1.1rem;
    }
}

/* ===================
   GLOBAL SEARCH BAR
=================== */
.global-search {
    margin-top: 40px;
    width: 100%;
    max-width: 700px;
}

.search-container {
    position: relative;
    width: 100%;
}

.global-search input {
    width: 100%;
    padding: 20px 60px 20px 30px;
    /* Added right padding for clear button */
    font-size: 1.05rem;
    border: 2px solid rgba(255, 62, 62, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    color: var(--text-primary);
    font-family: var(--font-main);
    transition: all 0.3s ease;
}

.global-search input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.95rem;
}

.global-search input:focus {
    outline: none;
    border-color: var(--primary-red);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(255, 62, 62, 0.2);
}

/* Clear Button */
.search-clear-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 62, 62, 0.2);
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-search input:not(:placeholder-shown)~.search-clear-btn {
    opacity: 1;
    pointer-events: all;
}

.search-clear-btn:hover {
    background: var(--primary-red);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 10px;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 62, 62, 0.2);
    border-radius: 12px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}

.search-results.active {
    display: block;
}

.search-result-item {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.search-result-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-red);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.selected {
    background: rgba(255, 62, 62, 0.1);
}

.search-result-item.selected::before,
.search-result-item:hover::before {
    opacity: 1;
}

.search-result-info {
    flex: 1;
}

.search-result-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-family: var(--font-main);
}

.search-result-brand {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.search-result-status {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.search-result-status.available {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-green);
}

.search-result-status.low-stock {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-yellow);
}

.search-result-status.unavailable {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-red);
}

/* Home Page Product Status Badges */
.product-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 5px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.product-status-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.product-status-badge.available {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-green);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.product-status-badge.available .status-dot {
    background: var(--success-green);
    box-shadow: 0 0 8px var(--success-green);
}

.product-status-badge.low-stock {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-yellow);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.product-status-badge.low-stock .status-dot {
    background: var(--warning-yellow);
    box-shadow: 0 0 8px var(--warning-yellow);
}

.product-status-badge.unavailable {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.product-status-badge.unavailable .status-dot {
    background: var(--danger-red);
}

.search-no-results {
    padding: 30px;
    text-align: center;
    color: var(--text-secondary);
}

.search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}

.search-tag {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-tag:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: white;
}

@media (max-width: 768px) {
    .global-search {
        max-width: 100%;
    }

    .global-search input {
        padding: 16px 20px;
        font-size: 1rem;
    }

    .search-tags {
        display: none;
    }
}

/* ===================
   PRODUCT MODAL
=================== */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    overflow-y: auto;
}

.modal-content {
    background: var(--bg-card);
    margin: 5% auto;
    padding: 40px;
    border: 1px solid var(--border-color);
    width: 90%;
    max-width: 800px;
    border-radius: 24px;
    position: relative;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    animation: modalScale 0.3s ease;
}

@keyframes modalScale {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.close-modal {
    position: absolute;
    right: 25px;
    top: 20px;
    color: var(--text-secondary);
    font-size: 2.2rem;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: var(--text-primary);
}

.modal-brand {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-red);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

#modalProductName {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 30px;
    line-height: 1.2;
}

.modal-specs {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    white-space: pre-wrap;
    background: rgba(255, 255, 255, 0.03);
    padding: 25px;
    border-radius: 16px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-specs strong {
    color: var(--text-primary);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .modal-content {
        margin: 10% auto;
        padding: 30px 20px;
        width: 95%;
    }

    #modalProductName {
        font-size: 1.5rem;
    }

    /* Stack buttons on mobile */
    .modal-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .modal-footer .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Ensure Modal is on top of everything */
.modal {
    z-index: 99999 !important;
}

/* Hide floating buttons when modal is open */
body.modal-open .whatsapp-btn,
body.modal-open .map-btn {
    display: none !important;
}

/* ===================
   MODAL IMAGE GALLERY
=================== */
.modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.modal-gallery {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-image {
    width: 100%;
    aspect-ratio: 4/3;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.main-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.thumbnail:hover,
.thumbnail.active {
    border-color: var(--primary-red);
    background: rgba(255, 255, 255, 0.1);
}

.thumbnail img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

@media (max-width: 992px) {
    .modal-body {
        grid-template-columns: 1fr;
    }
}

/* Updated: Sat Jan  3 17:30:08 EET 2026 */

/* ===================
   AUTHENTICATION UI
=================== */
.nav-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
}

.auth-buttons {
    display: flex;
    gap: 8px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Increased from 15px for better spacing */
}

.admin-links {
    display: flex;
    gap: 8px;
    margin-left: 10px;
    /* Better spacing from username */
    margin-right: 15px;
    /* More space before logout */
    padding-left: 15px;
    border-left: 1px solid var(--border-color);
}

/* Product Availability Link - Hidden on desktop, shown on mobile */
.mobile-availability-link {
    display: none;
}

.user-name {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-right: 5px;
    /* Ensure name doesn't touch icons */
}

.cart-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.cart-link:hover {
    background: rgba(255, 62, 62, 0.1);
    border-color: var(--primary-red);
}

.cart-count {
    background: var(--primary-red);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* ===================
   PRICE GATING
=================== */
.product-price {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-red);
    margin: 10px 0;
}

.price-hidden::before {
    content: "Login to see price";
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.price-hidden .price-value {
    display: none;
}

.price-visible .price-value {
    display: inline;
}

.add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-to-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 62, 62, 0.4);
}

/* ===================
   CART PAGE
=================== */
.cart-section {
    min-height: 100vh;
    padding: 120px 5% 60px;
}

.cart-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.cart-title span {
    color: var(--primary-red);
}

.empty-cart {
    text-align: center;
    padding: 60px 20px;
}

.empty-cart-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-cart h2 {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.empty-cart p {
    color: var(--text-muted);
    margin-bottom: 30px;
}

.cart-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto;
    gap: 20px;
    align-items: center;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

.cart-item-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 5px;
}

.cart-item-name {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.cart-item-brand {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.cart-item-price {
    color: var(--primary-red);
    font-family: var(--font-mono);
    font-weight: 600;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.qty-btn:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
}

.qty-value {
    font-weight: 600;
    min-width: 30px;
    text-align: center;
}

.cart-item-subtotal {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-primary);
}

.cart-item-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
}

.cart-item-remove:hover {
    color: var(--primary-red);
}

.cart-summary {
    position: sticky;
    top: 100px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 30px;
    height: fit-content;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--glass-border);
}

.summary-row span:last-child {
    color: var(--primary-red);
    font-family: var(--font-mono);
}

.summary-note {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.cart-summary .btn {
    width: 100%;
    margin-bottom: 10px;
}

.btn-lg {
    padding: 15px 30px;
    font-size: 1.1rem;
}

/* ===================
   TOAST NOTIFICATIONS
=================== */
.cart-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--bg-card);
    border: 1px solid var(--primary-red);
    border-radius: 12px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 62, 62, 0.2);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 9999;
}

.cart-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-icon {
    font-size: 1.5rem;
}

.toast-message {
    color: var(--text-primary);
    font-weight: 500;
}

/* Responsive Cart */
@media (max-width: 992px) {
    .cart-content {
        grid-template-columns: 1fr;
    }

    .cart-item {
        grid-template-columns: 60px 1fr;
        gap: 15px;
    }

    .cart-item-quantity,
    .cart-item-subtotal,
    .cart-item-remove {
        grid-column: 2;
    }
}

@media (max-width: 768px) {

    /* Fix Nav Auth Visibility on Mobile */
    .nav-auth {
        display: flex;
        gap: 8px;
        margin-left: auto;
        /* Push to right */
        margin-right: 15px;
        /* Space before burger */
        order: 1;
        /* Place before hamburger */
    }

    .mobile-menu-btn {
        order: 2;
        /* Force hamburger to far right */
    }

    .user-name {
        display: none;
        /* Hide name to save space */
    }

    .auth-buttons {
        display: flex;
        gap: 5px;
    }

    .btn-sm {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    /* Cart Link Adjustments */
    /* Cart Link Adjustments */
    .cart-link {
        padding: 6px;
        background: transparent;
        border: none;
    }

    .cart-link span:not(.cart-count) {
        display: none;
        /* Hide 'Shopping Cart' text if added dynamically */
    }

    /* Fix Logo Size on Mobile */
    .logo {
        height: 42px;
        /* Slightly larger and more visible */
    }

    /* Logout button and availability link cleanup */
    .user-info .btn-logout {
        /* Default style or handled by global app styles */
    }

    .mobile-availability-link {
        /* Default hidden */
        display: none;
    }

    /* Price Login Link */
    .product-price-login {
        margin: 10px 0;
    }

    .product-price-login a {
        color: var(--primary-red);
        font-size: 0.9rem;
        text-decoration: none;
        transition: opacity 0.2s;
    }

    .product-price-login a:hover {
        opacity: 0.8;
        text-decoration: underline;
    }

    /* Refresh: Mon Jan  5 19:45:00 EET 2026 */
    /* Cache Flush v12 */
    /* Force Redeploy Mon Jan  5 19:45:00 EET 2026 */

    /* ===================
   MOBILE TOUCH IMPROVEMENTS (iOS Safari)
=================== */

    /* Global touch-action for all buttons */
    button,
    .btn,
    a.btn,
    [role="button"] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Auth buttons - larger touch targets on mobile */
    @media (max-width: 768px) {
        .auth-buttons .btn {
            min-height: 44px;
            /* Apple's recommended minimum touch target */
            min-width: 80px;
            padding: 12px 16px;
            font-size: 0.9rem;
        }

        /* Ensure auth modal buttons have proper touch targets */
        .auth-modal .btn,
        .auth-modal button[type="submit"] {
            min-height: 48px;
            font-size: 1rem;
        }

        /* Modal close button - larger touch target */
        .auth-close {
            width: 44px;
            height: 44px;
            display: flex !important;
            align-items: center;
            justify-content: center;
            right: 10px !important;
            top: 10px !important;
        }

        /* Form inputs - iOS friendly */
        .auth-modal input {
            font-size: 1rem !important;
            /* Prevents iOS zoom on focus */
            min-height: 48px;
        }

        /* Link touch targets in modal */
        .auth-switch a,
        .forgot-wrapper a {
            padding: 8px 4px;
            display: inline-block;
        }
    }

    /* ========================================
   APP-SPECIFIC STYLES (Android App Only)
   These styles ONLY apply when .is-app class is present
   ======================================== */

    /* Hide web-only sections in the app */
    body.is-app .web-only,
    .is-app .web-only {
        display: none !important;
    }

    /* App-specific navbar adjustments */
    body.is-app .navbar {
        padding: 10px 5%;
    }

    /* Hide navigation links in app if they lead to web-only sections */
    body.is-app .nav-links li:not(:has(a[href*="availability"])) {
        display: none;
    }

    /* ========================================
   APP RED & WHITE THEME OVERRIDES
   ======================================== */
    body.is-app {
        /* Override CSS variables for app theme */
        --primary-red: #8B0000;
        --dark-red: #600000;
        --accent-red: #B71C1C;
        --bg-dark: #FFFFFF;
        --bg-darker: #F4F4F4;
        --bg-card: #FFFFFF;
        --text-primary: #111111;
        --text-secondary: #444444;
        --text-muted: #666666;
        --border-color: #E5E5E5;
        --glass-bg: rgba(255, 255, 255, 0.95);
        --glass-border: rgba(0, 0, 0, 0.1);
        --neon-glow: none;
        --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

        /* Clean white background for app */
        background-color: #FFFFFF;
        background-image: none;
        color: #111111;
    }

    /* App navbar styling */
    body.is-app .navbar {
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid #E5E5E5;
    }

    body.is-app .navbar .logo img {
        filter: none;
    }

    body.is-app .nav-links a {
        color: #111111;
    }

    body.is-app .nav-links a:hover {
        color: #8B0000;
    }

    /* App buttons */
    body.is-app .btn-primary {
        background: linear-gradient(135deg, #8B0000, #600000);
        border: none;
        color: #FFFFFF;
    }

    body.is-app .btn-primary:hover {
        background: linear-gradient(135deg, #600000, #400000);
    }

    body.is-app .btn-outline {
        border-color: #8B0000;
        color: #8B0000;
    }

    body.is-app .btn-outline:hover {
        background: #8B0000;
        color: #FFFFFF;
    }

    /* App cards */
    body.is-app .product-card,
    body.is-app .inventory-card {
        background: #FFFFFF;
        border: 1px solid #E5E5E5;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    body.is-app .product-card:hover,
    body.is-app .inventory-card:hover {
        border-color: #8B0000;
        box-shadow: 0 8px 30px rgba(139, 0, 0, 0.1);
    }

    /* FORCE App Navbar to be White (Overrides Inline Styles) */
    body.is-app .navbar[style],
    body.is-app .navbar {
        background: #FFFFFF !important;
        backdrop-filter: none !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05) !important;
    }

    /* Force Hamburger Lines to be Dark Black */
    body.is-app .mobile-menu-btn span {
        background-color: #000000 !important;
    }

    /* Force Nav Links to be Dark */
    body.is-app .nav-links {
        background: #FFFFFF !important;
    }

    body.is-app .nav-links li a {
        color: #000000 !important;
        font-weight: 500;
    }

    body.is-app .nav-links li a:hover,
    body.is-app .nav-links li a.active {
        color: #8B0000 !important;
        background: rgba(139, 0, 0, 0.05);
    }

    /* Ensure User Info/Auth is visible */
    body.is-app .user-info,
    body.is-app .user-name {
        color: #000000 !important;
    }

    /* =========================================
   NATIVE APP SPECIFIC STYLES (.is-app)
   Strict White & Red Theme | High Contrast
   ========================================= */

    body.is-app .web-only {
        display: none !important;
    }

    body.is-app {
        --bg-dark: #ffffff !important;
        --bg-darker: #ffffff !important;
        --bg-card: #ffffff !important;
        --text-primary: #000000 !important;
        --text-secondary: #000000 !important;
        --border-color: var(--secondary-red) !important;
        --glass-bg: none !important;
        --neon-glow: none !important;

        background-color: #ffffff !important;
        background-image: none !important;
        color: #000000 !important;
        padding-bottom: 80px !important;
        /* Space for bottom nav */
    }

    /* Typography Overrides - Force Black & Bold */
    body.is-app h1,
    body.is-app h2,
    body.is-app h3,
    body.is-app h4,
    body.is-app h5,
    body.is-app h6,
    body.is-app p,
    body.is-app span,
    body.is-app a,
    body.is-app button,
    body.is-app input,
    body.is-app label,
    body.is-app li {
        color: #000000 !important;
        font-weight: 700 !important;
        text-shadow: none !important;
    }

    /* 1. Navbar - White Bg, Red Text/Border */
    body.is-app .navbar {
        background: #ffffff !important;
        border-bottom: 2px solid var(--secondary-red) !important;
        box-shadow: none !important;
        padding-top: calc(env(safe-area-inset-top) + 20px) !important;
    }

    body.is-app .nav-link,
    body.is-app .navbar-brand {
        color: var(--secondary-red) !important;
    }

    /* 2. Modal - White Bg, Black Text, Red Border (Fixes Feedback #1) */
    body.is-app .modal-content {
        background-color: #ffffff !important;
        border: 2px solid var(--secondary-red) !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(206, 17, 38, 0.2) !important;
        color: #000000 !important;
    }

    body.is-app .modal-header,
    body.is-app .modal-footer {
        border-color: var(--secondary-red) !important;
        background-color: #ffffff !important;
    }

    body.is-app .close {
        color: var(--secondary-red) !important;
        opacity: 1;
        text-shadow: none !important;
    }

    /* Modal Inputs */
    body.is-app input.form-control {
        background-color: #ffffff !important;
        border: 2px solid var(--secondary-red) !important;
        color: #000000 !important;
    }

    /* 3. Product Cards - Remove Dark Styles (Fixes Feedback #3) */
    body.is-app .inventory-card,
    body.is-app .product-card,
    body.is-app .card {
        background: #ffffff !important;
        background-image: none !important;
        border: 2px solid var(--secondary-red) !important;
        box-shadow: none !important;
    }

    /* Fix remaining dark overlays in cards */
    body.is-app .inventory-card *,
    body.is-app .product-card * {
        background: transparent !important;
        /* Force transparent so white card bg shows */
        background-image: none !important;
        text-shadow: none !important;
    }

    /* Re-apply white text for Add to Cart only */
    body.is-app .add-to-cart-btn,
    body.is-app .add-to-cart-btn * {
        background-color: var(--secondary-red) !important;
        color: #ffffff !important;
    }

    /* 4. Buttons - Red Bg, White Text */
    body.is-app .btn-primary,
    body.is-app .add-to-cart-btn {
        background-color: var(--secondary-red) !important;
        color: #ffffff !important;
        border: none !important;
        font-weight: 800 !important;
        box-shadow: none !important;
        text-transform: uppercase;
    }

    /* 5. Bottom Navigation */
    .app-bottom-nav {
        display: none;
    }

    body.is-app .app-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        /* Increased height: 70px content + 34px minimum for home indicator area */
        height: calc(70px + max(34px, env(safe-area-inset-bottom, 34px)));
        background: #ffffff;
        border-top: 2px solid var(--secondary-red);
        z-index: 9999;
        justify-content: space-around;
        align-items: flex-start;
        padding-top: 12px;
        /* Add explicit bottom padding to push content up from home indicator */
        padding-bottom: calc(max(34px, env(safe-area-inset-bottom, 34px)));
    }

    body.is-app .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #000000;
        font-size: 0.75rem;
        font-weight: 800;
    }

    body.is-app .bottom-nav-item i {
        color: var(--secondary-red);
        margin-bottom: 4px;
        font-size: 1.25rem;
    }
}

/* Animation for Bottom Nav Items */
body.is-app .bottom-nav-item {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    /* Bouncy back */
    -webkit-tap-highlight-color: transparent;
    /* Remove default blue tap box */
    position: relative;
    overflow: hidden;
    /* Contain ripple */
}

body.is-app .bottom-nav-item:active {
    transform: scale(0.85) !important;
    transition: transform 0.1s ease-out !important;
    /* Quick compress */
}

/* Ripple Element */
body.is-app .bottom-nav-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    padding-bottom: 120%;
    /* Circle aspect ratio */
    background: radial-gradient(circle, rgba(206, 17, 38, 0.1) 0%, transparent 60%);
    transform: translate(-50%, -50%) scale(0);
    /* Start hidden */
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

body.is-app .bottom-nav-item:active::before {
    transform: translate(-50%, -50%) scale(1.5);
    /* Expand */
    opacity: 1;
    transition: transform 0s, opacity 0s;
    /* Instant on press */
}


/* Explicit Pop Animation Class */
@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.animate-pop {
    animation: pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Basket Shake Animation */
@keyframes basket-shake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.animate-basket-icon {
    animation: basket-shake 0.4s ease-in-out;
    color: var(--secondary-red);
    /* Briefly highlight red */
}

/* Confirmation Pulse Animation */
@keyframes confirm-pulse {
    0% {
        transform: scale(1);
        color: inherit;
    }

    50% {
        transform: scale(1.3);
        color: #28a745;
        text-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
    }

    100% {
        transform: scale(1);
        color: inherit;
    }
}

.animate-confirm-icon {
    animation: confirm-pulse 0.4s ease-in-out;
}


/* Quantity Selector Animation */
.qty-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #28a745;
    /* Success Green */
    color: white;
    border-radius: 25px;
    /* Pill shape */
    padding: 5px 10px;
    width: 100%;
    margin-top: 15px;
    height: 38px;
    /* Match typical btn height */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.2s ease-out;
}

.qty-btn-minus,
.qty-btn-plus {
    background: rgba(0, 0, 0, 0.1);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
    /* Reset padding */
    line-height: 1;
}

.qty-btn-minus:active,
.qty-btn-plus:active {
    background: rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
}

.qty-val {
    font-weight: bold;
    font-size: 1.1rem;
    flex-grow: 1;
    text-align: center;
}

/* Hide Admin Links in App (Fixes Feedback #4) */
body.is-app .admin-links {
    display: none !important;
}

/* Fix Logout Button Contrast (Red Outline) */
body.is-app .btn-logout {
    background-color: #ffffff !important;
    border: 2px solid var(--secondary-red) !important;
    color: var(--secondary-red) !important;
    font-weight: 800 !important;
}

body.is-app .btn-logout:hover {
    background-color: var(--secondary-red) !important;
    color: #ffffff !important;
}

/* --- UI Refinement: Fix Card Heights & Text Wrapping --- */

/* 1. Standardize "Contact for Price" to look like a button */
/* 1. Standardize "Contact for Price" to look like a button */
body.is-app .btn-contact-price-fixed {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 15px !important;
    padding: 10px !important;
    border-radius: 8px !important;
    border: 2px solid #e0e0e0 !important;
    background-color: #f8f9fa !important;
    color: #666666 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    box-sizing: border-box !important;
    height: 48px !important;
    /* Fixed height to match Add To Cart */
}

body.is-app .inventory-controls .filter-buttons {
    display: none !important;
}

/* 2. Fix Brand Filter Layout (No Scrolling) */
body.is-app .brand-filter {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: center !important;
    padding-bottom: 0 !important;
    gap: 10px !important;
}

/* 3. Fix Brand Filter Color (Red Selection) */
body.is-app .brand-btn.active,
body.is-app .brand-btn:hover {
    background: #8B0000 !important;
    color: #FFFFFF !important;
    border-color: #8B0000 !important;
}

body.is-app .search-box {
    margin-bottom: 0 !important;
    /* Remove gap since filters are gone */
}

body.is-app .inventory-controls {
    gap: 0 !important;
}

/* 2. Fix Product Title Wrapping */
body.is-app .product-card h3 {
    font-size: 0.95rem !important;
    /* Reduce from default */
    padding: 0 5px !important;
    /* Reduce side padding */
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    min-height: 2.6em;
    /* Ensure consistent 2-line height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. Single Column Layout for Native App */
body.is-app .inventory-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    padding: 0 10px !important;
}

/* Ensure uniform card height and spacing in list view */
body.is-app .inventory-card {
    display: flex;
    flex-direction: column;
    height: auto !important;
    /* Let content dictate height in list view, or keep fixed if we want uniformity */
    min-height: auto !important;
    aspect-ratio: unset !important;
}

/* Override absolute positioning for native app so flex layout works */
body.is-app .inventory-card-image {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Ensure Image Fits properly above button */
body.is-app .inventory-card-image img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 140px !important;
    /* Leave room for button */
    width: auto !important;
    max-width: 90% !important;
    z-index: 1 !important;
}

/* Add to Cart Button Styling in App */
body.is-app .add-to-cart-btn {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 0 4px 4px !important;
    position: relative !important;
    z-index: 10 !important;
    height: 48px !important;
}

body.is-app .inventory-card-content {
    position: relative !important;
    padding: 15px !important;
    background: #ffffff !important;
}

/* Price Display in Native App Product Cards */
body.is-app .product-price {
    color: var(--secondary-red) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    margin: 8px 0 !important;
    display: block !important;
}

body.is-app .product-price .price-value {
    color: var(--secondary-red) !important;
}

body.is-app .product-price-login {
    margin: 8px 0 !important;
    display: block !important;
}

body.is-app .product-price-login a {
    color: var(--secondary-red) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* Specific selectors for inventory card prices - higher specificity */
body.is-app .inventory-card .inventory-card-content .product-price {
    color: var(--secondary-red) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    margin: 8px 0 !important;
    display: block !important;
    visibility: visible !important;
}

body.is-app .inventory-card .inventory-card-content .product-price .price-value {
    color: var(--secondary-red) !important;
    display: inline !important;
    visibility: visible !important;
}

body.is-app .inventory-card .inventory-card-content .product-price-login {
    color: var(--secondary-red) !important;
    margin: 8px 0 !important;
    display: block !important;
}

body.is-app .inventory-card .inventory-card-content .product-price-login a {
    color: var(--secondary-red) !important;
    font-weight: 600 !important;
}

/* 6. Fix Floating Icons - Map & WhatsApp */
/* BUT Keep Map Button and Restore WhatsApp Button above it */

body.is-app .mobile-availability-link,
body.is-app .cart-link {
    display: none !important;
}

/* Ensure Auth Modal Backdrop is not too dark or is white if requested? 
   User said "Signup Modal" background is dark. 
   We will force the modal structure to be white. 
*/
body.is-app .auth-modal {
    background: rgba(0, 0, 0, 0.5) !important;
    /* Lighter backdrop */
    backdrop-filter: blur(2px) !important;
}

body.is-app .auth-modal-content {
    background-color: #ffffff !important;
    border: 2px solid var(--secondary-red) !important;
    color: #000000 !important;
    box-shadow: 0 4px 25px rgba(206, 17, 38, 0.25) !important;
}

body.is-app .auth-modal h2 {
    color: var(--secondary-red) !important;
    text-shadow: none !important;
}

body.is-app .auth-close {
    color: var(--secondary-red) !important;
    opacity: 1 !important;
}

body.is-app .form-group label {
    color: #000000 !important;
    font-weight: 700 !important;
}

body.is-app .form-group input {
    background-color: #ffffff !important;
    border: 2px solid var(--secondary-red) !important;
    color: #000000 !important;
}

body.is-app .auth-switch,
body.is-app .auth-switch span,
body.is-app .forgot-wrapper a {
    color: #000000 !important;
}

/* Floating Buttons Positioning for App */
body.is-app .map-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    bottom: 80px !important;
    /* Above bottom nav */
    right: 20px !important;
    z-index: 9990;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    /* White background for Map? Usually map has its own color or white with icon. Let's check original. Original map-btn usually has padding. */
    /* Let's try White Icon on Red Background or standard Google Maps style? */
    /* User said "White and Red theme". Let's make it Red background, White Icon like the other buttons to be safe? 
       Or keep it white background with colored icon? 
       Wait, the user showed a blue icon in the screenshot. 
       The "z/" complaint might be about the icon itself? 
       Let's force the SVG fill to be white if we make the button red. 
       OR keep the button blue (Google Maps) and ensure the icon inside is correct.
       Let's stick to the Plan: "Force color: white !important".
    */
    background-color: #4285F4 !important;
    /* Google Blue */
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

body.is-app .map-btn svg,
body.is-app .map-btn i {
    fill: #ffffff !important;
    color: #ffffff !important;
    width: 24px !important;
    height: 24px !important;
}

body.is-app .whatsapp-btn {
    display: flex !important;
    position: fixed !important;
    bottom: 140px !important;
    /* Above map btn */
    right: 20px !important;
    z-index: 9991;
    background-color: #25D366 !important;
    border-radius: 50%;
    width: 50px !important;
    height: 50px !important;
    align-items: center;
    justify-content: center;
    color: white !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    text-decoration: none !important;
}

body.is-app .whatsapp-btn svg,
body.is-app .whatsapp-btn i {
    fill: #ffffff !important;
    color: #ffffff !important;
    width: 28px !important;
    height: 28px !important;
}

/* Ensure no pseudo-element artifacts */
body.is-app .whatsapp-btn::after,
body.is-app .whatsapp-btn::before {
    display: none !important;
    content: none !important;
}

/* --- App: Fix Price Display Inline with Stock Status --- */
body.is-app .product-status-badge {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px 12px !important;
}

/* Override .btn-contact-price-fixed styles when inside status badge */
body.is-app .product-status-badge .btn-contact-price-fixed {
    display: inline-flex !important;
    width: auto !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    padding: 4px 8px !important;
    height: auto !important;
    font-size: 0.75rem !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
}

/* Ensure price-value is visible and styled correctly in app */
body.is-app .product-status-badge .price-value {
    display: inline !important;
    margin-left: auto !important;
    font-weight: 700 !important;
    color: var(--primary-red) !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px !important;
}

/* Fix: Ensure product prices with price-visible class are shown in app mode */
body.is-app .product-price.price-visible {
    display: block !important;
    color: var(--primary-red) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin: 8px 0 !important;
}

body.is-app .product-price.price-visible .price-value {
    display: inline !important;
    color: var(--primary-red) !important;
}

/* ===================
   INTERNATIONALIZATION (i18n)
   Language Toggle & RTL Support
=================== */

/* Language Toggle Button */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 15px;
}

.lang-toggle:hover {
    background: rgba(255, 62, 62, 0.1);
    border-color: var(--primary-red);
}

/* RTL (Right-to-Left) Support for Arabic */
html[dir="rtl"] {
    direction: rtl;
}

body.rtl {
    text-align: right;
}

/* Flip flex directions for RTL */
body.rtl .navbar,
body.rtl .nav-links,
body.rtl .nav-auth,
body.rtl .user-info,
body.rtl .auth-buttons,
body.rtl .admin-links {
    flex-direction: row-reverse;
}

body.rtl .navbar {
    /* Ensure gap works correctly with space-between */
    gap: 20px;
}

body.rtl .inventory-controls {
    flex-direction: row-reverse;
}

body.rtl .filter-group {
    flex-direction: row-reverse;
}

/* Margins and paddings flip */
body.rtl .lang-toggle {
    margin-right: 0;
    margin-left: 15px;
}

body.rtl .nav-auth {
    margin-left: 0;
    margin-right: 20px;
}

body.rtl .admin-links {
    margin-left: 10px;
    margin-right: 0;
    padding-left: 0;
    padding-right: 15px;
    border-left: none;
    border-right: 1px solid var(--border-color);
}

/* Fix Nav Links Spacing in RTL */
body.rtl .nav-links li {
    margin-left: 0;
    margin-right: 0;
    /* Reset margins, rely on gap if possible or reverse */
}

body.rtl .nav-links {
    margin-right: auto;
    /* Push to right/center */
    margin-left: 20px;
}

body.rtl .user-name {
    margin-right: 0;
    margin-left: 5px;
}

/* Card layout RTL */
body.rtl .card-top-header {
    flex-direction: row-reverse;
}

body.rtl .inventory-card-content {
    flex-direction: row-reverse;
}

body.rtl .inventory-name {
    margin-right: 0;
    margin-left: 10px;
    text-align: right;
}

/* Status dot alignment */
body.rtl .inventory-status {
    flex-direction: row-reverse;
}

/* Button alignment */
body.rtl .add-to-cart-btn-compact {
    flex-direction: row-reverse;
}

body.rtl .qty-selector {
    flex-direction: row-reverse;
}

/* Search input */
body.rtl .search-container input {
    text-align: right;
    padding-left: 15px;
    padding-right: 45px;
}

body.rtl .search-container::before {
    left: auto;
    right: 15px;
}

/* Modal RTL */
body.rtl .modal-close {
    left: 20px;
    right: auto;
}

body.rtl .modal-nav {
    flex-direction: row-reverse;
}

/* Cart items RTL */
body.rtl .cart-item {
    flex-direction: row-reverse;
}

body.rtl .cart-item-details {
    text-align: right;
}

/* Form inputs RTL */
body.rtl input,
body.rtl textarea,
body.rtl select {
    text-align: right;
}

/* Hero section RTL */
body.rtl .hero-content {
    text-align: center;
}

/* Footer RTL */
body.rtl .footer-content {
    flex-direction: row-reverse;
}

/* Arabic font support */
body.rtl {
    font-family: 'Inter', 'Tajawal', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Mobile adjustments for RTL */
@media (max-width: 768px) {
    body.rtl .navbar {
        flex-direction: row-reverse;
    }

    body.rtl .mobile-menu {
        left: auto;
        right: 0;
    }
}