/* Base styles - scoped to widget container */
.lmst-submission-widget-container {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    color: #333;
    box-sizing: border-box;
}

.lmst-submission-widget-container .lmst-widget {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Step indicators */
.lmst-submission-widget-container .step-indicators {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    position: relative;
    padding: 0 1rem;
}

.lmst-submission-widget-container .step-indicators::before {
    content: '';
    position: absolute;
    top: 1.25rem;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
}

.lmst-submission-widget-container .step-indicator-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 33.333%;
}

.lmst-submission-widget-container .step-indicator {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.lmst-submission-widget-container .step-indicator.active {
    background: #FF6B00;
    color: white;
}

.lmst-submission-widget-container .step-indicator.completed {
    background: #FF6B00;
    color: white;
}

.lmst-submission-widget-container .step-indicator.pending {
    background: #e5e7eb;
    color: #6b7280;
}

.lmst-submission-widget-container .step-label {
    font-size: 0.875rem;
    color: #4b5563;
    text-align: center;
    margin-top: 0.5rem;
    font-weight: 500;
    width: 100%;
    max-width: 120px;
}

/* Form elements */
.lmst-submission-widget-container .form-group {
    margin-bottom: 1.5rem;
}

.lmst-submission-widget-container .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.lmst-submission-widget-container .form-group input:not([type="checkbox"]),
.lmst-submission-widget-container .form-group select,
.lmst-submission-widget-container .form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: white;
    color: #1f2937;
    transition: all 0.2s ease;
}

.lmst-submission-widget-container .form-group input:not([type="checkbox"]):focus,
.lmst-submission-widget-container .form-group select:focus,
.lmst-submission-widget-container .form-group textarea:focus {
    outline: none;
    border-color: #FF6B00;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

.lmst-submission-widget-container .form-group .flex button {
    /* Base styles for option buttons - should match OPTION_BUTTON_BASE_CLASSES */
    /* These define the UNSELECTED look */
    padding: 0.75rem; /* px-3 py-2 equivalent might be slightly different based on font/rem settings */
    border-radius: 0.375rem; /* rounded */
    border: 1px solid #d1d5db; /* border, border-gray-400 */
    font-size: 0.875rem; /* text-sm */
    background-color: white; /* bg-white */
    color: #374151; /* text-gray-700 */
    transition: all 0.2s ease;
}

.lmst-submission-widget-container .form-group .flex button:hover {
    border-color: #FF6B00; /* hover:border-[#FF6B00] */
    color: #FF6B00; /* hover:text-[#FF6B00] */
}

/* This class will be ADDED by JS for the selected state */
.lmst-submission-widget-container .lmst-button-selected {
    background-color: #FF6B00 !important; /* Orange */
    color: white !important;
    border-color: #FF6B00 !important;
}

/* Checkbox styling - moved to left alignment */
.lmst-submission-widget-container .form-group.flex.items-start {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; /* Changed from center to left */
    gap: 0.75rem;
}

.lmst-submission-widget-container .form-group.flex.items-start input[type="checkbox"] {
    margin-top: 0.25rem;
    margin-right: 0.5rem;
}

.lmst-submission-widget-container .form-group.flex.items-start label {
    margin-top: 0;
    font-size: 0.875rem;
    color: #e5e7eb;
}

/* Add specific styling for the accident-free checkbox container */
.lmst-submission-widget-container .flex.items-center.space-x-2.pt-4 {
    justify-content: flex-start;
    width: 100%;
}

/* Navigation buttons */
.lmst-submission-widget-container .nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.lmst-submission-widget-container .btn {
    padding: 0.375rem 1.25rem; /* Further reduced from 0.5rem to 0.375rem for even less height */
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: 0.875rem; /* Ensure consistent text size */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    min-width: 120px;
    height: auto; /* Allow height to be determined by content */
    line-height: 1.2; /* Even tighter line height */
    border: none; /* Remove any default border that might add height */
}

/* Disabled state for any button */
.lmst-submission-widget-container .btn:disabled,
.lmst-submission-widget-container .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Specific styling for primary button when disabled */
.lmst-submission-widget-container .btn-primary:disabled,
.lmst-submission-widget-container .btn-primary[disabled] {
    background-color: #FFB880; /* Lighter shade of orange */
    color: #FFFFFF;
    opacity: 0.6; /* Slightly more opaque than generic disabled if desired */
}

/* Specific styling for SVG icons in buttons */
.lmst-submission-widget-container .btn svg {
    width: 0.875rem; /* 14px - smaller icon */
    height: 0.875rem; /* 14px - smaller icon */
    flex-shrink: 0;
}

.lmst-submission-widget-container .btn span {
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.lmst-submission-widget-container .btn-primary {
    background: #FF6B00;
    color: white;
    border: none;
}

.lmst-submission-widget-container .btn-primary:hover {
    background: #FF8533;
}

.lmst-submission-widget-container .btn-secondary {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

.lmst-submission-widget-container .btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* Step content */
.lmst-submission-widget-container .step-content {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.lmst-submission-widget-container .step-content.hidden {
    display: none;
    opacity: 0;
}

/* Image upload area */
.lmst-submission-widget-container #imageUploadArea,
.lmst-submission-widget-container #registrationDocUploadArea {
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lmst-submission-widget-container #imageUploadArea:hover,
.lmst-submission-widget-container #registrationDocUploadArea:hover {
    border-color: #FF6B00;
    background: #fff7f0;
}

/* Image preview grid */
.lmst-submission-widget-container #imagePreviewGrid,
.lmst-submission-widget-container #registrationDocPreviewGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.lmst-submission-widget-container #imagePreviewGrid img,
.lmst-submission-widget-container #registrationDocPreviewGrid .image-preview-item > *,
.lmst-submission-widget-container #registrationDocPreviewGrid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
}

/* Loading spinner */
.lmst-submission-widget-container .animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Success message */
.lmst-submission-widget-container #successMessage {
    text-align: center;
    animation: fadeIn 0.5s ease;
}

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

/* Responsive adjustments */
@media (max-width: 640px) {
    .lmst-submission-widget-container .lmst-widget {
        padding: 1rem;
    }
    
    .lmst-submission-widget-container #imagePreviewGrid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lmst-submission-widget-container .btn {
        padding: 0.375rem 1rem; /* Match the reduced padding from desktop */
        min-width: 100px;
        font-size: 0.875rem; /* Ensure consistent text size on mobile */
    }
}

