/* Dynamic Shop Section Styles - Controlled from Admin Panel */

/* ========================================
SHOP PAGE BODY BACKGROUND
======================================== */

/* Shop page body background (shop-page.php) */
html body:not(.dark-mode):not([data-theme="dark"]).shop-page-body,
body:not(.dark-mode):not([data-theme="dark"]).shop-page-body {
background: #f5f5f2 !important;
}

/* ========================================
SHOP SECTION BACKGROUND
======================================== */

html body:not(.dark-mode):not([data-theme="dark"]) .shop-section,
html body:not(.dark-mode):not([data-theme="dark"]) section.shop-section,
html body:not(.dark-mode):not([data-theme="dark"]) #shop,
body:not(.dark-mode):not([data-theme="dark"]) .shop-section,
body:not(.dark-mode):not([data-theme="dark"]) section.shop-section,
body:not(.dark-mode):not([data-theme="dark"]) #shop,
.shop-section,
section.shop-section,
#shop {
background: #f5f5f2 !important;
}

/* ========================================
SHOP ITEM CARDS - ALL PAGES
======================================== */

/* Shop item card background - Main page, Shop page, Shop detail page */
html body:not(.dark-mode):not([data-theme="dark"]) .shop-item-card,
html body:not(.dark-mode):not([data-theme="dark"]) .product-card,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item,
body:not(.dark-mode):not([data-theme="dark"]) .shop-item-card,
body:not(.dark-mode):not([data-theme="dark"]) .product-card,
body:not(.dark-mode):not([data-theme="dark"]) .related-item,
.shop-item-card,
.product-card,
.related-item {
background: #f1f1ea !important;
}

/* Shop item type badge background */
html body:not(.dark-mode):not([data-theme="dark"]) .shop-item-type,
html body:not(.dark-mode):not([data-theme="dark"]) .product-type,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-type,
body:not(.dark-mode):not([data-theme="dark"]) .shop-item-type,
body:not(.dark-mode):not([data-theme="dark"]) .product-type,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-type,
.shop-item-type,
.product-type,
.related-item-type {
background: #c79e66 !important;
}

/* Shop item type badge text color */
html body:not(.dark-mode):not([data-theme="dark"]) .shop-item-type,
html body:not(.dark-mode):not([data-theme="dark"]) .product-type,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-type,
body:not(.dark-mode):not([data-theme="dark"]) .shop-item-type,
body:not(.dark-mode):not([data-theme="dark"]) .product-type,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-type,
.shop-item-type,
.product-type,
.related-item-type {
color: #ffffff !important;
}

/* Shop item name/title */
html body:not(.dark-mode):not([data-theme="dark"]) .shop-item-name,
html body:not(.dark-mode):not([data-theme="dark"]) .product-title,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-title,
body:not(.dark-mode):not([data-theme="dark"]) .shop-item-name,
body:not(.dark-mode):not([data-theme="dark"]) .product-title,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-title,
.shop-item-name,
.product-title,
.related-item-title {
color: #1f2937 !important;
}

/* Shop item brand */
html body:not(.dark-mode):not([data-theme="dark"]) .product-brand,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-brand,
body:not(.dark-mode):not([data-theme="dark"]) .product-brand,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-brand,
.product-brand,
.related-item-brand {
color: #1f2937 !important;
}

/* Shop item description */
html body:not(.dark-mode):not([data-theme="dark"]) .shop-item-description,
html body:not(.dark-mode):not([data-theme="dark"]) .product-description,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-description,
body:not(.dark-mode):not([data-theme="dark"]) .shop-item-description,
body:not(.dark-mode):not([data-theme="dark"]) .product-description,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-description,
.shop-item-description,
.product-description,
.related-item-description {
color: #6b7280 !important;
}

/* Shop item price */
html body:not(.dark-mode):not([data-theme="dark"]) .shop-item-price,
html body:not(.dark-mode):not([data-theme="dark"]) .product-price,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-price,
body:not(.dark-mode):not([data-theme="dark"]) .shop-item-price,
body:not(.dark-mode):not([data-theme="dark"]) .product-price,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-price,
.shop-item-price,
.product-price,
.related-item-price {
color: #1d1c1b !important;
}

/* Shop item meta information */
html body:not(.dark-mode):not([data-theme="dark"]) .product-meta,
html body:not(.dark-mode):not([data-theme="dark"]) .product-meta span,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-meta,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-meta span,
body:not(.dark-mode):not([data-theme="dark"]) .product-meta,
body:not(.dark-mode):not([data-theme="dark"]) .product-meta span,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-meta,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-meta span,
.product-meta,
.product-meta span,
.related-item-meta,
.related-item-meta span {
color: #6b7280 !important;
}

/* ========================================
VIEW DETAILS BUTTONS
======================================== */

