/**
 * Order Page - Force Dark Mode
 * Override همه background های سفید با !important
 */

/* Force all white backgrounds to dark */
* {
    scrollbar-color: #667eea #0f1419 !important;
}

/* Override any white or light backgrounds */
[style*="background: white"],
[style*="background:white"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: #FFF"],
[style*="background:#FFF"],
[style*="background-color: #FFF"],
[style*="background-color:#FFF"] {
    background: #1a1f2e !important;
    background-color: #1a1f2e !important;
}

/* Force all cards and containers */
.service-card,
.option-card,
.package-card,
.delivery-option,
.tech-card,
.feature-card,
.card,
.info-card,
.selection-card {
    background: #1a1f2e !important;
    background-color: #1a1f2e !important;
    border: 2px solid rgba(102, 126, 234, 0.3) !important;
    color: #e1e8ed !important;
}

/* Hover states */
.service-card:hover,
.option-card:hover,
.package-card:hover,
.delivery-option:hover,
.tech-card:hover,
.feature-card:hover,
.card:hover,
.info-card:hover,
.selection-card:hover {
    background: #1f2533 !important;
    background-color: #1f2533 !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4) !important;
}

/* Selected states */
.service-card.selected,
.option-card.selected,
.package-card.selected,
.delivery-option.selected,
.tech-card.selected,
.feature-card.selected,
.card.selected,
.info-card.selected,
.selection-card.selected {
    background: rgba(102, 126, 234, 0.2) !important;
    background-color: rgba(102, 126, 234, 0.2) !important;
    border-color: #667eea !important;
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.6) !important;
}

/* All headings */
h1, h2, h3, h4, h5, h6 {
    color: #e1e8ed !important;
}

/* All paragraphs and text */
p, span, div, li, label {
    color: #8899a6 !important;
}

/* Strong and bold text */
strong, b {
    color: #e1e8ed !important;
}

/* Links */
a {
    color: #667eea !important;
}

a:hover {
    color: #764ba2 !important;
}

/* Icons */
.service-icon,
.option-icon,
.delivery-icon,
.feature-icon,
.icon {
    background: rgba(102, 126, 234, 0.15) !important;
    color: #667eea !important;
}

/* Grids and containers */
.service-selection-grid,
.options-grid,
.packages-grid,
.delivery-options,
.tech-layout,
.welcome-features-grid {
    background: transparent !important;
}

/* Step content */
.step-content,
.order-step {
    background: transparent !important;
}

/* Forms */
input,
textarea,
select {
    background: #0f1419 !important;
    background-color: #0f1419 !important;
    border: 2px solid rgba(102, 126, 234, 0.3) !important;
    color: #e1e8ed !important;
}

input::placeholder,
textarea::placeholder {
    color: #8899a6 !important;
}

input:focus,
textarea:focus,
select:focus {
    background: #1a1f2e !important;
    background-color: #1a1f2e !important;
    border-color: #667eea !important;
    outline: none !important;
}

/* Lists */
ul, ol {
    color: #8899a6 !important;
}

li {
    color: #8899a6 !important;
}

/* Tables */
table {
    background: #1a1f2e !important;
    color: #e1e8ed !important;
}

th, td {
    border-color: rgba(102, 126, 234, 0.2) !important;
    color: #e1e8ed !important;
}

/* Buttons - keep their colors */
.btn,
button {
    border: none !important;
}

.btn-primary,
button.btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
}

.btn-secondary,
button.btn-secondary {
    background: #374151 !important;
    color: #e1e8ed !important;
}

.btn-success,
button.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

/* Price displays */
.price,
.price-value,
.cost,
.delivery-price,
.option-price,
.package-price {
    color: #10b981 !important;
}

/* Badges */
.badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Modals */
.modal,
.modal-content,
.modal-dialog {
    background: #1a1f2e !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
}

.modal-header {
    background: #0f1419 !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.3) !important;
}

.modal-body {
    background: #1a1f2e !important;
}

.modal-footer {
    background: #0f1419 !important;
    border-top: 1px solid rgba(102, 126, 234, 0.3) !important;
}

/* Alerts */
.alert {
    background: rgba(102, 126, 234, 0.1) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    color: #e1e8ed !important;
}

/* Tooltips */
.tooltip,
.popover {
    background: #1a1f2e !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    color: #e1e8ed !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background: #0f1419 !important;
}

::-webkit-scrollbar-track {
    background: #0f1419 !important;
}

::-webkit-scrollbar-thumb {
    background: #667eea !important;
    border-radius: 5px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #764ba2 !important;
}

/* Ensure no white flashes */
body,
html {
    background: #0f1419 !important;
}

/* Override any inline styles */
div[style],
section[style],
article[style],
aside[style] {
    background-color: transparent !important;
}

/* Specific overrides for common patterns */
.bg-white {
    background: #1a1f2e !important;
}

.bg-light {
    background: #0f1419 !important;
}

.text-dark {
    color: #e1e8ed !important;
}

.text-muted {
    color: #8899a6 !important;
}

/* Borders */
hr,
.divider,
.separator {
    border-color: rgba(102, 126, 234, 0.2) !important;
    background: rgba(102, 126, 234, 0.2) !important;
}

/* Shadows */
.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Ensure visibility */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

/* Fix any gradient backgrounds that might be light */
[class*="gradient"] {
    background: linear-gradient(135deg, #1a1f2e, #2d1b3d) !important;
}

/* Ensure all containers are dark */
.container,
.container-fluid,
.wrapper,
.content,
.main {
    background: transparent !important;
}