/**
 * Chauffeur Plus -- Modern Style Reskin
 * Targets Step 1 only. Enqueued AFTER booking-widget.hand.css.
 * Brand: Gotham Ride
 *
 * All fields use 64px height with floating labels inside.
 * SVG icons injected via CSS ::before / ::after pseudo-elements.
 * Tab bar uses underline style (not filled pills).
 */

/* ================================================================
   1. CSS VARIABLE OVERRIDES -- Gotham Ride Brand Tokens
   ================================================================ */
.cp-widget-wrapper {
    --cp-accent:       #866656;
    --cp-accent-hover: #957565;
    --cp-radius:       4px;
    --cp-font:         'Poppins', sans-serif;
    --cp-bg:           #ffffff;
    --cp-field-bg:     #F0F2F7;
    --cp-field-border: transparent;
    --cp-field-focus:  #866656;
    --cp-label-color:  #64666B;
    --cp-text-primary: #181A1F;
    --cp-text-muted:   #64666B;
    --cp-border:       #E5E7EB;
    --cp-shadow:       0 12px 24px 0 rgba(100, 102, 107, 0.28);
}

/* ================================================================
   2. ELEMENTOR / THEME ISOLATION
   ================================================================ */
.cp-widget-wrapper button,
.cp-widget-wrapper input,
.cp-widget-wrapper select,
.cp-widget-wrapper textarea,
.cp-widget-wrapper a {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
}
.cp-widget-wrapper h1, .cp-widget-wrapper h2, .cp-widget-wrapper h3,
.cp-widget-wrapper h4, .cp-widget-wrapper h5, .cp-widget-wrapper h6 {
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ================================================================
   3. FORM CONTAINER
   ================================================================ */
/* max-width is controlled by Widget Designer "Max Width - Step 1" setting
   (applied via inline style on .cp-widget-wrapper) */
#cp-step-1 .cp-form-body {
    padding: 16px !important;
    margin: 0 auto !important;
}

.cp-widget-wrapper {
    border-radius: var(--cp-radius) !important;
    box-shadow: var(--cp-shadow) !important;
    border: none !important;
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
}

/* ================================================================
   4. PROGRESS INDICATORS -- Mirrors Classic (ring/line/minimal/hidden)
   Styled in Modern visual language. Controlled by data-progress attr.
   ================================================================ */

/* --- Step Header --- */
.cp-widget-wrapper .cp-step-header {
    border-bottom: 1px solid var(--cp-border) !important;
    background: #ffffff !important;
    font-family: var(--cp-font) !important;
}

/* --- Ring Style --- */
.cp-widget-wrapper .cp-ring-text {
    font-family: var(--cp-font) !important;
    font-weight: 800 !important;
    color: var(--cp-text-primary) !important;
}

.cp-widget-wrapper .cp-ring-fill {
    stroke: var(--cp-text-primary) !important;
}

.cp-widget-wrapper .cp-progress-ring svg circle:first-child {
    stroke: var(--cp-field-bg) !important;
}

/* --- Line (Breadcrumb) Style --- */
.cp-widget-wrapper .cp-progress-line {
    background: var(--cp-field-bg) !important;
    border-color: var(--cp-border) !important;
    border-radius: 999px !important;
    font-family: var(--cp-font) !important;
}

.cp-widget-wrapper .cp-bc-step {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-muted) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.cp-widget-wrapper .cp-bc-step.cp-bc-active {
    background: var(--cp-text-primary) !important;
    color: #ffffff !important;
}

.cp-widget-wrapper .cp-bc-step.cp-bc-done {
    color: var(--cp-text-primary) !important;
}

.cp-widget-wrapper .cp-bc-sep {
    color: var(--cp-border) !important;
}

/* --- Minimal (Dots) Style --- */
.cp-widget-wrapper .cp-pm-circle {
    background: var(--cp-field-bg) !important;
    border-color: var(--cp-field-bg) !important;
    color: var(--cp-field-bg) !important;
}

.cp-widget-wrapper .cp-pm-step .cp-pm-circle::after {
    background: var(--cp-text-muted) !important;
}

.cp-widget-wrapper .cp-pm-step.cp-pm-active .cp-pm-circle {
    background: #ffffff !important;
    border-color: var(--cp-text-primary) !important;
}

.cp-widget-wrapper .cp-pm-step.cp-pm-active .cp-pm-circle::after {
    background: var(--cp-text-primary) !important;
}

.cp-widget-wrapper .cp-pm-step.cp-pm-done .cp-pm-circle {
    background: var(--cp-text-primary) !important;
    border-color: var(--cp-text-primary) !important;
    color: #ffffff !important;
}

.cp-widget-wrapper .cp-pm-label {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-muted) !important;
}

.cp-widget-wrapper .cp-pm-step.cp-pm-active .cp-pm-label {
    color: var(--cp-text-primary) !important;
}

.cp-widget-wrapper .cp-pm-step.cp-pm-done .cp-pm-label {
    color: var(--cp-text-primary) !important;
}

.cp-widget-wrapper .cp-pm-line {
    background: var(--cp-field-bg) !important;
}

.cp-widget-wrapper .cp-pm-line.cp-pm-line-done {
    background: var(--cp-text-primary) !important;
}

/* --- Header Text --- */
.cp-widget-wrapper .cp-header-text h2 {
    color: var(--cp-text-primary) !important;
    font-family: var(--cp-font) !important;
}

.cp-widget-wrapper .cp-header-text p {
    color: var(--cp-text-muted) !important;
    font-family: var(--cp-font) !important;
}

/* ================================================================
   5. TAB BAR -- Underline Style
   ================================================================ */
#cp-step-1 .cp-type-toggle {
    display: flex !important;
    height: auto !important;
    border-bottom: 2px solid #E5E7EB !important;
    gap: 0 !important;
    margin-bottom: 16px !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}

/* ================================================================
   6. TAB BUTTONS -- Active = Bottom Border
   ================================================================ */
#cp-step-1 .cp-type-btn {
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--cp-text-muted) !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
    font-family: var(--cp-font) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: -2px !important;
    cursor: pointer !important;
    flex: none !important;
}

#cp-step-1 .cp-type-btn:hover {
    color: var(--cp-text-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
}

#cp-step-1 .cp-type-btn.cp-active {
    color: var(--cp-text-primary) !important;
    border-bottom-color: var(--cp-text-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ================================================================
   7. FIELD GROUPS -- Tight stacking + Floating Labels
   ================================================================ */
#cp-step-1 .cp-group {
    margin-bottom: 6px !important;
    position: relative !important;
}

/* Add-stop group -- tighter since it's just a link */
#cp-step-1 .cp-add-stop-group {
    margin-bottom: 4px !important;
}

/* 2-col rows -- consistent gap after the row */
#cp-step-1 .cp-row-2col {
    margin-bottom: 6px !important;
}

/* Remove double margin on groups inside 2-col rows */
#cp-step-1 .cp-row-2col > .cp-group,
#cp-step-1 .cp-row-2col > .cp-date-group,
#cp-step-1 .cp-row-2col > .cp-time-group {
    margin-bottom: 0 !important;
}

#cp-step-1 .cp-group label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--cp-label-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: var(--cp-font) !important;
}

/* Floating labels for groups that have an input-wrap (address fields) */
#cp-step-1 .cp-group:has(.cp-input-wrap) > label {
    position: absolute !important;
    top: 10px !important;
    left: 44px !important;
    z-index: 2 !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
}

/* ================================================================
   8. ALL TEXT INPUTS -- 64px with floating label + icon padding
   ================================================================ */
#cp-step-1 .cp-input-wrap {
    position: relative !important;
}

#cp-step-1 .cp-input-wrap input[type="text"],
#cp-step-1 .cp-group input[type="text"] {
    height: 64px !important;
    background: var(--cp-field-bg) !important;
    border: 2px solid transparent !important;
    border-radius: var(--cp-radius) !important;
    padding: 28px 13px 8px 44px !important;
    font-size: 14px !important;
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Hover -- darken background (no border change) */
#cp-step-1 .cp-input-wrap input[type="text"]:hover,
#cp-step-1 .cp-group input[type="text"]:hover {
    background: #E5E7EB !important;
}

