/*
|--------------------------------------------------------------------------
| PURECAR SELLER FLOW VISUAL THEME
|--------------------------------------------------------------------------
|
| PRESENTATION ONLY.
|
| No pointer-events.
| No z-index.
| No position hacks.
| No JavaScript.
| No forms.
| No readonly/disabled changes.
| No Stripe behaviour.
|
*/


/* Brand colours */

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

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

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

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


/* Main sales-page neutral background */

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


/* Progress = green */

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


/* Active stage = soft red */

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


/* Remove old blue-tinted panels */

.sf-value-card,
.pc-summary-pane,
.vf-note,
.aw-panel-soft,
.aw-vehicle,
.aw-publish-note,
.aw-cover-preview,
.aw-gallery-box,
.aw-upload-progress{
    background:#f8f8f9 !important;
}


/* Neutral borders */

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


/* Main CTA = PureCar red */

.sf-btn-primary,
.pc-pay-btn,
.vf-btn,
.aw-btn-primary,
.aw-photo-button.primary{
    background:#d71920 !important;
    border-color:#d71920 !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:#b9151b !important;
    border-color:#b9151b !important;
}


/* Red 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:#dc7378 !important;
    box-shadow:
        0 0 0 3px rgba(215,25,32,.08)
        !important;
}


/*
|--------------------------------------------------------------------------
| DESKTOP
|--------------------------------------------------------------------------
|
| Moderate size only.
| No flex centring or interaction-related CSS.
|
*/

@media(min-width:900px){

    .sf-page,
    .pc-checkout-page,
    .vf-page,
    .aw-page{
        padding-top:20px !important;
        padding-bottom:30px !important;
    }


    /* Step 1–2 */

    .sf-wrap{
        width:min(
            1120px,
            calc(100% - 40px)
        ) !important;

        max-width:1120px !important;
    }

    .sf-card{
        padding:26px 28px !important;
    }

    .sf-heading{
        font-size:35px !important;
    }

    .sf-sub{
        font-size:16px !important;
    }

    .sf-option{
        padding:21px !important;
    }

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

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

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


    /* Payment */

    .pc-checkout-wrap{
        width:min(
            1040px,
            calc(100% - 40px)
        ) !important;

        max-width:1040px !important;
    }

    .pc-step-title{
        font-size:34px !important;
    }

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

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

    .pc-input,
    .pc-stripe-box{
        min-height:50px !important;
    }


    /* Vehicle */

    .vf-wrap{
        width:min(
            920px,
            calc(100% - 40px)
        ) !important;

        max-width:920px !important;
    }

    .vf-card{
        padding:25px 27px !important;
    }

    .vf-title{
        font-size:35px !important;
    }

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


    /* Steps 5–8 */

    .aw-wrap{
        width:min(
            1080px,
            calc(100% - 40px)
        ) !important;

        max-width:1080px !important;
    }

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

    .aw-heading{
        font-size:35px !important;
    }

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

    .aw-panel{
        padding:19px !important;
    }

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

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