/* =============================================
   nd shop — Dark Mode: Product Component
   =============================================
   Overrides for product page, product cards,
   search bar, filter button, product detail modal,
   and the filter modal.
   ============================================= */

/* ─── Product Page ─── */
[data-theme="dark"] .product-page-wrapper {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .product-title {
    color: #8b5cf6;
}

/* ─── Search Bar ─── */
[data-theme="dark"] .search-wrapper {
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    border-color: transparent;
}

[data-theme="dark"] .search-wrapper.focused {
    border-color: #8b5cf6;
    box-shadow: none;
}

[data-theme="dark"] .search-wrapper svg {
    color: var(--text-faint);
}

[data-theme="dark"] .search-wrapper.focused svg {
    color: #8b5cf6;
}

[data-theme="dark"] .search-wrapper input {
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .search-wrapper input::placeholder {
    color: var(--text-placeholder);
}

/* ─── Filter Button ─── */
[data-theme="dark"] .filter-btn {
    background-color: #8b5cf6;
    box-shadow: none;
}

/* ─── Product Cards ─── */
[data-theme="dark"] .product-card {
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-card);
}

[data-theme="dark"] .product-name {
    color: var(--text-primary);
}

[data-theme="dark"] .product-price-amount {
    color: var(--text-primary);
}

[data-theme="dark"] .product-price-unit {
    color: var(--text-muted);
}

[data-theme="dark"] .product-payout-amount {
    color: #8b5cf6;
}

[data-theme="dark"] .product-payout-desc {
    color: #8b5cf6;
    background-color: #141c26;
}

/* ─── Product Detail Modal ─── */
[data-theme="dark"] .product-modal-overlay {
    background-color: var(--bg-modal-overlay);
}

[data-theme="dark"] .product-modal-content {
    background-color: var(--modal-content-bg);
}

[data-theme="dark"] .pm-header {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .pm-header h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .pm-close {
    color: var(--text-faint);
}

[data-theme="dark"] .pm-close:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .pm-product-icon {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .pm-product-name {
    color: var(--text-heading);
}

[data-theme="dark"] .pm-product-price-row {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-primary);
}

[data-theme="dark"] .pm-price {
    color: #8b5cf6;
}

[data-theme="dark"] .pm-unit {
    color: var(--text-muted);
}

[data-theme="dark"] .pm-details-list {
    background-color: var(--details-list-bg);
    border-color: var(--border-light);
}

[data-theme="dark"] .pm-detail-item {
    border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .pm-label {
    color: var(--text-muted);
}

[data-theme="dark"] .pm-value {
    color: var(--text-primary);
}

[data-theme="dark"] .pm-available-text {
    color: #8b5cf6;
}

[data-theme="dark"] .pm-highlight-item {
    background-color: var(--highlight-bg);
    box-shadow: inset 0 0 0 1px rgba(27, 38, 59, 0.2);
}

[data-theme="dark"] .pm-highlight-item+.pm-detail-item {
    border-top-color: var(--border-primary);
}

[data-theme="dark"] .pm-green-text {
    color: #8b5cf6;
}

[data-theme="dark"] .pm-footer {
    border-top-color: var(--border-light);
}

[data-theme="dark"] .pm-action-btn {
    background-color: var(--action-btn-bg);
    color: var(--action-btn-color);
}

[data-theme="dark"] .pm-action-btn:hover {
    background-color: var(--action-btn-hover);
}

[data-theme="dark"] .pm-btn-primary {
    background-color: #8b5cf6;
    color: white;
}

[data-theme="dark"] .pm-btn-primary:hover {
    background-color: #2c3e50;
}


[data-theme="dark"] .pm-quantity-section {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-primary);
    box-shadow: none;
}

[data-theme="dark"] .pm-quantity-label {
    color: var(--text-heading);
}

[data-theme="dark"] .pm-quantity-controls {
    background-color: var(--bg-primary);
    border-color: var(--border-light);
}

[data-theme="dark"] .pm-qty-btn {
    background-color: var(--bg-surface);
    color: #8b5cf6;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .pm-qty-btn:hover {
    box-shadow: 0 4px 12px rgba(27, 38, 59, 0.3);
}

[data-theme="dark"] .pm-qty-value {
    color: var(--text-primary);
}

/* ─── Filter Modal ─── */
[data-theme="dark"] .filter-modal-overlay {
    background-color: var(--bg-modal-overlay);
}

[data-theme="dark"] .filter-modal-content {
    background-color: var(--modal-content-bg);
}

[data-theme="dark"] .fm-header {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .fm-header h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .fm-close {
    color: var(--text-faint);
}

[data-theme="dark"] .fm-close:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .fm-section-title {
    color: var(--text-primary);
}

[data-theme="dark"] .fm-sort-btn {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-primary);
    color: var(--text-secondary);
}

[data-theme="dark"] .fm-sort-btn.active {
    background-color: #141c26;
    border-color: #8b5cf6;
    color: #8b5cf6;
}

[data-theme="dark"] .fm-slider-track {
    background-color: var(--border-primary);
}

[data-theme="dark"] .fm-slider-fill {
    background-color: #8b5cf6;
}

[data-theme="dark"] .fm-range-input::-webkit-slider-thumb {
    background: var(--bg-surface);
    border-color: #8b5cf6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .fm-range-input::-moz-range-thumb {
    background: var(--bg-surface);
    border-color: #8b5cf6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .fm-input-wrapper {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-primary);
}

[data-theme="dark"] .fm-input-wrapper:focus-within {
    border-color: #8b5cf6;
}

[data-theme="dark"] .fm-currency {
    color: var(--text-faint);
}

[data-theme="dark"] .fm-input-wrapper input {
    color: var(--text-primary);
}

[data-theme="dark"] .fm-input-divider {
    color: var(--text-faint);
}

[data-theme="dark"] .fm-footer {
    border-top-color: var(--border-light);
}

[data-theme="dark"] .fm-action-btn {
    background-color: var(--action-btn-bg);
    color: var(--action-btn-color);
}

[data-theme="dark"] .fm-action-btn:hover {
    background-color: var(--action-btn-hover);
}

[data-theme="dark"] .fm-btn-primary {
    background-color: #8b5cf6;
    color: white;
}

[data-theme="dark"] .fm-btn-primary:hover {
    background-color: #2c3e50;
}