/* =========================================================
   ZAFFA MARKET — COMMON THEME CSS
   Общие dark/light стили для всех страниц
   ========================================================= */

/* =========================================================
   1. BASE
   ========================================================= */
html {
    transition: background-color .3s ease, color .3s ease;
}

body {
    background: #f5f7ff;
    color: #111827;
    transition: background-color .3s ease, color .3s ease;
}

html.dark body {
    background: #0b1120 !important;
    color: #e5e7eb !important;
}

/* для login page, где фон градиентный */
body.theme-gradient {
    background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 55%, #ffffff 100%);
}

html.dark body.theme-gradient {
    background: linear-gradient(135deg, #0b1120 0%, #0f172a 55%, #111827 100%) !important;
}

/* =========================================================
   2. THEME TOGGLE
   ========================================================= */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
}

.main-button {
    background: transparent;
    border: none;
    cursor: pointer;
}

.theme-toggle-active i {
    color: #60a5fa !important;
}

.theme-toggle-active span {
    color: #f8fafc !important;
}

html.dark .theme-toggle i {
    color: #60a5fa !important;
}

html.dark .theme-toggle span {
    color: #e5e7eb !important;
}

html.dark .theme-toggle:hover i {
    color: #93c5fd !important;
}

/* =========================================================
   3. HEADER / NAVBAR
   ========================================================= */
html.dark header {
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark nav.fixed,
html.dark .sticky.top-0.z-50,
html.dark .fixed.top-0.left-0.w-full.py-5 {
    background: rgba(15, 23, 42, 0.94) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html.dark a.exo-700,
html.dark .exo-700,
html.dark .text-black {
    color: #f8fafc !important;
}

/* =========================================================
   4. COMMON BACKGROUNDS / CARDS / BLOCKS
   ========================================================= */
html.dark .bg-white,
html.dark .bg-white\/50,
html.dark .bg-white\/60,
html.dark .bg-white\/80,
html.dark .bg-white\/90,
html.dark .bg-gray-50,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-\[\#eef3ff\] {
    background: rgba(15, 23, 42, 0.94) !important;
}

html.dark .group.border-2,
html.dark .rounded-2xl.border,
html.dark .rounded-3xl.border,
html.dark .rounded-4xl,
html.dark .product-card,
html.dark .filter-card,
html.dark .wishlist-item,
html.dark .cart-item,
html.dark .faq-item,
html.dark #emptyWishlist,
html.dark #emptyCart,
html.dark #successModalBox,
html.dark #checkoutModalBox,
html.dark #sidebarEl > div,
html.dark #filterDrawer,
html.dark #cartSummaryBox > div {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark #filterDrawer {
    background: #0b1120 !important;
}

html.dark .thumb-item {
    background: #111827 !important;
    border-color: transparent !important;
}

html.dark .swiper-slide-thumb-active .thumb-item {
    border-color: #2563eb !important;
}

/* =========================================================
   5. TEXT COLORS
   ========================================================= */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
    color: #f8fafc !important;
}

html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-slate-400,
html.dark .text-slate-300,
html.dark .text-gray-600,
html.dark .text-gray-500,
html.dark .text-gray-400,
html.dark .text-gray-300 {
    color: #94a3b8 !important;
}

html.dark .text-blue-600 {
    color: #60a5fa !important;
}

html.dark .text-green-600 {
    color: #4ade80 !important;
}

html.dark .text-red-500,
html.dark .text-red-600 {
    color: #ff1414 !important;
}

html.dark .text-purple-600,
html.dark .text-purple-700 {
    color: #952aff !important;
}

html.dark .text-orange-600 {
    color: #f68930 !important;
}

html.dark .text-amber-500 {
    color: #fbbf24 !important;
}

html.dark .text-yellow-400 {
    color: #facc15 !important;
}

html.dark .text-white {
    color: #ffffff !important;
}

/* =========================================================
   6. BORDERS
   ========================================================= */
html.dark .border-gray-200,
html.dark .border-gray-100,
html.dark .border-slate-200,
html.dark .border-slate-100,
html.dark .border-blue-100,
html.dark .border-blue-200,
html.dark .border-blue-300\/30,
html.dark .border-blue-600\/10,
html.dark .border-blue-600\/20,
html.dark .border-green-200,
html.dark .border-red-200,
html.dark .border-white,
html.dark .border-white\/10 {
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark .border-blue-600 {
    border-color: #2563eb !important;
}

html.dark .border-green-500 {
    border-color: #22c55e !important;
}

html.dark .border-red-500 {
    border-color: #ef4444 !important;
}

html.dark .border-purple-600 {
    border-color: #7c3aed !important;
}

html.dark .border-r.border-gray-200 {
    border-right-color: rgba(148, 163, 184, 0.2) !important;
}

/* =========================================================
   7. SHADOWS
   ========================================================= */
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}

