/* Sell Car Modal Styling */

/* Fix for dropdown icon in select elements */
.modal .form-select,
#listCarModal .form-select,
.sellcar-modal-form .form-select,
.sellcar-modal-container .form-select,
.elegant-form .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fd5631' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.25rem center !important;
    background-size: 10px 10px !important;
    padding-right: 1.5rem !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* ===== HYBRID DROPDOWN STYLING ===== */

/* Hybrid input container for make/model fields - MATCH OTHER FORM ELEMENTS */
.sellcar-modal-hybrid-dropdown-container,
.hybrid-dropdown-container {
    position: relative;
    width: 100%;
    z-index: 1000; /* Ensure it's above other elements */
    min-height: 3rem; /* Match other form elements height */
    display: flex;
    align-items: stretch; /* Ensure consistent height */
}

/* Override elegant form overflow for hybrid dropdowns */
.elegant-form .sellcar-modal-hybrid-dropdown-container,
.elegant-form .hybrid-dropdown-container {
    overflow: visible !important; /* Override the overflow: hidden from elegant-form */
}

/* Override form-group overflow specifically for hybrid dropdowns */
.elegant-form .form-group:has(.sellcar-modal-hybrid-dropdown-container),
.elegant-form .form-group:has(.hybrid-dropdown-container) {
    overflow: visible !important;
}

/* Fallback for browsers that don't support :has() */
.elegant-form .sellcar-modal-form-group-hybrid,
.elegant-form .form-group.hybrid-dropdown-group {
    overflow: visible !important;
    position: relative;
    z-index: 100;
    min-height: 3rem; /* Match other form groups */
    display: flex;
    align-items: stretch; /* Ensure consistent alignment */
}