/* Custom scrollbar */
.lmst-submission-widget-container ::-webkit-scrollbar {
    width: 8px;
}

.lmst-submission-widget-container ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.lmst-submission-widget-container ::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.lmst-submission-widget-container ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Style for the "Kontaktdaten & Zustimmung" title on Step 1 */
.lmst-submission-widget-container #step1ContactTitle {
    font-family: system-ui, -apple-system, sans-serif;
    display: block;
    font-weight: 500; /* Equivalent to font-medium */
    color: #374151; /* Equivalent to a dark gray like text-gray-700 */
    margin-bottom: 0.5rem; /* Equivalent to mb-2 */
    font-size: 1rem; /* Adjust if necessary to match other labels */
}

/* Specific styling for problematic input fields to match selects - REINFORCED */
.lmst-submission-widget-container #mileageStep1Input,
.lmst-submission-widget-container #sellerEmail,
.lmst-submission-widget-container #sellerPhone,
.lmst-submission-widget-container #postalCode {
    font-family: system-ui, -apple-system, sans-serif;
    width: 100%; /* Ensure full width like other inputs/selects */
    padding: 0.75rem; /* Match select padding */
    border: 1px solid #d1d5db; /* Match select border */
    border-radius: 0.375rem; /* Match select border-radius */
    background-color: white !important; /* Ensure white background, override defaults */
    color: #1f2937; /* Match select text color */
    -webkit-appearance: none; /* Remove iOS default styling */
    appearance: none; /* Remove default browser styling */
    box-shadow: none; /* Remove any default shadows */
    line-height: 1.5; /* Ensure consistent line height */
    font-size: 1rem; /* Ensure consistent font size, adjust if needed */
    transition: all 0.2s ease; /* Match select transition */
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.lmst-submission-widget-container #sellerEmail:focus,
.lmst-submission-widget-container #sellerPhone:focus,
.lmst-submission-widget-container #postalCode:focus {
    outline: none;
    border-color: #FF6B00;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

/* Custom Color Picker Button Styling */
.lmst-submission-widget-container #exteriorColorBtn,
.lmst-submission-widget-container #interiorColorBtn {
    /* Reset Tailwind or other global button styles that might be interfering */
    all: unset; 

    /* Apply styles to make it look like a standard form select/input */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0.75rem !important; /* Standard padding */
    border: 1px solid #d1d5db !important; /* Standard border */
    border-radius: 0.375rem !important; /* Standard border radius */
    background-color: white !important;
    color: #1f2937 !important; /* Standard text color */
    font-size: 1rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important; /* Ensure padding/border are included in width/height */
}