/* =========================================================
   8. INPUTS / TEXTAREA / SELECT
   ========================================================= */
html.dark input[type="search"],
html.dark input[type="text"],
html.dark input[type="tel"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="range"],
html.dark input,
html.dark textarea,
html.dark select {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #94a3b8 !important;
}

html.dark select option {
    background: #0f172a !important;
    color: #f8fafc !important;
}

html.dark label,
html.dark label.text-gray-700 {
    color: #e5e7eb !important;
}

html.dark .focus\:border-blue-600:focus,
html.dark .focus\:ring-2:focus,
html.dark .focus\:ring-black\/80:focus,
html.dark .focus-within\:border-blue-600:focus-within {
    border-color: #2563eb !important;
    --tw-ring-color: rgba(37, 99, 235, .35) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25) !important;
}

html.dark .accent-blue-600 {
    accent-color: #2563eb;
}

/* =========================================================
   9. COMMON COLOR BACKGROUNDS
   ========================================================= */
html.dark .bg-blue-50 {
    background: rgba(37, 99, 235, 0.14) !important;
}

html.dark .bg-green-50 {
    background: rgba(22, 101, 52, 0.18) !important;
}

html.dark .bg-red-50 {
    background: rgba(220, 38, 38, 0.12) !important;
}

html.dark .bg-purple-50 {
    background: rgba(124, 58, 237, 0.16) !important;
}

html.dark .bg-amber-50 {
    background: rgba(245, 158, 11, 0.15) !important;
}

html.dark .bg-blue-100\/40 {
    background: rgba(37, 99, 235, 0.08) !important;
}

html.dark .bg-purple-100\/40 {
    background: rgba(168, 85, 247, 0.08) !important;
}

html.dark .bg-blue-600 {
    background-color: #2563eb !important;
}

html.dark .bg-green-500 {
    background-color: #22c55e !important;
}

html.dark .bg-red-500,
html.dark .bg-red-600 {
    background-color: #ef4444 !important;
}

html.dark .bg-purple-600 {
    background-color: #7c3aed !important;
}

html.dark .bg-blue-600\/10 {
    background: rgba(37, 99, 235, 0.16) !important;
}

html.dark .bg-blue-600\/90 {
    background: rgba(37, 99, 235, 0.92) !important;
}

html.dark .bg-red-500\/90 {
    background: rgba(239, 68, 68, 0.92) !important;
}

html.dark .bg-orange-500\/10 {
    background: rgba(249, 115, 22, 0.14) !important;
}

html.dark .bg-amber-500\/20 {
    background: rgba(245, 158, 11, 0.16) !important;
}

html.dark .bg-green-500\/20 {
    background: rgba(34, 197, 94, 0.16) !important;
}

/* =========================================================
   10. BUTTONS / HOVERS
   ========================================================= */
html.dark .hover\:bg-transparent:hover,
html.dark .hover\:bg-white:hover {
    background: transparent !important;
}

html.dark .hover\:bg-blue-600:hover {
    background-color: #2563eb !important;
}

html.dark .hover\:bg-blue-700:hover {
    background-color: #1d4ed8 !important;
}

html.dark .hover\:bg-red-500:hover,
html.dark .hover\:bg-red-600:hover {
    background-color: #ef4444 !important;
}

html.dark .hover\:bg-green-600:hover {
    background-color: #16a34a !important;
}

html.dark .hover\:text-blue-600:hover,
html.dark .hover\:text-blue-700:hover,
html.dark .hover\:text-blue-800:hover {
    color: #60a5fa !important;
}

html.dark .hover\:text-green-600:hover {
    color: #4ade80 !important;
}

html.dark .hover\:text-red-500:hover,
html.dark .hover\:text-red-600:hover {
    color: #f87171 !important;
}

html.dark .hover\:text-purple-600:hover,
html.dark .hover\:text-purple-700:hover {
    color: #c084fc !important;
}

html.dark .hover\:text-orange-600:hover {
    color: #fb923c !important;
}

html.dark .hover\:text-white:hover {
    color: #ffffff !important;
}