/* Hybrid input field styling - COMPLETELY OVERRIDE ELEGANT FORM CONFLICTS */
.sellcar-modal-hybrid-input,
.hybrid-dropdown-container .hybrid-input,
.sellcar-modal-hybrid-dropdown-container .hybrid-input {
    width: 100% !important;
    padding: 1.2rem 2.5rem 0.4rem 0.75rem !important; /* EXTRA right padding for dropdown icon on RIGHT */
    background-color: transparent !important; /* Match elegant form transparent background */
    background-image: none !important; /* REMOVE any background image from elegant form */
    background-repeat: no-repeat !important;
    background-position: initial !important;
    background-size: initial !important;
    border: none !important; /* Remove border to match elegant form */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; /* Match elegant form border-bottom */
    border-radius: 0 !important; /* Remove border radius to match elegant form */
    color: #e1e1e1 !important;
    font-size: 0.95rem !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Match elegant form transition */
    position: relative !important;
    z-index: 1 !important;
    text-align: left !important; /* Text starts from left, not overlapping icon */
    height: auto !important;
    min-height: 3rem !important; /* Match elegant form height EXACTLY */
    outline: none !important;
    box-shadow: none !important; /* Remove any box shadow */
    appearance: none !important; /* Remove any browser default styling */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Placeholder styling to match elegant form */
.sellcar-modal-hybrid-input::placeholder,
.hybrid-dropdown-container .hybrid-input::placeholder,
.sellcar-modal-hybrid-dropdown-container .hybrid-input::placeholder {
    color: transparent !important; /* Hide placeholder since we use labels */
    opacity: 0 !important;
}

/* Disabled state styling */
.sellcar-modal-hybrid-input:disabled,
.hybrid-dropdown-container .hybrid-input:disabled,
.sellcar-modal-hybrid-dropdown-container .hybrid-input:disabled {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    cursor: not-allowed !important;
}

.sellcar-modal-hybrid-input:focus,
.hybrid-dropdown-container .hybrid-input:focus,
.sellcar-modal-hybrid-dropdown-container .hybrid-input:focus {
    outline: none !important;
    border-bottom: 2px solid #fd5631 !important; /* Match elegant form focus */
    background-color: transparent !important; /* Keep transparent */
    box-shadow: none !important; /* Remove box shadow */
    transform: translateY(-1px) !important; /* Match elegant form subtle lift */
}

.sellcar-modal-hybrid-input.has-value,
.hybrid-dropdown-container .hybrid-input.has-value,
.sellcar-modal-hybrid-dropdown-container .hybrid-input.has-value {
    background-color: transparent !important; /* Keep transparent */
    border-bottom: 2px solid #fd5631 !important; /* Match elegant form */
}

.sellcar-modal-hybrid-input.custom-value,
.hybrid-dropdown-container .hybrid-input.custom-value,
.sellcar-modal-hybrid-dropdown-container .hybrid-input.custom-value {
    border-bottom: 2px solid #28a745 !important; /* Green for custom */
    background-color: transparent !important; /* Keep transparent */
}

.sellcar-modal-hybrid-input.custom-value:focus,
.hybrid-dropdown-container .hybrid-input.custom-value:focus,
.sellcar-modal-hybrid-dropdown-container .hybrid-input.custom-value:focus {
    border-bottom: 2px solid #28a745 !important; /* Green for custom focus */
    background-color: transparent !important; /* Keep transparent */
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

/* Dropdown icon for hybrid inputs - FORCE RIGHT POSITION ALWAYS */
.elegant-form .sellcar-modal-hybrid-dropdown-container .hybrid-input-icon,
.elegant-form .hybrid-dropdown-container .hybrid-input-icon,
.sellcar-modal-hybrid-dropdown-container .hybrid-input-icon,
.hybrid-dropdown-container .hybrid-input-icon,
.sellcar-modal-hybrid-dropdown-container .hybrid-input.has-value ~ .hybrid-input-icon,
.hybrid-dropdown-container .hybrid-input.has-value ~ .hybrid-input-icon,
.sellcar-modal-hybrid-dropdown-container .hybrid-input.custom-value ~ .hybrid-input-icon,
.hybrid-dropdown-container .hybrid-input.custom-value ~ .hybrid-input-icon,
.sellcar-modal-hybrid-dropdown-container .hybrid-input:focus ~ .hybrid-input-icon,
.hybrid-dropdown-container .hybrid-input:focus ~ .hybrid-input-icon {
    position: absolute !important;
    right: 0.75rem !important; /* ALWAYS RIGHT SIDE */
    left: auto !important; /* Override any left positioning */
    top: 1.5rem !important; /* Match the vertical center of input text area */
    transform: none !important; /* No transform needed */
    color: #fd5631 !important; /* Match other dropdown icon color */
    font-size: 0.8rem !important; /* Match other dropdown icon size */
    pointer-events: none !important;
    z-index: 9999 !important; /* MAXIMUM z-index to be above everything */
    transition: all 0.3s ease !important;
    display: block !important; /* Ensure it's visible */
    background-image: none !important; /* Remove any background image */
    background-position: initial !important;
    background-size: initial !important;
    background-repeat: no-repeat !important;
}

.elegant-form .sellcar-modal-hybrid-dropdown-container .hybrid-input-icon.rotated,
.elegant-form .hybrid-dropdown-container .hybrid-input-icon.rotated,
.sellcar-modal-hybrid-dropdown-container .hybrid-input-icon.rotated,
.hybrid-dropdown-container .hybrid-input-icon.rotated {
    position: absolute !important;
    right: 0.75rem !important; /* STAY RIGHT EVEN WHEN ROTATED */
    left: auto !important; /* Override any left positioning */
    top: 1.5rem !important; /* Stay in same position */
    transform: rotate(180deg) !important; /* Just rotate, stay on RIGHT */
    color: #fd5631 !important; /* Keep same color when rotated */
}

/* Custom value indicator - RIGHT SIDE, BEFORE DROPDOWN ICON */
.sellcar-modal-hybrid-dropdown-container .custom-indicator,
.hybrid-dropdown-container .custom-indicator {
    position: absolute !important;
    right: 2rem !important; /* RIGHT SIDE, space for dropdown icon */
    top: 1.5rem !important; /* Match input text vertical center */
    transform: none !important; /* No transform needed */
    background-color: #28a745 !important;
    color: white !important;
    font-size: 0.65rem !important; /* Text size */
    padding: 0.2rem 0.5rem !important; /* Padding for text + icon */
    border-radius: 12px !important; /* Rounded rectangle for text */
    font-weight: 600 !important;
    z-index: 4 !important; /* Below dropdown icon but above input */
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
    height: auto !important; /* Auto height for text */
    width: auto !important; /* Auto width for text */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important; /* Prevent text wrapping */
}

.sellcar-modal-hybrid-dropdown-container .custom-indicator.show,
.hybrid-dropdown-container .custom-indicator.show {
    opacity: 1 !important;
}

/* Suggestions dropdown - POSITIONED BELOW ELEGANT FORM INPUT */
.sellcar-modal-suggestions-dropdown,
.hybrid-dropdown-container .suggestions-dropdown,
.sellcar-modal-hybrid-dropdown-container .suggestions-dropdown {
    position: absolute !important;
    top: calc(100% + 2px) !important; /* Position just below the border-bottom */
    left: 0 !important;
    right: 0 !important;
    background-color: #2a2d35 !important;
    border: 1px solid #3a3d45 !important;
    border-top: 1px solid #fd5631 !important; /* Connect to input border */
    border-radius: 0 0 8px 8px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    z-index: 9999 !important; /* Very high z-index to be above modal */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
}

.sellcar-modal-suggestions-dropdown.show,
.hybrid-dropdown-container .suggestions-dropdown.show,
.sellcar-modal-hybrid-dropdown-container .suggestions-dropdown.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Suggestion items - VERY SPECIFIC */
.sellcar-modal-suggestions-dropdown .suggestion-item,
.hybrid-dropdown-container .suggestions-dropdown .suggestion-item,
.sellcar-modal-hybrid-dropdown-container .suggestions-dropdown .suggestion-item {
    padding: 0.75rem !important;
    cursor: pointer !important;
    border-bottom: 1px solid #3a3d45 !important;
    color: #e1e1e1 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: transparent !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.sellcar-modal-suggestions-dropdown .suggestion-item:last-child,
.hybrid-dropdown-container .suggestions-dropdown .suggestion-item:last-child,
.sellcar-modal-hybrid-dropdown-container .suggestions-dropdown .suggestion-item:last-child {
    border-bottom: none !important;
}

.sellcar-modal-suggestions-dropdown .suggestion-item:hover,
.sellcar-modal-suggestions-dropdown .suggestion-item.highlighted,
.hybrid-dropdown-container .suggestions-dropdown .suggestion-item:hover,
.hybrid-dropdown-container .suggestions-dropdown .suggestion-item.highlighted,
.sellcar-modal-hybrid-dropdown-container .suggestions-dropdown .suggestion-item:hover,
.sellcar-modal-hybrid-dropdown-container .suggestions-dropdown .suggestion-item.highlighted {
    background-color: #fd5631 !important;
    color: white !important;
}

.suggestion-item .suggestion-text {
    flex: 1;
}

.suggestion-item .suggestion-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-weight: 600;
}

/* No results message */
.no-suggestions {
    padding: 1rem;
    text-align: center;
    color: #888;
    font-style: italic;
}

/* Custom input message */
.custom-input-message {
    padding: 0.75rem;
    background-color: #1e3a2e;
    border-bottom: 1px solid #28a745;
    color: #28a745;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-input-message i {
    color: #28a745;
}

/* Loading state */
.suggestions-loading {
    padding: 1rem;
    text-align: center;
    color: #fd5631;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.suggestions-loading .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #fd5631;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments for hybrid dropdowns */
@media (max-width: 768px) {
    .hybrid-input {
        padding: 0.65rem 2.2rem 0.65rem 0.65rem;
        font-size: 0.9rem;
    }

    .suggestions-dropdown {
        max-height: 150px;
    }

    .suggestion-item {
        padding: 0.6rem;
    }

    .custom-indicator {
        font-size: 0.65rem;
        padding: 0.1rem 0.3rem;
        right: 2.2rem;
    }
}

/* Label styling to match elegant form EXACTLY */
.elegant-form .sellcar-modal-hybrid-dropdown-container .form-label,
.elegant-form .hybrid-dropdown-container .form-label {
    position: absolute !important;
    top: 0.2rem !important; /* Match elegant form exact positioning */
    left: 0.25rem !important; /* Match elegant form exact positioning */
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important; /* Match elegant form exact color */
    font-size: 0.85rem !important; /* Match elegant form exact size */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Match elegant form exact transition */
    pointer-events: none !important;
    z-index: 2 !important;
    margin: 0 !important;
    font-weight: 400 !important;
    transform-origin: left center !important; /* Match elegant form transform origin */
}

/* Focused and has-value label states - MATCH ELEGANT FORM */
.elegant-form .sellcar-modal-hybrid-dropdown-container .hybrid-input:focus + .form-label,
.elegant-form .sellcar-modal-hybrid-dropdown-container .hybrid-input.has-value + .form-label,
.elegant-form .hybrid-dropdown-container .hybrid-input:focus + .form-label,
.elegant-form .hybrid-dropdown-container .hybrid-input.has-value + .form-label {
    top: -0.285rem !important; /* Match elegant form exact positioning */
    left: 0 !important;
    font-size: 0.75rem !important;
    color: #fd5631 !important;
    background-color: rgba(42, 40, 55, 0.95) !important; /* Match elegant form exact background */
    padding: 0 0.25rem !important;
    border-radius: 2px !important;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.5px !important;
    font-weight: 500 !important;
    transform: scale(1) !important; /* Match elegant form scale */
}

/* Custom value label color */
.elegant-form .sellcar-modal-hybrid-dropdown-container .hybrid-input.custom-value + .form-label,
.elegant-form .hybrid-dropdown-container .hybrid-input.custom-value + .form-label {
    color: #28a745 !important; /* Green for custom values */
}

/* Smooth transitions for all hybrid dropdown elements */
.hybrid-dropdown-container * {
    transition: all 0.3s ease;
}

/* Focus trap styling for accessibility */
.hybrid-dropdown-container:focus-within .suggestions-dropdown {
    border-color: #fd5631;
}

/* Keyboard navigation highlighting */
.suggestion-item.keyboard-highlighted {
    background-color: #fd5631;
    color: white;
    outline: 2px solid rgba(253, 86, 49, 0.5);
    outline-offset: -2px;
}

/* Custom scrollbar for suggestions dropdown */
.suggestions-dropdown::-webkit-scrollbar {
    width: 6px;
}

.suggestions-dropdown::-webkit-scrollbar-track {
    background: #1a1d21;
    border-radius: 3px;
}

.suggestions-dropdown::-webkit-scrollbar-thumb {
    background: #fd5631;
    border-radius: 3px;
}

.suggestions-dropdown::-webkit-scrollbar-thumb:hover {
    background: #e54a2e;
}

/* Enhanced form validation styling for hybrid inputs */
.hybrid-input.is-invalid {
    border-color: #dc3545;
    background-color: #3d1a1a;
}

.hybrid-input.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.hybrid-input.is-valid {
    border-color: #28a745;
    background-color: #1e3a2e;
}

.hybrid-input.is-valid:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Help text styling for hybrid inputs */
.hybrid-dropdown-container .form-text {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.25rem;
    transition: color 0.3s ease;
}

.hybrid-dropdown-container .hybrid-input:focus ~ .form-text {
    color: #fd5631;
}

.hybrid-dropdown-container .hybrid-input.custom-value ~ .form-text {
    color: #28a745;
}

/* ===== END HYBRID DROPDOWN STYLING ===== */
/* Enhanced Modal Backdrop */
.modal-backdrop {
    opacity: 0.75 !important; /* Slightly transparent dimming effect */
    background-color: #0a0814 !important; /* Darker color for better contrast */
    backdrop-filter: blur(3px); /* Add subtle blur effect for modern look */
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease; /* Smooth transition */
}

/* Add a subtle gradient overlay to the backdrop for depth */
.modal-backdrop.show::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(10, 8, 20, 0.6) 0%, rgba(10, 8, 20, 0.8) 100%);
    z-index: -1;
    pointer-events: none;
}

.modal-content {
    background-color: #1a1d21;
    color: #e1e1e1;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    z-index: 1056 !important; /* Ensure modal is above backdrop */
}

.modal-header {
    border-bottom: 1px solid #2a2d35;
    padding: 0.75rem 1.25rem; /* Reduced by 50% from 1.5rem */
    background: linear-gradient(to right, #1a1d21, #2a2d35);
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-body {
    padding: 1rem 1.5rem; /* Reduced from 2rem to save space */
    overflow: visible; /* Allow dropdowns to show outside modal body */
}

/* Ensure modal content allows overflow for dropdowns */
#listCarModal .modal-content {
    overflow: visible !important;
}

/* Ensure modal dialog allows overflow */
#listCarModal .modal-dialog {
    overflow: visible !important;
}

.modal-footer {
    border-top: 1px solid #2a2d35;
    padding: 0.75rem 1.25rem; /* Reduced by 50% from 1.5rem */
    overflow: hidden; /* Prevent content from spilling outside */
}

/* Elegant Progress Steps - Ultra Modern Design */
#listCarModal .step-indicators,
.modal-content .step-indicators,
.step-indicators {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.75rem 0 1.25rem; /* Reduced by 50% from 1.5rem 0 2.5rem */
    position: relative;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(26, 29, 33, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 70px; /* Reduced from 80px to save vertical space */
}

/* Override any ::before pseudo-elements from other styles */
#listCarModal .step-indicators::before,
.modal-content .step-indicators::before,
.step-indicators::before {
    display: none !important;
}

#listCarModal .progress-container,
.modal-content .progress-container,
.step-indicators .progress-container,
.progress-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

#listCarModal .progress-bar.sellcar-modal-progress-bar,
.modal-content .step-indicators .progress-bar.sellcar-modal-progress-bar,
.step-indicators .progress-bar.sellcar-modal-progress-bar,
.progress-bar.sellcar-modal-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* Will be updated by JS */
    background: linear-gradient(90deg,
        rgba(253, 86, 49, 0.1) 0%,
        rgba(253, 86, 49, 0.2) 50%,
        rgba(253, 86, 49, 0.1) 100%);
    transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 1;
    border-radius: 0; /* Override any border-radius from Bootstrap */
    box-shadow: none; /* Override any box-shadow from Bootstrap */
}

#listCarModal .progress-glow.sellcar-modal-progress-glow,
.modal-content .progress-glow.sellcar-modal-progress-glow,
.step-indicators .progress-glow.sellcar-modal-progress-glow,
.progress-glow.sellcar-modal-progress-glow {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 60px;
    background: linear-gradient(90deg,
        rgba(253, 86, 49, 0) 0%,
        rgba(253, 86, 49, 0.4) 50%,
        rgba(253, 86, 49, 0.1) 100%);
    filter: blur(8px);
    z-index: 2;
    opacity: 0.7;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

#listCarModal .step,
.modal-content .step,
.step-indicators .step,
.step {
    position: relative;
    z-index: 3;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 10px;
    transition: all 0.3s ease;
    background: transparent; /* Ensure no background color is applied */
}

#listCarModal .step-content,
.modal-content .step-content,
.step-indicators .step-content,
.step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

#listCarModal .step-number,
.modal-content .step-number,
.step-indicators .step-number,
.step-number {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 5px;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.5px;
}

#listCarModal .step-text,
.modal-content .step-text,
.step-indicators .step-text,
.step-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.5px;
}

#listCarModal .step.active .step-number,
.modal-content .step.active .step-number,
.step-indicators .step.active .step-number,
.step.active .step-number {
    color: #fd5631;
    text-shadow: 0 0 10px rgba(253, 86, 49, 0.5);
}

#listCarModal .step.active .step-text,
.modal-content .step.active .step-text,
.step-indicators .step.active .step-text,
.step.active .step-text {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

#listCarModal .step.active .step-content,
.modal-content .step.active .step-content,
.step-indicators .step.active .step-content,
.step.active .step-content {
    transform: translateY(-2px);
}

#listCarModal .step.completed .step-number,
.modal-content .step.completed .step-number,
.step-indicators .step.completed .step-number,
.step.completed .step-number {
    color: rgba(255, 255, 255, 0.8);
}

#listCarModal .step.completed .step-text,
.modal-content .step.completed .step-text,
.step-indicators .step.completed .step-text,
.step.completed .step-text {
    color: rgba(255, 255, 255, 0.7);
}

#listCarModal .step::after,
.modal-content .step::after,
.step-indicators .step::after,
.step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    height: 30px;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
}

#listCarModal .step:last-child::after,
.modal-content .step:last-child::after,
.step-indicators .step:last-child::after,
.step:last-child::after {
    display: none;
}

#listCarModal .step-indicator,
.modal-content .step-indicator,
.step-indicators .step-indicator,
.step-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    transition: all 0.3s ease;
    transform: scaleX(0);
    transform-origin: center;
}