/* Focus/Selected -- accent border (stronger than hover) */
#cp-step-1 .cp-input-wrap input[type="text"]:focus,
#cp-step-1 .cp-group input[type="text"]:focus {
    border-color: var(--cp-text-primary) !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

#cp-step-1 .cp-group input[type="text"]::placeholder {
    color: var(--cp-text-muted) !important;
}

/* Select fields (hours dropdown) -- no icon, normal padding */
#cp-step-1 .cp-group select {
    height: 64px !important;
    background: var(--cp-field-bg) !important;
    border: 2px solid transparent !important;
    border-radius: var(--cp-radius) !important;
    padding: 28px 13px 8px 13px !important;
    font-size: 14px !important;
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
    outline: none !important;
}

#cp-step-1 .cp-group select:hover {
    background: #E5E7EB !important;
}

#cp-step-1 .cp-group select:focus {
    border-color: var(--cp-text-primary) !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

/* Flight info fields -- 64px with floating label + airplane icon */
#cp-step-1 .cp-flight-row {
    position: relative !important;
}

#cp-step-1 .cp-flight-row > label {
    position: absolute !important;
    top: 10px !important;
    left: 44px !important;
    z-index: 2 !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
}

#cp-step-1 .cp-flight-row input[type="text"] {
    height: 64px !important;
    padding: 28px 13px 8px 44px !important;
}

/* Airplane icon for flight info fields */
#cp-step-1 .cp-flight-row::before {
    content: '' !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364666B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2L16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* ================================================================
   9. SVG ICONS VIA CSS -- Location Pin for Address Fields
   ================================================================ */

/* Shared location pin -- dark gray (#64666B) to match calendar/clock icons */
#cp-step-1 .cp-group:has(#cp-pickup) .cp-input-wrap::before,
#cp-step-1 .cp-group:has(#cp-dropoff) .cp-input-wrap::before,
#cp-step-1 .cp-group:has(.cp-stop-input) .cp-input-wrap::before,
#cp-step-1 .cp-group:has(#cp-return-pickup) .cp-input-wrap::before,
#cp-step-1 .cp-group:has(#cp-return-dropoff) .cp-input-wrap::before {
    content: '' !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364666B' stroke='%2364666B' stroke-width='1'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* ================================================================
   10. DATE / TIME ROW -- Stack vertically, full width
   ================================================================ */

/* Date & Time row: side-by-side, same as Passengers/Luggage */
#cp-step-1 .cp-row-2col:has(.cp-date-group) {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
}

#cp-step-1 .cp-row-2col:has(.cp-date-group) .cp-date-group,
#cp-step-1 .cp-row-2col:has(.cp-date-group) .cp-time-group {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

/* All other 2-col rows (Passengers/Luggage) stay side-by-side */
#cp-step-1 .cp-row-2col {
    gap: 6px !important;
}

#cp-step-1 .cp-date-group,
#cp-step-1 .cp-time-group {
    position: relative !important;
}

/* Date/time inputs inherit base 64px from section 8 -- just adjust padding */
#cp-step-1 .cp-date-group input[type="text"],
#cp-step-1 .cp-time-group input[type="text"] {
    padding: 28px 44px 8px 44px !important;
}

/* Hover on date/time fields -- darken bg */
#cp-step-1 .cp-date-group input[type="text"]:hover,
#cp-step-1 .cp-time-group input[type="text"]:hover {
    background: #E5E7EB !important;
}

/* Focus/Selected on date/time fields -- dark border + white bg */
#cp-step-1 .cp-date-group input[type="text"]:focus,
#cp-step-1 .cp-time-group input[type="text"]:focus {
    border-color: var(--cp-text-primary) !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

/* Floating labels for date/time -- shifted right for icon */
#cp-step-1 .cp-date-group label,
#cp-step-1 .cp-time-group label {
    position: absolute !important;
    top: 10px !important;
    left: 44px !important;
    z-index: 1 !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--cp-label-color) !important;
}

/* ================================================================
   11. DATE/TIME SVG ICONS -- Calendar, Clock, Chevrons
   ================================================================ */

/* Calendar icon */
#cp-step-1 .cp-date-group::before {
    content: '' !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364666B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Clock icon */
#cp-step-1 .cp-time-group::before {
    content: '' !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364666B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Chevron down icon for date/time (trailing) */
#cp-step-1 .cp-date-group::after,
#cp-step-1 .cp-time-group::after {
    content: '' !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364666B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* ================================================================
   11b. DURATION FIELD -- Timer icon + floating label (matches date/time)
   ================================================================ */

/* Container needs position:relative for icon + floating label */
#cp-step-1 .cp-duration-group {
    position: relative !important;
}

/* Floating label -- same as date/time */
#cp-step-1 .cp-duration-group label {
    position: absolute !important;
    top: 10px !important;
    left: 44px !important;
    z-index: 1 !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--cp-label-color) !important;
}

/* Select padding-left to clear the icon */
#cp-step-1 .cp-duration-group select {
    padding-left: 44px !important;
}

/* Timer/hourglass SVG icon */
#cp-step-1 .cp-duration-group::before {
    content: '' !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364666B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12'/%3E%3Cline x1='12' y1='12' x2='15' y2='15'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* ================================================================
   12. DATEPICKER DROPDOWN -- Match field width (50% col)
   ================================================================ */
.cp-datepicker {
    border-radius: var(--cp-radius) !important;
    box-shadow: var(--cp-shadow) !important;
    border: none !important;
    background: #ffffff !important;
    width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
}

.cp-cal-header {
    font-family: var(--cp-font) !important;
}

.cp-cal-title {
    color: var(--cp-text-primary) !important;
    font-family: var(--cp-font) !important;
}

.cp-cal-nav {
    color: var(--cp-text-primary) !important;
    border-radius: var(--cp-radius) !important;
}

.cp-cal-nav:hover {
    background: var(--cp-field-bg) !important;
}

.cp-cal-weekdays span {
    color: var(--cp-text-muted) !important;
    font-family: var(--cp-font) !important;
}

.cp-cal-day {
    border-radius: 50% !important;
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    transition: background 0.1s ease !important;
}

.cp-cal-day:hover {
    background: var(--cp-field-bg) !important;
}

/* Selected day -- dark filled circle */
.cp-cal-day.cp-cal-selected {
    background: var(--cp-text-primary) !important;
    color: #ffffff !important;
}

/* Today -- accent outline circle */
.cp-cal-day.cp-cal-today {
    border: 2px solid var(--cp-text-primary) !important;
}

.cp-cal-day.cp-cal-today.cp-cal-selected {
    background: var(--cp-text-primary) !important;
    border-color: var(--cp-text-primary) !important;
    color: #ffffff !important;
}

.cp-cal-day.cp-cal-disabled {
    color: #C8CAD0 !important;
}

/* ================================================================
   13. TIMEPICKER -- Match field width (50% col)
   ================================================================ */
.cp-timepicker {
    border-radius: var(--cp-radius) !important;
    box-shadow: var(--cp-shadow) !important;
    border: none !important;
    background: #ffffff !important;
    width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
}

.cp-widget-wrapper .cp-time-item {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    transition: background 0.1s ease !important;
}

.cp-widget-wrapper .cp-time-item:hover {
    background: var(--cp-field-bg) !important;
    color: var(--cp-text-primary) !important;
}