html.dark .hover\:border-blue-600:hover {
    border-color: #2563eb !important;
}

html.dark .hover\:border-red-500:hover {
    border-color: #ef4444 !important;
}

html.dark .hover\:border-blue-200:hover {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

/* белая кнопка в dark */
html.dark a.bg-white,
html.dark .bg-white.text-purple-600,
html.dark .border-2.border-purple-600.bg-white.text-purple-600,
html.dark .border-purple-600.bg-white.text-purple-600 {
    background: rgba(15, 23, 42, 0.9) !important;
    color: #c084fc !important;
    border-color: #7c3aed !important;
}

html.dark a.bg-white:hover,
html.dark .bg-white.text-purple-600:hover,
html.dark .border-2.border-purple-600.bg-white.text-purple-600:hover,
html.dark .border-purple-600.bg-white.text-purple-600:hover {
    background: transparent !important;
    color: #60a5fa !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), 0 16px 40px rgba(37, 99, 235, 0.12) !important;
}

html.dark a.bg-blue-600:hover {
    background: transparent !important;
    color: #60a5fa !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), 0 16px 40px rgba(37, 99, 235, 0.12) !important;
}

html.dark a.bg-green-500:hover {
    background: transparent !important;
    color: #22c55e !important;
}

html.dark a.bg-amber-500:hover {
    background: transparent !important;
    color: #f59e0b !important;
}

/* login button hover */
html.dark .hover\:shadow-blue-600:hover {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25), 0 10px 25px rgba(37, 99, 235, 0.18) !important;
}

/* =========================================================
   11. DROPDOWNS (LANGUAGE / TABLE MENU)
   ========================================================= */
html.dark .absolute.top-12.right-0.w-12,
html.dark .absolute.top-12.right-0.w-24 {
    background: rgba(15, 23, 42, 0.88) !important;
    color: #e5e7eb !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    backdrop-filter: blur(12px);
}

html.dark .absolute.top-12.right-0.w-12 a,
html.dark .absolute.top-12.right-0.w-24 a {
    color: #e5e7eb !important;
}

html.dark .absolute.top-12.right-0.w-24 a:hover {
    color: #60a5fa !important;
}

html.dark .absolute.top-12.right-0.w-12 a:hover .fa-heart,
html.dark .absolute.top-12.right-0.w-12 a:hover i.fa-regular.fa-heart {
    color: #f87171 !important;
}

html.dark .absolute.top-12.right-0.w-12 a:hover .fa-circle-info {
    color: #fb923c !important;
}

html.dark .absolute.top-12.right-0.w-12 a:hover .fa-message {
    color: #4ade80 !important;
}

html.dark .absolute.top-12.right-0.w-12 .theme-toggle:hover i {
    color: #60a5fa !important;
}

html.dark .relative.group > button.text-gray-700.text-xl {
    color: #e5e7eb !important;
}

html.dark .relative.group > button.text-gray-700.text-xl:hover {
    color: #60a5fa !important;
}

