/* ════════════════════════════════════════════
   Caravan Pricing Engine – Multi-Step Form CSS
   Matching Figma Design (Tab-Bar Stepper + Gray Box Fields)
   ════════════════════════════════════════════ */

:root {
    --cpe-primary: #4A6741;
    --cpe-primary-dark: #3B5535;
    --cpe-white: #ffffff;
    --cpe-off-white: #f8f9fa;
    --cpe-field-bg: #f1f3f5;
    --cpe-gray-200: #e9ecef;
    --cpe-gray-300: #dee2e6;
    --cpe-gray-500: #adb5bd;
    --cpe-gray-700: #495057;
    --cpe-gray-900: #212529;
    --cpe-text: #333333;
    --cpe-text-light: #6c757d;
    --cpe-radius: 6px;
    --cpe-transition: 0.3s ease;
    --cpe-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.cpe-mobile-br {
    display: none;
}

/* ──────────── 1. Form Wrapper ──────────── */
.cpe-form-wrapper {
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 24px 40px;
    font-family: var(--cpe-font);
}

/* ──────────── 2. Stepper (Tab-Bar Style) ──────────── */
.cpe-stepper {
    display: flex;
    justify-content: space-between; /* Added to support Figma spec on override */
    border: 1px solid var(--cpe-gray-200);
    border-radius: 8px; /* Default radius, will be 0 on override */
    overflow: hidden;
    margin-bottom: 40px;
    margin-top: 20px;
    background: var(--cpe-white);
    /* box-shadow: 0 1px 4px rgba(0,0,0,0.04); */
    /* Handled by override */
}

.cpe-stepper-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    position: relative;
    border-right: 1px solid var(--cpe-gray-200);
    transition: all var(--cpe-transition);
}

.cpe-stepper-item:last-child {
    border-right: none;
}

/* Green bottom bar for active & completed */
.cpe-stepper-item.active::after,
.cpe-stepper-item.completed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cpe-primary);
}

/* Circle */
.cpe-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--cpe-gray-200);
    color: var(--cpe-gray-500);
    transition: all var(--cpe-transition);
    flex-shrink: 0;
}

.cpe-stepper-item.active .cpe-step-circle,
.cpe-stepper-item.completed .cpe-step-circle {
    background: var(--cpe-primary);
    color: var(--cpe-white);
}

/* ──────────── 7. Divider Fixes ──────────── */
/* The user says divider is on left but should be... actually they see it weirdly.
   Let's ensure the separator is strictly on the RIGHT side of 1, 2, 3 (not last).
   The CSS I added to theme.css does: item:not(:last-child)::after { right: 0; }
   This should be correct. However, if direction is RTL or something, it might swap.
   Assuming LTR. 
   
   If the user meant "It's on the left OF THE NEXT ONE", that is the same visual spot.
   "instead of being on the right it's on the left between steps 1 and 2"
   
   Wait, if it's "on the left", maybe they want it on the left of the item?
   "Divider is on the left instead of the right" 
   Maybe they mean the active border?
   
   "this lines separating steps are half lines instead of full lines" -> addressed with height:40px.
   "Width 1175" -> addressed with container.
   
   Let's double check the active border sticking to bottom.
   I set items to `align-items: stretch` in container so they are full height (100px).
   Then `border-bottom` on the item should be at the very bottom of the white box.
*/

/* Active Styling for Get a Valuation Page specifically */
.page-get-a-valuation .cpe-stepper-item.active {
    /* Add bottom green border for active step as seen in image? */
    border-bottom: 5px solid var(--cpe-primary) !important;
    margin-bottom: -1px; /* Align perfectly */
}

.page-get-a-valuation .cpe-stepper-item.active .cpe-step-label {
    color: var(--cpe-primary);
    font-weight: 600;
}

.cpe-stepper-item.active .cpe-step-label {
    color: var(--cpe-primary);
    font-weight: 600;
}

.cpe-stepper-item.completed .cpe-step-label {
    color: var(--cpe-primary);
}

/* ──────────── 3. Step Panels ──────────── */
.cpe-step-panel {
    display: none;
    animation: cpeFadeIn 0.35s ease;
}

.cpe-step-panel.active {
    display: block;
}

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

.cpe-step-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--cpe-gray-900);
    margin-bottom: 32px;
    text-align: center;
}

.cpe-back-link {
    display: inline-block;
    font-size: 14px;
    color: var(--cpe-text-light);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color var(--cpe-transition);
}

.cpe-back-link:hover {
    color: var(--cpe-primary);
}

