/* ==========================================
   1. متغيرات اللون الأساسية
   ========================================== */
:root {
    --bg-main: #1e1e1e;
    --bg-card: #2a2a2a;
    --bg-surface: #252525;
    --bg-input: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #707070;
    --accent: #00E676;
    --accent-hover: #00c853;
    --border: #383838;
    --border-hover: #555555;
    --shadow: rgba(0,0,0,0.5);
    color-scheme: dark;

    --s-bg-body: #1e1e1e;
    --s-bg-default: #2a2a2a;
    --s-bg-overlay: #2a2a2a;
    --s-bg-subtle: #252525;
    --s-bg-white: #2a2a2a;
    --s-color-white: #2a2a2a;
    --s-text-color: #ffffff;
    --s-color-text: #ffffff;
    --s-color-text-default: #ffffff;
    --s-border-color: #383838;
    --s-color-border: #383838;
    --s-color-bg-body: #1e1e1e;
    --s-color-bg-default: #2a2a2a;
    --s-color-bg-overlay: #2a2a2a;
    --s-card-color-bg: #2a2a2a;
    --s-block-color-bg: #2a2a2a;
    --s-surface-1: #1e1e1e;
    --s-surface-2: #2a2a2a;
    --s-surface-3: #252525;
    --surface: #2a2a2a;
    --card-bg: #2a2a2a;
    --s-component-bg: #2a2a2a;
    --s-form-bg: #1a1a1a;
    --s-input-bg: #1a1a1a;
    --white: #2a2a2a;
    --s-white: #2a2a2a;
    --bg: #2a2a2a;
    --background: #2a2a2a;
    --color: #ffffff;
}

/* ==========================================
   2. تحديد النص
   ========================================== */
::selection, ::-moz-selection {
    background-color: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

/* ==========================================
   3. الخلفية العامة
   ========================================== */
html, body, .main-wrapper, .page-content, #app,
.sections-wrapper, .main-content, .site-main,
.product-single, .product-main, section {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
}

/* ==========================================
   4. تأثيرات الماوس
   ========================================== */
a, button, [role="button"], label, select,
.btn, .s-btn, [class*="btn"],
.product-card, .s-block, .s-product-card,
.menu a, nav a, .tab, .link {
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

/* روابط التنقل — أبيض فقط */
a:hover, a:focus, a:active {
    color: #e0e0e0 !important;
    -webkit-text-fill-color: #e0e0e0 !important;
    text-decoration: none !important;
}
header nav a:hover, header nav a:focus,
header .menu a:hover, .header-menu a:hover,
.site-header-nav a:hover, nav a:hover, nav a:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.product-card:hover, .s-block:hover,
.s-product-card:hover, [class*="product-card"]:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 30px var(--shadow) !important;
    border-color: var(--border-hover) !important;
}

.btn--add-to-cart:hover, .product-form__submit:hover {
    background-color: var(--accent-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
}

button:not(.btn--add-to-cart):not(.product-form__submit):hover {
    background-color: #333333 !important;
    border-color: var(--border-hover) !important;
}

.btn--circular:hover, .s-circular-btn:hover {
    background-color: #333 !important;
    border-color: var(--border-hover) !important;
    transform: scale(1.08) !important;
}

input:focus, select:focus, textarea:focus,
button:focus, a:focus, [tabindex]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1) !important;
    border-color: var(--border-hover) !important;
}

/* ==========================================
   5. القائمة العلوية
   ========================================== */