/* table menu square */
html.dark .group.bg-gray-100.border-2.border-gray-100.rounded-lg.w-10.h-10 {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark .group.bg-gray-100.border-2.border-gray-100.rounded-lg.w-10.h-10 button {
    color: #e5e7eb !important;
}

html.dark .group.bg-gray-100.border-2.border-gray-100.rounded-lg.w-10.h-10 button:hover {
    color: #60a5fa !important;
}

/* =========================================================
   12. MOBILE MENU
   ========================================================= */
html.dark .max-\[425px\]\:block.fixed.bottom-0.left-0.w-full.h-20,
html.dark .max-\[425px\]\:fixed.max-\[425px\]\:bottom-0.max-\[425px\]\:left-0.max-\[425px\]\:z-50.max-\[425px\]\:block.max-\[425px\]\:h-20.max-\[425px\]\:w-full {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark .max-\[425px\]\:block.fixed.bottom-0.left-0.w-full.h-20 a,
html.dark .max-\[425px\]\:block.fixed.bottom-0.left-0.w-full.h-20 button {
    color: #e5e7eb !important;
}

/* =========================================================
   13. FOOTER
   ========================================================= */
html.dark footer,
html.dark .bg-gray-950,
html.dark .bg-slate-950 {
    background: #020617 !important;
}

/* =========================================================
   14. MODALS / OVERLAYS / TOAST
   ========================================================= */
html.dark #drawerOverlay,
html.dark #successModal,
html.dark #checkoutOverlay,
html.dark #successOverlay {
    background: rgba(2, 6, 23, 0.72) !important;
}

html.dark #toast {
    background: #111827 !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

/* =========================================================
   15. FAQ
   ========================================================= */
html.dark .faq-item {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark .faq-btn {
    background: transparent !important;
}

html.dark .faq-btn h3 {
    color: #f8fafc !important;
}

html.dark .faq-content {
    background: transparent !important;
}

html.dark .faq-content p {
    color: #94a3b8 !important;
}

html.dark .faq-item.active,
html.dark .faq-item.open {
    background: #111827 !important;
}

html.dark .faq-icon {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #60a5fa !important;
}

/* =========================================================
   16. HERO / BLUR / SPECIAL COMMON EFFECTS
   ========================================================= */
html.dark .blur-3xl {
    filter: blur(120px);
    opacity: 0.4;
}

html.dark section.bg-\[linear-gradient\(to_bottom_right\,\#eef3ff\,\#f8fbff\,\#ffffff\)\] {
    background: linear-gradient(135deg, #0f172a 0%, #111827 55%, #0b1120 100%) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark section.bg-\[linear-gradient\(to_bottom_right\,\#eef3ff\,\#f8fbff\,\#ffffff\)\] .bg-white\/90 {
    background: rgba(15, 23, 42, 0.88) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30) !important;
}

html.dark section.bg-\[linear-gradient\(to_bottom_right\,\#eef3ff\,\#f8fbff\,\#ffffff\)\] p {
    color: #94a3b8 !important;
}

html.dark .bg-\[linear-gradient\(to_bottom_right\,\#eef4ff\,\#f8fbff\,\#ffffff\)\] {
    background: linear-gradient(to bottom right, #0f172a, #111827, #0b1120) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30) !important;
}

/* =========================================================
   17. CURRENCY SWITCHER
   ========================================================= */
.currency {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.currency-btn {
    background: transparent;
    color: #64748b;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.currency-btn:hover {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #ffffff;
}

.currency-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

html.dark .currency {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(148, 163, 184, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html.dark .currency-btn {
    background: transparent;
    color: #e2e8f0 !important;
    border-color: transparent;
}

html.dark .currency-btn:hover {
    border-color: #60a5fa;
    color: #60a5fa;
    background: rgba(15, 23, 42, 1);
}

html.dark .currency-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

/* =========================================================
   18. SWIPER / PAGINATION
   ========================================================= */
.swiper-pagination {
    position: static !important;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.swiper-pagination-bullet {
    width: 20px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
    opacity: 1;
    margin: 0 !important;
}

.swiper-pagination-bullet-active {
    background: #2563eb;
}

.relatedProductsPagination .swiper-pagination-bullet {
    width: 18px;
    height: 4px;
    border-radius: 999px;
    background: #cbd5e1;
    opacity: 1;
    transition: 0.3s ease;
}

.relatedProductsPagination .swiper-pagination-bullet-active {
    width: 28px;
    background: #2563eb;
}

html.dark .relatedProductsPagination .swiper-pagination-bullet {
    background: #475569;
}

html.dark .relatedProductsPagination .swiper-pagination-bullet-active {
    background: #60a5fa;
}

html.dark .relatedProductsPrev,
html.dark .relatedProductsNext {
    background: #0f172a !important;
    color: #60a5fa !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

html.dark .relatedProductsPrev:hover,
html.dark .relatedProductsNext:hover {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

/* =========================================================
   19. PRODUCT / EXTRA COMMON UI
   ========================================================= */
html.dark .fa-basket-shopping.text-purple-600 {
    color: #c084fc !important;
}

html.dark .drop-shadow-\[0_12px_30px_rgba\(37\,99\,235\,0\.22\)\] {
    filter: drop-shadow(0 12px 30px rgba(96, 165, 250, 0.18)) !important;
}

html.dark .bg-slate-50,
html.dark .hero-circle-inner,
html.dark .hero-circle-outer,
html.dark .hero-slide-bg-1 {
    background: #0f172a !important;
}

/* =========================================================
   20. UTILITIES
   ========================================================= */
html.dark .menu-hidden {
    background: transparent !important;
}

html.dark #nav-list,
html.dark #nav-list li,
html.dark #nav-list a {
    background: transparent !important;
    box-shadow: none !important;
}

html.dark #nav-list {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 10px 20px;
}

html.dark #nav-list.max-\[570px\]\:bg-white\/50,
html.dark .max-\[570px\]\:bg-white\/50 {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}