/* View Details button - matches badge background color */
html body:not(.dark-mode):not([data-theme="dark"]) .shop-item-card .btn-view-details,
html body:not(.dark-mode):not([data-theme="dark"]) .product-card .btn-view-details,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item .btn-view-details,
html body:not(.dark-mode):not([data-theme="dark"]) .btn-view,
html body:not(.dark-mode):not([data-theme="dark"]) .view-details-btn,
body:not(.dark-mode):not([data-theme="dark"]) .shop-item-card .btn-view-details,
body:not(.dark-mode):not([data-theme="dark"]) .product-card .btn-view-details,
body:not(.dark-mode):not([data-theme="dark"]) .related-item .btn-view-details,
body:not(.dark-mode):not([data-theme="dark"]) .btn-view,
body:not(.dark-mode):not([data-theme="dark"]) .view-details-btn,
.shop-item-card .btn-view-details,
.product-card .btn-view-details,
.related-item .btn-view-details,
.btn-view,
.view-details-btn {
background: #c79e66 !important;
color: #ffffff !important;
}

/* View Details button hover - slightly darker */
html body:not(.dark-mode):not([data-theme="dark"]) .shop-item-card .btn-view-details:hover,
html body:not(.dark-mode):not([data-theme="dark"]) .product-card .btn-view-details:hover,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item .btn-view-details:hover,
html body:not(.dark-mode):not([data-theme="dark"]) .btn-view:hover,
html body:not(.dark-mode):not([data-theme="dark"]) .view-details-btn:hover,
body:not(.dark-mode):not([data-theme="dark"]) .shop-item-card .btn-view-details:hover,
body:not(.dark-mode):not([data-theme="dark"]) .product-card .btn-view-details:hover,
body:not(.dark-mode):not([data-theme="dark"]) .related-item .btn-view-details:hover,
body:not(.dark-mode):not([data-theme="dark"]) .btn-view:hover,
body:not(.dark-mode):not([data-theme="dark"]) .view-details-btn:hover,
.shop-item-card .btn-view-details:hover,
.product-card .btn-view-details:hover,
.related-item .btn-view-details:hover,
.btn-view:hover,
.view-details-btn:hover {
background: #c79e66 !important;
color: #ffffff !important;
opacity: 0.9;
}

/* ========================================
SHOP PAGE FILTER TABS AND BUTTONS
======================================== */

/* Filter tabs - border and text color */
html body:not(.dark-mode):not([data-theme="dark"]) .filter-tab,
body:not(.dark-mode):not([data-theme="dark"]) .filter-tab,
.filter-tab {
border-color: #c79e66 !important;
color: #c79e66 !important;
}

/* Filter tabs hover and active - background and text */
html body:not(.dark-mode):not([data-theme="dark"]) .filter-tab:hover,
html body:not(.dark-mode):not([data-theme="dark"]) .filter-tab.active,
body:not(.dark-mode):not([data-theme="dark"]) .filter-tab:hover,
body:not(.dark-mode):not([data-theme="dark"]) .filter-tab.active,
.filter-tab:hover,
.filter-tab.active {
background: #c79e66 !important;
color: #ffffff !important;
}

/* Search box focus border */
html body:not(.dark-mode):not([data-theme="dark"]) .search-box input:focus,
body:not(.dark-mode):not([data-theme="dark"]) .search-box input:focus,
.search-box input:focus {
border-color: #c79e66 !important;
}

/* Results count color */
html body:not(.dark-mode):not([data-theme="dark"]) .results-count,
body:not(.dark-mode):not([data-theme="dark"]) .results-count,
.results-count {
color: #c79e66 !important;
}

/* Shop page "Visit Our Shop" button and other action buttons */
html body:not(.dark-mode):not([data-theme="dark"]) .shop-view-all-btn,
body:not(.dark-mode):not([data-theme="dark"]) .shop-view-all-btn,
.shop-view-all-btn,
html body:not(.dark-mode):not([data-theme="dark"]) .btn-back,
body:not(.dark-mode):not([data-theme="dark"]) .btn-back,
.btn-back {
background: #c79e66 !important;
color: #ffffff !important;
}

/* Product badge on shop-page.php */
html body:not(.dark-mode):not([data-theme="dark"]) .product-badge,
body:not(.dark-mode):not([data-theme="dark"]) .product-badge,
.product-badge {
background: #c79e66 !important;
color: #ffffff !important;
}

/* View Product button on shop-page.php */
html body:not(.dark-mode):not([data-theme="dark"]) .btn-view-product,
body:not(.dark-mode):not([data-theme="dark"]) .btn-view-product,
.btn-view-product {
background: #c79e66 !important;
color: #ffffff !important;
}

/* View Product button hover */
html body:not(.dark-mode):not([data-theme="dark"]) .btn-view-product:hover,
body:not(.dark-mode):not([data-theme="dark"]) .btn-view-product:hover,
.btn-view-product:hover {
background: #c79e66 !important;
color: #ffffff !important;
opacity: 0.9;
}

/* ========================================
SHOP DETAIL PAGE CONTROLS
======================================== */

/* Shop detail page body background */
html body:not(.dark-mode):not([data-theme="dark"]).shop-detail-body,
body:not(.dark-mode):not([data-theme="dark"]).shop-detail-body {
background: #f5f5f2 !important;
}