.cp-widget-wrapper .cp-timepicker .cp-time-item.cp-time-selected {
    background: var(--cp-text-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ================================================================
   14. SUBMIT BUTTON
   ================================================================ */
.cp-widget-wrapper #cp-step-1 .cp-btn-primary,
.cp-widget-wrapper .cp-btn-primary#cp-get-rates {
    display: block !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px !important;
    background: var(--cp-accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    font-family: var(--cp-font) !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease !important;
    margin-top: 8px !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 52px !important;
}

/* No hover color change -- stay accent color */
.cp-widget-wrapper #cp-step-1 .cp-btn-primary:hover,
.cp-widget-wrapper .cp-btn-primary#cp-get-rates:hover,
.cp-widget-wrapper #cp-step-1 .cp-btn-primary:focus,
.cp-widget-wrapper .cp-btn-primary#cp-get-rates:focus {
    background: var(--cp-accent) !important;
    color: #ffffff !important;
    opacity: 0.92 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#cp-step-1 .cp-btn-primary:disabled,
.cp-btn-primary#cp-get-rates:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* ================================================================
   15. WAIT NOTICE / MICRO-COPY
   ================================================================ */
.cp-widget-wrapper #cp-step-1 .cp-wait-notice {
    font-size: 13px !important;
    color: var(--cp-text-muted) !important;
    padding: 4px 0 0 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    font-family: var(--cp-font) !important;
    font-weight: 400 !important;
    text-align: center !important;
}

/* ================================================================
   15b. USP LINE -- Below CTA button
   ================================================================ */
#cp-step-1 .cp-usp-line {
    font-size: 12px !important;
    color: var(--cp-text-muted, #6b7280) !important;
    text-align: center !important;
    margin-top: 10px !important;
    padding: 0 !important;
    font-family: var(--cp-font) !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    line-height: 1.6 !important;
}

/* Dot separator -- inline SVG circle */
#cp-step-1 .cp-usp-line .cp-usp-dot {
    display: inline-block !important;
    width: 4px !important;
    height: 4px !important;
    background: var(--cp-text-muted, #6b7280) !important;
    border-radius: 50% !important;
    vertical-align: middle !important;
    margin: 0 2px !important;
}

/* ================================================================
   16. TRANSITIONS
   ================================================================ */
#cp-step-1 .cp-group input,
#cp-step-1 .cp-group select,
#cp-step-1 .cp-group textarea {
    transition: border-color 0.15s ease !important;
}

/* ================================================================
   17. STEPPER (Passengers / Luggage) -- Left-aligned label + SVG icon
   ================================================================ */

/* Stepper parent group: relative for floating label + icon */
#cp-step-1 .cp-group:has(.cp-stepper) {
    position: relative !important;
}

/* Float the label inside, left-aligned to match address fields */
#cp-step-1 .cp-group:has(.cp-stepper) > label {
    position: absolute !important;
    top: 10px !important;
    left: 44px !important;
    right: auto !important;
    z-index: 2 !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    text-align: left !important;
}

#cp-step-1 .cp-stepper {
    background: var(--cp-field-bg) !important;
    border: 2px solid transparent !important;
    border-radius: var(--cp-radius) !important;
    height: 64px !important;
    padding-top: 18px !important;
    padding-left: 44px !important;
    transition: border-color 0.15s ease !important;
}

/* Person icon for Passengers -- solid filled black */
#cp-step-1 .cp-group:has(#cp-passengers)::before {
    content: '' !important;
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364666B'%3E%3Cpath d='M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1C4.76 14.04 4.39 14 4 14c-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Suitcase icon for Luggage -- solid filled black */
#cp-step-1 .cp-group:has(#cp-luggage)::before {
    content: '' !important;
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364666B'%3E%3Cpath d='M17 6h-2V3c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v3H7c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2 0 .55.45 1 1 1s1-.45 1-1h6c0 .55.45 1 1 1s1-.45 1-1c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM9.5 3.5h5V6h-5V3.5zM17 19H7V8h10v11z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

#cp-step-1 .cp-stepper:hover {
    background: #E5E7EB !important;
}

.cp-widget-wrapper #cp-step-1 .cp-stepper-btn,
.cp-widget-wrapper #cp-step-1 .cp-stepper-btn:hover,
.cp-widget-wrapper #cp-step-1 .cp-stepper-btn:focus,
.cp-widget-wrapper #cp-step-1 .cp-stepper-btn:active {
    color: var(--cp-text-primary) !important;
    font-family: var(--cp-font) !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#cp-step-1 .cp-stepper-value {
    color: var(--cp-text-primary) !important;
    font-family: var(--cp-font) !important;
    font-weight: 600 !important;
}

/* ================================================================
   18. AUTOCOMPLETE DROPDOWN
   ================================================================ */
.cp-autocomplete-list {
    border: none !important;
    border-radius: var(--cp-radius) !important;
    box-shadow: var(--cp-shadow) !important;
    background: #ffffff !important;
}

.cp-ac-item {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
}

.cp-ac-item:hover,
.cp-ac-item.cp-ac-active,
.cp-ac-item.cp-ac-hover {
    background: var(--cp-field-bg) !important;
}

/* ================================================================
   19. ADD STOP BUTTON -- SVG icon + "Add a Stop", Elementor-proof
   ================================================================ */
.cp-widget-wrapper #cp-step-1 .cp-add-stop-group button.cp-add-stop-btn,
.cp-widget-wrapper #cp-step-1 .cp-add-stop-group button.cp-add-stop-btn:hover,
.cp-widget-wrapper #cp-step-1 .cp-add-stop-group button.cp-add-stop-btn:focus,
.cp-widget-wrapper #cp-step-1 .cp-add-stop-group button.cp-add-stop-btn:active {
    color: transparent !important;
    font-size: 0 !important;
    font-family: var(--cp-font) !important;
    background: transparent !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 2px 0 2px 14px !important;
    cursor: pointer !important;
}

/* SVG plus-circle icon */
.cp-widget-wrapper #cp-step-1 .cp-add-stop-group button.cp-add-stop-btn::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364666B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Replacement text */
.cp-widget-wrapper #cp-step-1 .cp-add-stop-group button.cp-add-stop-btn::after {
    content: 'Add a stop' !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--cp-font) !important;
    color: var(--cp-text-muted) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Hide Add Stop button when .cp-hidden (max stops reached) */
.cp-widget-wrapper #cp-step-1 .cp-add-stop-group button.cp-add-stop-btn.cp-hidden {
    display: none !important;
}

/* Stop limit message -- two lines, aligned with field text */
.cp-widget-wrapper .cp-stop-limit-msg {
    padding-left: 44px !important;
    font-size: 13px !important;
    color: var(--cp-text-muted) !important;
    line-height: 1.6 !important;
    margin: 4px 0 0 0 !important;
}

.cp-widget-wrapper .cp-stop-limit-msg strong {
    color: var(--cp-text-primary) !important;
    font-weight: 700 !important;
}

/* ================================================================
   19b. CLEAR ADDRESS BUTTON -- circular × inside field
   ================================================================ */

/* Clear button -- hidden by default, shown only when .cp-filled */
.cp-widget-wrapper #cp-step-1 .cp-field-clear {
    display: none !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #E5E7EB !important;
    color: #64666B !important;
    font-size: 18px !important;
    font-family: var(--cp-font) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 3 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    outline: none !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Show clear button only when address is selected (JS adds .cp-filled) */
.cp-widget-wrapper #cp-step-1 .cp-group.cp-filled .cp-field-clear {
    display: flex !important;
}

/* Stop remove buttons -- hidden by default, shown only when .cp-filled */
.cp-widget-wrapper #cp-step-1 .cp-stop-remove {
    display: none !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #E5E7EB !important;
    color: #64666B !important;
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 0 !important;
    z-index: 3 !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Show stop × only when address is selected */
.cp-widget-wrapper #cp-step-1 .cp-group.cp-filled .cp-stop-remove {
    display: flex !important;
}

#cp-step-1 .cp-stop-remove:hover {
    background: #D1D5DB !important;
    color: var(--cp-text-primary) !important;
}

/* Stop input row -- relative positioning for absolute button */
#cp-step-1 .cp-stop-input-row {
    position: relative !important;
}

/* Stop input needs right padding for clear button */
#cp-step-1 .cp-stop-input-row input[type="text"] {
    padding-right: 48px !important;
}

/* Filled state -- input gets right padding for clear button */
#cp-step-1 .cp-group.cp-filled .cp-input-wrap input[type="text"] {
    padding-right: 48px !important;
}

/* ================================================================
   20. ERROR STATES
   ================================================================ */
#cp-step-1 .cp-group input.cp-error,
#cp-step-1 .cp-group select.cp-error {
    border: 1px solid #dc2626 !important;
    background: var(--cp-field-bg) !important;
}

#cp-step-1 .cp-field-error {
    font-family: var(--cp-font) !important;
    font-size: 12px !important;
    color: #dc2626 !important;
}

/* ================================================================
   21. RETURN TRIP SECTION -- Elementor-proof, no hover effect
   ================================================================ */

/* Checkbox at 12px + ~16px checkbox + 8px gap = 36px (matches Add a Stop text) */
#cp-step-1 .cp-return-toggle {
    padding-left: 12px !important;
    margin-bottom: 4px !important;
}

