/* =============================================================
   PURECAR SELLER FLOW — VISUAL DESIGN ONLY

   Does NOT change:
   forms
   readonly
   disabled
   pointer-events
   z-index
   Javascript
   Stripe
   routes
   controllers
   submission
   validation
   ============================================================= */


/* BRAND COLOURS */

.sf-page{
    --sf-blue:#df1820 !important;
    --sf-blue-dark:#bf141b !important;
    --sf-green:#22a55b !important;
}

.pc-checkout-page{
    --pc-blue:#df1820 !important;
    --pc-blue-dark:#bf141b !important;
    --pc-green:#22a55b !important;
}

.vf-page{
    --vf-blue:#df1820 !important;
    --vf-blue-dark:#bf141b !important;
    --vf-green:#22a55b !important;
}

.aw-page{
    --aw-blue:#df1820 !important;
    --aw-blue-dark:#bf141b !important;
    --aw-green:#22a55b !important;
}


/* MAIN PAGE BACKGROUND */

.sf-page,
.pc-checkout-page,
.vf-page,
.aw-page{
    background:#f6f6f7 !important;
}


/* GREEN PROGRESS */

.sf-progress,
.pc-progress,
.vf-progress,
.aw-progress{
    background:#e1e3e4 !important;
}

.sf-progress span,
.pc-progress > span,
.vf-progress span,
.aw-progress span,
.aw-progress-fill{
    background:#22a55b !important;
}


/* ACTIVE STEP */

.sf-flow-chip.current,
.pc-flow-chip.current,
a.vf-chip.current,
.aw-flow-chip.current{
    background:#fff0f1 !important;
    border-color:#efb1b5 !important;
    color:#d71920 !important;
}


/* COMPLETED / INACTIVE STEPS */

.sf-flow-chip.done,
.pc-flow-chip.done,
a.vf-chip.done,
.aw-flow-chip.done{
    background:#f8f8f9 !important;
    border-color:#e1e2e4 !important;
    color:#555b62 !important;
}


/* REMOVE BLUE TINGE */

.sf-value-card,
.pc-summary-pane,
.pc-security-line,
.vf-note,
.aw-panel-soft,
.aw-vehicle,
.aw-publish-note,

.aw-gallery-box,
.aw-upload-progress{
    background:#f8f8f9 !important;
}


/* MAIN CARDS */

.sf-card,
.sf-option,
.sf-value-card,
.sf-form-card,
.pc-checkout-card,
.vf-card,
.aw-card,
.aw-panel,
.aw-vehicle,
.aw-photo-card,
.aw-review{
    border-color:#e1e2e4 !important;
}


/* PRIMARY BUTTONS */

.sf-btn-primary,
.pc-pay-btn,
.vf-btn,
.aw-btn-primary,
.aw-photo-button.primary{
    background:#df1820 !important;
    border-color:#df1820 !important;
    color:#fff !important;
}

.sf-btn-primary:hover,
.pc-pay-btn:hover,
.vf-btn:hover,
.aw-btn-primary:hover,
.aw-photo-button.primary:hover{
    background:#bf141b !important;
    border-color:#bf141b !important;
}


/* FEATURED SELLER OPTION */

.sf-option-featured{
    border-color:#ebc0c3 !important;
    background:#fff !important;
}

.sf-option-featured:hover{
    border-color:#df1820 !important;
}


/* RED ACCENTS */

.sf-badge{
    background:#fff0f1 !important;
    color:#d71920 !important;
}

.sf-option-featured .sf-icon,
.sf-icon{
    background:#f6f6f7 !important;
    color:#df1820 !important;
}

.sf-option-featured .sf-arrow,
.sf-arrow{
    background:#df1820 !important;
    color:#fff !important;
}


/* INPUT FOCUS — APPEARANCE ONLY */

.sf-field input:focus,
.pc-input:focus,
.pc-stripe-box.is-focused,
.vf-field input:focus,
.aw-field input:focus,
.aw-field textarea:focus{
    border-color:#e26f74 !important;
    box-shadow:
        0 0 0 3px rgba(223,24,32,.08)
        !important;
}