/* Order section card background matches card background */
html body:not(.dark-mode):not([data-theme="dark"]).shop-detail-body .order-section,
body:not(.dark-mode):not([data-theme="dark"]).shop-detail-body .order-section,
.shop-detail-body .order-section {
background: #f1f1ea !important;
}

/* Item type badge on detail page */
html body:not(.dark-mode):not([data-theme="dark"]) .item-type-badge,
body:not(.dark-mode):not([data-theme="dark"]) .item-type-badge,
.item-type-badge {
background: #c79e66 !important;
color: #ffffff !important;
}

/* Related item badge */
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-badge,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-badge,
.related-item-badge {
background: #c79e66 !important;
color: #ffffff !important;
}

/* Back link color */
html body:not(.dark-mode):not([data-theme="dark"]) .back-link,
body:not(.dark-mode):not([data-theme="dark"]) .back-link,
.back-link {
color: #c79e66 !important;
}

/* Back to Shop button variant: ensure white text over colored background */
html body:not(.dark-mode):not([data-theme="dark"]) .back-link.btn-back,
body:not(.dark-mode):not([data-theme="dark"]) .back-link.btn-back,
.back-link.btn-back {
color: #ffffff !important;
}

/* Price color on detail page */
html body:not(.dark-mode):not([data-theme="dark"]) .item-price,
body:not(.dark-mode):not([data-theme="dark"]) .item-price,
.item-price {
color: #1d1c1b !important;
}

/* Stock badge */
html body:not(.dark-mode):not([data-theme="dark"]) .stock-badge,
body:not(.dark-mode):not([data-theme="dark"]) .stock-badge,
.stock-badge {
border-color: #c79e66 !important;
color: #c79e66 !important;
}

/* Stock badge in stock */
html body:not(.dark-mode):not([data-theme="dark"]) .stock-badge.in-stock,
body:not(.dark-mode):not([data-theme="dark"]) .stock-badge.in-stock,
.stock-badge.in-stock {
background: #c79e66 !important;
color: #ffffff !important;
}

/* Quantity controls */
html body:not(.dark-mode):not([data-theme="dark"]) .quantity-btn,
body:not(.dark-mode):not([data-theme="dark"]) .quantity-btn,
.quantity-btn {
border-color: #c79e66 !important;
}

/* Place Order button */
html body:not(.dark-mode):not([data-theme="dark"]) .btn-order,
body:not(.dark-mode):not([data-theme="dark"]) .btn-order,
.btn-order {
background: #c79e66 !important;
color: #ffffff !important;
}

/* Submit order button */
html body:not(.dark-mode):not([data-theme="dark"]) .btn-submit,
body:not(.dark-mode):not([data-theme="dark"]) .btn-submit,
.btn-submit {
background: #c79e66 !important;
color: #ffffff !important;
}

/* Contact info icons */
html body:not(.dark-mode):not([data-theme="dark"]) .contact-info-item i,
body:not(.dark-mode):not([data-theme="dark"]) .contact-info-item i,
.contact-info-item i {
color: #c79e66 !important;
}

/* Related items cards - remove border */
html body:not(.dark-mode):not([data-theme="dark"]) .related-item,
body:not(.dark-mode):not([data-theme="dark"]) .related-item,
.related-item {
border: none !important;
}

/* Related items section badge */
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-type,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-type,
.related-item-type {
background: #c79e66 !important;
color: #ffffff !important;
}

/* Related items price */
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-price,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-price,
.related-item-price {
color: #1d1c1b !important;
}

/* Detail description background uses card background */
html body:not(.dark-mode):not([data-theme="dark"]) .detail-description,
body:not(.dark-mode):not([data-theme="dark"]) .detail-description,
.detail-description {
background: #f1f1ea !important;
}

/* Order modal close button hover */
html body:not(.dark-mode):not([data-theme="dark"]) .modal-close:hover,
body:not(.dark-mode):not([data-theme="dark"]) .modal-close:hover,
.modal-close:hover {
color: #c79e66 !important;
}

/* Form input focus */
html body:not(.dark-mode):not([data-theme="dark"]) .form-group input:focus,
html body:not(.dark-mode):not([data-theme="dark"]) .form-group textarea:focus,
body:not(.dark-mode):not([data-theme="dark"]) .form-group input:focus,
body:not(.dark-mode):not([data-theme="dark"]) .form-group textarea:focus,
.form-group input:focus,
.form-group textarea:focus {
border-color: #c79e66 !important;
}

/* ========================================
ICON COLORS - ALL SHOP PAGES
======================================== */

