:root {
    --neon-pink: #aa1e97;
    --neon-cyan: #00f3ff;
    --bg-dark: #222222;
    --inner-dark: #2a2a2a;
    --dark: #060223;
}

/* --- الإعدادات العامة والأساسية --- */
body {
    background-color: #060223 !important;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object,
td {
    color: white !important;
}

h3,
.product-description-content,
.font-semibold,
th,
.text-slate-400 {
    color: white !important;
}

.bg-white,
.add-address {
    background-color: #020423 !important;
}

.bg-white p,
.bg-white a,
.bg-white label,
.empty,
.bg-white span,
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6 {
    color: white !important;
}

/* --- الهيدر (Navbar) --- */
#topnav {
    background-color: #020423;
}

#topnav.nav-sticky {
    background-color: #0b1f46b0;
}

#topnav .navbar-toggle span {
    background-color: white !important; /* تم تحديثها بناءً على الكود السفلي للملف الأصلي */
}

#topnav.navbar_dark .navigation-menu>li>a {
    color: white !important;
}

#navigation {
    background-color: #020423;
}

/* --- العناصر التفاعلية والمنتجات --- */
.group {
    transition: all 0.3s ease-in-out !important;
    background-color: #0d1236 !important;
    border: 1px solid rgba(255, 0, 225, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.group:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(255, 0, 225, 0.4) !important;
    box-shadow: 0 10px 25px rgba(255, 0, 231, 0.25), 0 0 15px rgba(0, 240, 252, 0.15) !important;
}

.group:hover div {
    padding: 2px;
}

.group p {
    color: #ff00e1 !important;
}

.product_title {
    color: #00f0fc;
}

.product_price,
.leading-normal,
.hover\:text-orange-500:hover,
a.text-slate-400.hover\:text-orange-500 {
    background: linear-gradient(135deg, #00f3ff 0%, #b800ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: 0 0 20px rgba(184, 0, 255, 0.25);
    display: inline-block;
}

h5 {
    color: #00f3ff;
}

/* --- النماذج والمدخلات --- */
input,
textarea,
#subcribe {
    color: #ffffff !important;
}

input::placeholder,
textarea::placeholder,
#subcribe::placeholder {
    color: #cbd5e1;
    opacity: 1;
}

select.form-select.form-input.md\:w-36.w-full.md\:mt-0.mt-1.py-2.px-3.h-10.bg-transparent.dark\:bg-slate-900.dark\:text-slate-200.rounded.outline-none.border.border-gray-100.dark\:border-gray-800.focus\:ring-0 {
    color: white;
    background-color: #060223;
}

.product_note label,
label,
.flag,
.social_a,
a.category {
    color: white !important;
}

/* --- الخلفيات والأنماط الخاصة --- */
.bg-gray-50 {
    --tw-bg-opacity: 1 !important;
    background-image: url('https://www.xmaster77.com/banners/background2.webp') !important;
    background-size: fill !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

.bg-slate-50 {
    background-color: transparent !important;
}

.bg-dark-footer {
    background-color: #020423 !important;
}

/* --- التنبيهات والتحركات (Ticker) --- */
.section_list_name {
    position: relative;
    display: block;
    max-width: 160px !important;
    height: 45px;
    overflow: hidden;
    background: var(--dark);
    border-radius: 6px;
    padding: 1px;
    box-sizing: border-box;
    background-image: linear-gradient(135deg, var(--neon-pink) 0%, var(--inner-dark) 45%, var(--inner-dark) 55%, var(--neon-cyan) 100%);
    box-shadow: -6px -6px 15px rgba(255, 0, 127, 0.25), 6px 6px 15px rgba(0, 243, 255, 0.25);
}

.section_list_name::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: var(--dark);
    border-radius: 5px;
    z-index: 0;
}

.ticker_wrapper {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.name_ticker {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    font-weight: 400;
    color: #ffffff !important;
    font-size: 13px;
    display: inline-block;
    transform: translateX(0);
}

.name_ticker.has-animation {
    animation: full-pendulum var(--speed, 5s) linear infinite alternate;
}

.section_list_name:hover .has-animation {
    animation-play-state: paused;
}

/* --- الرسوم المتحركة (Animations) --- */
@keyframes full-pendulum {
    0%, 20% {
        transform: translateX(50%);
    }
    80%, 100% {
        transform: translateX(-50%);
    }
}

[dir="rtl"] .name_ticker.has-animation {
    animation: full-pendulum-rtl var(--speed, 5s) linear infinite alternate;
}

@keyframes full-pendulum-rtl {
    0%, 20% {
        transform: translateX(-50%);
    }
    80%, 100% {
        transform: translateX(50%);
    }
}

@keyframes slide {
    0% { transform: translateX(0); }
    25% { transform: translateX(-300px); }
    50% { transform: translateX(-600px); }
    75% { transform: translateX(-900px); }
    100% { transform: translateX(0); }
}

@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-1200px); }
}

