/* =========================================================
   URBAN PRO AUTO CARE
   REQUEST QUOTE PAGE
   booking-form.css
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root{
    --upac-black:#050505;
    --upac-black-2:#0a0a0a;
    --upac-panel:#101010;
    --upac-panel-2:#151515;

    --upac-red:#d71920;
    --upac-red-bright:#ef2028;
    --upac-red-dark:#a90f15;

    --upac-white:#ffffff;
    --upac-text:#e8e8e8;
    --upac-muted:#8c8c8c;

    --upac-line:rgba(255,255,255,.10);
    --upac-line-light:rgba(255,255,255,.17);

    --upac-container:1240px;
    --upac-radius:2px;
}


/* =========================================================
   PAGE
========================================================= */

.upac-booking-page{
    position:relative;

    width:100%;
    min-height:100vh;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(215,25,32,.10),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #050505 0%,
            #080808 48%,
            #050505 100%
        );

    color:var(--upac-white);

    overflow:hidden;
}


/* =========================================================
   BOOKING SECTION
========================================================= */

.upac-booking-section{
    position:relative;
    z-index:1;

    width:100%;
    min-height:100vh;

    padding:
        clamp(115px,10vw,165px)
        clamp(20px,5vw,90px)
        clamp(80px,8vw,120px);
}


/* background line */

.upac-booking-section::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent 49.95%,
            rgba(255,255,255,.018) 50%,
            transparent 50.05%
        );

    z-index:-2;
}


/* red glow */

.upac-booking-section::after{
    content:"";

    position:absolute;

    width:550px;
    height:550px;

    right:-280px;
    bottom:-250px;

    border-radius:50%;

    background:rgba(215,25,32,.07);

    filter:blur(110px);

    pointer-events:none;

    z-index:-2;
}


/* =========================================================
   MAIN SHELL
   FULL WIDTH STACKED LAYOUT
========================================================= */

.upac-booking-shell{
    position:relative;
    z-index:2;

    width:min(100%,var(--upac-container));

    margin:0 auto;

    display:flex;
    flex-direction:column;

    align-items:stretch;

    gap:55px;
}


/* =========================================================
   INTRO
   FULL WIDTH
========================================================= */

.upac-booking-intro{
    position:relative;

    width:100%;
    min-width:0;

    padding:0;
}


/* =========================================================
   INTRO CONTENT
========================================================= */

.upac-booking-intro-content{
    width:100%;
    max-width:100%;
}


.upac-booking-kicker{
    margin:0 0 14px;

    color:var(--upac-red);

    font-family:"Bebas Neue",sans-serif;

    font-size:14px;
    font-weight:400;

    letter-spacing:3px;
    line-height:1;

    text-transform:uppercase;
}


.upac-booking-intro h1{
    margin:0;

    color:#fff;

    font-family:"Bebas Neue",sans-serif;

    font-size:clamp(60px,8vw,115px);
    font-weight:400;

    line-height:.84;
    letter-spacing:-1px;

    text-transform:uppercase;
}


.upac-booking-intro h1 span{
    display:inline-block;

    margin-left:12px;

    color:var(--upac-red);
}


.upac-booking-intro-content > p:not(.upac-booking-kicker){
    max-width:900px;

    margin:28px 0 0;

    color:var(--upac-muted);

    font-size:15px;
    font-weight:400;

    line-height:1.8;
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.upac-booking-contact{
    width:100%;

    margin-top:32px;

    padding-top:23px;

    border-top:1px solid var(--upac-line);

    display:flex;
    flex-wrap:wrap;

    align-items:center;

    gap:14px 40px;
}


.upac-booking-contact-item{
    display:flex;

    align-items:center;

    gap:12px;

    min-height:35px;

    color:var(--upac-text);

    font-size:14px;
    line-height:1.4;
}


.upac-booking-contact-item i{
    width:34px;
    height:34px;

    flex:0 0 34px;

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

    color:var(--upac-red);

    border:1px solid rgba(215,25,32,.35);

    background:rgba(215,25,32,.045);

    font-size:12px;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}


.upac-booking-contact-item:hover i{
    background:var(--upac-red);

    border-color:var(--upac-red);

    color:#fff;
}


.upac-booking-contact-item a{
    color:inherit;

    text-decoration:none;

    transition:color .25s ease;
}


.upac-booking-contact-item a:hover{
    color:var(--upac-red);
}


/* =========================================================
   FORM CARD
   FULL WIDTH
========================================================= */

.upac-booking-card{
    position:relative;

    width:100%;
    min-width:0;

    padding:
        clamp(28px,4vw,52px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    border:1px solid var(--upac-line);

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    overflow:hidden;
}


/* red top line */

.upac-booking-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--upac-red) 0%,
            var(--upac-red-dark) 35%,
            transparent 100%
        );
}


