/* 
   Karnosha Premium Dark & Gold Theme v2 (Refined)
   Target: Sphinx/Furniture Skeleton (karnosha.myeasyorders.com)
   Style: Vela Fashion Header + Dark & Gold Visual Identity
*/

/* 1. Global Visual Identity (Dark & Gold) */
:root {
    --gold-accent: #D4AF37;
    --dark-bg: #0f0f0f;
    --card-bg: #1a1a1a;
    --text-primary: #f0f0f0;
    --border-color: #2a2a2a;
}

/* Force Dark Background on all potential containers */
body, 
#__next, 
main,
.bg-white,
.bg-skin-fill,
.bg-skin-primary,
section,
.sphinx_header_container,
.sphinx_header {
    background-color: var(--dark-bg) !important;
    color: var(--text-primary) !important;
}

/* Typography - Gold Headlines */
h1, h2, h3, h4, h5, h6,
[class*="title"], 
[class*="heading"],
.home_section_top_title,
.text-heading,
[class*="CategoryCard"] h3 {
    color: var(--gold-accent) !important;
}

/* Body text normalization */
p, span, div, li, a {
    color: var(--text-primary);
}

/* 2. Header Reconstruction (Vela Fashion Style) */
/* Sticky Header & Bottom Border */
header, 
.sphinx_header,
.sticky {
    background-color: #121212 !important;
    border-bottom: 1px solid var(--gold-accent) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* Logo Centering */
.sphinx_header_logo {
    display: flex !important;
    justify-content: center !important;
    flex: 1 !important;
    margin: 0 auto !important;
}

/* Navigation Menu - Gold Links */
nav a, 
.sphinx_header_container a,
[class*="nav"] a,
[id*="headlessui-popover-button"] {
    color: var(--gold-accent) !important;
    background-color: transparent !important;
    font-weight: 600 !important;
    transition: opacity 0.3s ease;
}

nav a:hover, 
[id*="headlessui-popover-button"]:hover {
    opacity: 0.8;
}

/* Search Bar Fix */
input[type="text"],
input[placeholder*="أبحث"],
.search-input {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
}

input[type="text"]:focus {
    border-color: var(--gold-accent) !important;
    outline: none !important;
}

/* Search Icon Visibility */
[class*="search"] svg,
button[class*="search"] svg,
.bg-skin-primary svg {
    color: var(--gold-accent) !important;
    fill: var(--gold-accent) !important;
}

/* 3. Product Grid & Featured Categories */
/* Product & Category Cards */
.home_slider_card,
[class*="CategoryCard"],
.grid > div:has(img) {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    transition: all 0.3s ease-in-out !important;
}

/* Card Hover Effect */
.home_slider_card:hover,
[class*="CategoryCard"]:hover,
.grid > div:has(img):hover {
    border-color: var(--gold-accent) !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
    transform: translateY(-5px);
}

/* Interactive Elements - Gold Buttons */
button, 
.btn,
[class*="button"],
[class*="Add_to_cart"],
[class*="ShopNow"] {
    background-color: var(--gold-accent) !important;
    color: #000000 !important;
    font-weight: bold !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

button:hover,
[class*="button"]:hover {
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6) !important;
    opacity: 0.9;
}

/* 4. Category Hierarchy Styling (Sidebar/Navigation) */
/* Sub-categories Indentation */
[id*="headlessui-popover-panel"] a {
    padding-inline-start: 20px !important;
    font-size: 0.9rem !important;
    color: #cccccc !important;
}

/* 5. Footer & Miscellaneous Fixes */
footer,
[class*="footer"],
.bg-white:has([class*="PoweredBy"]) {
    background-color: #0a0a0a !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Powered by Easyorders Fix */
[class*="PoweredBy"],
.footer-bottom {
    background-color: #0a0a0a !important;
    color: #666 !important;
}

/* Arabic (RTL) Support */
[dir="rtl"] body {
    text-align: right;
}

[dir="rtl"] .sphinx_header_logo {
    flex-direction: row-reverse;
}

/* Ensure no white blocks remain */
.bg-white {
    background-color: var(--dark-bg) !important;
}

/* Fix for specific "messed up" layout elements */
.grid-flow-row-dense {
    background-color: var(--dark-bg) !important;
}