/* --- التنسيقات الإضافية العامة --- */
[dir="rtl"] .paginate_theme8 li.page-item:last-child {
    border-radius: 15px 0px 0px 15px;
}

.custom-corner-border {
    border: 2px solid;
    border-top-color: #ff007f;
    border-left-color: #ff007f;
    border-bottom-color: #00f2fe;
    border-right-color: #00f2fe;
    border-radius: 6px;
    padding: 2px;
    box-sizing: border-box; 
    background-image: linear-gradient(135deg, var(--neon-pink) 0%, var(--inner-dark) 45%, var(--inner-dark) 55%, var(--neon-cyan) 100%);
    box-shadow: -6px -6px 15px rgba(255, 0, 127, 0.25), 6px 6px 15px rgba(0, 243, 255, 0.25);
}

.dark .custom-corner-border {
    border-top-color: #ff00dd;
    border-left-color: var(--neon-pink);
    border-bottom-color: #00e5ff;
    border-right-color: #00e5ff;
}

.btn_filter, .brand_route, .tracking-\[0\.5px\], .link_etrolley, .condtions, .contact_img_none, .footer_transparent {
    display: none !important;
}

input#RememberMe, .gift-card-input {
    background-color: transparent !important;
}

.grid.md\:grid-cols-2.grid-cols-1.items-center {
    background-color: #020423 !important;
}

select#country {
    width: 120px;
    border-radius: 8px;
    padding: 2%;
    background-color: var(--primary-color);
    color: white;
}

img.block.dark\:hidden, .dark\:block:is(.dark *) {
    width: 100px;
    aspect-ratio: 1;
}

.dark .parent-parent-menu-item a, 
.light .parent-parent-menu-item a {
    color: white !important;
}

.tagline-height {
    top: 0px !important; 
}

#topnav .navigation-menu > li:hover > a, 
#topnav .navigation-menu > li.active > a {
    color: var(--neon-cyan) !important;
}

.form-checkbox:checked:hover, 
.form-checkbox:checked:focus, 
.form-radio:checked:hover, 
.form-radio:checked:focus {
    background-color: black !important;
}

/* الحالات التي تفرض اللون الأبيض بشكل دائم لبعض العناصر المتنوعة */
.name_ticker, body.light .name_ticker,
#topnav svg.feather.feather-search,
h5.tracking-\[1px\].text-gray-100.font-semibold,
body.light h5.tracking-\[1px\].text-gray-100.font-semibold,
body.light #addToCart,
body.light .qty-icons button, body.light .qty-icons input,
body.light #review-tab,
body.light svg,
.container.relative p, .container.relative h1,
.container.relative h2, .container.relative h3,
.container.relative h4, .container.relative h5,
.container.relative span,
input[type=submit],
body.light input[type=submit],
body.light a.hover\:text-orange-500.text-lg.font-medium,
a.hover\:text-orange-500.text-lg.font-medium,
.cart_btn, body.light .cart_btn,
#submit,
body.light .apply_coupon,
.apply_coupon,
.bg-dark-footer p,
span.name_ticker,
body.light span.name_ticker {
    color: white !important;
}

.theme-float-btn {
    position: fixed;
    bottom: 5%;
    left: 2%;
    background-color: white;
    padding: 10px 10px;
    border-radius: 50px;
    z-index: 9999;
    font-size: 30px;
}

/* --- Light Mode (الوضع الفاتح) --- */
body.light {
    background-color: #ffffff !important;
}

body.light img,
body.light svg,
body.light video,
body.light canvas,
body.light audio,
body.light iframe,
body.light embed,
body.light object,
body.light td,
body.light .bg-white p,
body.light .bg-white a,
body.light .bg-white label,
body.light .empty,
body.light .bg-white span,
body.light .bg-white h1,
body.light .bg-white h2,
body.light .bg-white h3,
body.light .bg-white h4,
body.light .bg-white h5,
body.light .bg-white h6,
body.light h3,
body.light .product-description-content,
body.light .font-semibold,
body.light th,
body.light .text-slate-400,
body.light input,
body.light textarea,
body.light #subcribe,
body.light .product_note label,
body.light label,
body.light a.category,
body.light .grid.md\:grid-cols-2.grid-cols-1.items-center p,
body.light .flag,
body.light .social_a {
    color: #333 !important;
}

body.light .bg-white,
body.light .add-address,
body.light .grid.md\:grid-cols-2.grid-cols-1.items-center {
    background-color: #ffffff !important;
}

body.light .group {
    background-color: #f3f4f6 !important;
}

