body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /*background-color: #f0f0f0; !* Light grey background *!*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: flex-start; !* Align to top *!*/
    /*min-height: 100vh;*/
    /*padding-top: 20px;*/
    /*direction: rtl; !* Right-to-left for Arabic *!*/
}

.mobile-container {
    width: 75%; /* Approximate iPhone width */
    background-color: #ffffff; /* White screen background */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-height: 812px; /* Approximate iPhone height */
    position: relative; /* Needed for footer positioning */
    padding-bottom: 80px; /* Space for the fixed footer */
}

/* Screen Management */
.screen {
    display: none; /* Hide all screens initially */
    padding: 0 15px;
    width: 600px;
}

.screen.active {
    display: block; /* Show the active screen */
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0; /* Padding top/bottom */
    margin-bottom: 10px;
}

.header h1 {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    text-align: center;
    flex-grow: 1; /* Allow title to take space */
}

.header .back-btn,
.header .home-btn {
    background: none;
    border: none;
    color: #888; /* Greyish color for icons */
    font-size: 1em;
    cursor: pointer;
    padding: 5px;
}
.header .home-btn i {
    color: #6a1b9a; /* Purple home icon */
    font-size: 1.4em;
}
.header .back-btn i {
    font-size: 0.9em;
}
.header .back-btn {
    padding-right: 0; /* Reset padding due to flexbox */
    text-align: right; /* Ensure text aligns right */
}
.header .home-btn {
    padding-left: 0; /* Reset padding due to flexbox */
}


/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0; /* Light grey track */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 25px;
}

.progress {
    height: 100%;
    background-color: #ff9800; /* Orange progress */
    border-radius: 4px;
    transition: width 0.3s ease-in-out;
}

/* Content Area */
.content {
    padding-bottom: 20px; /* Space above footer */
}

.instruction {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 20px;
    text-align: right;
}
.sub-instruction {
    font-size: 0.8em;
    color: #777;
    margin-bottom: 20px;
    text-align: right;
}
.sub-instruction a {
    color: #ff9800; /* Orange link */
    text-decoration: underline;
}

/* Selection List */
.selection-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between items */
}

.selection-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Push icon/logo to the left */
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #eee;
    border-radius: 10px;
    cursor: pointer;
    text-align: right;
    width: 100%;
    font-size: 1em;
    color: #333;
}

.selection-item:hover {
    background-color: #f9f9f9;
}

.selection-item img {
    height: 30px; /* Adjust as needed */
    width: auto;
    margin-right: auto; /* Keep image to the left in RTL */
    margin-left: 10px; /* Space between text and image */
    object-fit: contain;
}

.selection-list.brands .selection-item img {
    height: 24px; /* Slightly smaller for logos */
}

/* Input Fields & Labels */
label {
    display: block;
    font-size: 0.8em;
    color: #888;
    margin-bottom: 5px;
    text-align: right;
}
input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    margin-bottom: 20px;
    direction: rtl; /* Ensure text input is RTL */
    text-align: right;
}
input[type="text"]::placeholder {
    text-align: right;
    color: #aaa;
}

/* Search Bar */
.search-bar {
    position: relative;
    margin-bottom: 20px;
}
.search-bar input {
    padding-left: 40px; /* Space for the icon */
    margin-bottom: 0; /* Remove default input margin */
}
.search-bar i {
    position: absolute;
    left: 15px; /* Position icon on the left */
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
}

/* Details Box (Screen 6) */
.details-box {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    background-color: #fff;
}
.details-title {
    font-weight: bold;
    margin-bottom: 15px;
    text-align: right;
    font-size: 1em;
    color: #333;
}
.details-content {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align items to the right */
    gap: 20px;
}
.details-content .brand-logo-large {
    height: 40px;
    width: auto;
    object-fit: contain;
}
.details-content div {
    text-align: right;
}
.details-content p {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 5px;
}
.details-content p strong {
    color: #000;
}


/* Footer and Next Button */
/*.footer {*/
/*    position: absolute; !* Fixed position at bottom *!*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    padding: 15px;*/
/*    background-color: #fff; !* Match container background *!*/
/*    border-top: 1px solid #f0f0f0; !* Subtle separator *!*/
/*}*/

