/**
 * BOOKING DARK MODE - PROPERTY DETAIL CONSISTENCY
 *
 * Matches property detail page dark mode styling exactly
 * Uses CSS variables for consistency across the application
 * Gold accent color for icons (matching property detail page)
 *
 * Version: 2.0
 * Created: 2025-01-27
 * Updated: 2025-01-27 - Aligned with property detail page
 */

/* ==========================================================================
   DARK MODE COLOR OVERRIDES - USING CSS VARIABLES
   ========================================================================== */

[data-theme="dark"] {
    /* Use CSS variables matching property detail page */
    --booking-primary: var(--color-text-secondary, #6b7280) !important;
    --booking-primary-hover: var(--color-dark-border, #3a3a3a) !important;
    --booking-primary-light: var(--color-text-secondary, #9ca3af) !important;
    --booking-primary-dark: var(--color-dark-border, #2a2a2a) !important;
    --booking-primary-bg: rgba(55, 65, 81, 0.2) !important;

    /* Info colors - use CSS variables */
    --booking-info: var(--color-text-secondary, #6b7280) !important;
    --booking-info-bg: rgba(55, 65, 81, 0.25) !important;

    /* Ultra-black glass surfaces for confirmation pages */
    --glass-surface-dark: rgba(0, 0, 0, 0.85);
    --glass-surface-dark-hover: rgba(10, 10, 10, 0.9);
    --glass-border-dark: rgba(255, 255, 255, 0.08);
    --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
    --glass-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.75);
    
    /* Ultra-dark background for all booking pages */
    --booking-background-ultra-dark: #0a0a0a;
    --booking-border-ultra-dark: #1f2937;
}

/* ==========================================================================
   FORMS - DARK GRAY/BLACK
   ========================================================================== */

[data-theme="dark"] .booking-input:focus,
[data-theme="dark"] .booking-select:focus,
[data-theme="dark"] .booking-textarea:focus {
    border-color: var(--accent-color, #d4af37) !important;
    /* Gold accent like property detail */
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--accent-color, #d4af37) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1) !important;
}

/* Form fields used in booking steps (Step 2/4) */
[data-theme="dark"] .form-input,
[data-theme="dark"] .name-input,
[data-theme="dark"] .contact-input,
[data-theme="dark"] .payment-form-group input,
[data-theme="dark"] .payment-form-group select {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--color-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

/* Ultra-dark backgrounds for all step containers */
[data-theme="dark"] .step1-container,
[data-theme="dark"] .step2-container,
[data-theme="dark"] .step3-container,
[data-theme="dark"] .step4-container,
[data-theme="dark"] .step5-container,
[data-theme="dark"] .booking-process-container,
[data-theme="dark"] .booking-container {
    background: #0a0a0a !important;
    /* Ultra-dark background */
}

/* Step section surfaces */
[data-theme="dark"] .compact-section,
[data-theme="dark"] .address-section,
[data-theme="dark"] .travel-section,
[data-theme="dark"] .additional-guest-section,
[data-theme="dark"] .billing-section,
[data-theme="dark"] .contact-help,
[data-theme="dark"] .form-help-text,
[data-theme="dark"] .create-account-checkbox,
[data-theme="dark"] .payment-section,
[data-theme="dark"] .compact-payment-section,
[data-theme="dark"] .payment-method,
[data-theme="dark"] .payment-method-card.compact {
    background: #0a0a0a !important;
    /* Ultra-dark background */
    border-color: #1f2937 !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .payment-method.selected,
[data-theme="dark"] .payment-method-card.compact.selected {
    background: var(--color-background-tertiary, #121212) !important;
    border-color: var(--accent-color, #d4af37) !important;
}

[data-theme="dark"] .payment-method-card.compact:hover {
    background: var(--color-background-tertiary, #121212) !important;
    border-color: var(--accent-color, #d4af37) !important;
}

/* ==========================================================================
   BUTTONS - DARK GRAY/BLACK
   ========================================================================== */

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .booking-btn-primary {
    background: linear-gradient(135deg, var(--accent-color-dark, #b49225) 0%, var(--accent-color, #d4af37) 100%) !important;
    /* Gold gradient */
    border-color: var(--accent-color, #d4af37) !important;
    color: var(--color-text-primary, #ffffff) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    /* Match property detail shadows */
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .booking-btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-color, #d4af37) 0%, var(--accent-color-light, #e5c85a) 100%) !important;
    /* Lighter gold gradient */
    border-color: var(--accent-color-light, #e5c85a) !important;
    color: var(--color-text-primary, #ffffff) !important;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4) !important;
    /* Gold shadow on hover */
    transform: translateY(-2px);
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .booking-btn-outline {
    border-color: var(--accent-color, #d4af37) !important;
    /* Gold border */
    color: var(--accent-color, #d4af37) !important;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .booking-btn-outline:hover {
    background: var(--accent-color, #d4af37) !important;
    border-color: var(--accent-color, #d4af37) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .btn-back {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--color-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .btn-back:hover {
    background: var(--color-background-tertiary, #121212) !important;
    border-color: var(--accent-color, #d4af37) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

/* ==========================================================================
   ICONS - DARK GRAY/BLACK
   ========================================================================== */

[data-theme="dark"] .info-icon,
[data-theme="dark"] .feature-card__icon,
[data-theme="dark"] .section-icon {
    background: rgba(212, 175, 55, 0.2) !important;
    /* Gold background like property detail */
    color: var(--accent-color, #d4af37) !important;
    /* Gold icon */
}

[data-theme="dark"] .info-icon:hover,
[data-theme="dark"] .feature-card__icon:hover {
    background: rgba(212, 175, 55, 0.3) !important;
    color: var(--accent-color, #d4af37) !important;
}

/* ==========================================================================
   LINKS - DARK GRAY
   ========================================================================== */

[data-theme="dark"] a,
[data-theme="dark"] .booking-link {
    color: var(--color-text-secondary, #e0e0e0) !important;
}

[data-theme="dark"] a:hover,
[data-theme="dark"] .booking-link:hover {
    color: var(--accent-color, #d4af37) !important;
    /* Gold on hover */
}

/* ==========================================================================
   BORDERS AND ACCENTS - DARK GRAY
   ========================================================================== */

[data-theme="dark"] .section-title i,
[data-theme="dark"] .section-subtitle i,
[data-theme="dark"] .compact-section-title i,
[data-theme="dark"] .compact-section-subtitle i,
[data-theme="dark"] .features-section__icon {
    color: var(--accent-color, #d4af37) !important;
    /* Gold accent like property detail */
}

[data-theme="dark"] .border-primary,
[data-theme="dark"] .border-left-primary {
    border-color: var(--accent-color, #d4af37) !important;
}

/* ==========================================================================
   CARDS AND SURFACES - DARKER
   ========================================================================== */

[data-theme="dark"] .booking-card,
[data-theme="dark"] .property-section,
[data-theme="dark"] .compact-section,
[data-theme="dark"] .property-quick-info,
[data-theme="dark"] .booking-form-section {
    background: var(--color-background-secondary, #0a0a0a) !important;
    /* Match property detail cards */
    border-color: var(--color-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    /* Match property detail shadows */
}

[data-theme="dark"] .booking-card:hover,
[data-theme="dark"] .property-section:hover,
[data-theme="dark"] .compact-section:hover {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--accent-color, #d4af37) !important;
    /* Gold border on hover */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
    /* Match property detail hover shadow */
}

/* ==========================================================================
   TITLES - DARKER
   ========================================================================== */

[data-theme="dark"] .section-title,
[data-theme="dark"] .section-subtitle,
[data-theme="dark"] .compact-section-title,
[data-theme="dark"] .compact-section-subtitle,
[data-theme="dark"] .step-title,
[data-theme="dark"] .step-subtitle,
[data-theme="dark"] .property-title,
[data-theme="dark"] h4.property-title,
[data-theme="dark"] .features-section__title,
[data-theme="dark"] .house-rules-section__title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .booking-process-container .section-title,
[data-theme="dark"] .booking-process-container .section-subtitle {
    color: var(--color-text-primary, #ffffff) !important;
}

/* Additional specific selectors for property-title */
[data-theme="dark"] .property-header .property-title,
[data-theme="dark"] .property-header-fullwidth .property-title,
[data-theme="dark"] .booking-sidebar .property-title,
[data-theme="dark"] .booking-summary-card .property-title,
[data-theme="dark"] .compact-section .property-title,
[data-theme="dark"] .step2-container .property-title,
[data-theme="dark"] .step2-container h4.property-title {
    color: var(--color-text-primary, #ffffff) !important;
}

/* Additional specific selectors for property-details */
[data-theme="dark"] .property-details,
[data-theme="dark"] div.property-details,
[data-theme="dark"] .property-header .property-details,
[data-theme="dark"] .booking-sidebar .property-details,
[data-theme="dark"] .booking-summary-card .property-details,
[data-theme="dark"] .compact-section .property-details,
[data-theme="dark"] .step2-container .property-details,
[data-theme="dark"] .step2-container div.property-details {
    color: var(--color-text-primary, #ffffff) !important;
}

/* ==========================================================================
   PROPERTY FEATURES - DARKER
   ========================================================================== */

[data-theme="dark"] .feature-card {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--color-border, #2a2a2a) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .feature-card:hover {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--accent-color, #d4af37) !important;
    /* Gold border on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .feature-card__icon {
    background: rgba(212, 175, 55, 0.2) !important;
    /* Gold background like property detail */
    color: var(--accent-color, #d4af37) !important;
    /* Gold icon */
}

[data-theme="dark"] .feature-card__title {
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .feature-card__description {
    color: var(--color-text-secondary, #e0e0e0) !important;
}

/* ==========================================================================
   COMPACT INFO ITEMS - DARKER
   ========================================================================== */

[data-theme="dark"] .compact-info-item,
[data-theme="dark"] .info-item {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--color-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .compact-info-item:hover,
[data-theme="dark"] .info-item:hover {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--accent-color, #d4af37) !important;
    /* Gold border on hover */
}

[data-theme="dark"] .compact-info-icon,
[data-theme="dark"] .info-icon {
    background: rgba(212, 175, 55, 0.2) !important;
    /* Gold background */
    color: var(--accent-color, #d4af37) !important;
    /* Gold icon */
}

[data-theme="dark"] .compact-info-value,
[data-theme="dark"] .info-value {
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .compact-info-label,
[data-theme="dark"] .info-label {
    color: var(--color-text-secondary, #e0e0e0) !important;
}

/* ==========================================================================
   TEXT CONTENT - DARKER
   ========================================================================== */

[data-theme="dark"] .property-description,
[data-theme="dark"] div.property-description,
[data-theme="dark"] .booking-description,
[data-theme="dark"] p,
[data-theme="dark"] .text-content,
[data-theme="dark"] .description,
[data-theme="dark"] .rule-item__text,
[data-theme="dark"] .policy-description {
    color: var(--color-text-secondary, #e0e0e0) !important;
}

/* Additional specific selectors for property-description */
[data-theme="dark"] .property-header .property-description,
[data-theme="dark"] .booking-sidebar .property-description,
[data-theme="dark"] .booking-summary-card .property-description,
[data-theme="dark"] .compact-section .property-description,
[data-theme="dark"] .step2-container .property-description,
[data-theme="dark"] .step2-container div.property-description {
    color: var(--color-text-secondary, #e0e0e0) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary {
    color: var(--color-text-secondary, #e0e0e0) !important;
}

/* ==========================================================================
   HOUSE RULES - DARKER
   ========================================================================== */

[data-theme="dark"] .house-rules-section,
[data-theme="dark"] .house-rules-accordion {
    background: var(--color-background, #000000) !important;
    border-color: var(--color-border, #2a2a2a) !important;
}

[data-theme="dark"] .rule-item {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--color-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .rule-item:hover {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--accent-color, #d4af37) !important;
    /* Gold border on hover */
}

[data-theme="dark"] .rule-item__icon {
    background: rgba(212, 175, 55, 0.2) !important;
    /* Gold background */
    color: var(--accent-color, #d4af37) !important;
    /* Gold icon */
}

[data-theme="dark"] .rule-badge {
    background: rgba(212, 175, 55, 0.2) !important;
    color: var(--accent-color, #d4af37) !important;
}

[data-theme="dark"] .rule-badge--required {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

[data-theme="dark"] .rule-badge--optional {
    background: rgba(212, 175, 55, 0.2) !important;
    color: var(--accent-color, #d4af37) !important;
}

/* ==========================================================================
   CANCELLATION POLICY - DARKER
   ========================================================================== */

[data-theme="dark"] .cancellation-policy-section,
[data-theme="dark"] .cancellation-policy-card {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--color-border, #2a2a2a) !important;
    border-left-color: var(--accent-color, #d4af37) !important;
    /* Gold accent like property detail */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .cancellation-policy-card:hover {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--accent-color, #d4af37) !important;
    /* Gold border on hover */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .policy-timeline,
[data-theme="dark"] .policy-timeline__period {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--color-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .policy-timeline__period {
    color: var(--color-text-secondary, #e0e0e0) !important;
}

/* ==========================================================================
   AMENITIES - DARKER
   ========================================================================== */

[data-theme="dark"] .amenities-grid,
[data-theme="dark"] .amenities-grid-compact {
    background: transparent !important;
}

[data-theme="dark"] .amenity-item,
[data-theme="dark"] .amenity-item-compact {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--color-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .amenity-item:hover,
[data-theme="dark"] .amenity-item-compact:hover {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--accent-color, #d4af37) !important;
    /* Gold border on hover */
}

[data-theme="dark"] .amenity-item i,
[data-theme="dark"] .amenity-item-compact i {
    color: var(--accent-color, #d4af37) !important;
    /* Gold icon like property detail */
}

/* ==========================================================================
   PROPERTY HEADER - DARKER
   ========================================================================== */

[data-theme="dark"] .property-header,
[data-theme="dark"] .property-header-section,
[data-theme="dark"] .property-header-fullwidth {
    background: var(--color-background, #000000) !important;
    border-color: var(--color-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .property-meta,
[data-theme="dark"] .meta-item {
    color: var(--color-text-secondary, #e0e0e0) !important;
}

[data-theme="dark"] .badge,
[data-theme="dark"] .badge-featured,
[data-theme="dark"] .badge-type {
    background: var(--color-dark-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .badge-instant {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

/* ==========================================================================
   QUICK INFO GRID - DARKER
   ========================================================================== */

[data-theme="dark"] .quick-info-grid {
    background: transparent !important;
}

[data-theme="dark"] .quick-info-grid .info-item {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--color-border, #2a2a2a) !important;
}

[data-theme="dark"] .quick-info-grid .info-item:hover {
    background: var(--color-background-secondary, #0a0a0a) !important;
    border-color: var(--accent-color, #d4af37) !important;
    /* Gold border on hover */
}

/* ==========================================================================
   CALENDAR - DARK GRAY
   ========================================================================== */

[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
    background: var(--accent-color, #d4af37) !important;
    /* Gold like property detail */
    border-color: var(--accent-color-dark, #b49225) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .flatpickr-day.selected:hover,
[data-theme="dark"] .flatpickr-day.startRange:hover,
[data-theme="dark"] .flatpickr-day.endRange:hover {
    background: var(--accent-color-dark, #b49225) !important;
}

/* ==========================================================================
   SIDEBAR - DARKER
   ========================================================================== */

[data-theme="dark"] .booking-sidebar,
[data-theme="dark"] .booking-compact-sidebar {
    background: var(--color-background-secondary, #0a0a0a) !important;
    /* Match property detail sidebar */
    border-color: var(--color-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    /* Match property detail shadows */
}

[data-theme="dark"] .booking-sidebar .btn-primary {
    background: var(--color-dark-border, #2a2a2a) !important;
    border-color: var(--color-dark-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .booking-sidebar .btn-primary:hover {
    background: var(--accent-color, #d4af37) !important;
    /* Gold on hover */
    border-color: var(--accent-color, #d4af37) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .booking-sidebar h3,
[data-theme="dark"] .booking-sidebar h4,
[data-theme="dark"] .booking-sidebar .sidebar-title {
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .booking-sidebar p,
[data-theme="dark"] .booking-sidebar .sidebar-text {
    color: var(--color-text-secondary, #e0e0e0) !important;
}

/* ==========================================================================
   ALERTS AND NOTIFICATIONS - DARK GRAY
   ========================================================================== */

[data-theme="dark"] .alert-info,
[data-theme="dark"] .booking-alert-info {
    background: rgba(212, 175, 55, 0.15) !important;
    /* Gold background */
    border-color: var(--accent-color, #d4af37) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

[data-theme="dark"] .alert-primary {
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: var(--accent-color, #d4af37) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

/* ==========================================================================
   BADGES - DARK GRAY
   ========================================================================== */

[data-theme="dark"] .badge-primary,
[data-theme="dark"] .badge-info {
    background: var(--color-dark-border, #2a2a2a) !important;
    color: var(--color-text-primary, #ffffff) !important;
}

/* ==========================================================================
   PROGRESS INDICATORS - DARK GRAY
   ========================================================================== */

[data-theme="dark"] .progress-bar {
    background: var(--color-dark-border, #2a2a2a) !important;
}

[data-theme="dark"] .progress-bar-fill {
    background: var(--accent-color, #d4af37) !important;
    /* Gold fill like property detail */
}

/* ==========================================================================
   FOCUS STATES - GOLD ACCENT
   ========================================================================== */

[data-theme="dark"] *:focus {
    outline-color: var(--accent-color, #d4af37) !important;
    /* Gold focus */
}

[data-theme="dark"] *:focus-visible {
    outline: 2px solid var(--accent-color, #d4af37) !important;
    outline-offset: 2px;
}

/* ==========================================================================
   FOCUS SHADOWS - GOLD ACCENT
   ========================================================================== */

[data-theme="dark"] *:focus {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1) !important;
    /* Gold shadow */
}

[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] .booking-btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3) !important;
}

/* Button shadows matching property detail */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .booking-btn-primary {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    /* Match property detail */
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .booking-btn-primary:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
    /* Match property detail hover */
}

/* ==========================================================================
   CHECKBOXES - GLOBAL DARK MODE STYLING
   ========================================================================== */

/* Apply to all form checkboxes across booking steps */
[data-theme="dark"] .form-check-input,
[data-theme="dark"] input[type="checkbox"] {
    border-color: #374151 !important;
    /* Visible border in dark mode */
    background-color: transparent !important;
    accent-color: var(--accent-color, #d4af37) !important;
    /* Gold accent */
}

[data-theme="dark"] .form-check-input:checked,
[data-theme="dark"] input[type="checkbox"]:checked {
    background-color: var(--accent-color, #d4af37) !important;
    /* Gold background when checked */
    border-color: var(--accent-color, #d4af37) !important;
}

[data-theme="dark"] .form-check-input:hover,
[data-theme="dark"] input[type="checkbox"]:hover {
    border-color: var(--accent-color, #d4af37) !important;
    /* Gold border on hover */
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1) !important;
}

[data-theme="dark"] .form-check-input:focus,
[data-theme="dark"] input[type="checkbox"]:focus {
    outline: 2px solid var(--accent-color, #d4af37) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1) !important;
}

/* Ensure checkboxes are visible in both modes */
input[type="checkbox"] {
    appearance: auto;
    /* Use browser default for better visibility and checkmark */
}