/* ================================================
   RCA2 LIGHT THEME ENHANCEMENTS
   Modern, soft contrast improvements
   Only applies when dark mode is NOT active
   ================================================ */

/* ================================================
   ENHANCED SHADOWS (Primary method for depth)
   Soft, modern shadows instead of heavy borders
   ================================================ */

/* Soft shadow-sm */
html:not([data-theme="dark"]) .shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 
                0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Soft shadow (default) */
html:not([data-theme="dark"]) .shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 
                0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Soft shadow-md */
html:not([data-theme="dark"]) .shadow-md {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 
                0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Soft shadow-lg */
html:not([data-theme="dark"]) .shadow-lg {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 
                0 4px 8px rgba(0, 0, 0, 0.04) !important;
}

/* ================================================
   CARD & CONTAINER STYLING
   Subtle borders + soft shadows
   ================================================ */

/* Main wizard step cards - soft border, nice shadow */
html:not([data-theme="dark"]) .wizard-step .bg-white.rounded-2xl {
    border-color: #e5e7eb !important; /* gray-200 - subtle */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 
                0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Offer cards */
html:not([data-theme="dark"]) .offer-card {
    border-color: #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 
                0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

html:not([data-theme="dark"]) .offer-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 
                0 4px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Radio cards - subtle border (only for unselected) */
html:not([data-theme="dark"]) .radio-card:not(.selected) {
    border-color: #e5e7eb !important;
}

html:not([data-theme="dark"]) .radio-card:not(.selected):hover {
    border-color: #d1d5db !important;
    background-color: #fafafa !important;
}

/* Person cards */
html:not([data-theme="dark"]) .person-card {
    border-color: #e5e7eb !important;
}

html:not([data-theme="dark"]) .person-card:hover {
    border-color: #d1d5db !important;
}

/* Entry method buttons */
html:not([data-theme="dark"]) .entry-method-btn {
    border-color: #e5e7eb !important;
}

html:not([data-theme="dark"]) .entry-method-btn:hover {
    border-color: #d1d5db !important;
}

/* ================================================
   FORM INPUT ENHANCEMENTS
   Subtle but visible inputs
   ================================================ */

/* Standard form inputs - subtle border */
html:not([data-theme="dark"]) input[type="text"],
html:not([data-theme="dark"]) input[type="number"],
html:not([data-theme="dark"]) input[type="email"],
html:not([data-theme="dark"]) input[type="tel"],
html:not([data-theme="dark"]) input[type="date"],
html:not([data-theme="dark"]) input[type="search"],
html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) .form-input,
html:not([data-theme="dark"]) .form-select {
    border-color: #d1d5db !important; /* gray-300 - visible but soft */
    background-color: #ffffff !important;
}

/* ================================================
   SECTION DIVIDERS
   Subtle horizontal lines
   ================================================ */

html:not([data-theme="dark"]) .border-b.border-gray-100 {
    border-bottom-color: #e5e7eb !important; /* gray-200 */
}

html:not([data-theme="dark"]) .border-t.border-gray-100 {
    border-top-color: #e5e7eb !important;
}

/* ================================================
   WIZARD PROGRESS STEPS
   ================================================ */

html:not([data-theme="dark"]) .step-line {
    background-color: #e5e7eb !important;
}

html:not([data-theme="dark"]) .step-indicator {
    border: 2px solid #e5e7eb !important;
}

html:not([data-theme="dark"]) .step-indicator.active {
    border-color: #dc2626 !important;
}

html:not([data-theme="dark"]) .step-indicator.completed {
    border-color: #22c55e !important;
}

/* ================================================
   DROPDOWN & AUTOCOMPLETE
   Soft shadows for floating elements
   ================================================ */

html:not([data-theme="dark"]) #street-suggestions {
    border-color: #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 
                0 4px 8px rgba(0, 0, 0, 0.04) !important;
}

html:not([data-theme="dark"]) .ui-autocomplete {
    border-color: #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 
                0 4px 8px rgba(0, 0, 0, 0.04) !important;
}

/* ================================================
   BUTTONS
   ================================================ */

html:not([data-theme="dark"]) .btn-period {
    border-color: #e5e7eb !important;
}

/* ================================================
   MODALS
   Modern floating appearance
   ================================================ */

html:not([data-theme="dark"]) #payment-modal > div,
html:not([data-theme="dark"]) #vehicle-confirm-modal > div,
html:not([data-theme="dark"]) #special-plate-modal > div,
html:not([data-theme="dark"]) #primarie-status-modal > div,
html:not([data-theme="dark"]) #unregistered-type-modal > div,
html:not([data-theme="dark"]) #select-owner-modal > div {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15), 
                0 12px 24px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e5e7eb !important;
}

html:not([data-theme="dark"]) #payment-modal .border-b,
html:not([data-theme="dark"]) #vehicle-confirm-modal .border-b,
html:not([data-theme="dark"]) #special-plate-modal .border-b,
html:not([data-theme="dark"]) #primarie-status-modal .border-b,
html:not([data-theme="dark"]) #unregistered-type-modal .border-b,
html:not([data-theme="dark"]) #select-owner-modal .border-b {
    border-color: #e5e7eb !important;
}

html:not([data-theme="dark"]) #payment-modal .border-t,
html:not([data-theme="dark"]) #vehicle-confirm-modal .border-t,
html:not([data-theme="dark"]) #special-plate-modal .border-t,
html:not([data-theme="dark"]) #primarie-status-modal .border-t,
html:not([data-theme="dark"]) #unregistered-type-modal .border-t,
html:not([data-theme="dark"]) #select-owner-modal .border-t {
    border-color: #e5e7eb !important;
}

/* ================================================
   FLATPICKR DATE PICKER
   ================================================ */

html:not([data-theme="dark"]) .flatpickr-calendar {
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15) !important;
}

/* ================================================
   TOAST NOTIFICATIONS
   ================================================ */

html:not([data-theme="dark"]) .toast,
html:not([data-theme="dark"]) .rca-toast > div {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* ================================================
   CHECKOUT SCREEN
   ================================================ */

html:not([data-theme="dark"]) #checkout-screen .bg-white {
    border-color: #e5e7eb !important;
}

html:not([data-theme="dark"]) #checkout-screen .border-gray-100,
html:not([data-theme="dark"]) #checkout-screen .border-gray-200 {
    border-color: #e5e7eb !important;
}