/* Dark theme — include last in so it overrides page :root variables */ html[data-theme="dark"] { color-scheme: dark; --dark-green: #0c1812; --mid-green: #239870; --light-green: #6ee7b4; --bg-color: #0d1210; --text-dark: #e8ecea; --text-muted: #9aaf9f; --card-bg: #151c18; --card-border: rgba(255, 255, 255, 0.1); --danger: #f07178; --warning: #e6c229; --success: #4cd97f; } html[data-theme="dark"] body { background-color: var(--bg-color); color: var(--text-dark); } html[data-theme="dark"] body::after { opacity: 0.04; } /* ——— Shop + collection-layout ——— */ html[data-theme="dark"] .breadcrumb-nav { color: var(--text-muted); } html[data-theme="dark"] .shop-header h2 { color: var(--light-green); } html[data-theme="dark"] .shop-header p { color: var(--text-muted); } html[data-theme="dark"] .toolbar-amount, html[data-theme="dark"] .sort-label { color: var(--text-muted); } html[data-theme="dark"] .grid-mode-btn { border-color: var(--card-border); background: var(--card-bg); color: var(--text-muted); } html[data-theme="dark"] .grid-mode-btn:hover { color: var(--light-green); } html[data-theme="dark"] .grid-mode-btn.active { background: rgba(110, 231, 180, 0.12); color: var(--light-green); } html[data-theme="dark"] .sort-select { border-color: var(--card-border); background: var(--card-bg); color: var(--text-dark); } html[data-theme="dark"] .product-card { background: var(--card-bg); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .product-card:hover { box-shadow: 0 18px 40px rgba(35, 152, 112, 0.2); } html[data-theme="dark"] .product-code, html[data-theme="dark"] .no-results { color: var(--text-muted); } html[data-theme="dark"] .product-title { color: var(--text-dark); } html[data-theme="dark"] .product-category { background: rgba(110, 231, 180, 0.12); color: var(--light-green); } html[data-theme="dark"] .pagination-btn { background: var(--card-bg); border-color: rgba(35, 152, 112, 0.45); color: var(--text-dark); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .pagination-btn:hover:not(:disabled) { background: rgba(110, 231, 180, 0.15); color: var(--text-dark); } html[data-theme="dark"] .pagination-btn.active { color: var(--dark-green); } html[data-theme="dark"] .size-swatch .pill { border-color: rgba(110, 231, 180, 0.35); } /* ——— main.html home sections ——— */ html[data-theme="dark"] .container .section-title { color: var(--text-dark) !important; } html[data-theme="dark"] main .product-card, html[data-theme="dark"] .products-section .product-card { background: var(--card-bg); color: var(--text-dark); } html[data-theme="dark"] .products-section .product-code { color: var(--text-muted); } html[data-theme="dark"] .products-section .product-title { color: var(--text-dark); } /* ——— Product detail (product-detail.html) ——— Light text from body + theme .product-title on a white card caused invisible copy; dark card + scoped tokens fix it */ html[data-theme="dark"] .product-detail { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); color: var(--text-dark); } html[data-theme="dark"] .product-detail .product-image-frame { box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45); border-radius: 15px; outline: 1px solid var(--card-border); outline-offset: 0; } html[data-theme="dark"] .product-detail .product-code { color: var(--light-green); } html[data-theme="dark"] .product-detail .product-title { color: var(--text-dark); } html[data-theme="dark"] .product-detail .product-price { color: var(--light-green); } html[data-theme="dark"] .product-detail .product-description, html[data-theme="dark"] .product-detail .product-description--empty { color: var(--text-muted); } html[data-theme="dark"] .product-detail .meta-label { color: var(--text-muted); } html[data-theme="dark"] .product-detail .meta-value { color: var(--text-dark); } html[data-theme="dark"] .product-detail .sizes-title { color: var(--light-green); } html[data-theme="dark"] .product-detail .size-option { border-color: rgba(110, 231, 180, 0.4); background: rgba(255, 255, 255, 0.06); color: var(--text-dark); } html[data-theme="dark"] .product-detail .size-option:hover { border-color: var(--light-green); background: rgba(110, 231, 180, 0.1); } html[data-theme="dark"] .product-detail .size-option.selected { background: var(--mid-green); border-color: var(--mid-green); color: #fff; } html[data-theme="dark"] #productContent .loading { color: var(--text-muted); } html[data-theme="dark"] #productContent .loading h2 { color: var(--text-dark); } /* ——— Policy / content pages (common patterns) ——— */ html[data-theme="dark"] .policy-content, html[data-theme="dark"] .content-wrap, html[data-theme="dark"] article { color: var(--text-dark); } html[data-theme="dark"] .policy-content h2, html[data-theme="dark"] .policy-content h3, html[data-theme="dark"] .page-hero h1 { color: var(--light-green); } html[data-theme="dark"] .policy-box, html[data-theme="dark"] .info-card, html[data-theme="dark"] .card { background: var(--card-bg); border-color: var(--card-border); color: var(--text-dark); } /* ——— Forms & inputs (generic) ——— */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--card-bg); color: var(--text-dark); border-color: var(--card-border); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-muted); } /* ——— Admin dashboard ——— */ html[data-theme="dark"] .dashboard-container { background: var(--bg-color); } html[data-theme="dark"] .login-card { background: var(--card-bg); color: var(--text-dark); border: 1px solid var(--card-border); } html[data-theme="dark"] .stat-card, html[data-theme="dark"] .quick-actions, html[data-theme="dark"] .admin-card, html[data-theme="dark"] .product-form-container, html[data-theme="dark"] .orders-section { background: var(--card-bg) !important; color: var(--text-dark); border: 1px solid var(--card-border); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .stat-label { color: var(--text-muted); } html[data-theme="dark"] .management-container, html[data-theme="dark"] .products-container, html[data-theme="dark"] .control-panel { color: var(--text-dark); } html[data-theme="dark"] .management-section, html[data-theme="dark"] .filter-section { background: var(--card-bg); border-color: var(--card-border); } html[data-theme="dark"] table { background: var(--card-bg); color: var(--text-dark); } html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: var(--card-border); } /* Shipping policy tables: cells use explicit #fff in page CSS — keep text readable in dark mode */ html[data-theme="dark"] .shipping-table { background: var(--card-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .shipping-table td { background: var(--card-bg); color: var(--text-dark); border-bottom-color: var(--card-border); } html[data-theme="dark"] .shipping-table tr:hover td { background: rgba(110, 231, 180, 0.07); } html[data-theme="dark"] .shipping-table-mini td { background: var(--card-bg); color: var(--text-dark); border-bottom-color: var(--card-border); } html[data-theme="dark"] .shipping-table-mini tr:hover td { background: rgba(110, 231, 180, 0.07); } html[data-theme="dark"] .shipping-table-mini { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } /* ——— Navigator glass (slightly stronger in dark pages) ——— */ html[data-theme="dark"] .liquid-nav { background: rgba(8, 22, 16, 0.72); border-color: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] #whatsAppFloat { background: #0d4d38; } /* ——— Checkout ——— */ html[data-theme="dark"] .checkout-form, html[data-theme="dark"] .order-summary { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .form-section h3 { color: var(--light-green); } html[data-theme="dark"] .form-group input, html[data-theme="dark"] .form-group select, html[data-theme="dark"] .form-group textarea { background: var(--card-bg); color: var(--text-dark); border-color: var(--card-border); } html[data-theme="dark"] .payment-option { border-color: var(--card-border); background: rgba(255, 255, 255, 0.04); } html[data-theme="dark"] .payment-option-title { color: var(--text-dark); } html[data-theme="dark"] .payment-option-description { color: var(--text-muted); } /* Selected payment: checkout uses .selected + dark text — beats generic dark rules; restore readable contrast */ html[data-theme="dark"] .payment-option.selected { background: linear-gradient(145deg, rgba(110, 231, 180, 0.14), rgba(35, 152, 112, 0.1)); border-color: rgba(110, 231, 180, 0.55); box-shadow: 0 0 0 2px rgba(110, 231, 180, 0.22), 0 12px 32px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .payment-option.selected .payment-option-title { color: var(--light-green); } html[data-theme="dark"] .payment-option.selected .payment-option-description { color: rgba(232, 236, 234, 0.92); } /* Non-selected: explicit (matches online card readability) */ html[data-theme="dark"] .payment-option:not(.selected) .payment-option-title { color: var(--text-dark); } html[data-theme="dark"] .payment-option:not(.selected) .payment-option-description { color: var(--text-muted); } /* Fee / phone notice — readable on dark UI */ html[data-theme="dark"] .payment-caution { color: #fde68a; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.35); } html[data-theme="dark"] .payment-option.online:not(.selected) { border-color: rgba(110, 231, 180, 0.22); } html[data-theme="dark"] .payment-option.online:not(.selected):hover { border-color: rgba(110, 231, 180, 0.4); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .progress-step .step-number { background: var(--card-bg); color: var(--text-muted); border-color: var(--card-border); } /* Checkout order summary — totals used var(--dark-green); unreadable on dark card */ html[data-theme="dark"] .order-summary h3 { color: var(--light-green); border-bottom-color: rgba(110, 231, 180, 0.4); } html[data-theme="dark"] .order-totals { border-top-color: var(--card-border); } html[data-theme="dark"] .order-summary .total-row { color: var(--text-muted); } html[data-theme="dark"] .order-summary .total-row > span:last-child { color: var(--text-dark); font-weight: 700; } html[data-theme="dark"] .order-summary .total-row.grand-total { color: var(--light-green); border-top-color: rgba(110, 231, 180, 0.45); } html[data-theme="dark"] .order-summary .total-row.grand-total span { color: var(--light-green); } html[data-theme="dark"] .order-summary .order-item { border-bottom-color: var(--card-border); } html[data-theme="dark"] .order-summary .order-item-name { color: var(--text-dark); } html[data-theme="dark"] .order-summary .order-item-quantity { color: var(--text-muted); } /* ——— Account / profile-style cards ——— */ html[data-theme="dark"] .account-card, html[data-theme="dark"] .profile-card, html[data-theme="dark"] .dashboard-card { background: var(--card-bg) !important; border-color: var(--card-border); color: var(--text-dark); } html[data-theme="dark"] .signin-card { background: var(--card-bg); color: var(--text-dark); border: 1px solid var(--card-border); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); } /* ——— Account page (account.html) ——— */ html[data-theme="dark"] .account-sidebar, html[data-theme="dark"] .account-content { background: var(--card-bg); color: var(--text-dark); border: 1px solid var(--card-border); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .user-profile { border-bottom-color: var(--card-border); } html[data-theme="dark"] .user-name { color: var(--text-dark); } html[data-theme="dark"] .user-email { color: var(--text-muted); } html[data-theme="dark"] .sidebar-menu a { color: var(--text-muted); } html[data-theme="dark"] .sidebar-menu a:hover { background: rgba(110, 231, 180, 0.1); color: var(--light-green); } html[data-theme="dark"] .sidebar-menu a.active { background: rgba(110, 231, 180, 0.18); color: var(--light-green); } html[data-theme="dark"] .section-header { border-bottom-color: rgba(110, 231, 180, 0.35); } html[data-theme="dark"] .section-header h2 { color: var(--light-green); } html[data-theme="dark"] .section-header p { color: var(--text-muted); } html[data-theme="dark"] .form-group label { color: var(--light-green); } html[data-theme="dark"] .order-card, html[data-theme="dark"] .address-card { background: rgba(255, 255, 255, 0.04); border-color: var(--card-border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } html[data-theme="dark"] .order-card:hover, html[data-theme="dark"] .address-card:hover { border-color: rgba(110, 231, 180, 0.45); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .order-header { border-bottom-color: var(--card-border); } html[data-theme="dark"] .order-number { color: var(--text-dark); } html[data-theme="dark"] .order-date { color: var(--text-muted); } html[data-theme="dark"] .item-name { color: var(--text-dark); } html[data-theme="dark"] .item-price { color: var(--text-muted); } html[data-theme="dark"] .order-total { border-top-color: var(--card-border); } html[data-theme="dark"] .total-label { color: var(--text-dark); } html[data-theme="dark"] .address-type { color: var(--text-dark); } html[data-theme="dark"] .address-details { color: var(--text-muted); } html[data-theme="dark"] .empty-state { color: var(--text-muted); } html[data-theme="dark"] .empty-state h3 { color: var(--light-green); } html[data-theme="dark"] .btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--text-dark); border: 1px solid var(--card-border); } html[data-theme="dark"] .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .account-stat-tile--orders { background: rgba(110, 231, 180, 0.12); } html[data-theme="dark"] .account-stat-tile--pending { background: rgba(35, 152, 112, 0.18); } html[data-theme="dark"] .account-stat-tile--spent { background: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .account-stat-label { color: var(--text-muted); } html[data-theme="dark"] .account-stat-value--accent, html[data-theme="dark"] .account-stat-value--mid, html[data-theme="dark"] .account-stat-value--spent { color: var(--light-green); } html[data-theme="dark"] .account-dashboard-subheading { color: var(--light-green); } /* ——— Theme toggle click animation (all pages, light & dark) ——— */ #themeToggle { position: relative; overflow: visible; } #themeToggle::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 0; } @keyframes fardeteen-theme-icon-pop { 0% { transform: scale(0.65) rotate(-120deg); opacity: 0.35; } 55% { transform: scale(1.18) rotate(12deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes fardeteen-theme-btn-glow { 0% { opacity: 0.85; box-shadow: 0 0 0 0 rgba(80, 199, 135, 0.55), 0 0 0 0 rgba(80, 199, 135, 0.35); } 100% { opacity: 0; box-shadow: 0 0 0 14px rgba(80, 199, 135, 0), 0 0 28px 8px rgba(80, 199, 135, 0); } } #themeToggle.theme-toggle-animating::after { animation: fardeteen-theme-btn-glow 0.55s ease-out forwards; } #themeToggle.theme-toggle-animating svg { position: relative; z-index: 1; animation: fardeteen-theme-icon-pop 0.55s cubic-bezier(0.34, 1.35, 0.64, 1) both; transform-origin: center; } #themeToggle.theme-toggle-animating:hover { transform: none; } @keyframes fardeteen-theme-page-pulse { 0% { opacity: 0.22; } 100% { opacity: 0; } } html.fardeteen-theme-page-pulse::before { content: ''; position: fixed; inset: 0; z-index: 950; pointer-events: none; background: radial-gradient(ellipse 130% 55% at 50% 0%, rgba(80, 199, 135, 0.35), transparent 70%); animation: fardeteen-theme-page-pulse 0.65s ease-out forwards; } html[data-theme="dark"].fardeteen-theme-page-pulse::before { background: radial-gradient(ellipse 130% 55% at 50% 0%, rgba(110, 231, 180, 0.2), transparent 70%); } /* ——— Policies hub (policies.html only — unique section classes) ——— */ html[data-theme="dark"] .policy-card { background: var(--card-bg); box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .policy-card:hover { box-shadow: 0 22px 56px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] .policy-card h3 { color: var(--light-green); } html[data-theme="dark"] .policy-card p { color: var(--text-muted); } /* Policies hub — theme toggle: card fade+glow + top bar shimmer + icon pop (policies.html only) */ @keyframes fardeteen-policy-hub-theme-combo-light { 0%, 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); filter: brightness(1); } 10% { opacity: 0.72; transform: translate3d(0, 10px, 0) scale(0.992); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); filter: brightness(1); } 28% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); box-shadow: 0 0 0 2px rgba(80, 199, 135, 0.4), 0 0 26px rgba(80, 199, 135, 0.36), 0 14px 40px rgba(11, 110, 79, 0.16); filter: brightness(1.04); } 50% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.006); box-shadow: 0 0 0 3px rgba(80, 199, 135, 0.55), 0 0 36px rgba(80, 199, 135, 0.46), 0 18px 48px rgba(11, 110, 79, 0.22); filter: brightness(1.06); } 76% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); box-shadow: 0 0 0 1px rgba(80, 199, 135, 0.32), 0 0 16px rgba(80, 199, 135, 0.22), 0 11px 34px rgba(0, 0, 0, 0.11); filter: brightness(1.02); } } @keyframes fardeteen-policy-hub-theme-combo-dark { 0%, 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45); filter: brightness(1); } 10% { opacity: 0.72; transform: translate3d(0, 10px, 0) scale(0.992); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5); filter: brightness(1); } 28% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); box-shadow: 0 0 0 2px rgba(110, 231, 180, 0.42), 0 0 28px rgba(110, 231, 180, 0.34), 0 16px 46px rgba(0, 0, 0, 0.5); filter: brightness(1.05); } 50% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.006); box-shadow: 0 0 0 3px rgba(110, 231, 180, 0.56), 0 0 40px rgba(110, 231, 180, 0.4), 0 22px 56px rgba(0, 0, 0, 0.56); filter: brightness(1.07); } 76% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); box-shadow: 0 0 0 1px rgba(110, 231, 180, 0.32), 0 0 20px rgba(110, 231, 180, 0.2), 0 12px 42px rgba(0, 0, 0, 0.46); filter: brightness(1.02); } } @keyframes fardeteen-policy-hub-topbar-glow-light { 0%, 100% { transform: scaleY(1); filter: brightness(1) drop-shadow(0 0 0 transparent); } 8% { transform: scaleY(1); filter: brightness(1); } 42% { transform: scaleY(2.1); filter: brightness(1.4) drop-shadow(0 4px 18px rgba(80, 199, 135, 0.65)); } 58% { transform: scaleY(1.35); filter: brightness(1.2) drop-shadow(0 2px 10px rgba(80, 199, 135, 0.4)); } } @keyframes fardeteen-policy-hub-topbar-glow-dark { 0%, 100% { transform: scaleY(1); filter: brightness(1) drop-shadow(0 0 0 transparent); } 8% { transform: scaleY(1); filter: brightness(1); } 42% { transform: scaleY(2.1); filter: brightness(1.45) drop-shadow(0 4px 20px rgba(110, 231, 180, 0.55)); } 58% { transform: scaleY(1.35); filter: brightness(1.22) drop-shadow(0 2px 12px rgba(110, 231, 180, 0.38)); } } @keyframes fardeteen-policy-hub-icon-pop { 0%, 100% { transform: scale(1) rotate(0deg); } 12% { transform: scale(1.12) rotate(-7deg); } 28% { transform: scale(0.92) rotate(5deg); } 48% { transform: scale(1.1) rotate(-3deg); } 68%, 100% { transform: scale(1) rotate(0deg); } } html:not([data-theme='dark']) .policies-grid .policy-card.policy-card-theme-combo { transition: none !important; animation: fardeteen-policy-hub-theme-combo-light 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: var(--policy-combo-delay, 0s); } html[data-theme='dark'] .policies-grid .policy-card.policy-card-theme-combo { transition: none !important; animation: fardeteen-policy-hub-theme-combo-dark 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: var(--policy-combo-delay, 0s); } html:not([data-theme='dark']) .policies-grid .policy-card.policy-card-theme-combo::before { transform-origin: top center; transition: none !important; animation: fardeteen-policy-hub-topbar-glow-light 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: var(--policy-combo-delay, 0s); } html[data-theme='dark'] .policies-grid .policy-card.policy-card-theme-combo::before { transform-origin: top center; transition: none !important; animation: fardeteen-policy-hub-topbar-glow-dark 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: var(--policy-combo-delay, 0s); } .policies-grid .policy-card.policy-card-theme-combo .policy-icon { transition: none !important; transform-origin: center center; animation: fardeteen-policy-hub-icon-pop 1s cubic-bezier(0.34, 1.15, 0.48, 1) forwards; animation-delay: var(--policy-combo-delay, 0s); } @media (prefers-reduced-motion: reduce) { html:not([data-theme='dark']) .policies-grid .policy-card.policy-card-theme-combo, html[data-theme='dark'] .policies-grid .policy-card.policy-card-theme-combo { animation: none !important; } html:not([data-theme='dark']) .policies-grid .policy-card.policy-card-theme-combo::before, html[data-theme='dark'] .policies-grid .policy-card.policy-card-theme-combo::before, .policies-grid .policy-card.policy-card-theme-combo .policy-icon { animation: none !important; } } /* Theme toggle — card fade-in + lift (all pages with theme-ui.js) */ @keyframes fardeteen-card-theme-fade-in { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } } .fardeteen-card-theme-fade-active { animation: fardeteen-card-theme-fade-in 0.6s cubic-bezier(0.33, 1, 0.48, 1) both; animation-delay: var(--theme-card-fade-delay, 0s); will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { .fardeteen-card-theme-fade-active { animation: none !important; } } html[data-theme="dark"] .summary-section { background: var(--card-bg); box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .summary-section h2 { color: var(--light-green); } html[data-theme="dark"] .summary-item { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); } html[data-theme="dark"] .summary-item:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .summary-item h4 { color: var(--text-dark); } html[data-theme="dark"] .summary-item p { color: var(--text-muted); } html[data-theme="dark"] .contact-section .contact-btn:hover { background: var(--card-bg); color: var(--light-green); border-color: rgba(110, 231, 180, 0.45); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } /* ——— Terms & conditions ——— */ html[data-theme="dark"] .terms-hero-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .terms-hero-card h2 { color: var(--light-green); } html[data-theme="dark"] .terms-hero-card p { color: var(--text-muted); } html[data-theme="dark"] .terms-section { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .terms-section h2 { color: var(--light-green); } html[data-theme="dark"] .terms-section h3 { color: var(--mid-green); } html[data-theme="dark"] .terms-section p, html[data-theme="dark"] .terms-section li { color: var(--text-dark); } html[data-theme="dark"] .terms-grid .highlight { background: rgba(110, 231, 180, 0.1); border-right-color: var(--light-green); } html[data-theme="dark"] .terms-grid .highlight h4 { color: var(--light-green); } html[data-theme="dark"] .terms-note { background: rgba(110, 231, 180, 0.12); border-color: rgba(110, 231, 180, 0.4); color: var(--text-muted); } html[data-theme="dark"] .terms-contact-card { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45); } /* ——— Privacy policy ——— */ html[data-theme="dark"] .privacy-intro-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .privacy-intro-card h2 { color: var(--light-green); } html[data-theme="dark"] .privacy-intro-card p { color: var(--text-muted); } html[data-theme="dark"] .privacy-policy-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .privacy-policy-card:hover { box-shadow: 0 18px 42px rgba(35, 152, 112, 0.22); } html[data-theme="dark"] .policy-card-head h3 { color: var(--light-green); } html[data-theme="dark"] .privacy-policy-card p, html[data-theme="dark"] .privacy-policy-card li { color: var(--text-dark); } html[data-theme="dark"] .policy-note { background: rgba(110, 231, 180, 0.12); border-color: rgba(110, 231, 180, 0.4); color: var(--text-muted); } html[data-theme="dark"] .privacy-section { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .privacy-section h2 { color: var(--light-green); } html[data-theme="dark"] .privacy-section h3 { color: var(--mid-green); } html[data-theme="dark"] .privacy-section p, html[data-theme="dark"] .privacy-section li { color: var(--text-dark); } html[data-theme="dark"] .data-card { background: rgba(110, 231, 180, 0.08); border-color: var(--card-border); } html[data-theme="dark"] .data-card h4 { color: var(--light-green); } html[data-theme="dark"] .data-card p { color: var(--text-muted); } html[data-theme="dark"] .privacy-section .highlight-box { background: rgba(110, 231, 180, 0.1); border-right-color: var(--light-green); } html[data-theme="dark"] .privacy-section .highlight-box h4 { color: var(--light-green); } html[data-theme="dark"] .rights-table { background: var(--card-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .rights-table td { background: var(--card-bg); color: var(--text-dark); border-bottom-color: var(--card-border); } html[data-theme="dark"] .rights-table tr:hover td { background: rgba(110, 231, 180, 0.07); } html[data-theme="dark"] .security-item { background: rgba(110, 231, 180, 0.06); border-color: var(--card-border); } html[data-theme="dark"] .security-item h4 { color: var(--light-green); } html[data-theme="dark"] .security-item p { color: var(--text-muted); } html[data-theme="dark"] .contact-final-card { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); } /* ——— Return policy ——— */ html[data-theme="dark"] .policy-hero-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .policy-hero-card h2 { color: var(--light-green); } html[data-theme="dark"] .policy-hero-card p { color: var(--text-muted); } html[data-theme="dark"] .policy-section { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .policy-section h2 { color: var(--light-green); } html[data-theme="dark"] .policy-section h3 { color: var(--mid-green); } html[data-theme="dark"] .policy-section p, html[data-theme="dark"] .policy-section li { color: var(--text-dark); } html[data-theme="dark"] .policy-section .highlight-box { background: rgba(110, 231, 180, 0.1); border-right-color: var(--light-green); } html[data-theme="dark"] .policy-section .highlight-box h4 { color: var(--light-green); } html[data-theme="dark"] .timeline-content { background: rgba(110, 231, 180, 0.08); border-right-color: var(--light-green); } html[data-theme="dark"] .timeline-content h4 { color: var(--light-green); } html[data-theme="dark"] .info-card { background: rgba(110, 231, 180, 0.06); border-color: var(--card-border); } html[data-theme="dark"] .info-card h4 { color: var(--light-green); } html[data-theme="dark"] .info-card p { color: var(--text-muted); } html[data-theme="dark"] .policy-legal-disclaimer { background: rgba(110, 231, 180, 0.1); border-color: var(--card-border); color: var(--text-muted); } /* ——— Shipping policy ——— */ html[data-theme="dark"] .shipping-hero-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .shipping-hero-card h2 { color: var(--light-green); } html[data-theme="dark"] .shipping-hero-card p { color: var(--text-muted); } html[data-theme="dark"] .shipping-section { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .shipping-section h2 { color: var(--light-green); } html[data-theme="dark"] .shipping-section h3 { color: var(--mid-green); } html[data-theme="dark"] .shipping-section p, html[data-theme="dark"] .shipping-section li { color: var(--text-dark); } html[data-theme="dark"] .delivery-card { background: rgba(110, 231, 180, 0.08); border-color: var(--card-border); } html[data-theme="dark"] .delivery-card h4 { color: var(--light-green); } html[data-theme="dark"] .delivery-card .time { color: var(--light-green); } html[data-theme="dark"] .delivery-card .price { color: var(--text-muted); } html[data-theme="dark"] .shipping-section .highlight-box { background: rgba(110, 231, 180, 0.1); border-right-color: var(--light-green); } html[data-theme="dark"] .shipping-section .highlight-box h4 { color: var(--light-green); } /* ——— Support ——— */ html[data-theme="dark"] .support-card { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .support-card h3 { color: var(--light-green); } html[data-theme="dark"] .support-card p { color: var(--text-muted); } html[data-theme="dark"] .contact-method { background: rgba(110, 231, 180, 0.08); } html[data-theme="dark"] .contact-method:hover { background: rgba(110, 231, 180, 0.14); } html[data-theme="dark"] .contact-method-details h4 { color: var(--light-green); } html[data-theme="dark"] .contact-method-details p { color: var(--text-muted); } html[data-theme="dark"] .faq-section { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .faq-header h2 { color: var(--light-green); } html[data-theme="dark"] .faq-header p { color: var(--text-muted); } html[data-theme="dark"] .faq-item { border-bottom-color: var(--card-border); } html[data-theme="dark"] .faq-question h3 { color: var(--text-dark); } html[data-theme="dark"] .faq-answer p { color: var(--text-muted); } /* ——— Themed scrollbars (WebKit + Firefox), matches mint / forest palette ——— */ * { scrollbar-width: thin; scrollbar-color: rgba(11, 110, 79, 0.55) rgba(3, 28, 18, 0.08); } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: rgba(3, 28, 18, 0.06); border-radius: 100px; } *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(80, 199, 135, 0.55), rgba(11, 110, 79, 0.65)); border-radius: 100px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(80, 199, 135, 0.85), rgba(11, 110, 79, 0.8)); background-clip: content-box; } *::-webkit-scrollbar-button { display: none; width: 0; height: 0; } html[data-theme="dark"] * { scrollbar-color: rgba(110, 231, 180, 0.55) rgba(0, 0, 0, 0.35); } html[data-theme="dark"] *::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.32); } html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(110, 231, 180, 0.55), rgba(35, 152, 112, 0.65)); border: 2px solid transparent; background-clip: content-box; } html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(110, 231, 180, 0.9), rgba(35, 152, 112, 0.85)); background-clip: content-box; } /* Cart sidebar is always glass-dark: slightly brighter track + thumb over global dark */ html[data-theme="dark"] .cart-items { scrollbar-color: rgba(110, 231, 180, 0.7) rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .cart-items::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .cart-items::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(110, 231, 180, 0.75), rgba(35, 152, 112, 0.85)); background-clip: content-box; } html[data-theme="dark"] .cart-items::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(110, 231, 180, 1), rgba(35, 152, 112, 0.95)); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { #themeToggle.theme-toggle-animating::after, #themeToggle.theme-toggle-animating svg, html.fardeteen-theme-page-pulse::before { animation: none !important; } html.fardeteen-theme-page-pulse::before { opacity: 0; } }