/* corner glow */

.upac-booking-card::after{
    content:"";

    position:absolute;

    width:250px;
    height:250px;

    top:-150px;
    right:-120px;

    border-radius:50%;

    background:rgba(215,25,32,.07);

    filter:blur(45px);

    pointer-events:none;
}


/* =========================================================
   FORM HEADING
========================================================= */

.upac-form-heading{
    position:relative;
    z-index:2;

    width:100%;

    margin-bottom:35px;
}


.upac-form-heading > span{
    display:block;

    margin-bottom:8px;

    color:var(--upac-red);

    font-family:"Bebas Neue",sans-serif;

    font-size:13px;
    font-weight:400;

    letter-spacing:2.5px;
    line-height:1;

    text-transform:uppercase;
}


.upac-form-heading h2{
    margin:0;

    color:#fff;

    font-family:"Bebas Neue",sans-serif;

    font-size:clamp(34px,4vw,55px);
    font-weight:400;

    line-height:.95;

    text-transform:uppercase;
}


.upac-form-heading p{
    max-width:700px;

    margin:13px 0 0;

    color:var(--upac-muted);

    font-size:14px;
    line-height:1.7;
}


/* =========================================================
   FORM
========================================================= */

.upac-service-form{
    position:relative;
    z-index:2;

    width:100%;
}


/* =========================================================
   FORM GRID
========================================================= */

.upac-form-grid{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:22px 22px;
}


/* =========================================================
   FIELD
========================================================= */

.upac-field{
    width:100%;
    min-width:0;
}


.upac-field-full{
    grid-column:1 / -1;
}


.upac-field label{
    display:block;

    margin:0 0 9px;

    color:#ededed;

    font-size:13px;
    font-weight:600;

    line-height:1.4;
}


.upac-field label span{
    color:#fff;
}