#listCarModal .step.active .step-indicator,
.modal-content .step.active .step-indicator,
.step-indicators .step.active .step-indicator,
.step.active .step-indicator {
    background: #fd5631;
    transform: scaleX(0.8);
    box-shadow: 0 0 10px rgba(253, 86, 49, 0.5);
}

#listCarModal .step.completed .step-indicator,
.modal-content .step.completed .step-indicator,
.step-indicators .step.completed .step-indicator,
.step.completed .step-indicator {
    background: rgba(255, 255, 255, 0.5);
    transform: scaleX(0.8);
}

/* Subtle animation for active step */
@keyframes floatAnimation {
    0% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

#listCarModal .step.active .step-content,
.modal-content .step.active .step-content,
.step-indicators .step.active .step-content,
.step.active .step-content {
    animation: floatAnimation 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0% { opacity: 0.5; }
    50% { opacity: 0.8; }
    100% { opacity: 0.5; }
}

#listCarModal .progress-glow.sellcar-modal-progress-glow,
.modal-content .progress-glow.sellcar-modal-progress-glow,
.step-indicators .progress-glow.sellcar-modal-progress-glow,
.progress-glow.sellcar-modal-progress-glow {
    animation: glowPulse 2s infinite ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    #listCarModal .step-indicators,
    .modal-content .step-indicators,
    .step-indicators,
    .step-indicators {
        height: 60px; /* Reduced from 70px */
        margin: 0.5rem 0 1rem; /* Reduced by 50% from 1rem 0 2rem */
    }

    #listCarModal .step-number,
    .modal-content .step-number,
    .step-indicators .step-number,
    .step-number {
        font-size: 0.9rem; /* Slightly smaller */
    }

    #listCarModal .step-text,
    .modal-content .step-text,
    .step-indicators .step-text,
    .step-text {
        font-size: 0.65rem; /* Slightly smaller */
    }
}

/* Form styling */
#listCarForm {
    width: 100%;
    position: relative;
    overflow: hidden; /* Prevent content from spilling outside */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Ensure the modal content doesn't get cropped on any page */
#listCarModal .modal-content {
    overflow: hidden; /* Prevent content from spilling outside */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
}