header, .site-header, .main-header, .s-header {
    background-color: #161616 !important;
    border-bottom: 1px solid var(--border) !important;
}
header nav a, header .menu a, .header-menu a, .site-header-nav a {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* ==========================================
   6. نصوص المنتج
   ========================================== */
.product-details *, .product-description *,
.s-html-content *, [class*="product-details"] *,
[class*="description"] *, .product-single__description * {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
.product-details__price-before *, .price-before *, .old-price *, del {
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
    text-decoration: line-through !important;
    text-decoration-color: #ff4444 !important;
}
.product-single__description, .product-details__inner, .s-html-content {
    background-color: transparent !important;
}
.product-form label, .s-product-form label, .form-group label, .s-label {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* ==========================================
   7. كروت المنتجات
   ========================================== */
.product-card, .s-product-card, .product-item,
[class*="product-card"], .s-block {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}
.product-card *, .s-product-card *, [class*="product-card"] * {
    color: var(--text-primary) !important;
}

/* ==========================================
   8. الأزرار الدائرية
   ========================================== */
.btn--circular, .s-circular-btn, [class*="btn--circular"],
.product-details__header button, .product-share-btn,
.product-favorite-btn, s-button, s-button > button {
    display: inline-flex !important;
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    --s-button-color-bg: #2a2a2a !important;
    --btn-bg: #2a2a2a !important;
}
.btn--circular *, s-button *, s-button button * {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
    background: transparent !important;
    stroke: var(--text-primary) !important;
}
s-button::part(base), s-button::part(button), s-button::part(native) {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    border-radius: 50% !important;
}
s-button svg, s-button svg *, s-button i, s-button span {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
    stroke: var(--text-primary) !important;
}

/* ==========================================
   9. المحيط الأبيض — Wrappers
   ========================================== */
*:has(> s-product-options),
*:has(> s-product-attachments),
*:has(> s-product-note) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
*:has(> s-product-gift) {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
}

.s-section, .s-block, .s-surface, .s-card,
[class*="section-wrapper"], [class*="field-wrapper"],
[class*="option-wrapper"], [class*="product-section"],
.product-form > div, .s-product-form > div,
.product-details__form > div, .product-details__content > div,
.product-details__actions > div,
[class*="product-form"] > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

s-product-options, s-product-attachments,
s-product-note, s-product-gift,
s-product-options > *, s-product-attachments > *,
s-product-note > *, s-product-gift > * {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    --s-bg-default: transparent !important;
    --s-bg-white: transparent !important;
}

s-product-options::part(container), s-product-options::part(wrapper),
s-product-attachments::part(container), s-product-attachments::part(button),
s-product-note::part(container), s-product-note::part(wrapper) {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* ==========================================
   10. حقول الإدخال
   ========================================== */
input, select, textarea,
.product-form select, .product-form textarea, .product-form input,
.form-control, .s-textarea, .s-input,
.quantity-wrapper input, .s-quantity-input input {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}
::placeholder { color: var(--text-muted) !important; }

.choices__inner, .choices__list, .choices__list--dropdown,
.choices[data-type*="select-one"] .choices__inner,
.choices__list[aria-expanded] {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}
.choices__item, .choices__item--selectable { color: var(--text-primary) !important; }
.choices__item--selectable:hover {
    background-color: #333 !important;
    color: #ffffff !important;
}

/* ==========================================
   11. زر الشراء
   ========================================== */
.btn--add-to-cart, .product-form__submit, .s-button-primary,
button.btn--add-to-cart, button[type="submit"].btn--primary {
    background-color: var(--accent) !important;
    color: #000 !important;
    border: none !important;
    font-weight: bold !important;
    border-radius: 10px !important;
}
.btn--add-to-cart *, .product-form__submit * { color: #000 !important; }

/* ==========================================
   12. خانة الهدية
   ========================================== */
s-product-gift {
    display: block !important;
    background-color: var(--bg-card) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    --s-bg-default: #2a2a2a !important;
    --s-bg-white: #2a2a2a !important;
    --bg: #2a2a2a !important;
}
s-product-gift::part(container), s-product-gift::part(wrapper),
s-product-gift::part(form), s-product-gift::part(content) {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}
s-product-gift button, s-product-gift input, s-product-gift textarea,
s-product-gift select, s-product-gift label, s-product-gift span,
s-product-gift p, s-product-gift h1, s-product-gift h2, s-product-gift h3 {
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: var(--border) !important;
}
s-product-gift input, s-product-gift textarea {
    background-color: var(--bg-input) !important;
}
s-product-gift svg, s-product-gift i {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

/* ==========================================
   13. الشريط السفلي والتابات
   ========================================== */
.sticky-product-bar, .product-footer, .s-sticky-bar,
.product-details__footer, .sticky-bar,
.product-tabs, .s-product-tabs,
s-product-tabs, s-product-tabs > div,
s-sticky-product-bar, s-sticky-product-bar > div {
    background-color: #161616 !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}
s-product-tabs *, .s-product-tabs * { color: var(--text-primary) !important; }
s-product-tabs::part(container), s-sticky-product-bar::part(bar) {
    background: #161616 !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* ==========================================
   14. قسم التعليقات والتقييمات
   ========================================== */
.product-reviews, .s-product-reviews, .s-comments,
.product-comments, .reviews-section, .comments-section,
.s-review, .review-section, [class*="reviews"],
[class*="comments"], [class*="comment"],
s-product-reviews, s-comments, s-product-comments {
    background-color: var(--bg-main) !important;
    background: var(--bg-main) !important;
    color: var(--text-primary) !important;
    border-top: 1px solid var(--border) !important;
}

.product-reviews *, .s-product-reviews *, .s-comments *,
.product-comments *, .reviews-section *, .comments-section *,
[class*="reviews"] *, [class*="comments"] *,
[class*="comment"] *, s-product-reviews *,
s-comments *, s-product-comments * {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

.review-card, .comment-card, .s-review-card,
.review-item, .comment-item, [class*="review-item"],
[class*="comment-item"], .s-comment {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
}

.review-author, .comment-author, .reviewer-name,
.review-date, .comment-date, .review-meta,
[class*="author"], [class*="reviewer"] {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

.review-form, .comment-form, .s-review-form,
[class*="review-form"], [class*="comment-form"] {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 16px !important;
}
.review-form *, .comment-form *, [class*="review-form"] * {
    color: var(--text-primary) !important;
}
.review-form input, .review-form textarea,
.comment-form input, .comment-form textarea {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}

s-product-reviews, s-comments {
    background: var(--bg-main) !important;
    color: var(--text-primary) !important;
    --s-bg-default: #1e1e1e !important;
    --s-bg-white: #1e1e1e !important;
}
s-product-reviews::part(container), s-product-reviews::part(review),
s-product-reviews::part(card), s-comments::part(container),
s-comments::part(comment), s-comments::part(card) {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}
*:has(> s-product-reviews), *:has(> s-comments) {
    background: var(--bg-main) !important;
}

.star, .s-star, [class*="star"] svg,
[class*="rating"] svg {
    fill: #FFD700 !important;
    color: #FFD700 !important;
}

/* ==========================================
   15. الفوتر
   ========================================== */
.main-footer, .site-footer, .store-footer, .s-footer, footer,
[class*="footer__inner"], [class*="footer-wrapper"], .footer-top {
    background-color: #111 !important;
    border-top: 1px solid var(--border) !important;
}
.main-footer *, .site-footer *, .store-footer *, .s-footer * {
    color: var(--text-primary) !important;
}
.s-footer a:hover, footer a:hover {
    color: #b0b0b0 !important;
    -webkit-text-fill-color: #b0b0b0 !important;
}

/* ==========================================
   16. Tailwind + Inline styles
   ========================================== */
.bg-white { background-color: var(--bg-card) !important; }
.bg-gray-50 { background-color: var(--bg-input) !important; }
.bg-gray-100 { background-color: var(--bg-surface) !important; }
.bg-gray-200 { background-color: var(--bg-card) !important; }
.text-gray-900, .text-gray-800, .text-gray-700, .text-black {
    color: var(--text-primary) !important;
}
.text-gray-500, .text-gray-400 { color: var(--text-secondary) !important; }
.border-gray-200, .border-gray-300 { border-color: var(--border) !important; }
[style*="background: white"], [style*="background:white"],
[style*="background-color: white"], [style*="background-color:white"],
[style*="background: #fff"], [style*="background:#fff"],
[style*="background: #ffffff"], [style*="background:#ffffff"] {
    background: var(--bg-card) !important;
}

/* ==========================================
   17. جداول المواصفات
   ========================================== */
table {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
table th { background: #333 !important; color: var(--text-primary) !important; }
table td { color: var(--text-primary) !important; border-color: var(--border) !important; }
table tr:hover td { background: #333 !important; }

/* تجاوز اللون الذهبي في أيقونات المكونات */
:root,
s-product-gift, s-button, s-product-options,
s-product-attachments, s-product-note {
    --s-color-primary: #ffffff !important;
    --s-color-brand: #ffffff !important;
    --s-primary: #ffffff !important;
    --s-icon-color: #ffffff !important;
    --s-color-icon: #ffffff !important;
    --primary: #ffffff !important;
    --primary-color: #ffffff !important;
}

s-product-gift svg, s-product-gift svg *,
s-product-gift svg path, s-product-gift svg circle,
s-button svg, s-button svg *,
s-product-attachments svg, s-product-attachments svg *,
s-product-options svg, s-product-options svg * {
    fill: #ffffff !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
}

s-button, s-button > *,
s-button button, s-button [part] {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    --s-color-primary: #2a2a2a !important;
    --primary-color: #2a2a2a !important;
}

/* ==========================================
   18. النوافذ المنبثقة (Popups & Modals) - جديد للترتيب
   ========================================== */
s-modal, .s-modal, .modal-content, s-marketing-modal,
[class*="modal"] > div {
    background-color: var(--bg-card) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}
s-modal .btn-close, .s-modal-close, s-marketing-modal .close,
.modal-header .close, button[data-dismiss="modal"] {
    color: var(--text-primary) !important;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
}
s-modal .btn-close:hover, .s-modal-close:hover, s-marketing-modal .close:hover {
    background-color: #ff4444 !important;
    color: #ffffff !important;
}