/* =========================================================
   ULTIMATE LUXURY FASHION THEME (Minimalist & Premium)
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-color: #FAFAFA; /* Ekdum shant Off-white background */
    --card-bg: #FFFFFF; 
    
    /* MAHFOOJ's Custom Devil/Illuminati Theme Colors Added Here */
    --primary-color: #720f0f; /* Deep Dark Red/Maroon */
    --secondary-color: #c90000; /* Bright Blood Red */
    --accent-color: #E6E6E6; /* Light gray for borders */
    
    --text-main: #1A1A1A; 
    --text-muted: #737373; 
    
    --radius-soft: 4px; /* Sharp & Professional */
    --shadow-light: 0 4px 12px rgba(114, 15, 15, 0.1); /* Slightly red tinted shadow */
    --shadow-hover: 0 12px 24px rgba(201, 0, 0, 0.15); /* Red tinted hover shadow */
}

/* =========================================================
   1. GLOBAL STYLES & TYPOGRAPHY
========================================================= */
body {
    font-family: 'Montserrat', sans-serif !important;
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
    margin: 0; padding: 0; line-height: 1.6;
    display: flex; flex-direction: column; min-height: 100vh;
}

h1, h2, h3, h4, .section-title { 
    font-weight: 800 !important; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

.container { max-width: 1250px; margin: 40px auto; padding: 0 20px; flex: 1; width: 100%; box-sizing: border-box; }

/* =========================================================
   2. PREMIUM GLASSMORPHISM HEADER
========================================================= */
header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important; /* Sheeshe jaisa effect */
    padding: 20px 50px !important; 
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    border-bottom: 2px solid var(--secondary-color) !important; /* Thin bright red border at bottom of header */
    position: sticky !important; top: 0 !important; z-index: 1000 !important;
}
header h1 { margin: 0 !important; }
header h1 a { color: var(--primary-color) !important; font-size: 28px !important; text-decoration: none !important; letter-spacing: 2px; }

nav { display: flex !important; align-items: center !important; gap: 30px; }
nav a { color: var(--text-main) !important; text-decoration: none !important; font-weight: 600 !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
nav a:hover { color: var(--secondary-color) !important; } /* Bright red on hover */

.cart-btn { 
    background: var(--primary-color) !important; 
    color: #fff !important; 
    padding: 12px 24px !important; 
    border-radius: var(--radius-soft) !important; 
}
.cart-btn:hover { background: var(--secondary-color) !important; color: #fff !important; box-shadow: 0 0 10px var(--secondary-color); }

/* =========================================================
   3. MODERN BUTTONS & INPUTS
========================================================= */
button, .btn-submit, .btn-add, .place-order-btn, .btn-review {
    background: var(--primary-color) !important; color: #fff !important; border: 1px solid var(--primary-color) !important; 
    padding: 15px 30px !important; border-radius: var(--radius-soft) !important; cursor: pointer !important; 
    font-size: 14px !important; font-weight: 700 !important; transition: 0.3s ease !important; 
    text-transform: uppercase !important; letter-spacing: 1.5px !important; width: 100%;
}
button:hover, .btn-submit:hover, .btn-add:hover, .place-order-btn:hover, .btn-review:hover { 
    background: var(--secondary-color) !important; border-color: var(--secondary-color) !important; color: #fff !important; 
    box-shadow: 0 0 15px var(--secondary-color);
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
    width: 100% !important; padding: 16px 20px !important; border: 1px solid var(--accent-color) !important; 
    border-radius: var(--radius-soft) !important; background: #fff !important; font-size: 14px !important; 
    font-family: 'Montserrat', sans-serif; font-weight: 500; color: var(--text-main) !important; 
    box-sizing: border-box !important; outline: none !important; transition: 0.3s ease; margin-bottom: 20px;
}
input:focus, select:focus, textarea:focus { border-color: var(--secondary-color) !important; box-shadow: 0 0 5px rgba(201,0,0,0.3) !important; }

/* =========================================================
   4. HOME PAGE: PRODUCT GRID & HERO SLIDER
========================================================= */
.search-bar-container { background: transparent; padding: 0 0 40px 0; display: flex; justify-content: center; }
.search-form { display: flex; width: 100%; max-width: 600px; border-radius: var(--radius-soft); overflow: hidden; box-shadow: var(--shadow-light);}
.search-form input { margin-bottom: 0; border: none !important; padding: 20px !important; }
.search-form button { width: auto !important; border-radius: 0 !important; padding: 0 40px !important; }

.slider-container { position: relative; max-width: 100%; height: 500px; overflow: hidden; margin-bottom: 60px; background: var(--primary-color);}
.slide { display: none; width: 100%; height: 100%; animation: fade 1.5s; position: absolute; top: 0; left: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; } 
.slide-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; width: 80%; }
.slide-text h2 { font-size: 50px; margin: 0 0 15px 0; letter-spacing: 4px; text-shadow: 2px 2px 5px var(--primary-color); }
.dots-container { position: absolute; bottom: 20px; width: 100%; text-align: center; z-index: 20; }
.dot { cursor: pointer; height: 8px; width: 30px; margin: 0 5px; background-color: rgba(255, 255, 255, 0.4); display: inline-block; transition: 0.3s; border-radius: 4px; }
.active-dot { background-color: var(--secondary-color); }
@keyframes fade { from {opacity: .4} to {opacity: 1} }

.section-title { text-align: center; margin-bottom: 50px; font-size: 28px; position: relative; padding-bottom: 15px; color: var(--primary-color);}
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--secondary-color); }