body.light .p-6.rounded-md.shadow.dark\:shadow-gray-800 h5,
body.light .p-6.rounded-md.shadow.dark\:shadow-gray-800 p,
body.light .container.relative p,
body.light .container.relative h1,
body.light .container.relative h2,
body.light .container.relative h3,
body.light .container.relative h4,
body.light .container.relative h5,
body.light .checkout_page p,
body.light .checkout_page h5,
body.light .checkout_page span,
body.light .checkout_page label,
body.light .checkout_page .text-slate-400 {
    color: black !important;
}

body.light .theme-float-btn {
    position: fixed;
    bottom: 4%;
    left: 2%;
    background-color: black;
    padding: 10px 10px;
    border-radius: 50px;
    z-index: 9999;
    font-size: 30px;
    color: white !important;
}

body.light .group .text-white {
    color: white !important;
}

body.light #topnav svg.feather.feather-shopping-cart {
    width: 16px;
    height: 16px;
    color: white !important;
}

body.light .paginate_theme8 li.page-item span, 
body.light .paginate_theme8 li.page-item button {
    color: #ff00db !important;
}

body.light .paginate_theme8 li.page-item {
    border: 1px solid #42077b !important;
}

/* --- الاستجابة للشاشات (Media Queries) --- */
@media (max-width: 991px) {
    .logo_image_small {
        display: none !important;
    }
    #topnav, #navigation {
        background-color: #020423;
    }
    #topnav .navbar-toggle span {
        background-color: #020423 !important;
    }
    .section_list_name {
        min-width: 120px !important;
    }
}

@media only screen and (min-width: 1000px) {
    #topnav #navigation {
        background-color: transparent !important;
    }
    .bg-gray-50 {
        background-size: cover !important;
    }
}

@media only screen and (min-width: 1200px) {
    .sections_mobile {
        display: none !important;
    }
    .section_grid {
        display: flex !important;
        justify-content: center;
    }
    .section_grid .relative.overflow-hidden.group.rounded-md.shadow.dark\:shadow-slate-800 {
        width: 16.6%;
        min-width: 200px;
    }
    [dir="rtl"] #topnav .navigation-menu>li {
        margin-left: 1px !important;
        margin-right: 1px !important;
    }
}

@media only screen and (min-width: 1400px) {
    .section_grid .relative.overflow-hidden.group.rounded-md.shadow.dark\:shadow-slate-800 {
        min-width: 280px;
    }
    .section_list_name {
        max-width: 250px !important;
        width: 250px !important;
    }
}

@media only screen and (max-width: 700px) {
    .bg-cover-about.py-36 {
        padding-top: 20% !important;
        padding-bottom: 1% !important;
    }
    .w-full.leading-\[0\].border-0.contact_img img {
        object-fit: contain !important;
        height: fit-content !important;
    }
    #topnav .navigation-menu > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        --tw-text-opacity: 1;
        color: white !important;
    }
    .bg-gray-50 {
        background-size: fill !important;
        background-position: unset !important;
    }
}

@media only screen and (max-width: 600px) {
    .logo_image_small {
        display: none !important;
    }
    .price_card_cart {
        display: flex !important;
        flex-direction: column;
        row-gap: 20px;
    }
    #topnav .logo, #topnav.nav-sticky .logo {
        width: 100px !important;
    }
    .page_title {
        padding-top: 3rem !important;
        padding-bottom: 1rem !important;
    }
}

@media (max-width: 500px) {
    .section_list_name {
        max-width: 130px !important;
        width: 130px !important;
    }
    #topnav .navigation-menu>li:hover>a:is(.dark *),
    #topnav .navigation-menu>li.active>a:is(.dark *) {
        color: var(--neon-pink) !important;
    }
}

@media (min-width: 576px) {
    .tagline-height {
        top: 0px !important; 
        background-color: #06022375 !important;
        height: 100px;
    }
}

.social_icons.share_icon{
    display:flex;color:white !important}
@media (max-width: 991px) {
    body.light #topnav .navigation-menu {
        float: none !important;
        background-color: white;
        padding-bottom: 10% !important;
    }
    body.light #topnav.navbar_dark .navigation-menu>li>a,
    body.light .dark .parent-parent-menu-item a,
    body.light .light .parent-parent-menu-item a{
        color:black !important;
    }
     #topnav .navbar-toggle span {
        background-color: #ffffff !important;
    }
}
.product_price,
.leading-normal,
.hover\:text-orange-500,
a.text-slate-400.hover\:text-orange-500 {
      background: linear-gradient(135deg, #00f3ff 0%, #b800ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: 0 0 20px rgba(184, 0, 255, 0.25);
    display: inline-block;
    
}

body.light select.form-select{
    color:black !important;
}

.container .group p,.items-center p{
    color: var(--neon-pink) !important;
    
}
body.light .name_ticker{
    color:white !important;
}