/* ==========================================================================
   QUALIBOLT DIGITALS - STORE LAYOUT (v14.0 FINAL)
   Path: assets/css/digitals/store-layout.css
   Description: Hero, Bento Grid, Infinity Dock, and Process Section.
   ========================================================================== */

/* =========================================
   0. GLOBAL HEADER PATCH (Fixes Menu Button)
   ========================================= */
/* Default State (Desktop): Hide the Hamburger Button */
.mobile-menu-toggle {
    display: none;
}

/* =========================================
   1. HERO SECTION
   ========================================= */
.digitals-hero {
    position: relative;
    padding: 10rem 0 6rem;
    background: 
        linear-gradient(to bottom, rgba(15, 20, 30, 0.30), rgba(15, 20, 30, 0.98)),
        url('../../images/digitals/hero/digitals-main.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background-color: #0f141e;
}

.noise-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 1;
}

.hero-badge {
    position: relative; z-index: 2;
    display: inline-block;
    background: rgba(0, 191, 179, 0.2); color: var(--accent-teal);
    padding: 6px 16px; border-radius: 50px;
    font-size: 0.85rem; font-weight: 600; margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 191, 179, 0.4);
    backdrop-filter: blur(5px);
}

.digitals-hero h1 {
    position: relative; z-index: 2;
    font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 0 4px 30px rgba(0,0,0,0.9);
}

.digitals-hero p {
    position: relative; z-index: 2;
    font-size: 1.25rem; color: #e2e8f0; max-width: 700px; margin: 0 auto 3rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9); font-weight: 500;
}

/* Trust Strip Styling */
.trust-strip {
    position: relative; z-index: 2;
    display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
    font-size: 0.95rem; color: #cbd5e0; font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
.trust-strip span {
    display: flex; align-items: center; gap: 8px;
}
.trust-strip i { color: var(--accent-teal); font-size: 1.1rem; }


/* =========================================
   2. BENTO GRID (Navigation)
   ========================================= */
.bento-section { background: var(--light-bg); padding-top: 3rem; }
body.dark-mode .bento-section { background: var(--dark-bg); }

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 1.5rem;
}

.bento-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
    display: flex; flex-direction: column; isolation: isolate;
}

.bento-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);
    border-color: var(--accent-teal);
    z-index: 5;
}

/* Sizes */
.large-card { grid-column: span 6; min-height: 480px; }
.wide-card  { grid-column: span 8; min-height: 320px; }
.small-card { grid-column: span 4; min-height: 320px; }

/* Visuals */
.visual-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.visual-element img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }

.sales-card .visual-element img { object-position: 80% 80%; }
.rentals-card .visual-element img { object-position: center 35%; /* Fixed: Focus Upwards */ }
.bento-card:hover .visual-element img { transform: scale(1.08); }

.bento-card::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.95) 100%);
    z-index: 1; pointer-events: none;
}

.card-content {
    padding: 2.5rem; z-index: 2; position: relative; height: 100%; width: 100%;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
}

.bento-card h3 {
    font-size: 2rem; margin-bottom: 0.5rem; color: #ffffff;
    text-shadow: 0 4px 10px rgba(0,0,0,0.9); line-height: 1.2;
}
.bento-card p {
    font-size: 1.1rem; color: rgba(255,255,255,0.95); margin-bottom: 1.5rem;
    text-shadow: 0 2px 5px rgba(0,0,0,0.9); max-width: 90%;
}
.sub-label {
    display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--accent-teal); margin-bottom: 0.5rem; font-weight: 700;
    background: rgba(0,0,0,0.8); padding: 4px 10px; border-radius: 4px;
    backdrop-filter: blur(4px);
}
.fake-btn {
    display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); transition: color 0.3s ease, gap 0.3s ease;
}
.bento-card:hover .fake-btn { color: var(--accent-teal); gap: 12px; }