#listCarForm ::placeholder {
    color: rgba(255, 255, 255, 0.6); /* White with 60% opacity */
    opacity: 1; /* Ensures Bootstrap doesn't override it */
}

.text-muted {
    color: rgba(107, 44, 44, 0.7) !important; /* White with slight fade */
}

/* Form Controls */
.form-select, .form-control {
    background-color: #2a2d35;
    border: 1px solid #3a3f48;
    color: #e1e1e1;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    transition: all 0.2s ease;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e1e1e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    padding-right: 2.5rem;
}

.form-select:disabled {
    background-color: #1a1d21;
    border-color: #2a2d35;
    color: #6c757d;
    cursor: not-allowed;
}

.form-control:focus, .form-select:focus {
    background-color: #2a2d35;
    border-color: #3a7bd5;
    box-shadow: 0 0 0 0.25rem rgba(58, 123, 213, 0.15);
    color: #e1e1e1;
}

/* Elegant Form Styling */
.elegant-form .form-control {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    padding: 0.25rem 0.25rem 0.18rem;
    color: #fff;
    transition: all 0.3s ease;
    box-shadow: none;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    height: 2.2rem;
    text-align: center;
}

.elegant-form .form-select {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    padding: 0.25rem 0.25rem 0.18rem;
    color: #fff;
    transition: all 0.3s ease;
    box-shadow: none;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    height: 2.2rem;
    text-align: center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fd5631' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    background-size: 10px 10px;
    padding-right: 1.5rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.elegant-form .form-control:focus,
.elegant-form .form-select:focus {
    background: transparent;
    border-bottom: 1px solid #fd5631;
    box-shadow: 0 1px 0 0 #fd5631;
    outline: none;
}

.elegant-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem; /* Match the select font size */
    letter-spacing: 0.2px;
    text-align: right;
    padding-right: 30px; /* Adjusted from 0.5rem to 30px to pull back from the right edge */
    font-style: italic;
}

.elegant-form .form-control:focus::placeholder {
    color: rgba(255, 255, 255, 0.4);
    opacity: 0.8;
    transform: translateY(2px); /* Slightly push down placeholder when focused */
}

.elegant-form .form-group {
    position: relative;
    overflow: hidden;
    margin-bottom: 0.26rem;
    padding-top: 0.09rem;
}

.elegant-form .form-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 400;
    position: absolute;
    top: 0.2rem; /* Slightly adjusted to ensure proper alignment */
    left: 0.25rem;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    margin: 0;
}

.elegant-form .form-control:focus ~ .form-label,
.elegant-form .form-select:focus ~ .form-label {
    animation: labelPulse 0.3s ease-in-out;
}

@keyframes labelPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.elegant-form .form-control:focus ~ .form-label,
.elegant-form .form-select:focus ~ .form-label,
.elegant-form .form-control:not(:placeholder-shown) ~ .form-label,
.elegant-form .form-select.has-value ~ .form-label,
.elegant-form .form-select:valid ~ .form-label,
.elegant-form .form-select[value]:not([value=""]) ~ .form-label {
    top: -0.285rem; /* Further reduced by 5% from -0.3rem */
    left: 0;
    font-size: 0.75rem;
    color: #fd5631;
    background-color: rgba(42, 40, 55, 0.95);
    padding: 0 0.25rem;
    z-index: 1;
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.elegant-form .input-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
}

.elegant-form .input-group .form-control {
    border-bottom: none;
}

.elegant-form .input-group-text,
#step4 .input-group-text {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding-left: 0;
}

.elegant-form .input-group:focus-within,
#step4 .input-group:focus-within {
    border-bottom: 1px solid #fd5631;
    box-shadow: 0 1px 0 0 #fd5631;
}

/* Ensure consistent styling for form controls in Step 4 */
#step4 .form-control {
    text-align: right;
    padding-right: 20px;
}

/* Style for form controls in Step 4 */
#step4 .form-control,
#step4 .form-select {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    padding: 0.25rem 0.25rem 0.18rem;
    color: #fff;
    transition: all 0.3s ease;
    box-shadow: none;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    height: 2.2rem;
    text-align: right;
    padding-right: 20px;
}

#step4 .form-control:focus,
#step4 .form-select:focus {
    border-bottom: 1px solid #fd5631;
    box-shadow: 0 1px 0 0 #fd5631;
    outline: none;
}

/* Style for select elements in Step 4 */
#step4 .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fd5631' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.25rem center !important;
    background-size: 10px 10px !important;
    padding-right: 35px !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    text-align-last: right;
    direction: rtl;
}

.elegant-form .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fd5631' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.25rem center !important;
    background-size: 10px 10px !important;
    padding-right: 1.5rem !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Specific styling for Step 2 select elements */
#step2 .form-select {
    background-position: right 0.25rem center !important;
    text-align-last: right;
}

/* Compact styling for repair checkboxes */
#step2 .repair-checkbox {
    margin-right: 5px;
}

#step2 .col-md-2 {
    padding-left: 5px;
    padding-right: 5px;
}

/* Center the logbook checkbox */
#step2 .text-center .form-check {
    margin-top: 6px; /* 40% reduction from 10px */
}

/* Reduce gap between rows in Step 2 by 40% */
#step2 .row.mb-4 {
    margin-bottom: 1.5rem !important; /* 40% reduction from 2.5rem */
}

#step2 .row.mb-3 {
    margin-bottom: 0.75rem !important; /* 40% reduction from 1.25rem */
}

#step2 .form-group.mb-3 {
    margin-bottom: 0.75rem !important; /* 40% reduction from 1.25rem */
}

/* Reduce spacing between section title and first row */
#step2 .section-title.mb-4,
#step1 .section-title.mb-4,
#step3 .section-title.mb-4,
#step4 .section-title.mb-4 {
    margin-bottom: 0.8rem !important; /* Further reduced from 1.2rem */
}

/* Reduce spacing for the Recent Repairs section heading */
#step2 h6.mb-3.mt-4 {
    margin-top: 0.8rem !important; /* Further reduced from 1.2rem */
    margin-bottom: 0.4rem !important; /* Further reduced from 0.6rem */
}

/* Step 3 styling */
#step3 h6 {
    color: #fd5631;
    font-size: 0.95rem;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

#step3 h6 i {
    margin-right: 0.5rem;
    color: #fd5631;
}

