/**
 * Theme Variables Override
 * Apply seasonal theme CSS variables to all components
 * This file should be loaded AFTER all other CSS files
 */

/* ==============================================
   PRODUCT CARDS - Apply Theme Colors
   ============================================== */

.badge-pro {
    color: var(--theme-primary, #8b5cf6) !important;
}

.rent-btn {
    background: linear-gradient(90deg, var(--theme-gradient-start, #8b5cf6), var(--theme-gradient-end, #3b82f6)) !important;
}

.flash-sale-badge {
    background: linear-gradient(135deg, var(--theme-gradient-start, #8b5cf6), var(--theme-gradient-end, #3b82f6)) !important;
}

.rent-btn:hover {
    background: linear-gradient(135deg, var(--theme-gradient-start, #8b5cf6), var(--theme-gradient-end, #3b82f6)) !important;
}

.product-card:hover {
    border-color: var(--theme-primary, #8b5cf6) !important;
}

.product-option-item.selected {
    border-left: 4px solid var(--theme-secondary, #3b82f6) !important;
}

.flash-sale-countdown {
    background: linear-gradient(135deg, var(--theme-gradient-start, #8b5cf6), var(--theme-gradient-end, #3b82f6)) !important;
}

/* ==============================================
   PROGRESS BARS - Apply Theme Colors
   ============================================== */

.progress-bar.bg-success,
.progress-item.success .progress-fill {
    background: linear-gradient(135deg, var(--theme-success, #10b981), var(--theme-success, #059669)) !important;
    border-color: var(--theme-success, #10b981) !important;
}

.progress-bar.bg-primary,
.progress-item.primary .progress-fill {
    background: linear-gradient(135deg, var(--theme-primary, #3b82f6), var(--theme-secondary, #1d4ed8)) !important;
    border-color: var(--theme-primary, #3b82f6) !important;
}

.progress-percentage.text-primary {
    color: var(--theme-primary, #3b82f6) !important;
}

/* ==============================================
   BUTTONS & LINKS - Apply Theme Colors
   ============================================== */

.btn-primary {
    background: linear-gradient(135deg, var(--theme-gradient-start, #8b5cf6), var(--theme-gradient-end, #3b82f6)) !important;
    border-color: var(--theme-primary, #8b5cf6) !important;
}

.btn-success {
    background: var(--theme-success, #10b981) !important;
    border-color: var(--theme-success, #10b981) !important;
}

.text-primary {
    color: var(--theme-primary, #8b5cf6) !important;
}

.text-secondary {
    color: var(--theme-secondary, #3b82f6) !important;
}

.text-success {
    color: var(--theme-success, #10b981) !important;
}

.bg-primary {
    background-color: var(--theme-primary, #8b5cf6) !important;
}

.bg-secondary {
    background-color: var(--theme-secondary, #3b82f6) !important;
}

.bg-success {
    background-color: var(--theme-success, #10b981) !important;
}

/* ==============================================
   BADGES & LABELS - Apply Theme Colors
   ============================================== */

.badge-primary {
    background-color: var(--theme-primary, #8b5cf6) !important;
}

.badge-secondary {
    background-color: var(--theme-secondary, #3b82f6) !important;
}

.badge-success {
    background-color: var(--theme-success, #10b981) !important;
}

.badge-info {
    background-color: var(--theme-info, #06b6d4) !important;
}

/* ==============================================
   ALERTS & NOTIFICATIONS - Apply Theme Colors
   ============================================== */

.alert-info {
    background: linear-gradient(135deg, var(--theme-gradient-start, #667eea) 0%, var(--theme-gradient-end, #764ba2) 100%) !important;
}

.alert-primary {
    background-color: var(--theme-primary, #8b5cf6) !important;
}

.alert-success {
    background-color: var(--theme-success, #10b981) !important;
}

/* ==============================================
   BORDERS - Apply Theme Colors
   ============================================== */

.border-primary {
    border-color: var(--theme-primary, #8b5cf6) !important;
}

.border-secondary {
    border-color: var(--theme-secondary, #3b82f6) !important;
}

/* ==============================================
   HOVER EFFECTS - Apply Theme Colors
   ============================================== */

.hover\:bg-primary:hover {
    background-color: var(--theme-primary, #8b5cf6) !important;
}

.hover\:text-primary:hover {
    color: var(--theme-primary, #8b5cf6) !important;
}

.hover\:border-primary:hover {
    border-color: var(--theme-primary, #8b5cf6) !important;
}

/* ==============================================
   PRICE COMPARISON TABLE - Apply Theme Colors
   (For dark themes like Snow Winter 3)
   ============================================== */

/* Table container and backgrounds */
body[data-theme-type="dark"] table.w-full,
.seasonal-theme-dark table.w-full {
    background: var(--theme-card-bg, #0C2233) !important;
    border-radius: 0.5rem !important;
}

body[data-theme-type="dark"] table.w-full thead tr,
.seasonal-theme-dark table.w-full thead tr {
    background: var(--theme-background, #071621) !important;
}

body[data-theme-type="dark"] table.w-full thead th,
.seasonal-theme-dark table.w-full thead th {
    color: var(--theme-text, #B1CEDC) !important;
    background: transparent !important;
}

body[data-theme-type="dark"] table.w-full tbody tr,
.seasonal-theme-dark table.w-full tbody tr {
    background: var(--theme-card-bg, #0C2233) !important;
    border-color: var(--theme-border-color, rgba(177, 206, 220, 0.08)) !important;
}

body[data-theme-type="dark"] table.w-full td,
.seasonal-theme-dark table.w-full td {
    color: var(--theme-text, #B1CEDC) !important;
}

/* Override Tailwind green/yellow backgrounds in dark theme */
body[data-theme-type="dark"] .bg-green-50,
.seasonal-theme-dark .bg-green-50 {
    background: var(--theme-background-light, #122D42) !important;
}

body[data-theme-type="dark"] .bg-yellow-50,
.seasonal-theme-dark .bg-yellow-50 {
    background: var(--theme-tertiary, #17435E) !important;
}

body[data-theme-type="dark"] .bg-green-100,
body[data-theme-type="dark"] .bg-emerald-100,
.seasonal-theme-dark .bg-green-100,
.seasonal-theme-dark .bg-emerald-100 {
    background: var(--theme-background-light, #122D42) !important;
}

body[data-theme-type="dark"] .bg-purple-100,
.seasonal-theme-dark .bg-purple-100 {
    background: rgba(var(--theme-primary-rgb, 53, 127, 167), 0.3) !important;
}

/* Override text colors */
body[data-theme-type="dark"] .text-green-600,
body[data-theme-type="dark"] .text-green-700,
body[data-theme-type="dark"] .text-green-800,
body[data-theme-type="dark"] .text-emerald-600,
.seasonal-theme-dark .text-green-600,
.seasonal-theme-dark .text-green-700,
.seasonal-theme-dark .text-green-800,
.seasonal-theme-dark .text-emerald-600 {
    color: var(--theme-secondary, #82B0C4) !important;
}

body[data-theme-type="dark"] .text-red-600,
.seasonal-theme-dark .text-red-600 {
    color: var(--theme-warning, #C9A45C) !important;
}

body[data-theme-type="dark"] .text-gray-700,
body[data-theme-type="dark"] .text-gray-800,
.seasonal-theme-dark .text-gray-700,
.seasonal-theme-dark .text-gray-800 {
    color: var(--theme-text, #B1CEDC) !important;
}

body[data-theme-type="dark"] .text-gray-500,
body[data-theme-type="dark"] .text-gray-600,
.seasonal-theme-dark .text-gray-500,
.seasonal-theme-dark .text-gray-600 {
    color: var(--theme-text-muted, #82B0C4) !important;
}

body[data-theme-type="dark"] .text-purple-600,
.seasonal-theme-dark .text-purple-600 {
    color: var(--theme-primary, #357FA7) !important;
}

/* Border colors */
body[data-theme-type="dark"] .border-green-200,
.seasonal-theme-dark .border-green-200 {
    border-color: rgba(var(--theme-primary-rgb, 53, 127, 167), 0.4) !important;
}

/* Gradient backgrounds */
body[data-theme-type="dark"] .bg-gradient-to-r.from-green-100.to-emerald-100,
.seasonal-theme-dark .bg-gradient-to-r.from-green-100.to-emerald-100 {
    background: linear-gradient(to right, var(--theme-background-light, #122D42), var(--theme-tertiary, #17435E)) !important;
    border-color: var(--theme-border-color, rgba(177, 206, 220, 0.15)) !important;
}

/* Font styling in table */
body[data-theme-type="dark"] .font-medium,
.seasonal-theme-dark .font-medium {
    color: var(--theme-text-muted, #82B0C4) !important;
}

body[data-theme-type="dark"] .font-bold,
.seasonal-theme-dark .font-bold {
    color: var(--theme-text, #B1CEDC) !important;
}

/* Hover states */
body[data-theme-type="dark"] .hover\:bg-gray-50:hover,
.seasonal-theme-dark .hover\:bg-gray-50:hover {
    background: rgba(var(--theme-primary-rgb, 53, 127, 167), 0.1) !important;
}

/* Total row special styling */
body[data-theme-type="dark"] tr.border-b-4.border-green-200.bg-green-50,
.seasonal-theme-dark tr.border-b-4.border-green-200.bg-green-50 {
    background: var(--theme-background, #071621) !important;
    border-color: rgba(var(--theme-primary-rgb, 53, 127, 167), 0.4) !important;
}

/* White backgrounds in dark theme */
body[data-theme-type="dark"] .bg-white,
.seasonal-theme-dark .bg-white {
    background: var(--theme-card-bg, #0C2233) !important;
}

/* ==============================================
   RICH TEXT CONTENT - Apply Theme Colors for Dark Theme
   ============================================== */

/* Rich Text Content - Override dark text colors for dark themes */
body[data-theme-type="dark"] .rich-text-content,
.seasonal-theme-dark .rich-text-content {
    color: var(--theme-text, #B1CEDC) !important;
}

body[data-theme-type="dark"] .rich-text-content h1,
body[data-theme-type="dark"] .rich-text-content h2,
body[data-theme-type="dark"] .rich-text-content h3,
body[data-theme-type="dark"] .rich-text-content h4,
body[data-theme-type="dark"] .rich-text-content h5,
body[data-theme-type="dark"] .rich-text-content h6,
.seasonal-theme-dark .rich-text-content h1,
.seasonal-theme-dark .rich-text-content h2,
.seasonal-theme-dark .rich-text-content h3,
.seasonal-theme-dark .rich-text-content h4,
.seasonal-theme-dark .rich-text-content h5,
.seasonal-theme-dark .rich-text-content h6 {
    color: var(--theme-text, #B1CEDC) !important;
}

body[data-theme-type="dark"] .rich-text-content p,
body[data-theme-type="dark"] .rich-text-content li,
body[data-theme-type="dark"] .rich-text-content span,
.seasonal-theme-dark .rich-text-content p,
.seasonal-theme-dark .rich-text-content li,
.seasonal-theme-dark .rich-text-content span {
    color: var(--theme-text-muted, #82B0C4) !important;
}

body[data-theme-type="dark"] .rich-text-content strong,
body[data-theme-type="dark"] .rich-text-content b,
.seasonal-theme-dark .rich-text-content strong,
.seasonal-theme-dark .rich-text-content b {
    color: var(--theme-text, #B1CEDC) !important;
}

body[data-theme-type="dark"] .rich-text-content a,
.seasonal-theme-dark .rich-text-content a {
    color: var(--theme-primary, #357FA7) !important;
}

body[data-theme-type="dark"] .rich-text-content a:hover,
.seasonal-theme-dark .rich-text-content a:hover {
    color: var(--theme-secondary, #82B0C4) !important;
}

/* Product Modal Description - Override dark text colors */
body[data-theme-type="dark"] .modal-content,
body[data-theme-type="dark"] .modal-body,
.seasonal-theme-dark .modal-content,
.seasonal-theme-dark .modal-body {
    color: var(--theme-text, #B1CEDC) !important;
}

body[data-theme-type="dark"] .description-section,
body[data-theme-type="dark"] .product-description,
body[data-theme-type="dark"] .option-description,
.seasonal-theme-dark .description-section,
.seasonal-theme-dark .product-description,
.seasonal-theme-dark .option-description {
    color: var(--theme-text-muted, #82B0C4) !important;
}

/* Product Card Detail Tabs Content */
body[data-theme-type="dark"] .detail-tab-content,
body[data-theme-type="dark"] .tab-content,
body[data-theme-type="dark"] .product-details,
.seasonal-theme-dark .detail-tab-content,
.seasonal-theme-dark .tab-content,
.seasonal-theme-dark .product-details {
    color: var(--theme-text, #B1CEDC) !important;
}

/* Override #495057, #212529, #333 colors in dark theme */
body[data-theme-type="dark"] [style*="color: #495057"],
body[data-theme-type="dark"] [style*="color:#495057"],
body[data-theme-type="dark"] [style*="color: #212529"],
body[data-theme-type="dark"] [style*="color:#212529"],
body[data-theme-type="dark"] [style*="color: #333"],
body[data-theme-type="dark"] [style*="color:#333"],
.seasonal-theme-dark [style*="color: #495057"],
.seasonal-theme-dark [style*="color:#495057"],
.seasonal-theme-dark [style*="color: #212529"],
.seasonal-theme-dark [style*="color:#212529"],
.seasonal-theme-dark [style*="color: #333"],
.seasonal-theme-dark [style*="color:#333"] {
    color: var(--theme-text, #B1CEDC) !important;
}

/* ==============================================
   PRODUCT CARD TABS & CONTENT - Dark Theme
   ============================================== */

/* Tab Container Background */
body[data-theme-type="dark"] .product-card .bg-gray-50,
body.seasonal-theme-dark .product-card .bg-gray-50 {
    background: var(--theme-background-alt, #122D42) !important;
}

body[data-theme-type="dark"] .product-card .tab-content.bg-white,
body[data-theme-type="dark"] .product-card .tab-content.border-gray-100,
body.seasonal-theme-dark .product-card .tab-content.bg-white,
body.seasonal-theme-dark .product-card .tab-content.border-gray-100 {
    background: var(--theme-card-bg, #0C2233) !important;
    border-color: var(--theme-border-color, rgba(177, 206, 220, 0.12)) !important;
}

/* Tab Buttons */
body[data-theme-type="dark"] .detail-tab-btn,
body.seasonal-theme-dark .detail-tab-btn {
    color: var(--theme-text-muted, #82B0C4) !important;
}

body[data-theme-type="dark"] .detail-tab-btn.active,
body.seasonal-theme-dark .detail-tab-btn.active {
    background: var(--theme-card-bg, #0C2233) !important;
    color: var(--theme-primary, #357FA7) !important;
}

body[data-theme-type="dark"] .detail-tab-btn:hover:not(.active),
body.seasonal-theme-dark .detail-tab-btn:hover:not(.active) {
    background: rgba(53, 127, 167, 0.15) !important;
    color: var(--theme-text, #B1CEDC) !important;
}

/* Product Card Title */
body[data-theme-type="dark"] .product-card h3.text-gray-800,
body[data-theme-type="dark"] .product-card .text-gray-800,
body.seasonal-theme-dark .product-card h3.text-gray-800,
body.seasonal-theme-dark .product-card .text-gray-800 {
    color: var(--theme-text, #B1CEDC) !important;
}

/* Tab Content Text */
body[data-theme-type="dark"] .tab-pane .text-gray-600,
body[data-theme-type="dark"] .expandable-text.text-gray-600,
body.seasonal-theme-dark .tab-pane .text-gray-600,
body.seasonal-theme-dark .expandable-text.text-gray-600 {
    color: var(--theme-text-muted, #82B0C4) !important;
}

/* Text Content inside tabs */
body[data-theme-type="dark"] .tab-pane .text-content,
body[data-theme-type="dark"] .tab-pane .text-content p,
body[data-theme-type="dark"] .tab-pane .text-content span,
body[data-theme-type="dark"] .tab-pane .text-content li,
body.seasonal-theme-dark .tab-pane .text-content,
body.seasonal-theme-dark .tab-pane .text-content p,
body.seasonal-theme-dark .tab-pane .text-content span,
body.seasonal-theme-dark .tab-pane .text-content li {
    color: var(--theme-text-muted, #82B0C4) !important;
}

body[data-theme-type="dark"] .tab-pane .text-content strong,
body[data-theme-type="dark"] .tab-pane .text-content b,
body.seasonal-theme-dark .tab-pane .text-content strong,
body.seasonal-theme-dark .tab-pane .text-content b {
    color: var(--theme-text, #B1CEDC) !important;
}

/* Options Section */
body[data-theme-type="dark"] .product-card .text-gray-700,
body.seasonal-theme-dark .product-card .text-gray-700 {
    color: var(--theme-text, #B1CEDC) !important;
}

/* Product Card Background */
body[data-theme-type="dark"] .product-card,
body.seasonal-theme-dark .product-card {
    background: var(--theme-card-bg, #0C2233) !important;
    border-color: var(--theme-border-color, rgba(177, 206, 220, 0.12)) !important;
}

/* Product Card Padding Area */
body[data-theme-type="dark"] .product-card .p-6,
body.seasonal-theme-dark .product-card .p-6 {
    background: var(--theme-card-bg, #0C2233) !important;
}

/* ==============================================
   PROFESSIONAL CARD HEADER - Global Style
   (Used in points, booking, order_history, cart, detail, rental_extension)
   ============================================== */

/* Keep white/light background for professional-card even in dark theme */
body[data-theme-type="dark"] .professional-card,
body.seasonal-theme-dark .professional-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Professional card heading colors - use theme primary for headings */
body[data-theme-type="dark"] .professional-card h1,
body[data-theme-type="dark"] .professional-card .h1,
body[data-theme-type="dark"] .professional-card h2,
body[data-theme-type="dark"] .professional-card .h2,
body[data-theme-type="dark"] .professional-card h3,
body[data-theme-type="dark"] .professional-card .h3,
body[data-theme-type="dark"] .professional-card .fw-bold,
body.seasonal-theme-dark .professional-card h1,
body.seasonal-theme-dark .professional-card .h1,
body.seasonal-theme-dark .professional-card h2,
body.seasonal-theme-dark .professional-card .h2,
body.seasonal-theme-dark .professional-card h3,
body.seasonal-theme-dark .professional-card .h3,
body.seasonal-theme-dark .professional-card .fw-bold {
    color: var(--theme-primary, #357FA7) !important;
}

/* Professional card icons with text-primary class */
body[data-theme-type="dark"] .professional-card .text-primary,
body[data-theme-type="dark"] .professional-card i.text-primary,
body.seasonal-theme-dark .professional-card .text-primary,
body.seasonal-theme-dark .professional-card i.text-primary {
    color: var(--theme-primary, #357FA7) !important;
}

/* Professional card muted text - use gray color for good contrast on white bg */
body[data-theme-type="dark"] .professional-card .text-muted,
body[data-theme-type="dark"] .professional-card p,
body.seasonal-theme-dark .professional-card .text-muted,
body.seasonal-theme-dark .professional-card p {
    color: #6b7280 !important;
}

/* ==============================================
   GLOBAL TEXT COLOR OVERRIDES FOR DARK THEME
   (Applied to all pages with dark theme)
   ============================================== */

/* Override dark text colors (#333, #212529, #666, etc.) with light colors in dark theme */

/* Body and general text */
body[data-theme-type="dark"],
body.seasonal-theme-dark {
    color: var(--theme-text, #B1CEDC) !important;
}

/* Page titles and headings */
body[data-theme-type="dark"] .page-title,
body.seasonal-theme-dark .page-title {
    color: var(--theme-text, #B1CEDC) !important;
}

/* Order/Booking cards and containers */
body[data-theme-type="dark"] .order-card,
body[data-theme-type="dark"] .booking-card,
body[data-theme-type="dark"] .cart-card,
body[data-theme-type="dark"] .detail-card,
body.seasonal-theme-dark .order-card,
body.seasonal-theme-dark .booking-card,
body.seasonal-theme-dark .cart-card,
body.seasonal-theme-dark .detail-card {
    background: var(--theme-card-bg, #0C2233) !important;
    color: var(--theme-text, #B1CEDC) !important;
}

/* Order item headings and labels */
body[data-theme-type="dark"] .order-item-title,
body[data-theme-type="dark"] .order-item-name,
body[data-theme-type="dark"] .booking-title,
body[data-theme-type="dark"] .item-title,
body[data-theme-type="dark"] .product-name,
body.seasonal-theme-dark .order-item-title,
body.seasonal-theme-dark .order-item-name,
body.seasonal-theme-dark .booking-title,
body.seasonal-theme-dark .item-title,
body.seasonal-theme-dark .product-name {
    color: var(--theme-text, #B1CEDC) !important;
}

/* Order details and descriptions */
body[data-theme-type="dark"] .order-details,
body[data-theme-type="dark"] .order-info,
body[data-theme-type="dark"] .booking-details,
body[data-theme-type="dark"] .item-details,
body[data-theme-type="dark"] .product-details,
body.seasonal-theme-dark .order-details,
body.seasonal-theme-dark .order-info,
body.seasonal-theme-dark .booking-details,
body.seasonal-theme-dark .item-details,
body.seasonal-theme-dark .product-details {
    color: var(--theme-muted-text, #82B0C4) !important;
}

/* Small text, captions, and muted text */
body[data-theme-type="dark"] small,
body[data-theme-type="dark"] .small,
body[data-theme-type="dark"] .text-muted,
body.seasonal-theme-dark small,
body.seasonal-theme-dark .small,
body.seasonal-theme-dark .text-muted {
    color: var(--theme-muted-text, #82B0C4) !important;
}

/* Status badges and labels */
body[data-theme-type="dark"] .status-badge,
body[data-theme-type="dark"] .order-status,
body[data-theme-type="dark"] .booking-status,
body.seasonal-theme-dark .status-badge,
body.seasonal-theme-dark .order-status,
body.seasonal-theme-dark .booking-status {
    color: inherit !important;
}

/* List items and table rows */
body[data-theme-type="dark"] .list-group-item,
body[data-theme-type="dark"] .table td,
body[data-theme-type="dark"] .table th,
body.seasonal-theme-dark .list-group-item,
body.seasonal-theme-dark .table td,
body.seasonal-theme-dark .table th {
    color: var(--theme-text, #B1CEDC) !important;
}

/* Form labels and inputs */
body[data-theme-type="dark"] .form-label,
body[data-theme-type="dark"] label,
body.seasonal-theme-dark .form-label,
body.seasonal-theme-dark label {
    color: var(--theme-text, #B1CEDC) !important;
}

/* Paragraphs and general content (exclude professional-card which is handled separately) */
body[data-theme-type="dark"] p:not(.professional-card p),
body[data-theme-type="dark"] div:not(.professional-card div),
body.seasonal-theme-dark p:not(.professional-card p),
body.seasonal-theme-dark div:not(.professional-card div) {
    color: inherit;
}