/* All FontAwesome icons in shop pages */
html body:not(.dark-mode):not([data-theme="dark"]) .shop-section i,
html body:not(.dark-mode):not([data-theme="dark"]) .shop-page-body i,
html body:not(.dark-mode):not([data-theme="dark"]) .shop-detail-body i,
html body:not(.dark-mode):not([data-theme="dark"]) .product-card i,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item i,
html body:not(.dark-mode):not([data-theme="dark"]) .shop-item-card i,
body:not(.dark-mode):not([data-theme="dark"]) .shop-section i,
body:not(.dark-mode):not([data-theme="dark"]) .shop-page-body i,
body:not(.dark-mode):not([data-theme="dark"]) .shop-detail-body i,
body:not(.dark-mode):not([data-theme="dark"]) .product-card i,
body:not(.dark-mode):not([data-theme="dark"]) .related-item i,
body:not(.dark-mode):not([data-theme="dark"]) .shop-item-card i {
color: #c79e66 !important;
}

/* Meta icons (location, phone, stock, etc.) */
html body:not(.dark-mode):not([data-theme="dark"]) .product-meta i,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-meta i,
html body:not(.dark-mode):not([data-theme="dark"]) .detail-meta i,
html body:not(.dark-mode):not([data-theme="dark"]) .meta-item i,
body:not(.dark-mode):not([data-theme="dark"]) .product-meta i,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-meta i,
body:not(.dark-mode):not([data-theme="dark"]) .detail-meta i,
body:not(.dark-mode):not([data-theme="dark"]) .meta-item i,
.product-meta i,
.related-item-meta i,
.detail-meta i,
.meta-item i {
color: #c79e66 !important;
}

/* Contact info icons */
html body:not(.dark-mode):not([data-theme="dark"]) .contact-info-item i,
body:not(.dark-mode):not([data-theme="dark"]) .contact-info-item i,
.contact-info-item i {
color: #c79e66 !important;
}

/* Button icons - keep white on colored backgrounds */
html body:not(.dark-mode):not([data-theme="dark"]) .btn-order i,
html body:not(.dark-mode):not([data-theme="dark"]) .btn-submit i,
html body:not(.dark-mode):not([data-theme="dark"]) .btn-view-product i,
html body:not(.dark-mode):not([data-theme="dark"]) .shop-view-all-btn i,
html body:not(.dark-mode):not([data-theme="dark"]) .btn-back i,
body:not(.dark-mode):not([data-theme="dark"]) .btn-order i,
body:not(.dark-mode):not([data-theme="dark"]) .btn-submit i,
body:not(.dark-mode):not([data-theme="dark"]) .btn-view-product i,
body:not(.dark-mode):not([data-theme="dark"]) .shop-view-all-btn i,
body:not(.dark-mode):not([data-theme="dark"]) .btn-back i,
.btn-order i,
.btn-submit i,
.btn-view-product i,
.shop-view-all-btn i,
.btn-back i {
color: #ffffff !important;
}

/* Badge icons - keep white on colored backgrounds */
html body:not(.dark-mode):not([data-theme="dark"]) .product-badge i,
html body:not(.dark-mode):not([data-theme="dark"]) .related-item-badge i,
html body:not(.dark-mode):not([data-theme="dark"]) .shop-item-type i,
html body:not(.dark-mode):not([data-theme="dark"]) .product-type i,
body:not(.dark-mode):not([data-theme="dark"]) .product-badge i,
body:not(.dark-mode):not([data-theme="dark"]) .related-item-badge i,
body:not(.dark-mode):not([data-theme="dark"]) .shop-item-type i,
body:not(.dark-mode):not([data-theme="dark"]) .product-type i,
.product-badge i,
.related-item-badge i,
.shop-item-type i,
.product-type i {
color: #ffffff !important;
}

/* ========================================
ORDER SLIDE PANEL BACKGROUND
======================================== */

/* Apply admin shop background color to slide-in panel */
html body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel,
body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel,
.order-slide-panel {
background: #f5f5f2 !important;
}

/* Apply admin shop card background to all form cards in panel and main order page */
html body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .item-summary,
html body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .form-section,
html body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .order-summary-section,
html body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .payment-card,
html body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel #bankAccountDetails,
html body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .payment-option input[type="radio"]:checked +
.payment-card,
html body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .order-header,
html body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel #bankSelection,
html body:not(.dark-mode):not([data-theme="dark"]) .item-summary,
html body:not(.dark-mode):not([data-theme="dark"]) .form-section,
html body:not(.dark-mode):not([data-theme="dark"]) .order-summary-section,
html body:not(.dark-mode):not([data-theme="dark"]) .payment-card,
html body:not(.dark-mode):not([data-theme="dark"]) #bankAccountDetails,
html body:not(.dark-mode):not([data-theme="dark"]) .payment-option input[type="radio"]:checked + .payment-card,
html body:not(.dark-mode):not([data-theme="dark"]) .order-header,
html body:not(.dark-mode):not([data-theme="dark"]) #bankSelection,
body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .item-summary,
body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .form-section,
body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .order-summary-section,
body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .payment-card,
body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel #bankAccountDetails,
body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .payment-option input[type="radio"]:checked +
.payment-card,
body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .order-header,
body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel #bankSelection,
body:not(.dark-mode):not([data-theme="dark"]) .item-summary,
body:not(.dark-mode):not([data-theme="dark"]) .form-section,
body:not(.dark-mode):not([data-theme="dark"]) .order-summary-section,
body:not(.dark-mode):not([data-theme="dark"]) .payment-card,
body:not(.dark-mode):not([data-theme="dark"]) #bankAccountDetails,
body:not(.dark-mode):not([data-theme="dark"]) .payment-option input[type="radio"]:checked + .payment-card,
body:not(.dark-mode):not([data-theme="dark"]) .order-header,
body:not(.dark-mode):not([data-theme="dark"]) #bankSelection,
.order-slide-panel .item-summary,
.order-slide-panel .form-section,
.order-slide-panel .order-summary-section,
.order-slide-panel .payment-card,
.order-slide-panel #bankAccountDetails,
.order-slide-panel .payment-option input[type="radio"]:checked + .payment-card,
.order-slide-panel .order-header,
.order-slide-panel #bankSelection,
.item-summary,
.form-section,
.order-summary-section,
.payment-card,
#bankAccountDetails,
.payment-option input[type="radio"]:checked + .payment-card,
.order-header,
#bankSelection {
background: #f1f1ea !important;
}