/* =============================================================
   DESKTOP ONLY
   Larger/readable but NOT the oversized version.
   ============================================================= */

@media(min-width:900px){

    /*
     * Content sits naturally around the middle of the available
     * desktop screen when it is short enough.
     */

    .sf-page,
    .pc-checkout-page,
    .vf-page,
    .aw-page{
        min-height:calc(100vh - 105px) !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        padding:18px 24px 28px !important;
    }


    /* ---------------------------------------------------------
       STEP 1–2
       --------------------------------------------------------- */

    .sf-wrap{
        width:min(1220px,calc(100vw - 48px)) !important;
        max-width:1220px !important;
        margin:auto !important;
    }

    .sf-card{
        padding:28px 30px !important;
        border-radius:19px !important;

        box-shadow:
            0 13px 36px rgba(18,22,28,.055)
            !important;
    }

    .sf-heading{
        font-size:38px !important;
        line-height:1.05 !important;
        color:#171717 !important;
    }

    .sf-sub{
        max-width:900px !important;

        font-size:16px !important;
        line-height:1.5 !important;

        color:#666b71 !important;
    }

    .sf-flow{
        margin-bottom:18px !important;
    }

    .sf-flow-chip{
        padding:7px 12px !important;
        font-size:12px !important;
    }


    /* STEP 1 selection boxes */

    .sf-options{
        gap:17px !important;
    }

    .sf-option{
        min-height:205px !important;
        padding:23px !important;
        border-radius:16px !important;
    }

    .sf-option-title{
        font-size:23px !important;
    }

    .sf-option-copy{
        font-size:15px !important;
        line-height:1.5 !important;
    }

    .sf-price{
        font-size:26px !important;
    }

    .sf-icon{
        width:42px !important;
        height:42px !important;
    }

    .sf-arrow{
        width:39px !important;
        height:39px !important;
    }


    /* STEP 2 */

    .sf-details-grid{
        grid-template-columns:.9fr 1.1fr !important;
        gap:18px !important;
    }

    .sf-value-card,
    .sf-form-card{
        min-height:0 !important;

        padding:23px !important;
        border-radius:16px !important;
    }

    .sf-value-card h2{
        font-size:24px !important;
    }

    .sf-big-price strong{
        font-size:42px !important;
    }

    .sf-benefit{
        font-size:14px !important;
        line-height:1.5 !important;
    }

    .sf-form-title{
        font-size:24px !important;
    }

    .sf-form-sub{
        font-size:14px !important;
        line-height:1.5 !important;
    }

    .sf-field label{
        font-size:14px !important;
    }

    .sf-field input{
        height:54px !important;
        font-size:16px !important;
    }

    .sf-btn{
        min-height:52px !important;
        font-size:15px !important;
    }


    /* ---------------------------------------------------------
       PAYMENT
       --------------------------------------------------------- */

    .pc-checkout-wrap{
        width:min(1120px,calc(100vw - 48px)) !important;
        max-width:1120px !important;
        margin:auto !important;
    }

    .pc-step-title{
        font-size:36px !important;
        color:#171717 !important;
    }

    .pc-flow-chip{
        padding:7px 12px !important;
        font-size:12px !important;
    }

    .pc-checkout-card{
        grid-template-columns:1.48fr .72fr !important;

        border-radius:18px !important;

        box-shadow:
            0 13px 36px rgba(18,22,28,.055)
            !important;
    }

    .pc-payment-pane{
        padding:24px 26px !important;
    }

    .pc-summary-pane{
        padding:24px !important;
    }

    .pc-section-title{
        font-size:21px !important;
        color:#171717 !important;
    }

    .pc-section-subtitle{
        font-size:14px !important;
    }

    .pc-field label{
        font-size:14px !important;
    }

    .pc-input,
    .pc-stripe-box{
        min-height:52px !important;
        font-size:16px !important;
    }

    .pc-pay-btn{
        min-height:52px !important;
        font-size:15px !important;
    }


    /* ---------------------------------------------------------
       VEHICLE
       --------------------------------------------------------- */

    .vf-wrap{
        width:min(980px,calc(100vw - 48px)) !important;
        max-width:980px !important;
        margin:auto !important;
    }

    .vf-card{
        padding:28px 30px !important;

        border-radius:18px !important;

        box-shadow:
            0 13px 36px rgba(18,22,28,.055)
            !important;
    }

    .vf-title{
        font-size:37px !important;
        color:#171717 !important;
    }

    .vf-sub{
        font-size:16px !important;
        line-height:1.5 !important;
    }

    .vf-field label{
        font-size:14px !important;
    }

    .vf-field input{
        height:54px !important;
        font-size:16px !important;
    }

    .vf-btn{
        height:52px !important;
        font-size:15px !important;
    }


    /* ---------------------------------------------------------
       STEPS 5–8
       --------------------------------------------------------- */

    .aw-wrap{
        width:min(1180px,calc(100vw - 48px)) !important;
        max-width:1180px !important;
        margin:auto !important;
    }

    .aw-card{
        padding:28px 30px !important;

        border-radius:19px !important;

        box-shadow:
            0 13px 36px rgba(18,22,28,.055)
            !important;
    }

    .aw-heading{
        font-size:37px !important;
        color:#171717 !important;
    }

    .aw-sub{
        font-size:16px !important;
        line-height:1.5 !important;
        margin-bottom:20px !important;
    }

    .aw-flow-chip{
        padding:7px 12px !important;
        font-size:12px !important;
    }

    .aw-detail-grid{
        gap:17px !important;
    }

    .aw-panel{
        padding:21px !important;
        border-radius:16px !important;
    }

    .aw-panel-title{
        font-size:21px !important;
    }

    .aw-panel-sub{
        font-size:14px !important;
    }

    .aw-field label{
        font-size:14px !important;
    }

    .aw-field input{
        height:54px !important;
        font-size:16px !important;
    }

    .aw-field textarea{
        min-height:120px !important;
        font-size:16px !important;
    }

    .aw-photo-card{
        padding:20px !important;
    }

    .aw-gallery-box{
        min-height:205px !important;
    }

    .aw-btn{
        min-height:52px !important;
        font-size:15px !important;
    }
}


