.elementor-2246 .elementor-element.elementor-element-a389f90{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-2246 .elementor-element.elementor-element-a389f90:not(.elementor-motion-effects-element-type-background), .elementor-2246 .elementor-element.elementor-element-a389f90 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-86c7604 );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2246 .elementor-element.elementor-element-6e6e10d{text-align:start;}.elementor-2246 .elementor-element.elementor-element-6e6e10d .elementor-heading-title{font-family:"Neue Haas Grotesk Display Pro", Sans-serif;font-size:62px;font-weight:700;line-height:1.2em;}.elementor-2246 .elementor-element.elementor-element-9c8b2e6{--display:flex;--min-height:65vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:80px;--padding-left:10px;--padding-right:10px;}@media(max-width:1024px){.elementor-2246 .elementor-element.elementor-element-6e6e10d .elementor-heading-title{font-size:45px;}}@media(max-width:767px){.elementor-2246 .elementor-element.elementor-element-6e6e10d .elementor-heading-title{font-size:36px;}}/* Start custom CSS for shortcode, class: .elementor-element-4830edd *//* 1. HIDE PLUGIN HEADERS */
.cpbs-main-content-step-1 .cpbs-header {
    display: none !important;
}

.cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:first-child > div > div {
    flex-wrap: nowrap !important;
    gap: 10px;
}

.cpbs-main-content-step-1 .cpbs-form-field {
    padding: 0 !important;
}

/* 2. THE MAIN WRAPPER (Handles the 2-row layout) */
.cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    padding: 20px !important;
}

/* 3. ROW 1: CAR PARK, ENTRY, AND EXIT */
.cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:nth-child(1) {
    width: 100% !important;
    display: flex !important;
    gap: 30px !important;
}

/* Move the 3rd group (Car Park) to the 1st position */
.cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:nth-child(1) > div:nth-child(3) {
    order: -1 !important;
}

/* Make Row 1 groups take equal space */
.cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:nth-child(1) > div {
    display: flex !important;
    flex: 1;
}

/* Ensure nested input wrappers span 100% */
.cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:nth-child(1) > div > div:nth-child(2) {
    display: flex !important;
    width: 100% !important;
    gap: 10px !important;
}

/* 4. ROW 2: COUPON AND BUTTON */
.cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:nth-child(2) {
    flex: 2.1 !important; /* Coupon width */
}

.cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:nth-child(3) {
    flex: 1 !important; /* Button width */
}

/* 5. INDIVIDUAL FIELD STYLING */
.cpbs-main-content-step-1 .cpbs-form-field {
    display: grid !important;
    grid-template-columns: 45px 1fr !important;
    grid-template-rows: 20px 1fr !important;
    background: #fff;
    border: 1px solid #ddd;
    min-height: 62px;
    align-items: center;
    flex: 1;
}