/* Reduce gap between rows in Step 3 by 40% */
#step3 .row.mb-4 {
    margin-bottom: 1.5rem !important; /* 40% reduction from 2.5rem */
}

/* Specific padding reduction for Step 3 container */
#step3 .elegant-form-container {
    padding-top: 0.21rem; /* 40% reduction from 0.35rem */
    padding-bottom: 0.21rem; /* 40% reduction from 0.35rem */
}

/* Reduce spacing between section title and first row in Step 3 */
#step3 .section-title.mb-4 {
    margin-bottom: 1.2rem !important; /* 40% reduction from 2rem */
}

/* Step 4 styling */
#step4 h6 {
    color: #fd5631;
    font-size: 0.95rem;
    margin-top: 0.3rem;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
}

#step4 h6 i {
    margin-right: 0.5rem;
    color: #fd5631;
}

/* Reduce gap between rows in Step 4 by 70% */
#step4 .row.mb-4 {
    margin-bottom: 0.75rem !important; /* 70% reduction from 2.5rem */
}

/* Specific padding reduction for Step 4 container */
#step4 .elegant-form-container {
    padding-top: 0.21rem; /* 40% reduction from 0.35rem */
    padding-bottom: 0.21rem; /* 40% reduction from 0.35rem */
}

/* Reduce spacing between section title and first row in Step 4 */
#step4 .section-title.mb-4 {
    margin-bottom: 0.8rem !important; /* 60% reduction from 2rem */
}

/* Style for form-group in Step 4 */
#step4 .form-group {
    position: relative;
    overflow: hidden;
    margin-bottom: 0.75rem !important;
    padding-top: 0.09rem;
}

/* Style for form-label in Step 4 */
#step4 .form-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 400;
    position: absolute;
    top: 0.2rem;
    left: 0.25rem;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    margin: 0;
}

/* Style for focused form-label in Step 4 */
#step4 .form-control:focus ~ .form-label,
#step4 .form-select:focus ~ .form-label {
    top: -0.285rem;
    left: 0;
    font-size: 0.75rem;
    color: #fd5631;
    background-color: rgba(42, 40, 55, 0.95);
    padding: 0 0.25rem;
    z-index: 1;
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: labelPulse 0.3s ease-in-out;
}

/* Style for form elements with content in Step 4 */
#step4 .form-control.has-value ~ .form-label,
#step4 .form-select.has-value ~ .form-label {
    top: -0.285rem;
    left: 0;
    font-size: 0.75rem;
    color: #fd5631;
    background-color: rgba(42, 40, 55, 0.95);
    padding: 0 0.25rem;
    z-index: 1;
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Fix for Car Location and Email labels */
#step4 #car-location ~ .form-label,
#step4 #contact-email ~ .form-label,
#step4 #contact-phone ~ .form-label {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.7);
    top: 0.2rem;
    left: 0.25rem;
    font-size: 0.85rem;
    font-weight: 400;
    padding: 0;
    border-radius: 0;
    letter-spacing: normal;
}

/* When focused or has value */
#step4 #car-location:focus ~ .form-label,
#step4 #car-location.has-value ~ .form-label,
#step4 #contact-email:focus ~ .form-label,
#step4 #contact-email.has-value ~ .form-label,
#step4 #contact-phone:focus ~ .form-label,
#step4 #contact-phone.has-value ~ .form-label {
    top: -0.285rem;
    left: 0;
    font-size: 0.75rem;
    color: #fd5631;
    background-color: rgba(42, 40, 55, 0.95);
    padding: 0 0.25rem;
    z-index: 1;
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Add animation for focused labels */
#step4 #car-location:focus ~ .form-label,
#step4 #contact-email:focus ~ .form-label,
#step4 #contact-phone:focus ~ .form-label {
    animation: labelPulse 0.3s ease-in-out;
}

/* Styling for form-text in Step 4 */
#step4 .form-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

/* Phone label styling removed - using standard label styling */

/* Ensure consistent styling for form labels in Step 4 */
#step4 .form-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 400;
    position: absolute;
    top: 0.2rem;
    left: 0.25rem;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    margin: 0;
}

/* Adjust elements in 4-column layout */
.elegant-form .col-md-3 .form-select,
.elegant-form .col-md-3 .form-control {
    font-size: 0.85rem;
    background-position: right 0.15rem center !important;
}

/* Adjust dropdown arrow position for 4-column row */
.elegant-form .four-col-select {
    background-position: left 0.1rem center !important;
    background-size: 8px 8px !important; /* Slightly smaller dropdown arrow */
    padding-left: 15px !important; /* Add padding on the left for the dropdown arrow */
}

/* Adjust labels in 4-column layout */
.elegant-form .col-md-3 .form-label {
    font-size: 0.8rem;
}

/* Adjust focused labels in 4-column layout */
.elegant-form .col-md-3 .form-control:focus ~ .form-label,
.elegant-form .col-md-3 .form-select:focus ~ .form-label,
.elegant-form .col-md-3 .form-control:not(:placeholder-shown) ~ .form-label,
.elegant-form .col-md-3 .form-select.has-value ~ .form-label,
.elegant-form .col-md-3 .form-select:valid ~ .form-label,
.elegant-form .col-md-3 .form-select[value]:not([value=""]) ~ .form-label {
    font-size: 0.7rem;
}

.elegant-form .form-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fd5631' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 11l6 -6 6 6'/%3e%3c/svg%3e") !important;
}

.elegant-form .form-select option {
    background-color: #2a2837;
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.elegant-form .form-select option:hover,
.elegant-form .form-select option:focus {
    background-color: rgba(253, 86, 49, 0.2);
}

/* Reduce font size and opacity for the default "Select" option */
.elegant-form .form-select option:first-child {
    font-size: 0.72rem; /* 20% smaller than the 0.9rem */
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.7);
}

/* Fix for dropdown behavior */
.elegant-form .form-select::-ms-expand {
    display: none;
}

.elegant-form .form-select option {
    background-color: #2a2837 !important;
}

/* Prevent browser default styling from overriding our custom styles */
.elegant-form select:focus::-ms-value {
    background-color: transparent;
    color: #fff;
}

/* Ensure dropdown doesn't get duplicated or behave strangely */
.elegant-form .form-select {
    text-align-last: center;
    background-color: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    /* Ensure background-image is preserved */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fd5631' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.25rem center !important;
    background-size: 10px 10px !important;
}

/* Override text-align-last for 4-column row */
.elegant-form .col-md-3 .form-select {
    text-align-last: right !important;
}

/* Style for select elements with no selection */
.elegant-form .form-select:not(.has-value) {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.76rem !important; /* 20% smaller than the default */
}

/* Right-align the "Select" text in the 4-column row */
.elegant-form .four-col-select:not(.has-value) {
    text-align: right !important;
    padding-right: 30px !important; /* Doubled the space for the dropdown arrow (from 15px to 30px) */
    letter-spacing: -0.2px; /* Slightly tighten letter spacing to save space */
    text-align-last: right !important; /* Force right alignment for select elements */
    direction: rtl; /* Force right alignment */
}

/* Reset direction for selected values */
.elegant-form .four-col-select.has-value {
    direction: ltr;
    text-align: center !important;
    text-align-last: center !important;
}

.elegant-form .form-select:focus {
    border-bottom: 1px solid #fd5631 !important;
    box-shadow: 0 1px 0 0 #fd5631 !important;
}