/* Grid jo kapdon ko perfectly align karega */
.product-grid { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; 
    gap: 40px !important; 
}
.product-card { 
    background: transparent !important; 
    overflow: hidden !important; 
    transition: 0.4s ease !important; 
    position: relative !important; 
    text-align: center !important; 
}
.product-card:hover { transform: translateY(-10px) !important; }
.product-card:hover .product-image { box-shadow: var(--shadow-hover); border: 1px solid var(--secondary-color); }

.product-image { 
    width: 100% !important; 
    height: 350px !important; 
    object-fit: cover !important; 
    border-radius: var(--radius-soft) !important; 
    transition: 0.5s !important; 
    margin-bottom: 20px !important;
}
.category-badge { position: absolute; top: 15px; left: 15px; background: var(--primary-color); color: #fff; padding: 5px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; z-index: 10; box-shadow: var(--shadow-light); }
.product-title { font-size: 15px; font-weight: 600; margin: 0 0 10px 0; color: var(--text-main); text-decoration: none; display: block; text-transform: uppercase; letter-spacing: 1px;}
.product-title:hover { color: var(--secondary-color); }
.product-price { font-size: 18px; color: var(--primary-color); font-weight: 800; margin-bottom: 15px; }

/* =========================================================
   5. CART PAGE (A Clean, Perfectly Aligned Layout)
========================================================= */
table { width: 100%; border-collapse: collapse; margin-top: 20px; background: #fff; box-shadow: var(--shadow-light); border-radius: var(--radius-soft); overflow: hidden;}
table th { background-color: var(--primary-color) !important; color: #fff !important; font-weight: 600 !important; font-size: 12px !important; padding: 18px 20px !important; text-align: left; text-transform: uppercase; letter-spacing: 1px;}
table td { padding: 20px !important; color: var(--text-main) !important; font-size: 15px !important; font-weight: 500; border-bottom: 1px solid var(--accent-color) !important; vertical-align: middle !important;}

.product-img { max-width: 80px !important; height: auto !important; border-radius: var(--radius-soft) !important; vertical-align: middle !important; margin-right: 20px !important; box-shadow: var(--shadow-light); }
.remove-btn { color: var(--secondary-color) !important; font-weight: 700 !important; font-size: 12px !important; text-transform: uppercase !important; text-decoration: underline !important; transition: 0.3s; }
.remove-btn:hover { color: var(--primary-color) !important; }

/* Exact Cart Bottom Alignment */
.checkout-area { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 40px !important; padding: 30px !important; background: #fff; border-radius: var(--radius-soft); box-shadow: var(--shadow-light);}
.checkout-area > a { background: transparent !important; color: var(--primary-color) !important; border: 2px solid var(--primary-color) !important; padding: 12px 24px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; text-decoration: none !important; transition: 0.3s !important; }
.checkout-area > a:hover { background: var(--primary-color) !important; color: #fff !important; }

.checkout-area > div { text-align: right !important; }
.total-amt { font-size: 20px !important; font-weight: 800 !important; color: var(--primary-color) !important; display: block !important; margin-bottom: 15px !important; }
.checkout-btn { width: auto !important; margin: 0 !important; display: inline-block !important; }

/* Empty Cart */
.empty-cart { text-align: center !important; padding: 80px 20px !important; background: #fff !important; border-radius: var(--radius-soft) !important; box-shadow: var(--shadow-light) !important; margin-top: 40px !important; }
.empty-cart h3 { font-size: 28px !important; margin-bottom: 15px !important; color: var(--primary-color); }
.continue-shopping { width: auto !important; display: inline-block !important; margin-top: 20px !important; }

/* =========================================================
   6. ACCOUNT & DASHBOARD
========================================================= */
.auth-container, .checkout-wrapper { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
.auth-box, .dashboard-box, .checkout-form, .order-summary, .product-box, .reviews-section {
    background: #fff !important; padding: 50px !important; border-radius: var(--radius-soft) !important; box-shadow: var(--shadow-light) !important; border: 1px solid var(--accent-color) !important; flex: 1; min-width: 300px;
}
.auth-box h2 { text-align: center; font-size: 22px; margin-bottom: 30px; color: var(--primary-color);}
.form-group label { display: block; margin-bottom: 10px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--primary-color);}

.dashboard-header { display: flex !important; justify-content: space-between !important; align-items: center !important; border-bottom: 1px solid var(--accent-color) !important; padding-bottom: 20px !important; margin-bottom: 30px !important; }
.dashboard-header h2 { margin: 0 !important; font-size: 24px !important; color: var(--primary-color); }
.btn-logout { background: transparent !important; color: var(--secondary-color) !important; border: 1px solid var(--secondary-color) !important; padding: 8px 20px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; text-decoration: none !important; transition: 0.3s; }
.btn-logout:hover { background: var(--secondary-color) !important; color: #fff !important; box-shadow: 0 0 10px var(--secondary-color); }

.badge { padding: 6px 12px; font-size: 11px; font-weight: 700; border-radius: 2px; text-transform: uppercase; letter-spacing: 1px;}
.badge-pending { background: #fff3cd; color: #856404; }
.badge-shipped { background: #d1ecf1; color: #0c5460; }
.badge-delivered { background: #d4edda; color: #155724; }
.badge-cancelled { background: var(--primary-color); color: #fff; }

/* =========================================================
   7. PROFESSIONAL MEGA FOOTER (COLORS FIXED AS ORIGINAL)
========================================================= */
footer {
    background-color: #111111 !important; /* JADOO: Force Black Background */
    color: #b3b3b3 !important; 
    margin-top: auto !important; 
    font-size: 14px !important; 
    font-weight: 400 !important; 
    letter-spacing: 0.5px !important;
    border-top: 4px solid #333333 !important;
    width: 100% !important;
    display: block !important;
}

.footer-container {
    max-width: 1250px !important;
    margin: 0 auto !important;
    padding: 60px 20px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 40px !important;
}

.footer-col h4 {
    color: #ffffff !important; /* White Heading taaki chamke */
    font-size: 16px !important;
    margin-bottom: 25px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    position: relative !important;
    padding-bottom: 10px !important;
}

.footer-col h4::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 40px !important;
    height: 2px !important;
    background: #ffffff !important;
}

.footer-col p {
    color: #b3b3b3 !important; /* Light gray text */
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
}

/* Footer Lists */
.footer-col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer-col ul li { margin-bottom: 12px !important; }
.footer-col ul li a {
    color: #b3b3b3 !important;
    text-decoration: none !important;
    transition: 0.3s ease !important;
    display: inline-block !important;
}
.footer-col ul li a:hover { color: #ffffff !important; transform: translateX(5px) !important; }

/* Social Links */
.social-links { display: flex !important; gap: 15px !important; }
.social-links a {
    color: #ffffff !important;
    border: 1px solid #b3b3b3 !important;
    padding: 8px 15px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: 0.3s ease !important;
}
.social-links a:hover { background: #ffffff !important; color: #111111 !important; border-color: #ffffff !important; }

/* Newsletter Form */
.newsletter-form { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.newsletter-form input {
    background: #222222 !important; /* Dark input box */
    border: 1px solid #444444 !important;
    color: #ffffff !important;
    padding: 12px 15px !important;
    margin-bottom: 0 !important;
}
.newsletter-form input::placeholder { color: #888888 !important; }
.newsletter-form input:focus { border-color: #ffffff !important; background: #000000 !important; }

.btn-subscribe {
    background: #ffffff !important;
    color: #111111 !important;
    border: none !important;
    padding: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: 0.3s !important;
}
.btn-subscribe:hover { background: #cccccc !important; }

/* Footer Bottom (Copyright Area) */
.footer-bottom {
    background: #000000 !important; /* Pitch Black Bottom */
    padding: 20px !important;
    text-align: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
    color: #888888 !important;
}
.footer-bottom p { margin: 0 !important; }
.payment-icons span { font-weight: 600 !important; color: #ffffff !important; letter-spacing: 1px !important; }

@media (max-width: 768px) {
    .footer-bottom { flex-direction: column !important; gap: 15px !important; text-align: center !important; justify-content: center !important; }
}

/* =========================================================
   8. RESPONSIVE DESIGN (Mobiles & Tablets)
========================================================= */
@media (max-width: 768px) {
    header { padding: 15px 20px !important; flex-direction: column; gap: 15px; }
    .checkout-area { flex-direction: column; gap: 20px; text-align: center !important; }
    .checkout-area > div { text-align: center !important; }
    .dashboard-header { flex-direction: column; gap: 15px; text-align: center; }
}