/* ──────────── 4. Form Fields (Gray Box Style) ──────────── */
.cpe-field {
    margin-bottom: 16px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* Add margin when manual input is shown below select */
.cpe-field input[style*="display: block"], 
.cpe-field input:not([style*="display: none"]) {
    margin-top: 12px;
}
/* Fix margin when inside manual group (swap mode) */
.cpe-manual-group input {
    margin-top: 0 !important;
}

/* Hide labels – using placeholder instead (Figma design) */
.cpe-field > label {
    display: none;
}

.cpe-field input[type="text"],
.cpe-field input[type="email"],
.cpe-field input[type="tel"],
.cpe-field select,
.cpe-field textarea {
    width: 100%;
    padding: 16px 18px;
    font-size: 15px;
    font-family: var(--cpe-font);
    color: var(--cpe-gray-900);
    background: var(--cpe-field-bg);
    border: 1.5px solid transparent;
    border-radius: var(--cpe-radius);
    outline: none;
    transition: border-color var(--cpe-transition), background var(--cpe-transition);
    -webkit-appearance: none;
}

.cpe-field input::placeholder,
.cpe-field textarea::placeholder {
    color: var(--cpe-gray-500);
}

.cpe-field input:focus,
.cpe-field select:focus,
.cpe-field textarea:focus {
    border-color: var(--cpe-primary);
    background: var(--cpe-white);
}

.cpe-field input.cpe-error,
.cpe-field select.cpe-error,
.cpe-field textarea.cpe-error {
    border-color: #dc3545;
}

/* Select dropdown arrow */
.cpe-field select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8.825L.35 3.175l.7-.7L6 7.425l4.95-4.95.7.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

/* Textarea */
.cpe-field textarea {
    resize: vertical;
    min-height: 110px;
}

/* ──────────── 5. Inline Field (Damp toggle) ──────────── */
.cpe-field-inline {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 520px;
}

.cpe-field-inline > label {
    margin-bottom: 0;
    font-size: 16px;
    color: var(--cpe-text);
    font-weight: 600;
    white-space: nowrap;
}

.cpe-toggle-group {
    display: flex;
    gap: 20px;
}

.cpe-toggle-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    color: var(--cpe-gray-700);
    font-weight: 500;
}

.cpe-toggle-option input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cpe-gray-300);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: all var(--cpe-transition);
}

.cpe-toggle-option input[type="radio"]:checked {
    border-color: var(--cpe-primary);
}

.cpe-toggle-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: var(--cpe-primary);
    border-radius: 50%;
}

/* ──────────── 6. Buttons ──────────── */
.cpe-actions {
    margin-top: 32px;
    text-align: center;
}

.cpe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 40px;
    background: var(--cpe-primary);
    color: var(--cpe-white);
    border: none;
    border-radius: var(--cpe-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--cpe-transition), transform 0.2s;
}

.cpe-btn:hover {
    background: var(--cpe-primary-dark);
    transform: translateY(-1px);
}

.cpe-btn:disabled {
    background: var(--cpe-gray-500);
    cursor: not-allowed;
    transform: none;
}

.cpe-btn.loading {
    opacity: 0.8;
    cursor: wait;
}

.cpe-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    background: transparent;
    border: 2px solid var(--cpe-gray-300);
    color: var(--cpe-text);
    border-radius: var(--cpe-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--cpe-transition);
    margin-left: 12px;
}

.cpe-btn-outline:hover {
    border-color: var(--cpe-gray-500);
    background: var(--cpe-gray-200);
}

/* ──────────── 7. Result Panel ──────────── */
.cpe-result-panel,
.cpe-nomatch-panel {
    text-align: center;
    padding: 20px 0;
    animation: cpeFadeIn 0.5s ease;
}

.cpe-result-heading {
    font-size: 26px;
    color: var(--cpe-gray-900);
    margin-bottom: 24px;
}

.cpe-price-box {
    background: var(--cpe-off-white);
    border: 2px solid var(--cpe-gray-200);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    display: inline-block;
    min-width: 280px;
}

.cpe-price-value {
    display: block;
    font-size: 42px;
    font-weight: 800;
    color: var(--cpe-primary);
    line-height: 1;
}

.cpe-price-note {
    font-size: 14px;
    color: var(--cpe-text-light);
    margin-bottom: 24px;
}

