/*
Theme Name: Nepa Cinematic
Theme URI: https://nepamirror.com.np
Author: Nepa Mirror Atelier
Description: A highly cinematic, dark-mode artisan mirror theme for WordPress and WooCommerce.
Version: 3.0.0
License: GNU General Public License v2 or later
Text Domain: nepa-cinematic
Tags: e-commerce, dark-mode, cinematic
*/

        :root {
            --bg-dark: #070707; --bg-panel: #0d0d0d; --bg-light: #151515;
            --text-light: #eaeaea; --text-muted: #888888; --text-dark: #333;
            --accent-gold: #c6a87c; --accent-hover: #b09265;
            --glass-bg: rgba(10, 10, 10, 0.7); --glass-border: rgba(255, 255, 255, 0.1);
            --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; font-size: 16px; }
        body { font-family: 'Montserrat', sans-serif; background-color: var(--bg-dark); color: var(--text-light); overflow-x: hidden; }
        h1, h2, h3, h4, h5, h6, .serif { font-family: 'Playfair Display', serif; font-weight: 400; }
        a { text-decoration: none; color: inherit; cursor: pointer; transition: color var(--transition); }
        a:hover { color: var(--accent-gold); }
        ul { list-style: none; }
        img { max-width: 100%; height: auto; display: block; }
        button, input, select, textarea { font-family: inherit; }
        
        /* Buttons */
        .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border: 1px solid var(--accent-gold); color: var(--accent-gold); text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem; background: transparent; transition: all var(--transition); cursor: pointer; position: relative; overflow: hidden; }
        .btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--accent-gold); z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform var(--transition); }
        .btn:hover { color: var(--bg-dark); }
        .btn:hover::before { transform: scaleX(1); transform-origin: left; }
        .btn.primary { background: var(--accent-gold); color: var(--bg-dark); }
        .btn.primary::before { background: var(--text-light); }
        .btn.primary:hover { color: var(--bg-dark); }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; }

        /* Header */
        header { position: fixed; top: 0; width: 100%; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 1000; background: var(--glass-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); transition: padding var(--transition); }
        header.scrolled { padding: 15px 40px; }

        .logo { font-size: 1.8rem; letter-spacing: 3px; text-transform: uppercase; font-family: 'Playfair Display', serif; }
        .nav-links { display: flex; align-items: center; }
        
        /* Dropdown Navigation */
        .nav-links ul { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; align-items: center; }
        .nav-links li { position: relative; padding: 25px 0; }
        .nav-links a { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; display: block; cursor: pointer; transition: all 0.3s ease; }
        .nav-links > ul > li > a:hover { color: var(--accent-gold); }
        
        /* Submenu Level 1 */
        .nav-links ul ul { 
            visibility: hidden; opacity: 0; position: absolute; top: 100%; left: 0; 
            background: rgba(12, 12, 12, 0.98); border: 1px solid var(--glass-border); 
            border-top: 2px solid var(--accent-gold); min-width: 280px; 
            display: flex; flex-direction: column; padding: 10px 0; 
            transform: translateY(15px); transition: all 0.3s ease; z-index: 999;
            box-shadow: 0 15px 35px rgba(0,0,0,0.7);
        }
        .nav-links li:hover > ul { visibility: visible; opacity: 1; transform: translateY(0); }
        
        .nav-links ul ul li { padding: 0; }
        .nav-links ul ul a { padding: 14px 20px; font-size: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; justify-content: space-between; }
        .nav-links ul ul a:hover { background: rgba(255,255,255,0.05); color: var(--accent-gold); padding-left: 26px; }
        
        /* Submenu Level 2 */
        .nav-links ul ul ul { 
            top: -2px; left: 100%; 
            border-top: 1px solid var(--glass-border); 
            border-left: 2px solid var(--accent-gold);
            transform: translateX(15px);
        }
        .nav-links ul ul li:hover > ul { transform: translateX(0); }

        .header-actions { display: flex; gap: 20px; align-items: center; }

        .cart-toggle { position: relative; cursor: pointer; }
        .cart-count { position: absolute; top: -8px; right: -12px; background: var(--accent-gold); color: var(--bg-dark); font-size: 0.65rem; font-weight: 600; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

        /* Pages */
        
        
        @keyframes fadeIn { to { opacity: 1; } }
        .section-padding { padding: 100px 5vw; max-width: 1600px; margin: 0 auto; }
        .section-title { text-align: center; margin-bottom: 60px; }
        .section-title h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 15px; }
        .section-title p { color: var(--text-muted); max-width: 600px; margin: 0 auto; line-height: 1.6; }

        /* Home Hero */
        .video-hero { position: relative; height: 100vh; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; margin-top: -80px; }
        .video-hero video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); z-index: -2; object-fit: cover; opacity: 0.6; filter: brightness(0.7); }
        .video-overlay { position: absolute; inset: 0; background: radial-gradient(circle, transparent 20%, var(--bg-dark) 120%); z-index: -1; }
        .hero-content h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: 1.1; margin-bottom: 20px; animation: slideUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards; opacity: 0; transform: translateY(50px); }
        .hero-content p { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 4px; color: var(--accent-gold); margin-bottom: 30px; animation: slideUp 1s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards; opacity: 0; transform: translateY(50px); }
        .hero-content .btn { animation: slideUp 1s cubic-bezier(0.25, 1, 0.5, 1) 0.4s forwards; opacity: 0; transform: translateY(50px); }
        @keyframes slideUp { to { opacity: 1; transform: translateY(0); } }

        /* Grid System */
        .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px; }
        .masonry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-auto-rows: 300px; gap: 20px; }
        .masonry-item { position: relative; overflow: hidden; border-radius: 4px; cursor:pointer;}
        .masonry-item.tall { grid-row: span 2; }
        .masonry-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s ease; filter: brightness(0.8); }
        .masonry-item:hover img { transform: scale(1.05); filter: brightness(1); }
        .masonry-content { position: absolute; bottom: 30px; left: 30px; right: 30px; z-index: 2; pointer-events: none; }
        .masonry-content h3 { font-size: 1.8rem; margin-bottom: 5px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
        .masonry-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 50%); z-index: 1; pointer-events: none; }

        /* Product Card */
        .product-card { text-align: center; cursor: pointer; group: card; }
        .product-image { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--bg-panel); margin-bottom: 20px; border-radius: 4px; }
        .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s ease, filter 1s ease; filter: brightness(0.85); }
        .product-card:hover .product-image img { transform: scale(1.05); filter: brightness(1.05); }
        .product-title { font-size: 1.2rem; margin-bottom: 8px; font-family: 'Playfair Display', serif; transition: color 0.3s; }
        .product-card:hover .product-title { color: var(--accent-gold); }
        .product-price { font-size: 0.9rem; color: var(--text-muted); letter-spacing: 1px; }

        /* Shop Page */
        .shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 50px; }
        .shop-sidebar h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; border-bottom: 1px solid var(--glass-border); padding-bottom: 10px; }
        .filter-list li { margin-bottom: 12px; }
        .filter-list a { font-size: 0.9rem; color: var(--text-muted); }
        .filter-list a:hover, .filter-list a.active { color: var(--accent-gold); }
        .shop-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
        .sort-select { background: transparent; border: 1px solid var(--glass-border); color: var(--text-light); padding: 8px 15px; border-radius: 4px; outline: none; cursor: pointer; }
        .sort-select option { background: var(--bg-panel); }

        /* Product Detail */
        .pd-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
        .pd-gallery { display: flex; flex-direction: column; gap: 15px; }
        .pd-main-img { aspect-ratio: 4/5; overflow: hidden; border-radius: 4px; background: var(--bg-panel); position: relative; }
        .pd-main-img img { width: 100%; height: 100%; object-fit: cover; }
        .pd-thumbs { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; }
        .pd-thumb { width: 80px; aspect-ratio: 1; cursor: pointer; border-radius: 4px; opacity: 0.6; transition: opacity 0.3s; object-fit: cover; }
        .pd-thumb:hover, .pd-thumb.active { opacity: 1; border: 1px solid var(--accent-gold); }
        
        .pd-info h1 { font-size: 2.5rem; margin-bottom: 10px; }
        .pd-price { font-size: 1.5rem; color: var(--accent-gold); margin-bottom: 20px; font-family: 'Playfair Display', serif; }
        .pd-desc { color: var(--text-muted); line-height: 1.8; margin-bottom: 30px; font-size: 0.95rem; }
        
        .pd-options { border-top: 1px solid var(--glass-border); padding-top: 30px; margin-bottom: 30px; }
        .option-group { margin-bottom: 25px; }
        .option-group label { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
        
        .custom-select { width: 100%; padding: 15px; background: var(--bg-panel); border: 1px solid var(--glass-border); color: var(--text-light); border-radius: 4px; outline: none; cursor: pointer; font-size: 0.95rem; transition: border-color 0.3s; }
        .custom-select:focus { border-color: var(--accent-gold); }

        .radio-group { display: flex; flex-direction: column; gap: 10px; }
        .radio-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; }
        .radio-label input { appearance: none; width: 18px; height: 18px; border: 1px solid var(--glass-border); border-radius: 50%; position: relative; cursor: pointer; transition: 0.2s; }
        .radio-label input:checked { border-color: var(--accent-gold); }
        .radio-label input:checked::after { content: ''; position: absolute; top:3px; left:3px; width:10px; height:10px; background: var(--accent-gold); border-radius: 50%; }
        .radio-label.disabled { opacity: 0.4; cursor: not-allowed; }
        .radio-label.disabled input { cursor: not-allowed; }
        
        .pd-totals { background: var(--bg-light); padding: 20px; border-radius: 4px; margin-bottom: 30px; }
        .totals-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.9rem; color: var(--text-muted); }
        .totals-row.grand { font-size: 1.3rem; color: var(--text-light); font-weight: 500; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-border); }

        .pd-actions { display: flex; gap: 15px; }
        .qty-picker { display: flex; align-items: center; background: var(--bg-panel); border: 1px solid var(--glass-border); border-radius: 4px; }
        .qty-picker button { background: transparent; border: none; color: var(--text-light); padding: 0 15px; font-size: 1.2rem; cursor: pointer; }
        .qty-picker input { width: 50px; text-align: center; background: transparent; border: none; color: var(--text-light); font-size: 1rem; outline: none; }
        .pd-actions .btn { flex: 1; }

        .accordion { margin-top: 50px; border-top: 1px solid var(--glass-border); }
        .acc-item { border-bottom: 1px solid var(--glass-border); }
        .acc-head { padding: 20px 0; display: flex; justify-content: space-between; cursor: pointer; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
        .acc-body { padding-bottom: 20px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; display: none; }
        .acc-item.active .acc-body { display: block; }
        .acc-item.active .acc-head span { transform: rotate(45deg); }

        /* Sidebar Cart */
        .cart-sidebar { position: fixed; top: 0; right: -450px; width: 400px; max-width: 100vw; height: 100vh; background: var(--bg-light); z-index: 2000; box-shadow: -5px 0 30px rgba(0,0,0,0.5); transition: right 0.4s ease; display: flex; flex-direction: column; }
        .cart-sidebar.open { right: 0; }
        .cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1999; display: none; backdrop-filter: blur(5px); }
        .cart-overlay.open { display: block; }
        .cart-header { padding: 20px 30px; border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; }
        .cart-close { font-size: 1.5rem; cursor: pointer; background: none; border: none; color: var(--text-light); }
        .cart-body { flex: 1; overflow-y: auto; padding: 20px 30px; }
        .cart-item { display: flex; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--glass-border); position: relative; }
        .cart-item img { width: 80px; height: 100px; object-fit: cover; border-radius: 4px; }
        .cart-item-info h4 { font-family: 'Montserrat', sans-serif; font-size: 0.9rem; margin-bottom: 5px; }
        .cart-item-info p { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px; }
        .cart-item-info .price { color: var(--accent-gold); font-size: 0.9rem; }
        .cart-item-remove { position: absolute; right: 0; top: 0; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; background: none; border: none; text-decoration: underline; }
        .cart-footer { padding: 30px; border-top: 1px solid var(--glass-border); background: var(--bg-dark); }
        .cart-total { display: flex; justify-content: space-between; font-size: 1.2rem; margin-bottom: 20px; }
        .cart-footer .btn { width: 100%; text-align: center; }

        /* Video Modal */
        .video-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 3000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(10px); }
        .video-modal.open { display: flex; }
        .video-container { width: 90%; max-width: 1000px; position: relative; }
        .video-container iframe, .video-container video { width: 100%; aspect-ratio: 16/9; background: #000; }
        .video-close { position: absolute; top: -40px; right: 0; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; }
        .video-title { position: absolute; bottom: -40px; left: 0; color: #fff; font-size: 1.2rem; font-family: 'Playfair Display', serif; }

        /* Login / OTP */
        .auth-container { max-width: 400px; margin: 100px auto; background: var(--bg-panel); padding: 40px; border-radius: 8px; border: 1px solid var(--glass-border); text-align: center; }
        .auth-container input { width: 100%; padding: 12px; margin-bottom: 20px; background: transparent; border: 1px solid var(--glass-border); color: #fff; border-radius: 4px; outline: none; }
        .otp-inputs { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
        .otp-inputs input { width: 45px; height: 50px; text-align: center; font-size: 1.5rem; margin-bottom: 0; padding: 0; }
        
        /* Checkout */
        .checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 50px; }
        .checkout-step { background: var(--bg-panel); padding: 30px; border-radius: 4px; border: 1px solid var(--glass-border); margin-bottom: 30px; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; font-size: 0.85rem; margin-bottom: 8px; color: var(--text-muted); }
        .form-control { width: 100%; padding: 12px 15px; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); color: #fff; border-radius: 4px; outline: none; transition: 0.3s; }
        .form-control:focus { border-color: var(--accent-gold); }
        .form-row { display: flex; gap: 20px; }
        .form-row > * { flex: 1; }

        /* Payment Methods */
        .payment-methods { display: flex; flex-direction: column; gap: 15px; }
        .payment-method { border: 1px solid var(--glass-border); padding: 15px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 15px; }
        .payment-method.active { border-color: var(--accent-gold); background: rgba(198, 168, 124, 0.05); }

        /* Process Video Cards */
        .process-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
        .process-card { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 4px; cursor: pointer; group: card; }
        .process-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); transition: 0.5s; }
        .process-card:hover img { filter: brightness(0.4); transform: scale(1.05); }
        .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; transition: 0.3s; border: 1px solid rgba(255,255,255,0.5); }
        .play-btn::before { content: '▶'; font-size: 20px; margin-left: 4px; }
        .process-card:hover .play-btn { background: var(--accent-gold); border-color: var(--accent-gold); color: #000; }
        .process-card h4 { position: absolute; bottom: 20px; left: 20px; font-size: 1.1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

        /* Footer */
        footer { background: #030303; padding: 80px 5vw 40px; border-top: 1px solid var(--glass-border); }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 50px; margin-bottom: 60px; }
        .footer-col h4 { font-family: 'Montserrat', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; color: var(--text-light); }
        .footer-col ul li { margin-bottom: 12px; font-size: 0.9rem; color: var(--text-muted); }
        .footer-col a { transition: 0.3s; }
        .footer-col a:hover { color: var(--accent-gold); }
        .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.05); color: var(--text-muted); font-size: 0.8rem; letter-spacing: 1px; }

        @media (max-width: 900px) {
            .shop-layout { grid-template-columns: 1fr; }
            .pd-layout, .checkout-layout, .process-cards { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            header { padding: 15px 20px; }
            
            /* Ensuring nav stays horizontal for preview iframe */
            .nav-links { display: flex; }
        }
    
/* WooCommerce Overrides */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    background: transparent;
    text-align: center;
}
.woocommerce ul.products li.product img {
    border-radius: 4px;
    filter: brightness(0.85);
    transition: transform 1.5s ease, filter 1s ease;
}
.woocommerce ul.products li.product a:hover img {
    transform: scale(1.05);
    filter: brightness(1.05);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--text-light);
    margin-top: 15px;
    padding-top: 10px;
}
.woocommerce ul.products li.product .price {
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: var(--accent-gold);
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
}
.woocommerce-message, .woocommerce-info {
    background: rgba(255,255,255,0.05);
    color: var(--text-light);
    border-top-color: var(--accent-gold);
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    background: var(--accent-gold);
    color: var(--bg-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 0;
    transition: 0.3s;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
    background: var(--text-light);
    color: var(--bg-dark);
}
.woocommerce-checkout .shop_table th, .woocommerce-checkout .shop_table td {
    color: var(--text-light);
    border-color: var(--glass-border);
}
.woocommerce-checkout #payment {
    background: var(--bg-panel);
}
.woocommerce-checkout #payment div.payment_box {
    background: var(--bg-dark);
    color: var(--text-muted);
}