/* Fix for dropdown icon duplication */
.elegant-form .form-select::-webkit-list-button,
.elegant-form .form-select::-webkit-calendar-picker-indicator,
.elegant-form .form-select::-webkit-inner-spin-button,
.elegant-form .form-select::-webkit-outer-spin-button,
.elegant-form .form-select::-webkit-search-cancel-button,
.elegant-form .form-select::-webkit-search-decoration,
.elegant-form .form-select::-webkit-search-results-button,
.elegant-form .form-select::-webkit-search-results-decoration {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
}

/* Custom Select Styling */
.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #e1e1e1;
    pointer-events: none;
}

/* Elegant Navigation Buttons - Minimal Design */
.elegant-nav-buttons .btn-primary,
.elegant-nav-buttons .btn-success,
.elegant-nav-buttons .btn-secondary {
    position: relative !important;
    overflow: visible !important; /* Changed from hidden to visible to show the border animation */
    background: transparent !important;
    border: none !important;
    padding: 0.3rem 0.8rem !important;
    font-weight: 400 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.3px !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
    z-index: 1 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.elegant-nav-buttons .btn-primary,
.elegant-nav-buttons .btn-success {
    color: #fd5631 !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

.elegant-nav-buttons .btn-secondary {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

.elegant-nav-buttons .btn-primary:hover,
.elegant-nav-buttons .btn-success:hover {
    color: #fd7e31 !important;
    background: transparent !important;
    transform: translateY(-1px) !important;
}

.elegant-nav-buttons .btn-secondary:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
    transform: translateY(-1px) !important;
}

.elegant-nav-buttons .btn-primary:active,
.elegant-nav-buttons .btn-success:active,
.elegant-nav-buttons .btn-secondary:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* Button divider line with left-to-right fill animation */
.elegant-nav-buttons .btn-primary::after,
.elegant-nav-buttons .btn-success::after,
.elegant-nav-buttons .btn-secondary::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    transition: all 0.3s ease !important;
}

.elegant-nav-buttons .btn-primary::after,
.elegant-nav-buttons .btn-success::after {
    background: rgba(253, 86, 49, 0.2) !important;
}

.elegant-nav-buttons .btn-secondary::after {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Direction-based fill effects */
.elegant-nav-buttons .btn-primary::before,
.elegant-nav-buttons .btn-success::before {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 0 !important;
    height: 1px !important;
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    z-index: 1 !important;
    transform-origin: left !important; /* Left-to-right for Continue/Submit */
}

/* Right-to-left fill effect for Back button */
.elegant-nav-buttons .btn-secondary::before {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    right: 0 !important; /* Changed from left to right */
    left: auto !important; /* Reset left */
    width: 0 !important;
    height: 1px !important;
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    z-index: 1 !important;
    transform-origin: right !important; /* Right-to-left for Back */
}

.elegant-nav-buttons .btn-primary::before,
.elegant-nav-buttons .btn-success::before {
    background: #fd5631 !important;
}

.elegant-nav-buttons .btn-secondary::before {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Shimmer effects */
@keyframes shimmerLTR {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes shimmerRTL {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* Base shimmer styles */
.elegant-nav-buttons .shimmer {
    position: absolute !important;
    bottom: -2px !important;
    width: 100% !important;
    height: 2px !important; /* Increased from 1px to 2px for better visibility */
    background-size: 200% 100% !important;
    z-index: 3 !important; /* Increased z-index to ensure it's visible */
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    pointer-events: none !important; /* Ensure it doesn't interfere with button clicks */
}

/* Left-to-right shimmer for Continue/Submit buttons */
.elegant-nav-buttons .btn-primary .shimmer,
.elegant-nav-buttons .btn-success .shimmer {
    left: 0 !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 50%,
        transparent 100%) !important;
}

/* Right-to-left shimmer for Back button */
.elegant-nav-buttons .btn-secondary .shimmer {
    right: 0 !important;
    background: linear-gradient(-90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 50%,
        transparent 100%) !important;
}

.elegant-nav-buttons .btn-primary:hover::before,
.elegant-nav-buttons .btn-success:hover::before,
.elegant-nav-buttons .btn-secondary:hover::before {
    width: 100% !important;
}

/* Shimmer animations on hover */
.elegant-nav-buttons .btn-primary:hover .shimmer,
.elegant-nav-buttons .btn-success:hover .shimmer {
    opacity: 1 !important;
    animation: shimmerLTR 1.2s infinite !important; /* Left-to-right animation */
}

.elegant-nav-buttons .btn-secondary:hover .shimmer {
    opacity: 1 !important;
    animation: shimmerRTL 1.2s infinite !important; /* Right-to-left animation */
}

/* Smaller buttons for form navigation */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Elegant navigation button container */
.elegant-nav-buttons {
    position: relative;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    margin-bottom: 0.5rem; /* Add space at the bottom */
}

.elegant-nav-buttons::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(253, 86, 49, 0.2), transparent);
}

.nav-btn-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    padding: 0 0.5rem; /* Add padding to keep buttons inside */
}

.nav-btn-left, .nav-btn-right {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-btn-right {
    margin-left: auto; /* Push to the right */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Skip button styling - matching Continue button exactly but with blue colors */
#skipBtn {
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important; /* No borders like Continue button */
    padding: 0.3rem 0.8rem !important;
    font-weight: 400 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.3px !important;
    border-radius: 0 !important; /* No border radius like Continue button */
    transition: all 0.2s ease !important;
    z-index: 1 !important;
    box-shadow: none !important;
    color: #007bff !important; /* Blue color instead of orange */
    transition: color 0.3s ease, transform 0.3s ease !important;
}

#skipBtn:hover {
    color: #0056b3 !important; /* Darker blue on hover */
    background: transparent !important;
    transform: translateY(-1px) !important;
}

#skipBtn:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* Skip button bottom border line */
#skipBtn::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: rgba(0, 123, 255, 0.2) !important; /* Blue background */
    transition: all 0.3s ease !important;
}

/* Skip button fill effect */
#skipBtn::before {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 0 !important;
    height: 1px !important;
    background: #007bff !important; /* Blue fill */
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    z-index: 1 !important;
    transform-origin: left !important; /* Left-to-right for Skip */
}

#skipBtn:hover::before {
    width: 100% !important;
}

/* Skip button shimmer effect - matching Continue button */
#skipBtn .shimmer {
    position: absolute !important;
    bottom: -2px !important; /* Position at bottom border */
    left: 0 !important;
    width: 100% !important;
    height: 2px !important; /* Only 2px height for bottom border */
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 50%,
        transparent 100%) !important;
    background-size: 200% 100% !important;
    z-index: 3 !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    pointer-events: none !important;
}

#skipBtn:hover .shimmer {
    opacity: 1 !important;
    animation: shimmerLTR 1.2s infinite !important; /* Left-to-right animation */
}

/* Navigation button divider - elegant styling */
.nav-btn-divider {
    width: 1px;
    height: 28px;
    background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0.01),
                rgba(255, 255, 255, 0.3),
                rgba(255, 255, 255, 0.01));
    margin: 0 0.5rem;
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

.nav-btn-container button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.25rem; /* Add margin to prevent edge touching */
}

.nav-btn-container button i {
    font-size: 1rem;
}

/* Form Groups */
.form-group {
    margin-bottom: 1.5rem;
}