/* Apply admin shop icon color to close button background */
html body:not(.dark-mode):not([data-theme="dark"]) .order-panel-close,
body:not(.dark-mode):not([data-theme="dark"]) .order-panel-close,
.order-panel-close {
background: #c79e66 !important;
color: #ffffff !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .order-panel-close i,
body:not(.dark-mode):not([data-theme="dark"]) .order-panel-close i,
.order-panel-close i {
color: #ffffff !important;
}

/* Apply admin shop icon color to order summary header */
html body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .order-summary-section h3,
body:not(.dark-mode):not([data-theme="dark"]) .order-slide-panel .order-summary-section h3,
.order-slide-panel .order-summary-section h3,
html body:not(.dark-mode):not([data-theme="dark"]) .order-summary-section h3,
body:not(.dark-mode):not([data-theme="dark"]) .order-summary-section h3,
.order-summary-section h3 {
background: #c79e66 !important;
color: #ffffff !important;
}

/* ========================================
ORDER PAGE STYLES (Buttons, Icons, Accents)
======================================== */

/* Primary/action buttons on order page */
html body:not(.dark-mode):not([data-theme="dark"]) .btn-submit,
html body:not(.dark-mode):not([data-theme="dark"]) .legal-link-btn,
html body:not(.dark-mode):not([data-theme="dark"]) #verifyEmailBtn,
html body:not(.dark-mode):not([data-theme="dark"]) #resendCodeBtn,
html body:not(.dark-mode):not([data-theme="dark"]) .btn-send-code,
html body:not(.dark-mode):not([data-theme="dark"]) .btn-verify-email,
body:not(.dark-mode):not([data-theme="dark"]) .btn-submit,
body:not(.dark-mode):not([data-theme="dark"]) .legal-link-btn,
body:not(.dark-mode):not([data-theme="dark"]) #verifyEmailBtn,
body:not(.dark-mode):not([data-theme="dark"]) #resendCodeBtn,
body:not(.dark-mode):not([data-theme="dark"]) .btn-send-code,
body:not(.dark-mode):not([data-theme="dark"]) .btn-verify-email,
.btn-submit,
.legal-link-btn,
#verifyEmailBtn,
#resendCodeBtn,
.btn-send-code,
.btn-verify-email {
background: #c79e66 !important;
color: #ffffff !important;
border-color: #c79e66 !important;
box-shadow: 0 4px 15px #c79e664d !important;
}

/* Button hover states */
html body:not(.dark-mode):not([data-theme="dark"]) .btn-submit:hover:not(:disabled),
html body:not(.dark-mode):not([data-theme="dark"]) .btn-send-code:hover:not(:disabled),
html body:not(.dark-mode):not([data-theme="dark"]) .btn-verify-email:hover:not(:disabled),
body:not(.dark-mode):not([data-theme="dark"]) .btn-submit:hover:not(:disabled),
body:not(.dark-mode):not([data-theme="dark"]) .btn-send-code:hover:not(:disabled),
body:not(.dark-mode):not([data-theme="dark"]) .btn-verify-email:hover:not(:disabled),
.btn-submit:hover:not(:disabled),
.btn-send-code:hover:not(:disabled),
.btn-verify-email:hover:not(:disabled) {
background: #c79e66 !important;
opacity: 0.9;
box-shadow: 0 6px 20px #c79e6666 !important;
}

/* Cancel/secondary buttons appear outlined in brand color */
html body:not(.dark-mode):not([data-theme="dark"]) .btn-cancel,
body:not(.dark-mode):not([data-theme="dark"]) .btn-cancel,
.btn-cancel {
background: transparent !important;
color: #c79e66 !important;
border: 2px solid #c79e66 !important;
}

/* Payment cards accents */
html body:not(.dark-mode):not([data-theme="dark"]) .payment-option input[type="radio"]:checked + .payment-card,
body:not(.dark-mode):not([data-theme="dark"]) .payment-option input[type="radio"]:checked + .payment-card,
.payment-option input[type="radio"]:checked + .payment-card {
border-color: #c79e66 !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .payment-option input[type="radio"]:checked + .payment-card i,
body:not(.dark-mode):not([data-theme="dark"]) .payment-option input[type="radio"]:checked + .payment-card i,
.payment-option input[type="radio"]:checked + .payment-card i {
color: #c79e66 !important;
}

/* File input and selects focus */
html body:not(.dark-mode):not([data-theme="dark"]) .file-input:focus,
body:not(.dark-mode):not([data-theme="dark"]) .file-input:focus,
.file-input:focus {
border-color: #c79e66 !important;
box-shadow: 0 0 0 3px #c79e661a !important; /* ~10% */
}

/* Accents and icons */
html body:not(.dark-mode):not([data-theme="dark"]) .order-header h1 i,
html body:not(.dark-mode):not([data-theme="dark"]) .file-help-text i,
html body:not(.dark-mode):not([data-theme="dark"]) .notice-icon i,
html body:not(.dark-mode):not([data-theme="dark"]) .item-summary h3 i,
html body:not(.dark-mode):not([data-theme="dark"]) .form-section h3 i,
html body:not(.dark-mode):not([data-theme="dark"]) .item-detail i,
html body:not(.dark-mode):not([data-theme="dark"]) .form-group i,
html body:not(.dark-mode):not([data-theme="dark"]) .email-help-text i,
body:not(.dark-mode):not([data-theme="dark"]) .order-header h1 i,
body:not(.dark-mode):not([data-theme="dark"]) .file-help-text i,
body:not(.dark-mode):not([data-theme="dark"]) .notice-icon i,
body:not(.dark-mode):not([data-theme="dark"]) .item-summary h3 i,
body:not(.dark-mode):not([data-theme="dark"]) .form-section h3 i,
body:not(.dark-mode):not([data-theme="dark"]) .item-detail i,
body:not(.dark-mode):not([data-theme="dark"]) .form-group i,
body:not(.dark-mode):not([data-theme="dark"]) .email-help-text i,
.order-header h1 i,
.file-help-text i,
.notice-icon i,
.item-summary h3 i,
.form-section h3 i,
.item-detail i,
.form-group i,
.email-help-text i {
color: #c79e66 !important;
}

/* Summary total divider and accents */
html body:not(.dark-mode):not([data-theme="dark"]) .summary-total,
body:not(.dark-mode):not([data-theme="dark"]) .summary-total,
.summary-total {
border-top-color: #c79e66 !important;
}

/* ========================================
MAINTAIN HOVER EFFECTS
======================================== */

/* Keep hover transformations */
.shop-item-card:hover {
transform: translateY(-8px);
}

/* ========================================
GLOBAL FLOATING CONTROLS
Dark Mode Toggle & Scroll Progress Indicator
======================================== */

/* Dark Mode Toggle - background uses Shop Card BG, icon uses Shop Icon Color */
html body:not(.dark-mode):not([data-theme="dark"]) .dark-mode-toggle,
body:not(.dark-mode):not([data-theme="dark"]) .dark-mode-toggle,
.dark-mode-toggle {
background: #f1f1ea !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .dark-mode-toggle i,
body:not(.dark-mode):not([data-theme="dark"]) .dark-mode-toggle i,
.dark-mode-toggle i {
color: #c79e66 !important;
}

/* Scroll Progress Indicator - background uses Shop Card BG */
html body:not(.dark-mode):not([data-theme="dark"]) .scroll-progress .scroll-progress-circle,
body:not(.dark-mode):not([data-theme="dark"]) .scroll-progress .scroll-progress-circle,
.scroll-progress .scroll-progress-circle {
background: #f1f1ea !important;
}

/* Scroll Progress Indicator - icon and progress stroke use Shop Icon Color */
html body:not(.dark-mode):not([data-theme="dark"]) .scroll-progress .scroll-progress-icon,
body:not(.dark-mode):not([data-theme="dark"]) .scroll-progress .scroll-progress-icon,
.scroll-progress .scroll-progress-icon {
color: #c79e66 !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .scroll-progress .scroll-progress-fill,
body:not(.dark-mode):not([data-theme="dark"]) .scroll-progress .scroll-progress-fill,
.scroll-progress .scroll-progress-fill {
stroke: #c79e66 !important;
}

/* Subtle background ring */
html body:not(.dark-mode):not([data-theme="dark"]) .scroll-progress .scroll-progress-bg,
body:not(.dark-mode):not([data-theme="dark"]) .scroll-progress .scroll-progress-bg,
.scroll-progress .scroll-progress-bg {
stroke: rgba(0, 0, 0, 0.08) !important;
}

/* Ensure same colors in dark mode for consistency with admin shop theme */
[data-theme="dark"] .dark-mode-toggle { background: #f1f1ea !important; }
[data-theme="dark"] .dark-mode-toggle i { color: #c79e66 !important; }
[data-theme="dark"] .scroll-progress .scroll-progress-circle { background: #f1f1ea !important; }
[data-theme="dark"] .scroll-progress .scroll-progress-icon { color: #c79e66 !important; }
[data-theme="dark"] .scroll-progress .scroll-progress-fill { stroke: #c79e66 !important; }
[data-theme="dark"] .scroll-progress .scroll-progress-bg { stroke: rgba(255, 255, 255, 0.12) !important; }

/* ========================================
FOOTER LEGAL BUTTONS
Privacy Policy & Terms of Service
======================================== */

/* Privacy Policy button - uses shop badge background and white text */
html body:not(.dark-mode):not([data-theme="dark"]) .privacy-policy-btn,
body:not(.dark-mode):not([data-theme="dark"]) .privacy-policy-btn,
.privacy-policy-btn {
background: #c79e66 !important;
border-color: #c79e66 !important;
color: #ffffff !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .privacy-policy-btn:hover,
body:not(.dark-mode):not([data-theme="dark"]) .privacy-policy-btn:hover,
.privacy-policy-btn:hover {
background: #c79e66 !important;
border-color: #c79e66 !important;
color: #ffffff !important;
opacity: 0.9;
}

/* Terms of Service button - uses shop badge background and white text */
html body:not(.dark-mode):not([data-theme="dark"]) .terms-service-btn,
body:not(.dark-mode):not([data-theme="dark"]) .terms-service-btn,
.terms-service-btn {
background: #c79e66 !important;
border-color: #c79e66 !important;
color: #ffffff !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .terms-service-btn:hover,
body:not(.dark-mode):not([data-theme="dark"]) .terms-service-btn:hover,
.terms-service-btn:hover {
background: #c79e66 !important;
border-color: #c79e66 !important;
color: #ffffff !important;
opacity: 0.9;
}

/* Dark mode - same colors */
[data-theme="dark"] .privacy-policy-btn {
background: #c79e66 !important;
border-color: #c79e66 !important;
color: #ffffff !important;
}

[data-theme="dark"] .privacy-policy-btn:hover {
background: #c79e66 !important;
border-color: #c79e66 !important;
color: #ffffff !important;
opacity: 0.9;
}

[data-theme="dark"] .terms-service-btn {
background: #c79e66 !important;
border-color: #c79e66 !important;
color: #ffffff !important;
}

[data-theme="dark"] .terms-service-btn:hover {
background: #c79e66 !important;
border-color: #c79e66 !important;
color: #ffffff !important;
opacity: 0.9;
}

/* ========================================
   LEGAL MODAL - SHOP THEME COLORS
   ======================================== */

/* Legal modal content background - use shop card background */
html body:not(.dark-mode):not([data-theme="dark"]) .legal-modal-content,
body:not(.dark-mode):not([data-theme="dark"]) .legal-modal-content,
.legal-modal-content {
    background: #f1f1ea !important;
}

/* Legal modal header - use shop icon color */
html body:not(.dark-mode):not([data-theme="dark"]) .legal-modal-header,
body:not(.dark-mode):not([data-theme="dark"]) .legal-modal-header,
.legal-modal-header {
    background: #c79e66 !important;
}

/* Legal modal close button - use shop icon color */
html body:not(.dark-mode):not([data-theme="dark"]) .legal-modal-close-btn,
body:not(.dark-mode):not([data-theme="dark"]) .legal-modal-close-btn,
.legal-modal-close-btn {
    background: #c79e66 !important;
}

/* Legal modal footer - use shop card background */
html body:not(.dark-mode):not([data-theme="dark"]) .legal-modal-footer,
body:not(.dark-mode):not([data-theme="dark"]) .legal-modal-footer,
.legal-modal-footer {
    background: #f1f1ea !important;
}

/* Terms modal specific - also use shop icon color */
html body:not(.dark-mode):not([data-theme="dark"]) .legal-modal.terms-modal .legal-modal-header,
body:not(.dark-mode):not([data-theme="dark"]) .legal-modal.terms-modal .legal-modal-header,
.legal-modal.terms-modal .legal-modal-header {
    background: #c79e66 !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .legal-modal.terms-modal .legal-modal-close-btn,
body:not(.dark-mode):not([data-theme="dark"]) .legal-modal.terms-modal .legal-modal-close-btn,
.legal-modal.terms-modal .legal-modal-close-btn {
    background: #c79e66 !important;
}

/* ========================================
   GET STARTED BUTTONS - ADMIN CONTROLLABLE
   ======================================== */

/* About section Get Started button - admin-controllable colors (same as Visit Our Shop button) */
html body:not(.dark-mode):not([data-theme="dark"]) .about-btn-new,
body:not(.dark-mode):not([data-theme="dark"]) .about-btn-new,
.about-btn-new {
    background: #c79e66 !important;
    color: #ffffff !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .about-btn-new:hover,
body:not(.dark-mode):not([data-theme="dark"]) .about-btn-new:hover,
.about-btn-new:hover {
    background: #c79e66 !important;
    color: #ffffff !important;
    opacity: 0.9;
}

/* All other Get Started buttons with btn-primary class - admin-controllable colors */
html body:not(.dark-mode):not([data-theme="dark"]) .btn-primary,
body:not(.dark-mode):not([data-theme="dark"]) .btn-primary,
.btn-primary {
    background: #c79e66 !important;
    color: #ffffff !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .btn-primary:hover,
body:not(.dark-mode):not([data-theme="dark"]) .btn-primary:hover,
.btn-primary:hover {
    background: #c79e66 !important;
    color: #ffffff !important;
    opacity: 0.9;
}

/* ========================================
   HEADER GET STARTED BUTTON OVERRIDE
   ======================================== */

/* Nuclear override for header Get Started button - green initially */
html body:not(.dark-mode):not([data-theme="dark"]) .header .btn-primary,
body:not(.dark-mode):not([data-theme="dark"]) .header .btn-primary,
html .header .btn-primary,
.header .btn-primary {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
    color: white !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .header .btn-primary:hover,
body:not(.dark-mode):not([data-theme="dark"]) .header .btn-primary:hover,
html .header .btn-primary:hover,
.header .btn-primary:hover {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Header Get Started button - admin colors when scrolled */
html body:not(.dark-mode):not([data-theme="dark"]) .header.scrolled .btn-primary,
body:not(.dark-mode):not([data-theme="dark"]) .header.scrolled .btn-primary,
html .header.scrolled .btn-primary,
.header.scrolled .btn-primary {
    background: #c79e66 !important;
    color: #ffffff !important;
    border: none !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .header.scrolled .btn-primary:hover,
body:not(.dark-mode):not([data-theme="dark"]) .header.scrolled .btn-primary:hover,
html .header.scrolled .btn-primary:hover,
.header.scrolled .btn-primary:hover {
    background: #c79e66 !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   ORDERS PAGE MOBILE BACKGROUND
   ======================================== */

/* Orders page mobile background - use admin-controlled shop card background */
@media (max-width: 768px) {
    html body:not(.dark-mode):not([data-theme="dark"]) body,
    body:not(.dark-mode):not([data-theme="dark"]) body,
    body {
        background: #f1f1ea !important;
    }
    
    /* Orders page mobile card elements - use shop card background */
    html body:not(.dark-mode):not([data-theme="dark"]) .order-header,
    html body:not(.dark-mode):not([data-theme="dark"]) .item-summary,
    html body:not(.dark-mode):not([data-theme="dark"]) .order-container,
    body:not(.dark-mode):not([data-theme="dark"]) .order-header,
    body:not(.dark-mode):not([data-theme="dark"]) .item-summary,
    body:not(.dark-mode):not([data-theme="dark"]) .order-container,
    .order-header,
    .item-summary,
    .order-container {
        background: #f1f1ea !important;
    }
    
    /* Dark mode orders page mobile background and cards */
    [data-theme="dark"] body,
    [data-theme="dark"] .order-header,
    [data-theme="dark"] .item-summary,
    [data-theme="dark"] .order-container {
        background: #f1f1ea !important;
    }
}

/* ========================================
   ORDERS PAGE BORDER REMOVAL
   ======================================== */

/* Remove borders from payment details and upload receipt sections - nuclear override for inline styles */
html body:not(.dark-mode):not([data-theme="dark"]) .bank-account-card > div[style*="border"],
html body:not(.dark-mode):not([data-theme="dark"]) .bank-account-card div[style*="border"],
html body:not(.dark-mode):not([data-theme="dark"]) #bankAccountDetails div[style*="border"],
body:not(.dark-mode):not([data-theme="dark"]) .bank-account-card > div[style*="border"],
body:not(.dark-mode):not([data-theme="dark"]) .bank-account-card div[style*="border"],
body:not(.dark-mode):not([data-theme="dark"]) #bankAccountDetails div[style*="border"],
.bank-account-card > div[style*="border"],
.bank-account-card div[style*="border"],
#bankAccountDetails div[style*="border"] {
    border: none !important;
}

html body:not(.dark-mode):not([data-theme="dark"]) .file-input,
html body:not(.dark-mode):not([data-theme="dark"]) input.file-input,
html body:not(.dark-mode):not([data-theme="dark"]) #paymentReceipt,
body:not(.dark-mode):not([data-theme="dark"]) .file-input,
body:not(.dark-mode):not([data-theme="dark"]) input.file-input,
body:not(.dark-mode):not([data-theme="dark"]) #paymentReceipt,
.file-input,
input.file-input,
#paymentReceipt {
    border: none !important;
}

/* Dark mode - same border removal */
[data-theme="dark"] .bank-account-card > div[style*="border"],
[data-theme="dark"] .bank-account-card div[style*="border"],
[data-theme="dark"] #bankAccountDetails div[style*="border"],
[data-theme="dark"] .file-input,
[data-theme="dark"] input.file-input,
[data-theme="dark"] #paymentReceipt {
    border: none !important;
}