/* =============================================================
   MOBILE
   NO SIZE OR LAYOUT OVERRIDES.
   Existing working mobile CSS remains in control.
   ============================================================= */


/* PURECAR_COVER_PHOTO_DISPLAY_FIX */
.aw-cover-preview{
    background-color:#f8f8f9 !important;
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
}

/* PURECAR_COVER_FULL_IMAGE_V1
   Show the COMPLETE selected cover image without cropping.
*/
.aw-cover-preview{
    background-size:contain !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-color:#f4f5f6 !important;
}

/* Keep preview proportion sensible on desktop */
@media (min-width:900px){
    .aw-cover-preview{
        min-height:300px !important;
        aspect-ratio:16 / 10 !important;
    }
}

/* Mobile keeps a useful height without becoming massive */
@media (max-width:899px){
    .aw-cover-preview{
        min-height:240px !important;
        aspect-ratio:4 / 3 !important;
    }
}


/* =========================================================
   PURECAR ADAPTIVE COVER PHOTO V2
   The selected photo determines the preview box ratio.
   No crop. No stretching. No forced 16:10 / 4:3.
   ========================================================= */

.aw-cover-preview.purecar-has-cover{
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:auto !important;

    padding:0 !important;

    background-image:none !important;
    background-color:#f4f5f6 !important;

    overflow:hidden !important;
}

.aw-cover-preview .purecar-cover-preview-img{
    display:block !important;

    width:100% !important;
    height:auto !important;

    max-width:100% !important;
    max-height:none !important;

    object-fit:contain !important;
    object-position:center !important;

    margin:0 !important;
    padding:0 !important;
}

/* Kill the previous fixed preview ratios once a photo exists */
@media (min-width:900px){
    .aw-cover-preview.purecar-has-cover{
        min-height:0 !important;
        aspect-ratio:auto !important;
    }
}

@media (max-width:899px){
    .aw-cover-preview.purecar-has-cover{
        min-height:0 !important;
        aspect-ratio:auto !important;
    }
}