.cpe-result-actions {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.cpe-result-info {
    margin-top: 24px;
    font-size: 14px;
    color: var(--cpe-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cpe-info-dot {
    width: 8px;
    height: 8px;
    background: #28a745;
    border-radius: 50%;
    display: inline-block;
}

.cpe-nomatch-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--cpe-text);
    margin-bottom: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ──────────── 8. Decline Reason Panel ──────────── */
.cpe-decline-panel {
    text-align: center;
    animation: cpeFadeIn 0.35s ease;
}

.cpe-reason-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto 24px;
    text-align: left;
}

.cpe-reason-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--cpe-gray-200);
    border-radius: var(--cpe-radius);
    cursor: pointer;
    transition: all 0.2s;
    background: var(--cpe-white);
}

.cpe-reason-option:hover {
    border-color: var(--cpe-gray-500);
    background: var(--cpe-off-white);
}

.cpe-reason-option input[type="radio"] {
    margin: 0;
    accent-color: var(--cpe-primary);
}

.cpe-other-reason textarea {
    width: 100%;
    border: 1px solid var(--cpe-gray-300);
    border-radius: var(--cpe-radius);
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
}

/* Override btn for decline submit if needed */
.cpe-btn-submit-decline {
    background: var(--cpe-gray-700);
}
.cpe-btn-submit-decline:hover {
    background: var(--cpe-gray-900);
}

/* ──────────── 8. Manual Swap & Reset ──────────── */
.cpe-manual-group {
    display: none; /* Toggled by JS */
    align-items: center;
    gap: 8px;
    width: 100%;
}

.cpe-manual-group input {
    flex: 1;
}

.cpe-reset-btn {
    width: 48px;
    height: 48px;
    border: 1px solid var(--cpe-gray-300);
    background: var(--cpe-white);
    color: var(--cpe-text-light);
    border-radius: var(--cpe-radius);
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--cpe-transition);
    flex-shrink: 0;
    line-height: 1;
    padding-bottom: 4px; /* Adjust vertical center for x */
}

.cpe-reset-btn:hover {
    color: #dc3545;
    border-color: #dc3545;
    background: #fff5f5;
}

/* Ensure swap container keeps layout stable */
.cpe-field-swap {
    min-height: 52px; /* Prevent layout jump */
}

/* ──────────── 9. Responsive (Mobile) ──────────── */
@media (max-width: 768px) {
    /* 1. Force Full Width for Container */
    .page-get-a-valuation .ncb-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Force the wrapper to take full width */
    .cpe-form-wrapper {
        padding: 10px 0 30px; 
        width: 100%;
        max-width: 100vw;
        overflow: visible; /* Changed from hidden to visible */
        box-sizing: border-box;
    }

    /* 2. Stepper Layout - GRID IS SAFER FOR EQUAL COLUMNS */
    .cpe-stepper {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* Force 4 equal columns */
        width: 100%;
        margin-bottom: 24px;
        border: none;
        background: transparent;
        border-radius: 0;
        position: relative;
        padding: 0;
    }
    
    /* Continuous Bottom Line */
    .cpe-stepper::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--cpe-primary);
        z-index: 1;
    }

    /* Stepper Items */
    .cpe-stepper-item {
        padding: 0 0 10px 0;
        gap: 2px; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        border: none !important;
        background: transparent;
        position: relative;
        width: 100%;
        overflow: hidden; /* Hide overflow content if any */
    }
    
    .cpe-stepper-item::after { display: none !important; }
    
    /* Separators */
    .cpe-stepper-item:not(:last-child)::before {
        content: '';
        position: absolute;
        right: 0;
        top: 20%;
        height: 30%;
        width: 1px;
        background: var(--cpe-gray-300);
    }

    /* Circle Styling */
    .cpe-step-circle {
        width: 24px;
        height: 24px;
        font-size: 11px;
        margin-bottom: 2px;
        background: var(--cpe-primary);
        color: #fff;
    }

    /* Label Styling - Stacked Words via <br> */
    .cpe-step-label {
        font-size: 9px;
        line-height: 1.2;
        display: block; 
        text-align: center;
        width: 100%;
        color: var(--cpe-primary-dark);
        font-weight: 500;
        white-space: normal;
        margin: 0;
        padding: 0 1px;
    }
    
    /* Ensure the br tag works */
    .cpe-mobile-br {
        display: block;
        content: "";
        margin: 0;
    }
    
    /* Reset word spacing for the container, apply to text only */
    
    /* Content Area Padding */
    .cpe-field-inline,
    .cpe-field-row,
    .cpe-step-panel {
        padding-left: 16px; 
        padding-right: 16px;
        width: 100%;
        box-sizing: border-box; 
    }
    
    .cpe-field-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .cpe-field-row {
        flex-direction: column;
        gap: 16px;
    }
}