/* Special Badges & Cards */
.weekly-drop-badge {
    position: absolute; top: 20px; right: 20px;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2); padding: 6px 12px; border-radius: 50px;
    font-size: 0.75rem; color: #fff; font-weight: 600;
    display: flex; align-items: center; gap: 6px; z-index: 10;
}
.pulsing-dot { width: 8px; height: 8px; background: #e74c3c; border-radius: 50%; animation: pulse-red 2s infinite; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } }

.legal-tag { position: absolute; bottom: 20px; left: 2.5rem; font-size: 0.7rem; color: rgba(255,255,255,0.7); font-style: italic; }

.refurb-card { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); border: 1px solid #4a5568; }
.support-card { background: linear-gradient(135deg, #0f141e 0%, #1a2a3a 100%); border: 1px solid #2d3748; }

.card-content-row { display: flex; align-items: center; justify-content: space-between; padding: 2.5rem; width: 100%; height: 100%; z-index: 2; position: relative; }
.text-side { display: flex; flex-direction: column; justify-content: center; }
.badge-gold { background: #ffd700; color: #000; padding: 4px 10px; border-radius: 4px; font-weight: bold; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 10px; display: inline-block; align-self: flex-start; }
.icon-side { font-size: 5rem; color: rgba(255,255,255,0.15); }

.card-content-center { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; text-align: center; padding: 2rem; cursor: pointer; z-index: 2; position: relative; }
.support-card i { font-size: 3rem; color: var(--accent-teal); margin-bottom: 1rem; }
.support-card h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: #fff; }
.support-card p { font-size: 0.95rem; margin: 0; color: #e2e8f0; }


/* =========================================
   3. THE INFINITY CAPSULE DOCK (Compact & Centered)
   ========================================= */
.infinity-dock-section {
    padding: 2rem 0 4rem;
    background: transparent; border: none;
}

.infinity-dock-section .container {
    background-color: #0b0f19;
    background-image: 
        linear-gradient(rgba(0, 191, 179, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 191, 179, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 2.5rem 3rem;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
    position: relative; overflow: visible;
}

.dock-header { 
    display: flex; align-items: center; justify-content: center; 
    gap: 1.5rem; margin-bottom: 2rem; position: relative; z-index: 2; 
}
.dock-header h4 { margin: 0; font-size: 1.1rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
.dock-line { width: 60px; height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent); }

/* SCROLLER: High Ceiling Logic (250px) */
.infinity-dock-scroller {
    display: flex; gap: 1.5rem; overflow-x: auto;
    justify-content: flex-start; /* Default Mobile */
    
    /* CRITICAL FIX: Safe zone for popups */
    padding-top: 250px; 
    margin-top: -250px;
    
    padding-bottom: 20px;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    position: relative; z-index: 2;
}
.infinity-dock-scroller::-webkit-scrollbar { display: none; }

.dock-tile {
    /* SIZE: Compact 130px */
    flex: 0 0 auto; width: 130px; height: 130px;
    background: linear-gradient(180deg, rgba(40, 48, 60, 0.6) 0%, rgba(20, 25, 35, 0.9) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; text-decoration: none; position: relative;
    scroll-snap-align: start;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dock-tile:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.05); }

/* Marquee Text */
.marquee-mask {
    width: 100px; overflow: hidden; white-space: nowrap; opacity: 0.6; margin-top: 6px;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-content { display: inline-block; white-space: nowrap; animation: scroll-left 10s linear infinite; }
.marquee-content span { font-size: 0.65rem; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Holographic HUD (Popup) */
.holo-spec {
    position: absolute; 
    bottom: 125%; 
    left: 50%; 
    transform: translateX(-50%) translateY(10px);
    width: 250px;
    background: rgba(10, 20, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px;
    padding: 12px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    opacity: 0; pointer-events: none; transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 100;
    backdrop-filter: blur(10px);
}
.holo-spec span { font-size: 0.75rem; color: #a0aec0; text-align: left; display: flex; align-items: center; gap: 6px; }
.holo-spec i { font-size: 0.7rem; }

.dock-tile:hover .holo-spec { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.dock-tile:hover { transform: translateY(-8px); z-index: 100; }

/* Tile Colors */
.mobile-tile:hover { border-color: #00f0ff; box-shadow: 0 0 20px rgba(0, 240, 255, 0.15); }
.mobile-tile:hover .tile-icon, .mobile-tile .holo-spec i { color: #00f0ff; }
.mobile-tile .holo-spec { border-color: #00f0ff; }

.laptop-tile:hover { border-color: #2979ff; box-shadow: 0 0 20px rgba(41, 121, 255, 0.15); }
.laptop-tile:hover .tile-icon, .laptop-tile .holo-spec i { color: #2979ff; }
.laptop-tile .holo-spec { border-color: #2979ff; }

.creator-tile:hover { border-color: #bf5af2; box-shadow: 0 0 20px rgba(191, 90, 242, 0.15); }
.creator-tile:hover .tile-icon, .creator-tile .holo-spec i { color: #bf5af2; }
.creator-tile .holo-spec { border-color: #bf5af2; }

.refurb-tile:hover { border-color: #ffca28; box-shadow: 0 0 20px rgba(255, 202, 40, 0.15); }
.refurb-tile:hover .tile-icon, .refurb-tile .holo-spec i { color: #ffca28; }
.refurb-tile .holo-spec { border-color: #ffca28; }

.rental-tile:hover { border-color: #00bfb3; box-shadow: 0 0 20px rgba(0, 191, 179, 0.15); }
.rental-tile:hover .tile-icon, .rental-tile .holo-spec i { color: #00bfb3; }
.rental-tile .holo-spec { border-color: #00bfb3; }

.tile-icon { 
    font-size: 2.5rem; 
    margin-bottom: 0.5rem; transition: transform 0.3s ease; z-index: 2; color: rgba(255,255,255,0.6); 
}
.dock-tile:hover .tile-icon { transform: scale(1.1); }
.tile-info { display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 2; width: 100%; }
.tile-title { font-weight: 700; color: rgba(255,255,255,0.8); font-size: 0.85rem; transition: color 0.3s ease; }


/* =========================================
   4. HOW IT WORKS (Fixed Dark BG)
   ========================================= */
.how-it-works { 
    padding: 5rem 0; 
    background-color: #0f141e; 
    border-top: 1px solid rgba(255,255,255,0.1); 
}

.section-header { text-align: center; margin-bottom: 4rem; }
.section-header h2 { font-size: 2.5rem; margin-bottom: 1rem; color: #fff; }
.section-header p { font-size: 1.1rem; color: var(--accent-teal); }

.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }

.step-card { 
    background: rgba(255, 255, 255, 0.05);
    padding: 2.5rem; border-radius: 16px; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    transition: transform 0.3s ease; position: relative; 
}
.step-card:hover { transform: translateY(-10px); border-color: var(--accent-teal); }

.step-number { font-size: 6rem; font-weight: 800; color: rgba(255, 255, 255, 0.05); position: absolute; top: 0px; right: 20px; line-height: 1; z-index: 0; }
.step-card h4 { font-size: 1.5rem; margin-bottom: 1rem; color: #fff; position: relative; z-index: 2; }
.step-card p { color: rgba(255,255,255,0.7); position: relative; z-index: 2; }
.highlight-step { border-color: var(--accent-teal); box-shadow: 0 0 20px rgba(0, 191, 179, 0.1); }
.highlight-step .step-number { color: rgba(0, 191, 179, 0.1); }


/* =========================================
   5. RESPONSIVE MEDIA QUERIES
   ========================================= */
/* Desktop: Center the Dock */
@media (min-width: 992px) {
    .infinity-dock-scroller {
        justify-content: center;
    }
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .mobile-menu-toggle {
        display: block; /* Show hamburger on mobile */
        background: none; border: none; font-size: 1.5rem; color: #fff; cursor: pointer;
    }

    .large-card { grid-column: span 12; min-height: 350px; }
    .process-steps { grid-template-columns: 1fr; }
    .digitals-hero h1 { font-size: 2.5rem; }
    .infinity-dock-scroller { padding-left: 5%; padding-right: 5%; }
    .infinity-dock-section .container { padding: 2rem 1.5rem; }
    .dock-tile { width: 130px; height: 130px; }
    .holo-spec { display: none; } /* Hide hover effects on touch */
}