.upac-field label b{
    color:var(--upac-red);

    font-weight:600;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

.upac-field input,
.upac-field select,
.upac-field textarea{
    display:block;

    width:100%;
    min-width:0;

    margin:0;

    border:1px solid var(--upac-line-light);
    border-radius:var(--upac-radius);

    outline:none;

    background:#0a0a0a;
    color:#fff;

    font-family:Inter,system-ui,sans-serif;

    font-size:14px;
    font-weight:400;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


/* input */

.upac-field input,
.upac-field select{
    height:55px;

    padding:0 16px;
}


/* textarea */

.upac-field textarea{
    min-height:145px;

    padding:15px 16px;

    line-height:1.65;

    resize:vertical;
}


/* placeholder */

.upac-field input::placeholder,
.upac-field textarea::placeholder{
    color:#656565;

    opacity:1;
}


/* hover */

.upac-field input:hover,
.upac-field select:hover,
.upac-field textarea:hover{
    border-color:rgba(255,255,255,.28);
}


/* focus */

.upac-field input:focus,
.upac-field select:focus,
.upac-field textarea:focus{
    border-color:var(--upac-red);

    background:#0d0d0d;

    box-shadow:
        0 0 0 3px rgba(215,25,32,.09);
}


/* =========================================================
   SELECT
========================================================= */

.upac-field select{
    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;

    padding-right:48px;

    background-color:#0a0a0a;

    background-image:
        linear-gradient(45deg,transparent 50%,#888 50%),
        linear-gradient(135deg,#888 50%,transparent 50%);

    background-position:
        calc(100% - 20px) 23px,
        calc(100% - 15px) 23px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:no-repeat;
}


.upac-field select option{
    background:#111;
    color:#fff;
}


/* =========================================================
   SERVICES
========================================================= */

.upac-services-field{
    margin-top:3px;
}


.upac-services-label{
    display:flex !important;

    align-items:center;
    justify-content:space-between;

    gap:20px;
}


.upac-services-label > span{
    color:#ededed;
}


.upac-services-note{
    color:#686868;

    font-size:11px;
    font-weight:400;

    line-height:1.4;
}


/* =========================================================
   SERVICE OPTIONS
========================================================= */

.upac-service-options{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:10px;
}


.upac-service-option{
    position:relative;

    display:flex;

    width:100%;
    min-width:0;

    margin:0;

    cursor:pointer;
}


/* hide actual checkbox */

.upac-service-option input{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;

    pointer-events:none;
}


/* service box */

.upac-service-box{
    width:100%;
    min-height:58px;

    display:flex;

    align-items:center;

    padding:13px 16px;

    border:1px solid var(--upac-line);

    background:#0a0a0a;

    color:#cfcfcf;

    font-size:13px;
    font-weight:500;

    line-height:1.35;

    transition:
        border-color .25s ease,
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


/* checkbox square */

.upac-service-box::before{
    content:"";

    width:18px;
    height:18px;

    flex:0 0 18px;

    margin-right:12px;

    border:1px solid #555;

    background:#070707;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


/* hover */

.upac-service-option:hover .upac-service-box{
    border-color:rgba(215,25,32,.55);

    background:#0e0e0e;

    color:#fff;
}


/* checked */

.upac-service-option input:checked + .upac-service-box{
    border-color:var(--upac-red);

    background:
        linear-gradient(
            90deg,
            rgba(215,25,32,.13),
            rgba(215,25,32,.025)
        );

    color:#fff;
}


/* checked square */

.upac-service-option input:checked + .upac-service-box::before{
    border-color:var(--upac-red);

    background:
        radial-gradient(
            circle,
            var(--upac-red) 0 45%,
            transparent 48%
        );

    box-shadow:
        0 0 0 2px rgba(215,25,32,.08);
}


/* keyboard focus */

.upac-service-option input:focus-visible + .upac-service-box{
    outline:2px solid var(--upac-red);

    outline-offset:2px;
}


/* =========================================================
   FORM BOTTOM
========================================================= */

.upac-form-bottom{
    width:100%;

    margin-top:27px;

    padding-top:25px;

    border-top:1px solid var(--upac-line);

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:25px;
}


.upac-form-note{
    max-width:620px;

    margin:0;

    color:#707070;

    font-size:12px;
    font-weight:400;

    line-height:1.65;
}


.upac-form-note strong{
    color:#a7a7a7;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.upac-submit-btn{
    position:relative;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    min-width:245px;
    min-height:56px;

    padding:0 30px;

    border:1px solid var(--upac-red);
    border-radius:0;

    outline:none;

    background:var(--upac-red);
    color:#fff;

    cursor:pointer;

    overflow:hidden;

    font-family:"Bebas Neue",sans-serif;

    font-size:17px;
    font-weight:400;

    letter-spacing:1.5px;

    line-height:1;

    text-transform:uppercase;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.upac-submit-btn::before{
    content:"";

    position:absolute;
    inset:0;

    background:#fff;

    transform:translateX(-101%);

    transition:transform .35s ease;
}


.upac-submit-btn span,
.upac-submit-btn i{
    position:relative;
    z-index:2;
}


.upac-submit-btn i{
    margin-left:11px;

    font-size:12px;

    transition:
        color .3s ease,
        transform .3s ease;
}


.upac-submit-btn:hover{
    transform:translateY(-2px);

    border-color:#fff;

    box-shadow:
        0 12px 30px rgba(215,25,32,.20);
}


.upac-submit-btn:hover::before{
    transform:translateX(0);
}


.upac-submit-btn:hover span,
.upac-submit-btn:hover i{
    color:#111;
}


.upac-submit-btn:hover i{
    transform:translateX(5px);
}


.upac-submit-btn:active{
    transform:translateY(0);
}


.upac-submit-btn:focus-visible{
    outline:2px solid #fff;

    outline-offset:3px;
}


/* =========================================================
   VALIDATION
========================================================= */

.upac-field input:focus:invalid,
.upac-field select:focus:invalid,
.upac-field textarea:focus:invalid{
    border-color:var(--upac-red);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

    .upac-booking-section{
        padding:
            110px
            30px
            80px;
    }


    .upac-booking-intro h1{
        font-size:clamp(58px,10vw,90px);
    }


    .upac-booking-contact{
        gap:12px 25px;
    }


    .upac-booking-card{
        padding:35px 28px;
    }


    .upac-form-bottom{
        align-items:flex-start;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width:700px){

    .upac-booking-section{
        padding:
            100px
            20px
            70px;
    }


    .upac-booking-shell{
        gap:42px;
    }


    .upac-booking-intro h1{
        font-size:clamp(55px,12vw,78px);

        line-height:.86;
    }


    .upac-booking-intro h1 span{
        margin-left:8px;
    }


    .upac-booking-intro-content > p:not(.upac-booking-kicker){
        max-width:100%;

        margin-top:22px;

        font-size:14px;
    }


    .upac-booking-contact{
        margin-top:25px;

        padding-top:20px;

        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:12px;
    }


    .upac-booking-card{
        padding:30px 22px;
    }


    .upac-form-heading{
        margin-bottom:28px;
    }


    .upac-form-grid{
        grid-template-columns:1fr;

        gap:19px;
    }


    .upac-field-full{
        grid-column:auto;
    }


    .upac-service-options{
        grid-template-columns:1fr 1fr;
    }


    .upac-form-bottom{
        flex-direction:column;

        align-items:stretch;

        gap:20px;
    }


    .upac-form-note{
        max-width:100%;
    }


    .upac-submit-btn{
        width:100%;

        min-width:0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:520px){

    .upac-booking-section{
        padding:
            92px
            15px
            60px;
    }


    .upac-booking-shell{
        gap:36px;
    }


    .upac-booking-kicker{
        margin-bottom:11px;

        font-size:12px;

        letter-spacing:2.5px;
    }


    .upac-booking-intro h1{
        font-size:clamp(48px,15vw,68px);

        line-height:.86;
        letter-spacing:-.5px;
    }


    .upac-booking-intro h1 span{
        display:block;

        margin:4px 0 0;
    }


    .upac-booking-intro-content > p:not(.upac-booking-kicker){
        margin-top:20px;

        font-size:13px;

        line-height:1.7;
    }


    .upac-booking-contact{
        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

        margin-top:22px;
    }


    .upac-booking-contact-item{
        width:100%;

        font-size:13px;
    }


    .upac-booking-contact-item i{
        width:32px;
        height:32px;

        flex-basis:32px;
    }


    .upac-booking-card{
        padding:27px 17px;
    }


    .upac-form-heading{
        margin-bottom:25px;
    }


    .upac-form-heading > span{
        font-size:12px;

        letter-spacing:2px;
    }


    .upac-form-heading h2{
        font-size:34px;

        line-height:.92;
    }


    .upac-form-heading p{
        margin-top:10px;

        font-size:12px;

        line-height:1.65;
    }


    .upac-form-grid{
        gap:17px;
    }


    .upac-field label{
        margin-bottom:8px;

        font-size:12px;
    }


    .upac-field input,
    .upac-field select{
        height:52px;

        padding:0 14px;

        font-size:13px;
    }


    .upac-field textarea{
        min-height:125px;

        padding:13px 14px;

        font-size:13px;
    }


    .upac-services-label{
        align-items:flex-start;

        flex-direction:column;

        gap:4px;
    }


    .upac-services-note{
        font-size:10px;
    }


    .upac-service-options{
        grid-template-columns:1fr;

        gap:8px;
    }


    .upac-service-box{
        min-height:53px;

        padding:11px 13px;

        font-size:12px;
    }


    .upac-service-box::before{
        width:17px;
        height:17px;

        flex-basis:17px;

        margin-right:10px;
    }


    .upac-form-bottom{
        margin-top:21px;

        padding-top:20px;

        gap:17px;
    }


    .upac-form-note{
        font-size:10.5px;

        line-height:1.6;
    }


    .upac-submit-btn{
        min-height:53px;

        padding:0 20px;

        font-size:15px;

        letter-spacing:1.3px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:370px){

    .upac-booking-section{
        padding-left:12px;
        padding-right:12px;
    }


    .upac-booking-intro h1{
        font-size:45px;
    }


    .upac-booking-card{
        padding-left:14px;
        padding-right:14px;
    }


    .upac-form-heading h2{
        font-size:31px;
    }


    .upac-submit-btn{
        font-size:14px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    .upac-booking-contact-item i,
    .upac-booking-contact-item a,
    .upac-field input,
    .upac-field select,
    .upac-field textarea,
    .upac-service-box,
    .upac-submit-btn,
    .upac-submit-btn::before,
    .upac-submit-btn i{
        transition:none !important;
    }

}