.next-button {
    width: 100%;
    padding: 15px;
    background-color: #6a1b9a; /* Purple color */
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.next-button:hover {
    background-color: #4a148c; /* Darker purple on hover */
}


/* Selection List Item - Selected State (Optional) */
.selection-item.selected {
    border-color: #6a1b9a; /* Purple border */
    background-color: #f3e5f5; /* Light purple background */
}

/* Footer and Next Button */
/*.footer {*/
/*    !* ... (keep existing footer styles) ... *!*/
/*}*/

.next-button {
    /* ... (keep existing button styles) ... */
    transition: background-color 0.2s ease, opacity 0.2s ease; /* Add opacity transition */
}

.next-button:hover {
    background-color: #4a148c;
}

/* Style for the disabled button */
.next-button:disabled {
    background-color: #c7bad1; /* Lighter, faded purple */
    color: #f0f0f0; /* Lighter text */
    cursor: not-allowed; /* Indicate non-interactive */
    opacity: 0.7; /* Make it slightly transparent */
}

/* Prevent hover effect on disabled button */
.next-button:disabled:hover {
    background-color: #c7bad1; /* Keep the disabled background color */
}

.checkbox-group {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    margin-bottom: 30px; /* Space below checkbox group */
}

.checkbox-group label {
    margin-right: 10px; /* Space between checkbox and label (right in RTL) */
    font-size: 1em;
    color: #555;
}

.select-wrapper {
    position: relative; /* Needed to position the pseudo-element arrow */
    display: inline-block; /* Fit wrapper to select size */
    width: 80%; /* Match width of select */
    max-width: 400px;
}

.select-wrapper select {
    width: 100%; /* Select fills the wrapper */
    padding-left: 35px; /* Make space for the arrow on the left */
    -webkit-appearance: none; /* Remove default arrow (Chrome, Safari) */
    -moz-appearance: none; /* Remove default arrow (Firefox) */
    appearance: none; /* Remove default arrow (Standard) */
    cursor: pointer;
    margin-bottom: 20px;
}



.checkbox-group input[type="checkbox"] {
    width: 18px; /* Checkbox size */
    /*height: 18px;*/
    cursor: pointer;
}


.input-group select {
    width: 100%; /* Make inputs/select take full width of their container */
    max-width: 568px; /* Control maximum width */
    padding: 12px 15px;
    border: 1px solid #ccc; /* Light grey border */
    border-radius: 5px;
    font-size: 1em;
    text-align: right; /* Align text inside to the right */
    font-family: 'Cairo', sans-serif; /* Ensure font */
    box-sizing: border-box; /* Include padding/border in width */
    background-color: #fff; /* White background */
    display: inline-block; /* Allow max-width to work */
    vertical-align: middle; /* Align properly if needed */
}

/* Wrapper for Select to handle custom arrow */
.select-wrapper {
    position: relative; /* Needed for absolute positioning of the pseudo-element */
    display: inline-block; /* Fit wrapper to select size */
    width: 100%; /* Match width of input */
    max-width: 750px; /* Match width of input */
    /*max-width: 400px; !* Match max-width *!*/
}

.select-wrapper select {
    width: 100%; /* Select fills the wrapper */
    padding-left: 35px; /* Make space for the custom arrow on the left */
    -webkit-appearance: none; /* Remove default arrow (Chrome, Safari, Edge) */
    -moz-appearance: none; /* Remove default arrow (Firefox) */
    appearance: none; /* Remove default arrow (Standard) */
    cursor: pointer;
}

/* Custom Arrow using Pseudo-element */
.select-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px; /* Position arrow on the left side */
    width: 0;
    height: 0;
    border-left: 6px solid transparent; /* Triangle dimensions */
    border-right: 6px solid transparent;
    border-top: 8px solid #aaa; /* Triangle color (points down) */
    transform: translateY(-50%); /* Center vertically */
    pointer-events: none; /* Allow clicks to pass through to the select */
    z-index: 1; /* Ensure arrow is above select background */
}


/* Placeholder Styling */
.input-group input[type="text"]::placeholder {
    color: #a9a9a9; /* Light grey placeholder text */
    opacity: 1; /* Ensure placeholder is visible */
}