#cp-step-1 .cp-return-toggle #cp-return-label {
    margin-left: 0 !important;
}

#cp-step-1 .cp-return-toggle .cp-checkbox-label {
    font-family: var(--cp-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--cp-text-muted) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Hint text aligned with "Make it a round trip" text (36px from edge) */
#cp-step-1 .cp-return-hint {
    padding-left: 36px !important;
    font-family: var(--cp-font) !important;
}

/* Remove dashed divider between checkbox and return fields, equal spacing */
.cp-widget-wrapper #cp-step-1 .cp-return-section {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.cp-widget-wrapper #cp-step-1 .cp-link-btn,
.cp-widget-wrapper #cp-step-1 .cp-link-btn:hover,
.cp-widget-wrapper #cp-step-1 .cp-link-btn:focus,
.cp-widget-wrapper #cp-step-1 .cp-link-btn:active {
    color: var(--cp-accent) !important;
    font-family: var(--cp-font) !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

/* ================================================================
   22. RESPONSIVE -- Mobile
   ================================================================ */
@media (max-width: 480px) {
    #cp-step-1 .cp-form-body {
        padding: 12px !important;
    }

    /* Tabs 50/50 equal width */
    #cp-step-1 .cp-type-toggle {
        display: flex !important;
    }

    #cp-step-1 .cp-type-btn {
        flex: 1 1 50% !important;
        text-align: center !important;
        font-size: 15px !important;
        padding: 10px 14px !important;
    }

    /* Date/Time stays side-by-side on mobile too */
    #cp-step-1 .cp-row-2col:has(.cp-date-group) {
        flex-direction: row !important;
        gap: 6px !important;
    }

    /* Passengers/Luggage stays 50/50 on mobile */
    #cp-step-1 .cp-row-2col:has(.cp-stepper) {
        flex-direction: row !important;
        gap: 6px !important;
    }

    /* Datepicker dropdown: full form width on mobile (break out of 50% col) */
    #cp-step-1 .cp-date-group .cp-datepicker {
        width: calc(200% + 6px) !important;
        min-width: calc(200% + 6px) !important;
    }

    /* Prevent iOS auto-zoom on input focus (requires 16px minimum) */
    #cp-step-1 .cp-input-wrap input[type="text"],
    #cp-step-1 .cp-group input[type="text"],
    #cp-step-1 .cp-date-group input[type="text"],
    #cp-step-1 .cp-time-group input[type="text"],
    #cp-step-1 .cp-group select,
    #cp-step-1 .cp-group textarea {
        font-size: 16px !important;
        touch-action: manipulation !important;
    }

    /* All fields: uniform 30px left/right padding on mobile */
    #cp-step-1 .cp-input-wrap input[type="text"],
    #cp-step-1 .cp-group input[type="text"],
    #cp-step-1 .cp-date-group input[type="text"],
    #cp-step-1 .cp-time-group input[type="text"],
    #cp-step-1 .cp-flight-row input[type="text"] {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* Floating labels shift to 34px on mobile (must match desktop specificity) */
    #cp-step-1 .cp-group label,
    #cp-step-1 .cp-group:has(.cp-input-wrap) > label,
    #cp-step-1 .cp-group:has(.cp-stepper) > label,
    #cp-step-1 .cp-date-group label,
    #cp-step-1 .cp-time-group label,
    #cp-step-1 .cp-duration-group label,
    #cp-step-1 .cp-flight-row label {
        left: 34px !important;
    }

    /* Duration select: tighter left padding on mobile */
    #cp-step-1 .cp-duration-group select {
        padding-left: 34px !important;
    }

    /* All left SVG icons: shift to 8px, 16px size */
    #cp-step-1 .cp-group:has(#cp-pickup) .cp-input-wrap::before,
    #cp-step-1 .cp-group:has(#cp-dropoff) .cp-input-wrap::before,
    #cp-step-1 .cp-group:has(.cp-stop-input) .cp-input-wrap::before,
    #cp-step-1 .cp-group:has(#cp-return-pickup) .cp-input-wrap::before,
    #cp-step-1 .cp-group:has(#cp-return-dropoff) .cp-input-wrap::before,
    #cp-step-1 .cp-date-group::before,
    #cp-step-1 .cp-time-group::before,
    #cp-step-1 .cp-duration-group::before,
    #cp-step-1 .cp-flight-row::before,
    #cp-step-1 .cp-group:has(#cp-passengers)::before,
    #cp-step-1 .cp-group:has(#cp-luggage)::before {
        left: 6px !important;
        width: 18px !important;
        height: 18px !important;
    }

    /* Chevron icons on date/time: shift inward */
    #cp-step-1 .cp-date-group::after,
    #cp-step-1 .cp-time-group::after {
        right: 8px !important;
        width: 14px !important;
        height: 14px !important;
    }

    /* Stepper -- match mobile input height + left padding */
    #cp-step-1 .cp-stepper {
        padding-left: 30px !important;
        height: 56px !important;
    }

    #cp-step-1 .cp-group:has(.cp-stepper) > label {
        left: 30px !important;
    }

    /* Add a Stop, checkbox, hint, wait notice -- align to 30px */
    .cp-widget-wrapper #cp-step-1 .cp-add-stop-group button.cp-add-stop-btn,
    .cp-widget-wrapper #cp-step-1 .cp-add-stop-group button.cp-add-stop-btn:hover,
    .cp-widget-wrapper #cp-step-1 .cp-add-stop-group button.cp-add-stop-btn:focus,
    .cp-widget-wrapper #cp-step-1 .cp-add-stop-group button.cp-add-stop-btn:active {
        padding-left: 6px !important;
    }

    #cp-step-1 .cp-return-toggle {
        padding-left: 4px !important;
    }

    #cp-step-1 .cp-return-hint {
        padding-left: 28px !important;
    }

    #cp-step-1 .cp-wait-notice {
        padding-left: 30px !important;
    }

    /* Stop limit message -- align with field placeholder text */
    .cp-widget-wrapper .cp-stop-limit-msg {
        padding-left: 30px !important;
    }

    /* Passengers/Luggage SVGs -- slightly larger on mobile to match field icons */
    #cp-step-1 .cp-group:has(#cp-passengers)::before,
    #cp-step-1 .cp-group:has(#cp-luggage)::before {
        width: 20px !important;
        height: 20px !important;
    }

    #cp-step-1 .cp-btn-primary,
    .cp-btn-primary#cp-get-rates {
        height: 48px !important;
        font-size: 16px !important;
        line-height: 48px !important;
    }

    /* Reduce field height on small screens */
    #cp-step-1 .cp-input-wrap input[type="text"],
    #cp-step-1 .cp-group input[type="text"],
    #cp-step-1 .cp-date-group input[type="text"],
    #cp-step-1 .cp-time-group input[type="text"] {
        height: 56px !important;
    }
}

/* ================================================================
   STEPS 2–4  ·  MODERN LUXURY RESKIN
   ──────────────────────────────────────────────────────────────────
   Design DNA inherited from Step 1:
     Poppins · #F0F2F7 field bg · 64px inputs · floating labels
     4px radius · dark primary #181A1F · accent #866656
     transparent-border → dark-border-on-focus · clean elevation
   ================================================================ */

/* ================================================================
   M-1  FORM BODY -- Generous padding, Poppins everywhere
   ================================================================ */
#cp-step-2 .cp-form-body,
#cp-step-3 .cp-form-body,
#cp-step-4 .cp-form-body {
    padding: 20px 16px !important;
    font-family: var(--cp-font) !important;
}

/* ================================================================
   M-2  REVIEW CARDS -- White elevated panels, clean border
   ================================================================ */
.cp-widget-wrapper .cp-review-card {
    border: 1px solid #E5E7EB !important;
    border-radius: var(--cp-radius) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
}