/* Elegant Form Layout */
/* Row styling for the modal to prevent cropping on left and right sides */
#listCarModal .row,
.modal-content .row,
.elegant-form .row {
    margin-bottom: 0.15rem; /* Reduced from 0.26rem */
    position: relative;
    margin-right: 0 !important; /* Override any inherited styles */
    margin-left: 0 !important; /* Override any inherited styles */
    padding-left: 0.5rem !important; /* Add padding to prevent cropping */
    padding-right: 0.5rem !important; /* Add padding to prevent cropping */
    width: 100% !important; /* Ensure full width */
    box-sizing: border-box !important; /* Ensure padding is included in width */
}

.elegant-form .row:last-child {
    margin-bottom: 0;
}

/* Specific styling for the last row in Step 1 (4-column row) */
#step1 .row:nth-child(3) {
    margin-top: 10px;
}

.elegant-form [class^="col-"] {
    padding-left: 0.26rem;
    padding-right: 0.26rem;
}

.elegant-form .form-control:hover,
.elegant-form .form-select:hover {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.elegant-form .section-title {
    color: #fd5631;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.44rem;
    position: relative;
    display: inline-block;
    letter-spacing: 0.5px;
}

.elegant-form .section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #fd5631, transparent 80%);
}

.elegant-form .section-title i {
    margin-right: 0.5rem;
    opacity: 0.9;
}

.elegant-form-container {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    padding: 0.35rem 0.5rem; /* Added horizontal padding */
    margin-bottom: 0.26rem;
    position: relative;
    overflow: hidden;
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Specific padding reduction for Step 2 container */
#step2 .elegant-form-container {
    padding-top: 0.21rem; /* 40% reduction from 0.35rem */
    padding-bottom: 0.21rem; /* 40% reduction from 0.35rem */
}

.elegant-form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #fd5631, transparent);
    opacity: 0.5;
}

/* Validation Feedback */
.invalid-feedback {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.form-control.is-invalid, .form-select.is-invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5rem;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-step {
    display: none;
    animation: fadeIn 0.3s ease;
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
    overflow: hidden; /* Prevent content from spilling outside */
}

.form-step.active {
    display: block;
}

/* Ensure all form steps have proper padding and don't get cropped */
#listCarModal .form-step {
    padding: 0 !important; /* Reset padding */
}

/* Save Indicator */
.save-indicator {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: linear-gradient(45deg, #3a7bd5, #00d2ff);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1050;
}

.save-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

/* Image Upload with Drag & Drop */
.drag-drop-zone {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 1rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
    min-height: 120px;
}

.drag-drop-zone:hover, .drag-drop-zone.dragover {
    border-color: #fd5631;
    background-color: rgba(253, 86, 49, 0.05);
}

.drag-drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.drag-icon {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.25rem;
}

.drag-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.15rem;
}

.drag-subtext {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

.browse-btn {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.browse-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Image Preview */
#image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
}

.image-preview-item {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 6px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    user-select: none;
}

/* Drag and drop styles for image reordering */
.image-preview-item[draggable="true"] {
    cursor: grab;
}

.image-preview-item[draggable="true"]:active {
    cursor: grabbing;
}

.image-preview-item.drag-over-left {
    border-left: 3px solid #fd5631;
    transform: translateX(2px);
    box-shadow: -3px 0 8px rgba(253, 86, 49, 0.3);
}

.image-preview-item.drag-over-right {
    border-right: 3px solid #fd5631;
    transform: translateX(-2px);
    box-shadow: 3px 0 8px rgba(253, 86, 49, 0.3);
}

.image-preview-item .drag-handle {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.image-preview-item:hover .drag-handle {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Enhanced visual feedback during drag */
.image-preview-item[style*="opacity: 0.5"] {
    transform: scale(0.95) rotate(2deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

/* Smooth transitions for reordering */
.image-preview-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
}

/* Style for image preview in step 1 */
#step1 #image-preview {
    background-color: rgba(0, 0, 0, 0.03);
    padding: 10px;
    border-radius: 8px;
    min-height: 120px;
    border: 1px dashed rgba(0, 0, 0, 0.1);
}

/* Additional styling for step 2 */
#step2 h6 {
    color: #fd5631;
    font-size: 0.95rem;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

#step2 h6 i {
    margin-right: 0.5rem;
    color: #fd5631;
}

/* Style for date input in elegant form */
.elegant-form input[type="date"] {
    text-align: center;
    min-height: 2.2rem;
    position: relative;
    color: transparent;
}

/* Ensure date and number inputs have proper focus styling */
.elegant-form input[type="date"]:focus,
.elegant-form input[type="number"]:focus {
    border-bottom: 1px solid #fd5631;
    box-shadow: 0 1px 0 0 #fd5631;
}

/* Hide the default date placeholder text */
.elegant-form input[type="date"]::-webkit-datetime-edit-text,
.elegant-form input[type="date"]::-webkit-datetime-edit-month-field,
.elegant-form input[type="date"]::-webkit-datetime-edit-day-field,
.elegant-form input[type="date"]::-webkit-datetime-edit-year-field {
    color: transparent;
}

/* Show the date text when a date is selected or input is focused */
.elegant-form input[type="date"]:focus,
.elegant-form input[type="date"].has-value {
    color: #fff;
}

/* Show the date parts when input is focused */
.elegant-form input[type="date"]:focus::-webkit-datetime-edit-text,
.elegant-form input[type="date"]:focus::-webkit-datetime-edit-month-field,
.elegant-form input[type="date"]:focus::-webkit-datetime-edit-day-field,
.elegant-form input[type="date"]:focus::-webkit-datetime-edit-year-field,
.elegant-form input[type="date"].has-value::-webkit-datetime-edit-text,
.elegant-form input[type="date"].has-value::-webkit-datetime-edit-month-field,
.elegant-form input[type="date"].has-value::-webkit-datetime-edit-day-field,
.elegant-form input[type="date"].has-value::-webkit-datetime-edit-year-field {
    color: #fff;
}

/* Specific styling for Step 2 date inputs */
#step2 input[type="date"]::-webkit-datetime-edit {
    text-align: right;
    padding-right: 15px;
}

/* Ensure date and number inputs have their labels positioned correctly when empty */
.elegant-form input[type="date"]:not(.has-value) ~ .form-label,
.elegant-form input[type="number"]:not(.has-value) ~ .form-label {
    top: 0.2rem;
    left: 0.25rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
    padding: 0;
    z-index: 1;
    border-radius: 0;
    letter-spacing: normal;
    font-weight: 400;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Ensure date and number inputs have proper focus behavior */
.elegant-form input[type="date"]:focus ~ .form-label,
.elegant-form input[type="number"]:focus ~ .form-label,
.elegant-form input[type="date"].has-value ~ .form-label,
.elegant-form input[type="number"].has-value ~ .form-label {
    top: -0.285rem;
    left: 0;
    font-size: 0.75rem;
    color: #fd5631;
    background-color: rgba(42, 40, 55, 0.95);
    padding: 0 0.25rem;
    z-index: 1;
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Add animation for date and number inputs when focused */
.elegant-form input[type="date"]:focus ~ .form-label,
.elegant-form input[type="number"]:focus ~ .form-label {
    animation: labelPulse 0.3s ease-in-out;
}

/* Style for textarea in elegant form to match other inputs */
.elegant-form textarea.form-control,
#step3 textarea.form-control {
    min-height: 2.2rem;
    height: calc(1.5em + 0.5rem);
    resize: vertical;
    overflow: hidden;
    transition: height 0.2s ease;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    padding: 0.25rem 0.25rem 0.18rem;
    color: #fff;
    box-shadow: none;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}

/* Style for textarea in Step 3 */
#step3 textarea.form-control {
    text-align: right;
    padding-right: 20px;
}

/* Style for form-group in Step 3 */
#step3 .form-group {
    position: relative;
    overflow: hidden;
    margin-bottom: 0.75rem !important;
    padding-top: 0.09rem;
}