/* Styling Dropdown Options (Limited Capabilities) */
/* Note: Styling the *open* dropdown's selected/hover state (like the purple highlight)
   is very limited with pure CSS and varies significantly across browsers.
   This basic styling affects the option elements themselves. */
.input-group select option {
    padding: 8px 15px;
    background-color: #fff;
    color: #333;
}



.container .input-group label {
    display: inline-block; /* Allow label to respect container centering */
    max-width: 400px; /* Match input width */
    width: 100%; /* Take up available space */
    text-align: right; /* Align label text right */
    /*padding-right: calc((100% - 400px) / 2); !* Add padding to align label start with input start, adjust if max-width changes *!*/
    box-sizing: border-box;
}
/* Responsive adjustment for label alignment on smaller screens */
@media (max-width: 500px) { /* Adjust breakpoint as needed */
    .container .input-group label {
        padding-right: 0; /* Remove padding when input takes full width */
        width: 90%; /* Example width */
        margin: 0 auto 8px auto; /* Center label */
    }
    .input-group input[type="text"],
    .select-wrapper {
        width: 100%; /* Example width */
    }
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    flex-direction: column;
}

.insurance-quote-section {
    max-width: 600px; /* Adjust max-width as needed */
    margin: 40px auto; /* Center the section with top/bottom margin */
    padding: 20px;
    position: relative; /* Needed for absolute positioning of chevron */
    text-align: center; /* Center align text elements by default */
}

/* Chevron Icon */
.chevron-icon {
    position: absolute;
    top: 10px; /* Adjust position */
    left: 10px;  /* Left in RTL means visually on the right */
    font-size: 24px;
    color: #888; /* Adjust color */
    font-weight: bold;
    transform: scaleX(-1); /* Flip the > character for RTL */
}

/* Introductory Text */
.intro-text {
    color: #5a4e8c; /* Dark purple color from image */
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 40px; /* Space before the card */
}

/* Quote Card Styling */
.quote-card {
    background-color: #48277f; /* Purple background from image */
    color: #ffffff; /* White text */
    border-radius: 15px; /* Rounded corners */
    padding: 45px 20px 20px 20px; /* Top padding increased for icon space */
    position: relative; /* To position the icon container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional subtle shadow */
    margin-bottom: 30px; /* Space below the card */
}

/* Icon Container (the white circle) */
.card-icon-container {
    position: absolute;
    top: -25px; /* Position half above the card */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Correct horizontal centering */
    background-color: #ffffff;
    border-radius: 50%; /* Make it a circle */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Placeholder for the actual icon */
.card-icon {
    font-size: 24px; /* Adjust size if using emoji/text */
    /* If using an image:
    width: 30px;
    height: 30px;
    background-image: url('path/to/your/car-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    */
}
.card-icon span { /* Style for the emoji placeholder */
    line-height: 1;
}

/* Card Title */
.card-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-top: 0; /* Reset margin */
    margin-bottom: 10px;
}

/* Quote Value */
.quote-value {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Separator Line */
.separator {
    border: none;
    height: 1px;
    background-color: #ffffff;
    opacity: 0.5; /* Make it slightly transparent */
    margin: 15px auto; /* Center horizontally */
    width: 80%; /* Adjust width */
}

/* Details Section */
.quote-details {
    margin-top: 20px;
    text-align: right; /* Align details text to the right */
    padding-right: 10%; /* Add some padding to align with centered elements */
    padding-left: 10%;
}

/* Individual Detail Item */
.detail-item {
    font-size: 1em;
    line-height: 1.7;
    margin: 5px 0; /* Small vertical spacing between items */
}

/* Call to Action Button */
.cta-button {
    background-color: #f39c12; /* Orange color from image */
    color: #ffffff;
    border: none;
    border-radius: 8px; /* Rounded corners */
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: bold;
    font-family: 'Cairo', sans-serif; /* Ensure button uses the font */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block; /* Allow centering via text-align on parent */
    margin-top: 20px; /* Space above the button */
}

.cta-button:hover {
    background-color: #e67e22; /* Darker orange on hover */
}

.hidden-checkbox {
    display: none; /* Hide checkbox but still usable */
}

.selection-item.active {
    background-color: #cce5ff;
    border: 1px solid #339af0;
}