.cp-widget-wrapper .cp-review-card-header {
    background: transparent !important;
    padding: 12px 16px 2px !important;
    border-bottom: none !important;
    font-family: var(--cp-font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--cp-label-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

.cp-widget-wrapper .cp-review-card-header span {
    font-family: var(--cp-font) !important;
}

.cp-widget-wrapper .cp-edit-btn,
.cp-widget-wrapper .cp-edit-btn:hover,
.cp-widget-wrapper .cp-edit-btn:focus {
    color: var(--cp-text-muted) !important;
    font-size: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--cp-radius) !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

/* Pencil SVG icon via CSS */
.cp-widget-wrapper .cp-edit-btn::before {
    content: "" !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    background: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E") !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
}

.cp-widget-wrapper .cp-edit-btn:hover {
    background: var(--cp-field-bg) !important;
    color: var(--cp-text-primary) !important;
}

.cp-widget-wrapper .cp-review-card-body {
    padding: 4px 16px 12px !important;
    font-family: var(--cp-font) !important;
}

.cp-widget-wrapper .cp-review-row {
    font-family: var(--cp-font) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.cp-widget-wrapper .cp-review-row .cp-rlabel {
    color: var(--cp-text-muted) !important;
    font-family: var(--cp-font) !important;
    font-weight: 400 !important;
}

.cp-widget-wrapper .cp-review-row .cp-rvalue {
    color: var(--cp-text-primary) !important;
    font-family: var(--cp-font) !important;
    font-weight: 400 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
}

.cp-widget-wrapper .cp-review-divider {
    border-color: var(--cp-field-bg) !important;
    margin: 6px 0 !important;
}

/* Review vehicle image -- constrained and centered */
.cp-widget-wrapper .cp-review-vehicle-img {
    border-radius: var(--cp-radius) !important;
}

/* ================================================================
   M-3  VEHICLE CARDS -- Premium configurator feel
   ================================================================ */
.cp-widget-wrapper .cp-tier-grid {
    gap: 12px !important;
}

.cp-widget-wrapper .cp-tier-card {
    border: 2px solid var(--cp-field-bg) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    overflow: hidden !important;
}

.cp-widget-wrapper .cp-tier-card:hover {
    border-color: #C8CAD0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

.cp-widget-wrapper .cp-tier-card.cp-tier-selected {
    border-color: var(--cp-text-primary) !important;
    box-shadow: 0 0 0 1px var(--cp-text-primary), 0 8px 24px rgba(0, 0, 0, 0.10) !important;
    background: #ffffff !important;
    transform: none !important;
}

.cp-widget-wrapper .cp-tier-check {
    color: var(--cp-text-primary) !important;
}

.cp-widget-wrapper .cp-tier-card-header {
    font-family: var(--cp-font) !important;
    padding: 16px 20px 0 !important;
}

.cp-widget-wrapper .cp-tier-card-label {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
}

.cp-widget-wrapper .cp-tier-card-label-up {
    color: var(--cp-accent) !important;
}

.cp-widget-wrapper .cp-tier-badge {
    background: var(--cp-text-primary) !important;
    color: #ffffff !important;
    border-radius: 2px !important;
    font-family: var(--cp-font) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 3px 8px !important;
}

.cp-widget-wrapper .cp-tier-card-img {
    padding: 12px 20px !important;
    background: transparent !important;
    min-height: 120px !important;
}

.cp-widget-wrapper .cp-tier-card-img img {
    mix-blend-mode: multiply !important;
}

.cp-widget-wrapper .cp-tier-card-body {
    padding: 0 20px !important;
}

.cp-widget-wrapper .cp-tier-card-name {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-top: 14px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cp-widget-wrapper .cp-tier-card-name,
.cp-widget-wrapper h4.cp-tier-card-name {
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cp-widget-wrapper .cp-tier-card-models {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-muted) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
}

.cp-widget-wrapper .cp-tier-card-meta {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 16px !important;
    margin-top: 10px !important;
}

.cp-widget-wrapper .cp-car-meta-icon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: var(--cp-font) !important;
}

.cp-widget-wrapper .cp-car-meta-icon svg {
    opacity: 0.6 !important;
}

.cp-widget-wrapper .cp-tier-card-price {
    border-top: 1px solid var(--cp-field-bg) !important;
    padding: 14px 20px 16px !important;
    margin-top: auto !important;
    font-family: var(--cp-font) !important;
}

.cp-widget-wrapper .cp-tier-card-price .cp-car-price {
    color: var(--cp-text-primary) !important;
    font-family: var(--cp-font) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
}

.cp-widget-wrapper .cp-tier-card-price .cp-car-price-currency {
    color: var(--cp-text-muted) !important;
    font-family: var(--cp-font) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.cp-widget-wrapper .cp-tier-card-price .cp-car-price-note {
    color: var(--cp-text-muted) !important;
    font-family: var(--cp-font) !important;
    font-size: 11px !important;
}

.cp-widget-wrapper .cp-tier-card-price .cp-car-discount {
    color: #059669 !important;
    font-family: var(--cp-font) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* More vehicles -- ghost button */
.cp-widget-wrapper .cp-btn-more-vehicles {
    font-family: var(--cp-font) !important;
    border: 2px solid var(--cp-field-bg) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--cp-text-muted) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: border-color 0.15s ease, color 0.15s ease !important;
    padding: 14px 16px !important;
    margin-top: 10px !important;
}

.cp-widget-wrapper .cp-btn-more-vehicles:hover {
    border-color: var(--cp-text-muted) !important;
    color: var(--cp-text-primary) !important;
    background: transparent !important;
}

.cp-widget-wrapper .cp-btn-more-vehicles.cp-btn-text-only {
    border: none !important;
}

/* ================================================================
   M-4  PRIMARY BUTTONS -- Accent-filled, 52px, bold
   ================================================================ */
.cp-widget-wrapper .cp-btn-primary {
    display: block !important;
    width: 100% !important;
    font-family: var(--cp-font) !important;
    border-radius: 8px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    height: 52px !important;
    line-height: 52px !important;
    padding: 0 16px !important;
    background: var(--cp-accent) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease !important;
    text-align: center !important;
}

.cp-widget-wrapper .cp-btn-primary:hover {
    opacity: 0.92 !important;
    background: var(--cp-accent) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.cp-widget-wrapper .cp-btn-primary:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Back button -- ghost, matches button row height */
.cp-widget-wrapper .cp-btn-back {
    font-family: var(--cp-font) !important;
    border-radius: 8px !important;
    background: var(--cp-field-bg) !important;
    color: var(--cp-text-primary) !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    height: 52px !important;
    line-height: 52px !important;
    padding: 0 20px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.cp-widget-wrapper .cp-btn-back:hover {
    background: #E5E7EB !important;
    color: var(--cp-text-primary) !important;
    box-shadow: none !important;
}

/* Small buttons (Apply promo, etc.) */
.cp-widget-wrapper .cp-btn-sm {
    font-family: var(--cp-font) !important;
    border-radius: var(--cp-radius) !important;
    background: var(--cp-text-primary) !important;
    color: #ffffff !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    border: none !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease !important;
}

.cp-widget-wrapper .cp-btn-sm:hover {
    opacity: 0.85 !important;
    background: var(--cp-text-primary) !important;
    color: #ffffff !important;
}

/* Navigation row */
.cp-widget-wrapper .cp-nav-buttons {
    margin-top: 24px !important;
    gap: 10px !important;
}

/* ================================================================
   M-5  BOOK-FOR TOGGLE -- Solid buttons, flat bottom corners
   ================================================================ */
.cp-widget-wrapper #cp-step-3 .cp-type-toggle {
    display: flex !important;
    height: auto !important;
    border: none !important;
    gap: 8px !important;
    margin-top: 20px !important;
    margin-bottom: 24px !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}

/* Book-for buttons: solid fill, flat bottom corners, no bottom border on unselected */
.cp-widget-wrapper .cp-book-for-btn {
    font-family: var(--cp-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    border: 2px solid #e5e7eb !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    background: #fff !important;
    color: var(--cp-text-primary) !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    flex: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: center !important;
}

.cp-widget-wrapper .cp-book-for-btn:hover {
    border-color: #d1d5db !important;
    background: #f9fafb !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
}

.cp-widget-wrapper .cp-book-for-btn:focus {
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
}

.cp-widget-wrapper .cp-book-for-btn.cp-active,
.cp-widget-wrapper .cp-book-for-btn.cp-active:hover,
.cp-widget-wrapper .cp-book-for-btn.cp-active:focus {
    background: var(--cp-accent, #2271b1) !important;
    border: 2px solid var(--cp-accent, #2271b1) !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    color: #fff !important;
}

/* ================================================================
   M-6  SECTION DIVIDERS -- Subtle uppercase, thin rule
   ================================================================ */
.cp-widget-wrapper .cp-section-divider {
    font-family: var(--cp-font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--cp-text-muted) !important;
    letter-spacing: 0.6px !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding-bottom: 8px !important;
    margin: 24px 0 16px !important;
}

/* ================================================================
   M-7  FORM FIELDS -- 64px, floating labels inside gray bg
        Mirrors Step 1 field treatment exactly
   ================================================================ */

/* --- Group positioning for floating labels --- */
#cp-step-3 .cp-group,
#cp-step-4 .cp-group {
    position: relative !important;
    margin-bottom: 12px !important;
}

/* --- Floating labels (absolute inside the field) --- */
#cp-step-3 .cp-group > label,
#cp-step-4 .cp-group > label {
    position: absolute !important;
    top: 10px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 2 !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    font-family: var(--cp-font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--cp-label-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* --- Text inputs -- 64px, gray bg, padding for floating label --- */
#cp-step-3 .cp-group input[type="text"],
#cp-step-3 .cp-group input[type="email"],
#cp-step-4 .cp-group input[type="text"],
#cp-step-4 .cp-group input[type="email"] {
    height: 64px !important;
    background: var(--cp-field-bg) !important;
    border: 2px solid transparent !important;
    border-radius: var(--cp-radius) !important;
    padding: 28px 14px 8px 14px !important;
    font-size: 14px !important;
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Textarea -- taller, same treatment --- */
#cp-step-3 .cp-group textarea {
    background: var(--cp-field-bg) !important;
    border: 2px solid transparent !important;
    border-radius: var(--cp-radius) !important;
    padding: 32px 14px 10px 14px !important;
    font-size: 14px !important;
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
    outline: none !important;
    box-shadow: none !important;
    min-height: 90px !important;
    resize: vertical !important;
}

/* --- Hover -- darken bg (target .cp-group:hover so label area triggers it too) --- */
#cp-step-3 .cp-group:hover input[type="text"],
#cp-step-3 .cp-group:hover input[type="email"],
#cp-step-3 .cp-group:hover textarea,
#cp-step-4 .cp-group:hover input[type="text"],
#cp-step-4 .cp-group:hover input[type="email"] {
    background: #E5E7EB !important;
}

/* --- Focus -- white bg + dark border (also override group:hover bg) --- */
#cp-step-3 .cp-group input[type="text"]:focus,
#cp-step-3 .cp-group input[type="email"]:focus,
#cp-step-3 .cp-group input[type="tel"]:focus,
#cp-step-3 .cp-group textarea:focus,
#cp-step-4 .cp-group input[type="text"]:focus,
#cp-step-4 .cp-group input[type="email"]:focus,
#cp-step-3 .cp-group:hover input[type="text"]:focus,
#cp-step-3 .cp-group:hover input[type="email"]:focus,
#cp-step-3 .cp-group:hover textarea:focus,
#cp-step-4 .cp-group:hover input[type="text"]:focus,
#cp-step-4 .cp-group:hover input[type="email"]:focus {
    border-color: var(--cp-text-primary) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* --- Placeholders --- */
#cp-step-3 .cp-group input::placeholder,
#cp-step-3 .cp-group textarea::placeholder,
#cp-step-4 .cp-group input::placeholder {
    color: var(--cp-text-muted) !important;
    font-family: var(--cp-font) !important;
}

/* --- Autofill override -- prevent browser blue/lavender bg --- */
#cp-step-3 .cp-group input:-webkit-autofill,
#cp-step-3 .cp-group textarea:-webkit-autofill,
#cp-step-4 .cp-group input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--cp-field-bg) inset !important;
    -webkit-text-fill-color: var(--cp-text-primary) !important;
    transition: background-color 5000s ease-in-out 0s !important;
    font-family: var(--cp-font) !important;
}

/* Autofill + hover -- use hover color, not default bg */
#cp-step-3 .cp-group:hover input:-webkit-autofill,
#cp-step-3 .cp-group:hover textarea:-webkit-autofill,
#cp-step-4 .cp-group:hover input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #E5E7EB inset !important;
}

/* Autofill + focus -- white bg */
#cp-step-3 .cp-group input:-webkit-autofill:focus,
#cp-step-4 .cp-group input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* --- 2-column row --- */
#cp-step-3 .cp-row-2col,
#cp-step-4 .cp-row-2col {
    gap: 6px !important;
    margin-bottom: 12px !important;
}

#cp-step-3 .cp-row-2col > .cp-group,
#cp-step-4 .cp-row-2col > .cp-group {
    margin-bottom: 0 !important;
}

/* ================================================================
   M-8  PHONE FIELD -- Two-row card: label row + input row
        ┌─────────────────────────────────┐
        │  📞  Phone Number *             │
        ├─────────────────────────────────┤
        │  🇺🇸 +1 ▾  │  555-555-5555     │
        └─────────────────────────────────┘
   ================================================================ */

/* The .cp-group becomes the card container */
#cp-step-3 .cp-group:has(.cp-phone-wrap),
#cp-step-4 .cp-group:has(.cp-phone-wrap) {
    background: var(--cp-field-bg) !important;
    border: 2px solid transparent !important;
    border-radius: var(--cp-radius) !important;
    padding: 0 !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

#cp-step-3 .cp-group:has(.cp-phone-wrap):hover,
#cp-step-4 .cp-group:has(.cp-phone-wrap):hover {
    background: #E5E7EB !important;
}

/* Force country trigger transparent on phone group hover so group bg shows through */
#cp-step-3 .cp-group:has(.cp-phone-wrap):hover .cp-country-trigger,
#cp-step-4 .cp-group:has(.cp-phone-wrap):hover .cp-country-trigger,
[class*="elementor-kit"] .cp-widget-wrapper .cp-group:has(.cp-phone-wrap):hover .cp-country-trigger {
    background: transparent !important;
    background-color: transparent !important;
}

#cp-step-3 .cp-group:has(.cp-phone-wrap):focus-within,
#cp-step-4 .cp-group:has(.cp-phone-wrap):focus-within {
    border-color: var(--cp-text-primary) !important;
    background: #ffffff !important;
}