/* Style for form-label in Step 3 */
#step3 .form-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 400;
    position: absolute;
    top: 0.2rem;
    left: 0.25rem;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    margin: 0;
}

/* Style for focused form-label in Step 3 */
#step3 textarea.form-control:focus ~ .form-label {
    top: -0.285rem;
    left: 0;
    font-size: 0.75rem;
    color: #fd5631;
    background-color: rgba(42, 40, 55, 0.95);
    padding: 0 0.25rem;
    z-index: 1;
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: labelPulse 0.3s ease-in-out;
}

/* Style for textarea with content in Step 3 */
#step3 textarea.form-control.has-value ~ .form-label {
    top: -0.285rem;
    left: 0;
    font-size: 0.75rem;
    color: #fd5631;
    background-color: rgba(42, 40, 55, 0.95);
    padding: 0 0.25rem;
    z-index: 1;
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Focus state for textareas in Step 3 */
#step3 textarea.form-control:focus {
    border-bottom: 1px solid #fd5631;
    box-shadow: 0 1px 0 0 #fd5631;
    outline: none;
}

/* Specific styling for accident-details textarea to align with select */
.elegant-form #accident-details {
    height: 2.2rem;
    padding-top: 0.65rem;
    padding-bottom: 0.25rem;
    line-height: 1;
    text-align: right;
    padding-right: 20px;
}

/* Ensure consistent vertical alignment for all form elements */
.elegant-form .form-select {
    padding-top: 0.65rem;
    padding-bottom: 0.25rem;
}

/* Right-align text in Step 2 inputs and selects */
#step2 .form-select,
#step2 input[type="date"],
#step2 input[type="number"] {
    text-align: right;
    padding-right: 20px;
}

/* Ensure the dropdown arrow remains visible */
#step2 .form-select {
    padding-right: 35px;
    direction: rtl;
}

/* Ensure the options in the dropdown are properly aligned */
#step2 .form-select option {
    direction: ltr;
    text-align: right;
}

/* Ensure textarea label is properly positioned when empty */
.elegant-form textarea.form-control:not(.has-value) ~ .form-label {
    top: 0.2rem;
    left: 0.25rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
    padding: 0;
    z-index: 1;
    border-radius: 0;
    letter-spacing: normal;
    font-weight: 400;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Restore animations and styling for focused textarea labels */
.elegant-form textarea.form-control:focus ~ .form-label {
    top: -0.285rem;
    left: 0;
    font-size: 0.75rem;
    color: #fd5631;
    background-color: rgba(42, 40, 55, 0.95);
    padding: 0 0.25rem;
    z-index: 1;
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: labelPulse 0.3s ease-in-out;
}

/* Custom styling for image thumbnails */
.custom-thumbnail {
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease-in-out !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    image-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.image-preview-item:hover .custom-thumbnail {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Removed duplicate .preview-image-container styles */

/* Removed duplicate .preview-image styles */

.remove-image {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #dc3545;
    transition: all 0.2s ease;
}

.remove-image:hover {
    background: #dc3545;
    color: #fff;
}

/* Image Upload */
.image-upload-container {
    background-color: #2a2d35;
    border: 2px dashed #3a3f48;
    border-radius: 6px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-upload-container:hover {
    border-color: #3a7bd5;
}

.image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Removed duplicate .preview-image-container styles */

/* Removed duplicate .preview-image styles */

.remove-image {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: rgba(26, 29, 33, 0.8);
    color: #e1e1e1;
    border: none;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-image:hover {
    background-color: #dc3545;
    color: #fff;
}

/* Checkboxes and Radio Buttons */
.form-check {
    margin-bottom: 0.5rem;
}

.form-check-input {
    border-color: #adb5bd;
}

.form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

/* Elegant Form Checkboxes */
.elegant-form .form-check {
    padding-left: 1.8rem;
    margin-bottom: 0.5rem;
}

.elegant-form .form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    margin-left: -1.8rem;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
}

.elegant-form .form-check-input:checked {
    background-color: #fd5631;
    border-color: #fd5631;
}

.elegant-form .form-check-label {
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 0.9rem;
}

/* Specific styling for step 2 checkboxes */
#step2 .form-check {
    margin-bottom: 0.45rem; /* 40% reduction from 0.75rem */
}

#step2 .form-check-label {
    font-weight: 400;
}

/* Specific styling for step 3 checkboxes */
#step3 .form-check {
    margin-bottom: 0.45rem; /* 40% reduction from 0.75rem */
}

#step3 .form-check-label {
    font-weight: 400;
    font-size: 0.9rem;
}

/* Specific styling for step 4 checkboxes */
#step4 .form-check {
    margin-bottom: 0.45rem; /* 40% reduction from 0.75rem */
}

#step4 .form-check-label {
    font-weight: 400;
    font-size: 0.9rem;
}

/* Styling for feature checkboxes */
.feature-checkbox {
    margin-right: 5px;
}

/* Styling for "Select All" checkboxes */
.select-all-checkbox {
    margin-right: 5px;
}

.select-all-checkbox + label {
    font-weight: 500;
    color: #fd5631;
    font-size: 0.85rem;
}

.select-all-checkbox:checked + label {
    color: #fd5631;
    font-weight: 600;
}

.select-all-checkbox:indeterminate + label {
    color: #ffa500;
    font-weight: 600;
}

/* Ensure proper alignment of Select All with section titles */
#step3 .d-flex.justify-content-between.align-items-center {
    margin-bottom: 0.5rem;
}

#step3 .d-flex.justify-content-between.align-items-center h6 {
    margin-bottom: 0;
}

#step3 .d-flex.justify-content-between.align-items-center .form-check {
    margin-bottom: 0;
}

/* Alert Styling */
.alert {
    border-radius: 8px;
    padding: 12px 20px;
}

.alert-info {
    background-color: rgba(0,123,255,0.1);
    border-color: rgba(0,123,255,0.2);
    color: #004085;
}

/* Custom Toast Styling */
#image-upload-toast-container .toast {
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    opacity: 0.95;
}

#image-upload-toast-container .toast-body {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

#image-upload-toast-container .btn-close {
    font-size: 0.8rem;
    opacity: 0.7;
}

#image-upload-toast-container .btn-close:hover {
    opacity: 1;
}

/* Responsive adjustments for elegant form */
@media (max-width: 768px) {
    .elegant-form .form-control,
    .elegant-form .form-select {
        padding: 0.18rem 0.25rem;
        font-size: 0.9rem;
    }

    .elegant-form .form-label {
        font-size: 0.8rem;
    }

    .elegant-form .row {
        margin-bottom: 0.18rem;
    }
}

@media (max-width: 576px) {
    .elegant-form .form-control,
    .elegant-form .form-select {
        padding: 0.14rem 0.25rem;
        font-size: 0.85rem;
    }

    .elegant-form .form-label {
        font-size: 0.75rem;
    }

    .elegant-form [class^="col-"] {
        margin-bottom: 0.18rem;
    }
}