.lmst-submission-widget-container #exteriorColorBtn:hover,
.lmst-submission-widget-container #interiorColorBtn:hover {
    border-color: #FF6B00 !important;
}

.lmst-submission-widget-container #exteriorColorBtn:focus,
.lmst-submission-widget-container #interiorColorBtn:focus {
    outline: none !important;
    border-color: #FF6B00 !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1) !important;
}

/* Ensure the span and SVG inside the button behave correctly with 'all: unset' */
.lmst-submission-widget-container #exteriorColorBtn #exteriorColorDisplay,
.lmst-submission-widget-container #interiorColorBtn #interiorColorDisplay {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1f2937; /* Ensure text color is reset if needed */
}

.lmst-submission-widget-container #exteriorColorBtn svg,
.lmst-submission-widget-container #interiorColorBtn svg {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    fill: currentColor; /* Make SVG use button's text color if needed */
    color: #6b7280; /* gray-500 for arrow */
    margin-left: 0.5rem; /* ml-2 */
    flex-shrink: 0;
}

/* Styling for the color picker dropdown panel */
.lmst-submission-widget-container #exteriorColorDropdown,
.lmst-submission-widget-container #interiorColorDropdown {
    /* Basic styles are already applied: absolute, z-20, w-full, mt-1, bg-white, border, rounded-md, shadow-lg, hidden, max-h-64, overflow-y-auto, p-2 */
    box-sizing: border-box; 
    min-width: 220px; /* Ensure a minimum width to accommodate 3 columns */
}

/* Force dropdowns to be hidden when the .hidden class is present */
.lmst-submission-widget-container #exteriorColorDropdown.hidden,
.lmst-submission-widget-container #interiorColorDropdown.hidden {
    display: none !important;
}

/* Styling for the grid inside the dropdown */
.lmst-submission-widget-container #exteriorColorDropdown .grid,
.lmst-submission-widget-container #interiorColorDropdown .grid {
    display: grid !important; /* Ensure grid display */
    grid-template-columns: repeat(3, 1fr) !important; /* Explicitly 3 columns */
    gap: 0.5rem !important; /* Explicitly gap */
    padding: 0.25rem; /* Add a little padding inside the grid itself */
}

/* Styles for individual color options in the grid */
.lmst-submission-widget-container #exteriorColorDropdown .grid > div,
.lmst-submission-widget-container #interiorColorDropdown .grid > div {
    /* p-2, cursor-pointer, rounded, flex, flex-col, items-center, justify-center, text-center are in HTML classes */
    /* Ensure these styles from HTML classes are effective or re-apply here if needed */
    display: flex !important; /* Reinforce flex for alignment */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.25rem !important; /* p-1, changed from 0.5rem */
    cursor: pointer !important;
    border-radius: 0.375rem !important; /* rounded */
    border: 1px solid transparent; 
    transition: background-color 0.2s ease, border-color 0.2s ease;
    word-break: break-word; /* Prevent long color names from breaking layout */
    min-width: 0; /* Allow flex items to shrink properly */
}

.lmst-submission-widget-container #exteriorColorDropdown .grid > div .text-xs,
.lmst-submission-widget-container #interiorColorDropdown .grid > div .text-xs {
    color: #4B5563; /* gray-600 or similar for text */
    font-size: 0.75rem; /* text-xs */
    line-height: 1rem;
}

.lmst-submission-widget-container #exteriorColorDropdown .grid > div span[style*="background-color"],
.lmst-submission-widget-container #interiorColorDropdown .grid > div span[style*="background-color"] {
    /* Styles for the color swatch itself are mostly inline */
    /* Ensure it has a default size if not overridden by inline */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-bottom: 0.25rem; /* mb-1 */
    border: 1px solid #ccc;
}

.lmst-submission-widget-container #exteriorColorDropdown .grid > div:hover,
.lmst-submission-widget-container #interiorColorDropdown .grid > div:hover {
    border-color: #FF6B00; /* Highlight on hover */
    background-color: #fff7f0; /* Light orange background on hover */
}

/* Make consent text much darker and highly readable */
.lmst-submission-widget-container label[for="consentGiven"],
.lmst-submission-widget-container label[for="consentStep3"] {
    color: #111 !important;
}