/* Row 1: Label with phone icon -- static, not floating */
#cp-step-3 .cp-group:has(.cp-phone-wrap) > label,
#cp-step-4 .cp-group:has(.cp-phone-wrap) > label {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px 4px !important;
    border-bottom: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    right: auto !important;
}


/* Row 2: Phone wrap -- no bg, no border, sits inside the card */
.cp-widget-wrapper .cp-phone-wrap {
    height: 44px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: stretch !important;
}

.cp-widget-wrapper .cp-phone-wrap:hover {
    background: transparent !important;
}

.cp-widget-wrapper .cp-phone-wrap:focus-within {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Country trigger -- left cell (high specificity to beat Elementor isolation) */
.cp-widget-wrapper .cp-phone-wrap .cp-country-trigger,
.cp-widget-wrapper .cp-phone-wrap .cp-country-trigger:hover,
.cp-widget-wrapper .cp-phone-wrap .cp-country-trigger:focus,
.elementor-kit-5 .cp-widget-wrapper .cp-country-trigger,
.elementor-kit-5 .cp-widget-wrapper .cp-country-trigger:hover,
.elementor-kit-5 .cp-widget-wrapper .cp-country-trigger:focus,
[class*="elementor-kit"] .cp-widget-wrapper .cp-country-trigger,
[class*="elementor-kit"] .cp-widget-wrapper .cp-country-trigger:hover,
[class*="elementor-kit"] .cp-widget-wrapper .cp-country-trigger:focus,
.elementor-kit-5 .cp-widget-wrapper .cp-phone-wrap .cp-country-trigger,
.elementor-kit-5 .cp-widget-wrapper .cp-phone-wrap .cp-country-trigger:hover,
.elementor-kit-5 .cp-widget-wrapper .cp-phone-wrap .cp-country-trigger:focus,
[class*="elementor-kit"] .cp-widget-wrapper .cp-phone-wrap .cp-country-trigger,
[class*="elementor-kit"] .cp-widget-wrapper .cp-phone-wrap .cp-country-trigger:hover,
[class*="elementor-kit"] .cp-widget-wrapper .cp-phone-wrap .cp-country-trigger:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-right: none !important;
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    height: 100% !important;
    padding: 0 8px 0 14px !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.cp-widget-wrapper .cp-country-flag {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.cp-widget-wrapper .cp-country-dial {
    font-family: var(--cp-font) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.cp-widget-wrapper .cp-country-caret {
    font-size: 10px !important;
    opacity: 0.5 !important;
    margin-left: 2px !important;
}

/* Phone input -- right cell (background-color beats isolation's background-color at higher specificity) */
#cp-step-3 .cp-widget-wrapper .cp-phone-wrap input[type="tel"],
#cp-step-4 .cp-widget-wrapper .cp-phone-wrap input[type="tel"],
.cp-widget-wrapper .cp-phone-wrap input[type="tel"] {
    background: transparent !important;
    background-color: transparent !important;
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    border: none !important;
    height: 100% !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    flex: 1 !important;
    min-width: 0 !important;
    outline: none !important;
}

.cp-widget-wrapper .cp-phone-wrap input[type="tel"]:-webkit-autofill,
.cp-widget-wrapper .cp-phone-wrap input[type="tel"]:-webkit-autofill:hover,
.cp-widget-wrapper .cp-phone-wrap input[type="tel"]:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--cp-field-bg) inset !important;
    -webkit-text-fill-color: var(--cp-text-primary) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.cp-widget-wrapper .cp-country-dropdown {
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
    font-family: var(--cp-font) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.cp-widget-wrapper .cp-country-search {
    font-family: var(--cp-font) !important;
    font-size: 13px !important;
    padding: 12px 14px !important;
    border: none !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-radius: 0 !important;
    background: var(--cp-field-bg) !important;
    color: var(--cp-text-primary) !important;
    outline: none !important;
}

.cp-widget-wrapper .cp-country-search::placeholder {
    color: var(--cp-text-muted) !important;
    font-family: var(--cp-font) !important;
}

.cp-widget-wrapper .cp-country-item {
    font-family: var(--cp-font) !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #F3F4F6 !important;
    transition: background 0.1s ease !important;
    color: var(--cp-text-primary) !important;
}

.cp-widget-wrapper .cp-country-item:last-child {
    border-bottom: none !important;
}

.cp-widget-wrapper .cp-country-item:hover,
.cp-widget-wrapper .cp-country-item.cp-cc-hover {
    background: var(--cp-field-bg) !important;
}

.cp-widget-wrapper .cp-country-item.cp-cc-selected {
    background: var(--cp-field-bg) !important;
    font-weight: 600 !important;
}

.cp-widget-wrapper .cp-country-item-dial {
    color: var(--cp-text-muted) !important;
    font-family: var(--cp-font) !important;
    font-size: 12px !important;
}

.cp-widget-wrapper .cp-country-sep {
    background: #E5E7EB !important;
}

/* ================================================================
   M-9  ADD-ONS / EXTRA SERVICES -- Premium option cards
   ================================================================ */

/* Extra Services label -- NOT a floating label, acts as section header */
#cp-step-3 #cp-extra-services-box > label,
#cp-step-4 #cp-extra-services-box > label {
    position: static !important;
    display: block !important;
    margin-bottom: 12px !important;
    margin-top: 8px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    right: auto !important;
}

.cp-widget-wrapper .cp-extra-services-box-inner {
    background: #ffffff !important;
    border: 1px solid var(--cp-field-bg) !important;
    border-radius: 8px !important;
    padding: 6px 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.cp-widget-wrapper .cp-addon-item {
    padding: 16px 4px !important;
    border-color: var(--cp-field-bg) !important;
    align-items: flex-start !important;
}


.cp-widget-wrapper .cp-addon-item:last-child {
    border-bottom: none !important;
}

.cp-widget-wrapper .cp-addon-label {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    font-size: 14px !important;
}

.cp-widget-wrapper .cp-addon-label strong {
    color: var(--cp-text-primary) !important;
    font-weight: 600 !important;
}

.cp-widget-wrapper .cp-addon-desc {
    color: var(--cp-text-muted) !important;
    font-family: var(--cp-font) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.cp-widget-wrapper .cp-addon-price {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.cp-widget-wrapper .cp-addon-item input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: var(--cp-text-primary) !important;
    border-radius: var(--cp-radius) !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.cp-widget-wrapper .cp-seat-types {
    background: var(--cp-field-bg) !important;
    border: none !important;
    border-radius: var(--cp-radius) !important;
    margin: 8px 0 2px 28px !important;
    padding: 10px 16px !important;
}

.cp-widget-wrapper .cp-seat-toggle {
    color: var(--cp-text-muted) !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}

.cp-widget-wrapper .cp-seat-toggle:hover {
    color: var(--cp-text-primary) !important;
}

/* ================================================================
   M-10  PROMO CODE -- Clean, minimal
   ================================================================ */
.cp-widget-wrapper .cp-promo-row {
    font-family: var(--cp-font) !important;
    padding-left: 0 !important;
    margin-bottom: 12px !important;
}

.cp-widget-wrapper .cp-link-btn,
.cp-widget-wrapper .cp-link-btn:hover,
.cp-widget-wrapper .cp-link-btn:focus {
    color: var(--cp-accent) !important;
    font-family: var(--cp-font) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.cp-widget-wrapper .cp-link-btn:hover {
    text-decoration: underline !important;
}

.cp-widget-wrapper .cp-promo-field {
    gap: 6px !important;
    margin-top: 10px !important;
}

.cp-widget-wrapper .cp-promo-field input {
    height: 48px !important;
    background: var(--cp-field-bg) !important;
    border: 2px solid transparent !important;
    border-radius: var(--cp-radius) !important;
    padding: 0 14px !important;
    font-family: var(--cp-font) !important;
    font-size: 14px !important;
    color: var(--cp-text-primary) !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

.cp-widget-wrapper .cp-promo-field input:hover {
    background: #E5E7EB !important;
}

.cp-widget-wrapper .cp-promo-field input:focus {
    border-color: var(--cp-text-primary) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

.cp-widget-wrapper .cp-promo-badge {
    font-family: var(--cp-font) !important;
    border-radius: 2px !important;
    font-weight: 600 !important;
}

.cp-widget-wrapper .cp-promo-remove {
    border-radius: 50% !important;
    background: var(--cp-field-bg) !important;
    color: var(--cp-text-muted) !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.cp-widget-wrapper .cp-promo-remove:hover {
    background: var(--cp-text-primary) !important;
    color: #ffffff !important;
}

/* ================================================================
   M-11  RUNNING TOTAL -- Elevated price breakdown
   ================================================================ */
.cp-widget-wrapper .cp-running-total {
    background: #ffffff !important;
    border: 1px solid var(--cp-field-bg) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-top: 20px !important;
    font-family: var(--cp-font) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.cp-widget-wrapper .cp-total-row {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-muted) !important;
    font-size: 14px !important;
}

.cp-widget-wrapper .cp-total-row .cp-discount-label {
    color: #059669 !important;
    font-weight: 500 !important;
}

.cp-widget-wrapper .cp-total-row.cp-total-final {
    background: var(--cp-text-primary) !important;
    border-radius: 0 0 8px 8px !important;
    font-family: var(--cp-font) !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    margin: 8px -16px -14px !important;
}

/* Total bar in review cards */
.cp-widget-wrapper .cp-review-row.cp-total-bar {
    background: var(--cp-text-primary) !important;
    border-radius: 0 0 var(--cp-radius) var(--cp-radius) !important;
    font-family: var(--cp-font) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

/* ================================================================
   M-12  STRIPE / PAYMENT -- Secure, premium feel
   ================================================================ */
.cp-widget-wrapper .cp-hold-notice {
    background: var(--cp-field-bg) !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 14px 16px !important;
    line-height: 1.6 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cp-widget-wrapper .cp-hold-notice .cp-hold-icon {
    color: var(--cp-text-muted) !important;
    flex-shrink: 0 !important;
}

.cp-widget-wrapper .cp-stripe-mount {
    border: 2px solid transparent !important;
    border-radius: var(--cp-radius) !important;
    background: var(--cp-field-bg) !important;
    padding: 16px !important;
    min-height: 52px !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

.cp-widget-wrapper .cp-stripe-mount:focus-within {
    border-color: var(--cp-text-primary) !important;
    background: #ffffff !important;
}

/* Payment group -- breathing room */
#cp-step-4 .cp-group:has(.cp-stripe-mount) {
    margin-top: 20px !important;
    margin-bottom: 16px !important;
}

/* Payment label -- static block above Stripe mount, aligned with review cards */
#cp-step-4 .cp-group:has(.cp-stripe-mount) > label {
    position: static !important;
    display: block !important;
    margin-bottom: 12px !important;
    padding-left: 16px !important;
    pointer-events: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    right: auto !important;
}

/* Stripe mandate replacement text */
.cp-widget-wrapper .cp-stripe-mandate {
    font-family: var(--cp-font) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: var(--cp-text-muted) !important;
    margin-top: 10px !important;
    text-align: center !important;
}

.cp-widget-wrapper .cp-express-wrap {
    margin-bottom: 12px !important;
}

#cp-express-checkout {
    min-height: 48px !important;
    border-radius: 8px !important;
}

.cp-widget-wrapper .cp-pay-divider {
    color: var(--cp-text-muted) !important;
    font-family: var(--cp-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    margin: 16px 0 !important;
}

.cp-widget-wrapper .cp-pay-divider::before,
.cp-widget-wrapper .cp-pay-divider::after {
    background: #E5E7EB !important;
}

.cp-widget-wrapper .cp-consent-section {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-muted) !important;
    font-size: 13px !important;
    margin: 20px 0 !important;
    text-align: center !important;
}

.cp-widget-wrapper .cp-consent-section label {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: auto !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    justify-content: center !important;
    right: auto !important;
    white-space: normal !important;
    overflow: visible !important;
}

.cp-widget-wrapper .cp-consent-section input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--cp-text-primary) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.cp-widget-wrapper .cp-consent-section a {
    color: var(--cp-accent) !important;
    font-weight: 500 !important;
}

/* ================================================================
   M-13  ERROR STATES -- All steps
   ================================================================ */
#cp-step-2 .cp-group input.cp-error,
#cp-step-3 .cp-group input.cp-error,
#cp-step-4 .cp-group input.cp-error,
#cp-step-3 .cp-group select.cp-error,
#cp-step-3 .cp-group textarea.cp-error {
    border: 1px solid #dc2626 !important;
    background: var(--cp-field-bg) !important;
}

.cp-widget-wrapper .cp-field-error {
    font-family: var(--cp-font) !important;
    font-size: 12px !important;
    color: #dc2626 !important;
}

/* Phone error -- target the .cp-group card wrapper, not the inner wrap */
#cp-step-3 .cp-group:has(.cp-phone-wrap.cp-phone-error),
#cp-step-4 .cp-group:has(.cp-phone-wrap.cp-phone-error) {
    border: 1px solid #dc2626 !important;
    background: var(--cp-field-bg) !important;
}

.cp-widget-wrapper .cp-phone-wrap.cp-phone-error {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ================================================================
   M-14  CONFIRMATION PAGE -- Modern clean
   ================================================================ */
.cp-widget-wrapper .cp-confirm-wrapper {
    font-family: var(--cp-font) !important;
}

.cp-widget-wrapper .cp-confirm-title {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cp-widget-wrapper .cp-confirm-icon {
    background: var(--cp-text-primary) !important;
    color: #ffffff !important;
}

.cp-widget-wrapper .cp-confirm-label {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-muted) !important;
}

.cp-widget-wrapper .cp-confirm-value {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
}

/* ================================================================
   M-15  RESPONSIVE -- Mobile (≤ 480px)
   ================================================================ */
@media (max-width: 480px) {

    /* Form body padding */
    #cp-step-2 .cp-form-body,
    #cp-step-3 .cp-form-body,
    #cp-step-4 .cp-form-body {
        padding: 14px 12px !important;
    }

    /* Buttons -- 48px on mobile */
    .cp-widget-wrapper .cp-btn-primary {
        height: 48px !important;
        font-size: 16px !important;
        line-height: 48px !important;
    }

    .cp-widget-wrapper .cp-btn-back {
        height: 48px !important;
        line-height: 48px !important;
        font-size: 14px !important;
    }

    /* Book-for tabs -- equal width on mobile */
    .cp-widget-wrapper .cp-book-for-btn {
        font-size: 13px !important;
        padding: 10px 12px !important;
        flex: 1 1 50% !important;
        text-align: center !important;
    }

    /* Fields -- 56px on mobile, 16px font to prevent iOS zoom */
    #cp-step-3 .cp-group input[type="text"],
    #cp-step-3 .cp-group input[type="email"],
    #cp-step-4 .cp-group input[type="text"],
    #cp-step-4 .cp-group input[type="email"] {
        height: 56px !important;
        font-size: 16px !important;
        touch-action: manipulation !important;
        padding: 24px 12px 6px 12px !important;
    }

    #cp-step-3 .cp-group textarea {
        font-size: 16px !important;
        touch-action: manipulation !important;
        padding: 28px 12px 8px 12px !important;
    }

    /* Floating labels shift on mobile */
    #cp-step-3 .cp-group > label,
    #cp-step-4 .cp-group > label {
        left: 12px !important;
    }

    /* Phone field -- 56px on mobile */
    .cp-widget-wrapper .cp-phone-wrap {
        height: 56px !important;
    }

    .cp-widget-wrapper .cp-phone-wrap input[type="tel"] {
        font-size: 16px !important;
        touch-action: manipulation !important;
    }

    .cp-widget-wrapper .cp-phone-wrap .cp-country-trigger,
    .cp-widget-wrapper .cp-country-dial {
        font-size: 16px !important;
    }

    /* Promo input */
    .cp-widget-wrapper .cp-promo-field input {
        height: 44px !important;
        font-size: 16px !important;
        touch-action: manipulation !important;
    }

    /* Vehicle cards -- single column */
    .cp-widget-wrapper .cp-tier-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Vehicle card image area -- smaller on mobile */
    .cp-widget-wrapper .cp-tier-card-img {
        min-height: 100px !important;
        padding: 10px 16px !important;
    }

    .cp-widget-wrapper .cp-tier-card-body {
        padding: 0 16px !important;
    }

    .cp-widget-wrapper .cp-tier-card-name {
        font-size: 15px !important;
    }

    .cp-widget-wrapper .cp-tier-card-price {
        padding: 12px 16px 14px !important;
    }

    .cp-widget-wrapper .cp-tier-card-price .cp-car-price {
        font-size: 20px !important;
    }

    /* Review cards -- tighter on mobile */
    .cp-widget-wrapper .cp-review-card {
        margin-bottom: 8px !important;
    }

    .cp-widget-wrapper .cp-review-card-header {
        padding: 10px 12px 2px !important;
    }

    .cp-widget-wrapper .cp-review-card-body {
        padding: 4px 12px 10px !important;
    }

    /* Nav buttons -- tighter on mobile */
    .cp-widget-wrapper .cp-nav-buttons {
        margin-top: 16px !important;
    }

    /* Hold notice -- smaller text */
    .cp-widget-wrapper .cp-hold-notice {
        font-size: 12px !important;
        padding: 12px 14px !important;
    }
}

/* ============================================================
   Option A: Review card labels/values — MUST be at end of file
   to override all prior rules (this file loads after booking-widget.css)
   ============================================================ */
.cp-widget-wrapper .cp-review-row .cp-rlabel {
    font-weight: 400 !important;
    color: #6b7280 !important;
}
.cp-widget-wrapper .cp-review-row .cp-rvalue {
    font-weight: 400 !important;
    color: #374151 !important;
}
/* Price breakdown values stay bold */
.cp-widget-wrapper #cp-review-price .cp-review-row .cp-rvalue {
    font-weight: 600 !important;
    color: #1a1a2e !important;
}
/* Total bar stays white/bold */
.cp-widget-wrapper .cp-review-row.cp-total-bar .cp-rlabel,
.cp-widget-wrapper .cp-review-row.cp-total-bar .cp-rvalue {
    color: #fff !important;
    font-weight: 700 !important;
}