/* The Red Icon Box */
.cpbs-main-content-step-1 .cpbs-form-field::before {
    grid-row: 1 / span 2;
    background-color: #f09e48;
    color: white;
    font-family: "dashicons";
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    height: 100%;
        font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* 6. ASSIGN ICONS USING YOUR NEW CLASSES */
.cpbs-form-field.entry-date::before,
.cpbs-form-field.exit-date::before { 
    content: "\f073"; /* Calendar (fa-calendar-o) */
} 

.cpbs-form-field.entry-time::before,
.cpbs-form-field.exit-time::before { 
    content: "\f017"; /* Clock (fa-clock-o) */
} 

.cpbs-form-field.parking-space::before { 
    content: "\f3c5"; /* Home (fa-home) */
} 

.cpbs-form-field.coupon-code::before { 
    content: "\f02b"; /* Tag (fa-tag) */
}

/* 7. LABELS AND INPUTS STYLING */
.cpbs-main-content-step-1 .cpbs-form-field-label, 
.cpbs-main-content-step-1 .cpbs-form-field label {
    grid-column: 2;
    grid-row: 1;
    font-size: 10px !important;
    color: #999 !important;
    text-transform: uppercase;
    padding: 6px 10px 0 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1 !important;
}

.cpbs-main-content-step-1 .cpbs-form-field input,
.cpbs-main-content-step-1 .cpbs-form-field .ui-selectmenu-button {
    grid-column: 2;
    grid-row: 2;
    border: none !important;
    background: transparent !important;
    padding: 0 10px 6px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    color: #333 !important;
    height: auto !important;
    width: 100% !important;
}

/* 8. BUTTON STYLING */
.cpbs-main-content-step-1 input[type="submit"].cpbs-button {
    height: 62px !important;
    width: 100% !important;
    margin: 0 !important;
    background-color: #f09e48 !important;
    border: none !important;
    color: #fff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: 0.4s;
}
.cpbs-main-content-step-1 input[type="submit"].cpbs-button:hover{
    background-color: #1247bc !important;
}


.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel>div:first-child>div>div:first-child>div{
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel>div:first-child>div>div+div{
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

.cpbs-main .cpbs-main-content{
    margin: 0 !important;
}
.cpbs-main .cpbs-main-content>div>div:last-child{
     margin: 0 !important;
}
.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel>div:first-child>div{
    box-shadow: none !important;
}







/* --- STEP 3 FIELD BASE STYLING --- */

/* 1. Reset field for Grid + Red Box */
.cpbs-main-content-step-3 .cpbs-form-field {
    display: grid !important;
    grid-template-columns: 45px 1fr !important;
    grid-template-rows: 20px 1fr !important;
    background: #fff;
    border: 1px solid #ddd;
    min-height: 62px;
    align-items: center;
    padding: 0 !important;
    margin-bottom: 15px !important;
    overflow: hidden;
}

/* 2. Red Icon Box Base (FontAwesome 4) */
.cpbs-main-content-step-3 .cpbs-form-field::before {
    grid-row: 1 / span 2;
    background-color: #F09E48;
    color: white;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    height: 100%;
}

/* --- 3. SPECIFIC ICON ASSIGNMENT (By Position) --- */

/* SIGN IN SECTION icons */
.cpbs-client-form-sign-in .cpbs-form-field:nth-child(1)::before { content: "\f007"; } /* User (Login) */
.cpbs-client-form-sign-in .cpbs-form-field:nth-child(2)::before { content: "\f023"; } /* Lock (Password) */

/* CUSTOMER DETAILS (Sign Up) icons */
/* Row 1: First and Last Name */
.cpbs-client-form-sign-up .cpbs-clear-fix:nth-child(1) .cpbs-form-field:nth-child(1)::before { content: "\f007" !important; } /* First Name */
.cpbs-client-form-sign-up .cpbs-clear-fix:nth-child(1) .cpbs-form-field:nth-child(2)::before { content: "\f007" !important; } /* Last Name */

/* Row 2: Email and Phone */
.cpbs-client-form-sign-up .cpbs-clear-fix:nth-child(2) .cpbs-form-field:nth-child(1)::before { content: "\f0e0"; } /* Email */
.cpbs-client-form-sign-up .cpbs-clear-fix:nth-child(2) .cpbs-form-field:nth-child(2)::before { content: "\f095"; } /* Phone */

/* Row 3: License Plate */
.cpbs-client-form-sign-up .cpbs-clear-fix:nth-child(3) .cpbs-form-field::before { content: "\f015" !important; } /* Home Icon for License */

/* Row 4: Comments */
.cpbs-client-form-sign-up .cpbs-clear-fix:nth-child(4) .cpbs-form-field::before { content: "\f075" !important; } /* Comment bubble */

/* CREATE ACCOUNT SECTION (Bottom Panel) icons */
.cpbs-client-form-sign-up .cpbs-form-panel:last-child .cpbs-form-field:nth-child(1)::before { content: "\f007"; } /* Login */
.cpbs-client-form-sign-up .cpbs-form-panel:last-child .cpbs-form-field:nth-child(2)::before { content: "\f023"; } /* Password */
.cpbs-client-form-sign-up .cpbs-form-panel:last-child .cpbs-form-field:nth-child(3)::before { content: "\f023"; } /* Re-type Pass */


/* --- 4. LABELS AND INPUTS STYLING --- */
.cpbs-main-content-step-3 .cpbs-form-field label {
    grid-column: 2;
    grid-row: 1;
    font-size: 10px !important;
    color: #999 !important;
    text-transform: uppercase;
    padding: 6px 10px 0 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1 !important;
}

.cpbs-main-content-step-3 .cpbs-form-field input,
.cpbs-main-content-step-3 .cpbs-form-field textarea {
    grid-column: 2;
    grid-row: 2;
    border: none !important;
    background: transparent !important;
    padding: 0 10px 6px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    color: #333 !important;
    height: auto !important;
    width: 100% !important;
    outline: none !important;
}

/* Adjust Textarea for Comments */
.cpbs-main-content-step-3 .cpbs-form-field:has(textarea) {
    min-height: 100px;
}

/* Ensure side-by-side fields align with the icon */
.cpbs-main-content-step-3 .cpbs-form-field-width-50 {
    width: calc(50% - 10px) !important;
    float: left;
    margin-right: 10px;
}

.cpbs-main-content-step-3 .cpbs-form-field-width-33 {
    width: calc(33.33% - 10px) !important;
    float: left;
    margin-right: 10px;
}


.cpbs-main-content-step-3 .cpbs-form-panel .cpbs-form-panel-content{
    padding-top: 20px;
}


.cpbs-main-content-step-3  .cpbs-header.cpbs-header-style-3{
    margin-bottom:12px !important;
}

@media (max-width: 750px) {
    .cpbs-main-content-step-3 .cpbs-form-field-width-50 {
    width: 100% !important;
    
}

.cpbs-main-content-step-3 .cpbs-form-field-width-33 {
    width: 100% !important;

}
    
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Neue Haas Grotesk Display Pro';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://silverfoxparking.co.uk/wp-content/uploads/2026/03/NeueHaasDisplayRoman.ttf') format('truetype');
}
@font-face {
	font-family: 'Neue Haas Grotesk Display Pro';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://silverfoxparking.co.uk/wp-content/uploads/2026/03/NeueHaasDisplayMediu.ttf') format('truetype');
}
@font-face {
	font-family: 'Neue Haas Grotesk Display Pro';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://silverfoxparking.co.uk/wp-content/uploads/2026/03/NeueHaasDisplayBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Neue Haas Grotesk Display Pro';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://silverfoxparking.co.uk/wp-content/uploads/2026/03/NeueHaasDisplayBlack.ttf') format('truetype');
}
/* End Custom Fonts CSS */