/* =========================================================
   PURECAR ADAPTIVE COVER PHOTO V2
   The selected photo determines the preview box ratio.
   No crop. No stretching. No forced 16:10 / 4:3.
   ========================================================= */

.aw-cover-preview.purecar-has-cover{
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:auto !important;

    padding:0 !important;

    background-image:none !important;
    background-color:#f4f5f6 !important;

    overflow:hidden !important;
}

.aw-cover-preview .purecar-cover-preview-img{
    display:block !important;

    width:100% !important;
    height:auto !important;

    max-width:100% !important;
    max-height:none !important;

    object-fit:contain !important;
    object-position:center !important;

    margin:0 !important;
    padding:0 !important;
}

/* Kill the previous fixed preview ratios once a photo exists */
@media (min-width:900px){
    .aw-cover-preview.purecar-has-cover{
        min-height:0 !important;
        aspect-ratio:auto !important;
    }
}

@media (max-width:899px){
    .aw-cover-preview.purecar-has-cover{
        min-height:0 !important;
        aspect-ratio:auto !important;
    }
}


/* PURECAR_COVER_FIT_V3_START */

/*
 * Cover box stays tidy.
 * Actual photo scales INSIDE it.
 */
.aw-cover-preview{
    height:260px !important;
    min-height:260px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;

    background-color:#f3f4f5 !important;
    background-image:none !important;

    overflow:hidden !important;
}


.aw-cover-preview .purecar-cover-fit-image{
    display:none;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

    margin:0 !important;
    padding:0 !important;
}


.aw-cover-preview.has-image .purecar-cover-fit-image{
    display:block !important;
}


.aw-cover-preview.has-image .aw-cover-empty{
    display:none !important;
}


/*
 * Mobile: same behaviour, slightly shorter preview.
 */
@media(max-width:899px){

    .aw-cover-preview{
        height:220px !important;
        min-height:220px !important;
    }
}

/* PURECAR_COVER_FIT_V3_END */

/* =========================================================
   PURECAR COVER PHOTO — FINAL FIT FIX
   Whole photograph visible. Never crop or stretch.
   ========================================================= */

#coverBox.aw-cover-preview{
    height:260px !important;
    min-height:260px !important;
    max-height:260px !important;

    aspect-ratio:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:10px !important;

    overflow:hidden !important;

    background:#f3f4f5 !important;
    background-image:none !important;
}


/*
 * ID specificity deliberately overrides every earlier
 * adaptive/preview rule.
 */
#coverBox #purecarCoverImage,
#coverBox .purecar-cover-fit-image{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

    margin:0 !important;
    padding:0 !important;

    border-radius:10px !important;
}


/* Never allow the old background preview to return */
#coverBox.has-image,
#coverBox.purecar-has-cover{
    background-image:none !important;
}


/* Mobile */
@media(max-width:899px){

    #coverBox.aw-cover-preview{
        height:240px !important;
        min-height:240px !important;
        max-height:240px !important;
    }
}


/* =========================================================
   PURECAR COVER PHOTO
   ALWAYS SHOW 100% OF THE UPLOADED IMAGE
   ========================================================= */

#coverBox{
    position:relative !important;

    height:280px !important;
    min-height:280px !important;
    max-height:280px !important;

    padding:0 !important;

    overflow:hidden !important;

    background:#fff !important;
    background-image:none !important;

    display:block !important;
}


/*
 * The uploaded image fills the AVAILABLE AREA,
 * but object-fit:contain guarantees NONE of it is cropped.
 */
#coverBox #purecarCoverImage,
#coverBox .purecar-cover-fit-image{
    position:absolute !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;
    object-position:center center !important;

    background:#fff !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
}


/*
 * Absolutely prevent any previous background-image
 * preview code from cropping the photograph.
 */
#coverBox.has-image,
#coverBox.purecar-has-cover{
    background:#fff !important;
    background-image:none !important;
}


/* Hide empty instructions once a photo exists */
#coverBox.has-image #coverEmpty,
#coverBox.purecar-has-cover #coverEmpty{
    display:none !important;
}


/* Mobile */
@media(max-width:899px){

    #coverBox{
        height:260px !important;
        min-height:260px !important;
        max-height:260px !important;
    }
}