#registration_form .step-section:not(:first-of-type) {
display: none;
}
/* Ensure only first step is visible on page load */
#registration_form .step-section[style*="display: none"] {
display: none;
}
#registration_form .step-section:first-of-type {
display: block;
}
.product_list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product_wrap,
.product_wrap_roro {
text-align: center;
margin: 10px;
padding: 10px;
border-radius: 15px;
border: 2px solid #e6e6e6;
position: relative;
overflow: hidden;
width: calc(25% - 20px);
}
/*.product_wrap:hover,
.product_wrap_roro:hover {
cursor: pointer;
background: #ab0e242e;
}*/
.product_wrap_roro:hover {
cursor: pointer;
background: #ab0e242e;
}
/*progressbar*/
#progressbar {
margin-bottom: 0;
/*background: #001e5040;*/
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding-inline-start: 0;
}
ul#progressbar li span {
display: block !important;
}
#progressbar li {
color: #000000;
text-transform: uppercase;
font-size: 12px;
width: 123px;
height: 123px;
position: relative;
letter-spacing: 1px;
text-align: center;
padding: 7px;
margin: 20px 20px;
background: #eef8ff;
border-radius: 50%;
font-weight: 800;
display: flex;
justify-content: center;
align-items: center;
}
#progressbar li.active {
background: #3f48cc !important;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 66%;
display: none;
height: 3px;
background: #eef8ff;
position: absolute;
left: -66%;
top: 50%;
z-index: 0;
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:after {
background: #3f48cc;
z-index: 0;
}
.booking_form_wrap {
border-radius: 4px;
}
.booking_form_wrap .step-section {
background: #cdcdcd;
padding: 30px !important;
text-align: center;
}
.error {
border: 2px solid red !important;
}
.ajax__loder {
position: absolute;
top: 50%;
left: 0;
right: 0;
/* margin-top: -32px; */
transform: translateY(-50%);
width: 100%;
text-align: center;
height: 100%;
background: #0000008a;
display: flex !important;
align-items: center;
text-align: center;
visibility: hidden;
}
.ajax__loder img {
margin: 0 auto;
}
.cart_item_wrap {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
padding: 20px;
border: 2px solid #fff;
border-radius: 4px;
max-width: 800px;
margin: 0 auto;
justify-content: center;
}
.product_img {
margin-right: 20px;
}
.cart_item_wrap .product_info {
/*margin: 15px;*/
/*padding: 10px;*/
text-align: left;
}
.booking_form_wrap select {
width: 100%;
height: 40px;
border-radius: 4px;
}
input#deliveryDate {
height: 40px;
}
/*.booking_form_wrap .nev-btn {
padding: 30px 0 0;
text-align: center;
}*/
.booking_form_wrap .nev-btn {
padding: 50px 0 0;
text-align: center;
display: flex;
justify-content: center;
gap: 20px;
}
input.previous.btn.btn-previous {
background: var(--skipit-secondary);
color: #fff;
border: 0;
border-radius: 25px;
padding: 12px 30px;
cursor: pointer;
font-weight: 600;
}
input.previous.btn.btn-previous:hover {
background: #fd8739;
}
input.next.btn.btn-next {
background: var(--skipit-primary-color);
color: #fff;
border: 0;
border-radius: 25px;
padding: 12px 30px;
cursor: pointer;
font-weight: 600;
}
input.next.btn.btn-next.btn-orange {
background: var(--skipit-primary-color);
border-radius: 25px;
padding: 12px 40px;
font-size: 15px;
font-weight: 600;
text-transform: capitalize;
}
input.next.btn.btn-next.btn-orange:hover {
background: #e56d20;
}
/* Step Card Layout */
/*.step-card {
max-width: 700px;
margin: 0 auto;
padding: 40px;
background: #fff;
border: 2px dashed #e5e7eb;
border-radius: 12px;
}*/
.step-card {
max-width: 1100px;
margin: 0 auto;
padding: 50px;
background: #fff;
border: 1px dashed #e5e7eb;
border-radius: 30px;
box-shadow: 0px 0px 50px 0px rgba(244, 127, 53, 0.1);
}
.step-section.step-3 .step-card {
max-width: 1530px;
}
.step-card .step_title {
text-align: left;
font-size: 24px;
font-weight: 600;
color: #1f2937;
margin-bottom: 30px;
padding-left: 0;
}
/* Step 1 specific layout - all fields in one row */
.step1-form-row {
display: flex;
gap: 15px;
align-items: center;
/*margin: 30px 0;*/
margin: 0px 0;
}
.step1-field {
flex: 1;
}
.tm-date-input {
position: relative;
overflow: hidden;
}
.tm-date-input input#deliveryDate {
padding-right: 40px;
}
.tm-date-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
display: flex;
}
.step1-select,
.step1-input {
width: 100%;
height: 50px;
padding: 0 16px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 16px;
color: #6b7280;
background: #fff;
transition: all 0.3s ease;
}
.step1-select::placeholder,
.step1-input::placeholder {
color: #9ca3af;
}
.step1-select:focus,
.step1-input:focus {
outline: none;
border-color: var(--skipit-primary-color);
box-shadow: 0 0 0 3px rgba(244, 127, 52, 0.1);
color: #1f2937;
}
.step1-select {
appearance: none;
background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%236b7280\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"%3e%3cpolyline points=\"6 9 12 15 18 9\"%3e%3c/polyline%3e%3c/svg%3e');
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
padding-right: 45px;
cursor: pointer;
}
@media (max-width: 1354px) {
.step-section.step-3 .step-card{
padding: 30px;
}
}
@media (max-width: 1314px) {
.product_list{
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 992px) {
.product_list {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.step1-form-row {
flex-direction: column;
gap: 15px;
}
.step-card .step_title {
font-size: 18px;
}
}
@media (max-width: 692px) {
.product_list {
gap: 0px 15px;
}
.product_wrap, .product_wrap_roro{
margin: 10px 0px !important;
padding: 10px 10px !important;
}
.product_wrap .product_detail .title{
margin-bottom: 20px;
}
.product_wrap .img_wrpe {
width: 90px !important;
height: 90px !important;
}
.product_wrap .cust_quantity_box{
flex-wrap: wrap;
}
.product_wrap .price-btn{
margin-top: 5px;
}
}
@media(max-width: 664px){
.product_wrap .price-btn{
width: 100% !important;
}
}
@media(max-width: 538px){
.product_wrap .cust_quantity_box{
gap: 5px 2px !important;
}
.product_wrap .cust_quantity_box button{
width: 30px !important;
height: 30px !important;
outline: inherit !important;
outline-offset: 0px !important;
padding: 5px !important !important;
}
.product_wrap .cust_quantity_box input[type="text"]{
width: 70px !important;
height: 30px !important;
font-size: 14px !important;
padding: 5px 2px !important;
}
.product_wrap .img_wrpe img{
width: 50px !important;
}
.step-section.step-3 .step-card {
padding: 20px !important;
}
.product_wrap .more-info-link{
font-size: 14px !important;
line-height: 1.4 !important;
}
}
@media(max-width: 458px){
/*.product_list {
grid-template-columns: repeat(1, 1fr) !important;
}*/
.product_list {
gap: 0px 10px !important;
}
.product_wrap{
border-radius: 15px !important;
}
.product_wrap .price-btn{
font-size: 14px !important;
padding: 8px 12px !important;
}
/*body .product_list .product_wrap a.more-info-link {
display: none !important;
}*/
.product_wrap, .product_wrap_roro{
padding: 15px 10px !important;
}
}
@media(max-width: 393px){
.product_list {
grid-template-columns: repeat(1, 1fr) !important;
}
}
/* Step 4 Extra Charge Styling */
.extra-charge-list {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.extra-charge-item {
display: flex;
align-items: center;
justify-content: space-between;
background: #fef5f0;
border-radius: 8px;
padding: 16px 20px;
position: relative;
}
.extra-charge-item .item-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.extra-charge-item .item-name {
font-size: 16px;
font-weight: 600;
color: #1f2937;
}
.extra-charge-item .item-price {
font-size: 18px;
font-weight: 700;
color: var(--skipit-primary-color);
}
.extra-charge-item .vat-text {
font-size: 14px;
font-weight: 400;
color: #6b7280;
}
.extra-charge-item .item-quantity {
display: flex;
align-items: center;
gap: 12px;
}
.extra-charge-item .qty-btn {
width: 32px;
height: 32px;
border: none;
background: #fff;
color: var(--skipit-primary-color);
border-radius: 4px;
font-size: 20px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
padding: 0;
line-height: 1;
}
.extra-charge-item .qty-btn:hover {
background: var(--skipit-primary-color);
color: #fff;
}
.extra-charge-item .qty-input {
width: 50px;
height: 32px;
text-align: center;
border: 1px solid #e5e7eb;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
color: #1f2937;
background: #fff;
}
.extra-charge-item .ajax_loder1 {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 640px) {
.extra-charge-item {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.extra-charge-item .item-quantity {
width: 100%;
justify-content: flex-end;
}
}
.skipit-form-row {
display: flex;
gap: 20px;
margin-bottom: 30px;
align-items: flex-start;
}
.skipit-form-field {
flex: 1;
position: relative;
}
.skipit-field-label {
display: block;
font-size: 14px;
color: var(--skipit-primary-color);
font-weight: 500;
margin-bottom: 8px;
}
.skipit-select-input,
.skipit-input-date {
width: 100%;
padding: 14px 40px 14px 15px;
border: 1px solid #e5e7eb;
border-radius: 25px;
font-size: 15px;
color: #6b7280;
background: #fff;
appearance: none;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px;
}
.skipit-input-date {
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-position: right 15px center;
background-size: 16px;
padding-right: 40px;
}
.skipit-select-input:focus,
.skipit-input-date:focus {
outline: none;
border-color: var(--skipit-primary-color);
box-shadow: 0 0 0 3px rgba(244, 127, 52, .1);
}
@media (max-width: 768px) {
.skipit-form-row {
flex-direction: column;
}
.step-card {
padding: 30px 20px;
}
}
/* Service Cards Grid Layout */
.step_subtitle {
text-align: center;
font-size: 16px;
color: #666;
margin: -20px 0 30px;
font-weight: 400;
}
.service-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 0px;
}
.service-card {
position: relative;
background: #fef5f0;
/*border: 2px solid transparent;*/
/*border-radius: 12px;*/
border-radius: 20px;
/*padding: 30px 20px;*/
padding: 40px 20px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
/*.service-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}*/
.service-card input[type="radio"]::before {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fef5f0;
border-radius: 20px;
box-shadow: 0px 5px 0px 0 var(--skipit-primary-color);
}
.service-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 100%;
height: 100%;
border-radius: 10% !IMPORTANT;
left: 0;
top: 0;
margin: 0;
transition: all 600ms ease 0s;
z-index: 0;
}
.service-card input[type="radio"]:checked {
opacity: 1;
}
/*.service-card:hover {
border-color: var(--skipit-primary-color);
box-shadow: 0 4px 12px rgba(244, 127, 52, 0.15);
}*/
.service-card:hover {
border-color: var(--skipit-primary-color);
box-shadow: 0px 5px 0px 0 var(--skipit-primary-color);
}
.service-card input[type="radio"]:checked:where(.wp-site-blocks :focus) {
outline: none !important;
}
/*.service-card input[type="radio"]:checked+.service-card-content {
position: relative;
}
.service-card input[type="radio"]:checked~.service-card-content::after {
content: '';
position: absolute;
bottom: -30px;
left: -20px;
right: -20px;
height: 4px;
background: var(--skipit-primary-color);
border-radius: 0 0 10px 10px;
}*/
.service-card-content {
display: flex;
flex-direction: column;
align-items: center;
/*gap: 12px;*/
position: relative;
}
.service-icon {
/*width: 80px;
height: 80px;*/
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
border-radius: 50%;
background: #fff;
}
.service-icon img {
object-fit: contain;
max-width: 64px;
max-height: 64px;
}
.service-icon svg {
width: 100%;
height: 100%;
}
/*.service-title {
font-size: 16px;
font-weight: 700;
color: #1f2937;
margin: 0;
line-height: 1.3;
}*/
.service-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
margin-bottom: 5px;
line-height: 1.5;
margin-top: 0;
}
/*.service-more {
font-size: 13px;
color: var(--skipit-primary-color);
font-weight: 600;
}*/
.service-more {
font-size: 16px;
color: var(--skipit-primary-color);
font-weight: 600;
line-height: 1.5;
cursor: pointer;
transition: color 0.3s ease;
}
.service-more:hover {
color: #d97030;
text-decoration: underline;
}
@media (max-width: 1024px) {
.service-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
/*.service-cards-grid {
grid-template-columns: 1fr;
}*/
.service-card {
padding: 15px 7px;
}
.service-icon{
width: 90px;
height: 90px;
}
.service-icon img{
width: 35px;
}
.service-title{
font-size: 20px;
line-height: 1.2;
}
.service-cards-grid{
gap: 20px 10px;
}
}
@media(max-width: 588px){
.service-title {
font-size: 16px;
line-height: 1.2;
}
.service-more{
font-size: 14px;
line-height: 1.4;
}
}
@media(max-width: 484px){
.service-icon {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.service-title {
font-size: 14px;
line-height: 1.2;
}
.service-more {
font-size: 12px;
line-height: 1.4;
}
}
@media(max-width: 393px){
.service-cards-grid {
/*grid-template-columns: repeat(1, 1fr);*/
}
}
/* Step 3 Info Bar */
/*.step3-info-bar {
display: flex;
justify-content: center;
gap: 30px;
padding: 15px;
background: #f9f9f9;
border-radius: 8px;
margin-bottom: 30px;
flex-wrap: wrap;
}*/
.step3-info-bar {
display: flex;
justify-content: center;
gap: 10px;
padding: 0;
/* background: #f9f9f9; */
border-radius: 8px;
margin-bottom: 30px;
flex-wrap: wrap;
}
/*.step3-info-bar .info-item {
font-size: 14px;
color: #666;
}*/
.step3-info-bar .info-item {
font-size: 16px;
color: #111111;
line-height: 1.5;
border: 1px solid var(--color-border-default);
padding: 10px 20px;
border-radius: 10px;
}
.step3-info-bar .info-item strong {
color: #1f2937;
font-weight: 600;
padding-left: 1px;
}
/* Product Grid for Step 3 */
.product_list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 0px;
}
/*.product_wrap {
background: #fef5f0;
border: 2px solid transparent;
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
position: relative;
width: auto;
}*/
.product_wrap {
background: #fff;
border: 1px solid var(--color-border-default);
border-radius: 20px;
padding: 40px 20px;
/*cursor: pointer;*/
transition: all 0.3s ease;
text-align: center;
position: relative;
width: auto;
margin: 0;
}
.product_wrap.product_buy_wrap .product_detail {
display: flex;
flex-direction: column;
height: 100%;
}
.product_wrap.product_buy_wrap .product_detail .price-btn {
margin-top: auto;
}
.product_wrap.product_buy .product_detail {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.product_wrap.product_buy .product_detail button.buy_roro.price-btn {
margin-top: auto;
}
.product_wrap:hover {
/* border-color: var(--skipit-primary-color); */
box-shadow: 0px 5px 0px 0 var(--skipit-primary-color);
background: #fef5f0 !important;
border-color: #fef5f0 !important;
}
.product_wrap:hover .img_wrpe {
background: #fff;
}
/*.product_wrap:hover {
border-color: var(--skipit-primary-color);
box-shadow: 0 4px 12px rgba(244, 127, 52, 0.15);
}*/
/*.product_wrap .img_wrpe {
width: 100px;
height: 100px;
margin: 0 auto 15px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}*/
.product_wrap .img_wrpe {
width: 120px;
height: 120px;
margin: 0 auto 15px;
background: #fef5f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/*.product_wrap .img_wrpe img {
width: 70px;
height: 70px;
object-fit: contain;
}*/
.product_wrap .img_wrpe img {
width: 64px;
height: auto;
object-fit: contain;
margin-bottom: 0;
}
/*.product_wrap .product_detail .title {
font-size: 16px;
font-weight: 700;
color: #1f2937;
margin-bottom: 15px;
}*/
.product_wrap .product_detail .title {
font-size: 16px;
font-weight: 600;
color: #111111;
margin-bottom: 30px;
}
.product_wrap .product_detail .price {
background: #1f2937;
color: #fff;
padding: 10px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
display: inline-block;
margin-top: 10px;
}
.product_wrap .product_detail .price .plus_vat {
font-size: 12px;
font-weight: 400;
}
/* Quantity selector for roll-on-roll-off */
.product_wrap .cust_quantity_box {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 15px 0;
}
/*.product_wrap .cust_quantity_box button {
width: 30px;
height: 30px;
border: none;
background: var(--skipit-primary-color);
color: #fff;
border-radius: 4px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}*/
.product_wrap .cust_quantity_box button {
width: 40px;
height: 40px;
border: none;
background: #fef5f0;
color: var(--skipit-primary-color);
border-radius: 50%;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 1px solid var(--color-border-default);
padding: 8px !important;
position: relative;
z-index: 1;
outline: 5px solid #fff;
outline-offset: -6px;
}
.product_wrap .cust_quantity_box button:hover {
background: var(--skipit-primary-color);
color: #fff;
}
/*.product_wrap .cust_quantity_box input[type="text"] {
width: 40px;
height: 30px;
text-align: center;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
}*/
.product_wrap .cust_quantity_box input[type="text"] {
width: 80px;
height: 40px;
text-align: center;
border: 1px solid var(--color-border-default);
border-radius: 50px;
font-size: 16px;
font-weight: 600;
padding: 8px;
}
.product_wrap .cust_quantity_box .tonnes-label {
font-size: 16px;
color: #111111;
font-weight: 500;
}
/* Price button for roll-on-roll-off */
/*.product_wrap .price-btn {
background: #1f2937;
color: #fff;
padding: 10px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
margin-top: 10px;
width: auto;
display: inline-block;
}*/
.product_wrap .price-btn {
background: #111;
color: #fff;
padding: 8px 16px;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
margin-top: 10px;
width: auto;
display: flex;
line-height: 1.5;
align-items: center;
margin-left: auto;
margin-right: auto;
justify-content: center;
gap: 1px;
}
.product_wrap .price-btn svg {
margin-right: 9px;
}
.product_wrap .price-btn:hover {
background:var(--skipit-primary-color);
}
.product_wrap .price-btn:hover svg path {
fill: currentColor;
}
.product_wrap .price-btn .plus_vat {
font-size: 12px;
font-weight: 400;
}
/* More information link */
.product_wrap .more-info-link {
display: block;
color: var(--skipit-primary-color);
font-size: 16px;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
margin-top: 15px;
}
.product_wrap .more-info-link:hover {
text-decoration: underline;
}
.product_wrap .stock .outofstock {
position: absolute;
top: 10px;
right: 10px;
background: #dc2626;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
}
@media (max-width: 1024px) {
.product_list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.product_list {
grid-template-columns: repeat(2, 1fr);
}
.step3-info-bar {
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 480px) {
.product_list {
grid-template-columns: 1fr;
}
}
input.next.btn.btn-next:hover {
background: #e56d20;
}
.cart_item_wrap .checkout_btn a {
padding: 10px 25px;
background: #b60f26;
margin-top: 12px;
color: #fff !important;
border-radius: 4px;
display: inline-block;
}
.woocommerce-side-nav li a {
padding: 10px !important;
}
.woocommerce-content-box {
border: 2px solid var(--sep_color) !important;
}
.booking_form_wrap .public_highway_wrap {
padding: 10px;
border: 2px solid #fe7d2c;
border-radius: 4px;
margin: 10px 0;
border-radius: 40px;
}
.booking_form_wrap select {
color: #000 !important;
}
@media (max-width:767px) {
.product_wrap,
.product_wrap_roro {
width: 100%;
margin: 15px 0px;
}
#progressbar li {
color: #000000;
text-transform: uppercase;
font-size: 10px;
width: 1000%;
position: relative;
letter-spacing: 1px;
text-align: center;
padding: 10px;
margin: 2px 0px;
background: #eef8ff;
border-radius: 4px;
font-weight: 600;
}
#progressbar li:after {
width: 0;
}
.step_title {
font-size: 16px !important;
}
.booking_form_wrap label {
font-size: 12px;
}
.cart_item_wrap .price {
text-align: center;
}
.cart_item_wrap .title {
text-align: center;
}
}
.product_wrap.disabled-click,
.product_wrap_roro.disabled-click {
pointer-events: none;
}
input#postcode_area {
height: 40px;
}
/*vivek*/
.product_wrap_roro:hover {
cursor: pointer;
background: #1a3b70 !important
}
.booking_form_wrap .step-section {
background: #EDF7FE;
padding: 30px !important;
}
#progressbar li.active {
background: #c83200 !important;
color: #fff !important;
}
#progressbar li.active:after {
background: #9fd066;
z-index: 0;
}
.product_wrap:hover .price,
.product_wrap_roro:hover .title,
.product_wrap_roro:hover .price {
color: #FFF;
/*font-weight: 900;*/
}
.product_wrap:hover img,
.product_wrap_roro:hover img {
transition: .1s;
}
.cart_item_wrap {
background: #11224e;
color: #FFF;
box-shadow: 0 0 15px 0 #e8e8e8;
}
.cart_item_wrap .checkout_btn a {
background: #e31530;
text-transform: uppercase;
border: 1px solid;
}
.product_info h2 {
color: #FFF;
}
input.next.btn.btn-next,
input.previous.btn.btn-previous {
color: #FFF !important;
text-transform: uppercase;
}
label {
/*font-family: open sans !important;*/
font-weight: 500;
}
.booking_form_wrap input,
.booking_form_wrap select {
color: #000 !important;
font-weight: 600;
}
.ajax__loder {
background: var(--skipit-primary-color) !important;
z-index: 9;
}
@media only screen and (max-width: 800px) {
#progressbar li {
background: transparent;
margin: 20px 0;
width: 20%;
height: auto;
}
span.step-label {
color: #000;
white-space: nowrap;
font-size: 10px;
margin-left: -25px;
width: 80px !important;
}
span.step-number {
line-height: 30px;
}
.step-bar li>span {
background: #9fd066;
margin: 0 auto;
align-items: center;
justify-content: center;
height: 30px;
width: 30px;
border-radius: 50px;
color: #FFF;
}
/*.step-bar li {*/
/* display: flex;*/
/* align-items: center;*/
/* justify-content: center;*/
/* flex-direction: column;*/
/*}*/
#progressbar li.active {
background: transparent !important;
}
#progressbar li:after {
content: '';
width: 66%;
height: 3px;
background: #9fd066;
position: absolute;
left: -32%;
top: 23%;
z-index: -5;
}
ul#progressbar .active span:before {
content: "\f00c";
color: green;
font-size: 22px;
position: absolute;
top: -19px;
left: 50%;
transform: translateX(-50%);
font-weight: 500;
font-family: "Font Awesome 5 Pro";
z-index: -5;
animation: bounce 1s;
animation-direction: alternate;
animation-iteration-count: 2;
}
.step-bar li.active>span {
background: radial-gradient(#212934, green);
font-size: 14px;
transition: .6s;
}
h2.step_title {
/*font-family: "Open Sans" !important;*/
font-size: 14px !important;
font-weight: 900 !important;
}
#progressbar li.active:after {
background: #0f5817;
z-index: -9;
transition: .6s;
}
.booking_form_wrap .public_highway_wrap h4 {
color: #FFF;
/*font-family: open sans !important;*/
font-size: 14px !important;
font-weight: 900;
}
.product_wrap:hover,
.product_wrap_roro:hover {
cursor: pointer;
background: #9fd066;
}
.booking_form_wrap .public_highway_wrap {
background: #9fd066;
}
.inner_wrap2 h1 {
font-size: 14px !important;
/*font-family: open sans !important;*/
font-weight: 900;
}
.cart_item_wrap .title,
.cart_item_wrap .price {
text-align: left;
}
}
@media only screen and (max-width: 440px) {
.booking_form_wrap .step-section {
background: #EDF7FE;
padding: 12px !important;
}
.product_wrap,
.product_wrap_roro {
width: 48%;
margin: 2px;
}
.img_wrpe img {
width: 50px;
}
.product_detail .title,
.product_detail .price {
font-size: 12px !important;
font-weight: 900;
}
}
@keyframes smoothbounceball {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 200px, 0);
}
}
/*.booking_form_wrap .step-section h3.step_title {
margin: 0 !important;
margin-bottom: 50px !important;
font-size: max(1.5vw, 24px);
text-align: center;
}*/
.booking_form_wrap .step-section h3.step_title {
margin: 0 !important;
margin-bottom: 30px !important;
/*font-size: max(1.7vw, 24px);*/
text-align: center;
/*max-width: 615px;*/
margin-left: auto !IMPORTANT;
margin-right: auto !IMPORTANT;
/*line-height: 1.5;*/
/*font-weight: 600;*/
font-family: var(--h4_typography-font-family);
font-weight: var(--h4_typography-font-weight);
line-height: var(--h4_typography-line-height) !important;;
letter-spacing: var(--h4_typography-letter-spacing);
text-transform: var(--h4_typography-text-transform);
font-style: var(--h4_typography-font-style, normal);
font-size: var(--h4_typography-font-size) !important;;
}
.booking_form_wrap .step-section select,
.booking_form_wrap .step-section select input[type=text],
.booking_form_wrap .step-section input#deliveryDate {
text-align: center;
}
.booking_form_wrap .step-section .form-group label {
display: block;
margin-bottom: 10px;
}
input.next.btn.btn-next {
cursor: pointer;
}
.booking_form_wrap .public_highway_wrap label {
display: inline-block !important;
margin: 0 !important;
}
.booking_form_wrap .step-section {
background: transparent;
padding: 0px !important;
margin-top: 80px;
}
.booking_form_wrap .step-section input#deliveryDate {
text-align: left;
}
/*div#ui-datepicker-div {
left: 50% !important;
transform: translateX(-50%);
}
*/
@media only screen and (min-width: 768px) {
.booking_form_wrap .step-section select,
.booking_form_wrap .step-section select input[type=text],
.booking_form_wrap .step-section input#deliveryDate {
width: 60%;
/*text-align: center;*/
}
.booking_form_wrap .public_highway_wrap {
width: 60%;
margin: 20px auto;
}
}
#comment-input input:focus,
#comment-textarea textarea:focus,
.avada-select .select2-container .select2-choice2:focus,
.avada-select .select2-container .select2-choice:focus,
.chzn-container .chzn-drop:focus,
.chzn-container-single .chzn-single:focus,
.comment-form-comment textarea:focus,
.fusion-body .avada-select-parent select:focus,
.input-text:focus,
.main-nav-search-form input:focus,
.post-password-form label input[type=password]:focus,
.search-page-search-form input:focus,
input.s:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=phone-number]:focus,
input[type=text]:focus,
select:focus,
textarea:focus {
border-color: #fe7d2c !important;
}
span.step-label {
font-weight: 500;
}
.cart_item_wrap .product_info .title h2 {
color: #fff;
font-size: max(2vw, 24px) !important;
}
span.step-label:before {
display: none;
}
.checkout .shop_table tfoot th {
padding-top: 20px;
padding-left: 30px;
}
.checkout .shop_table tfoot td {
padding-right: 30px;
padding-left: 30px;
}
.shop_table .product-name {
padding: 25px 30px;
}
.checkout .shop_table th.product-total {
padding: 25px 30px;
}
.shop_table td {
padding: 25px 30px !important;
}
table.shop_table,
.shop_table th,
.shop_table td {
border: 1px solid #e2e2e2;
}
.fusion-product-name-wrapper {
flex-wrap: wrap;
}
.woocommerce-content-box.avada-checkout {
border-color: #e2e2e2 !important;
}
.cart_totals table th {
padding: 25px 30px !important;
}
@media only screen and (max-width: 800px) {
.woocommerce-content-box {
border: 0px solid #fff !important;
}
form.checkout .shop_table tfoot th {
padding-right: 30px !important;
/*width: 60%;*/
}
.shop_table .product-name {
padding: 25px 10px !important;
}
.checkout .shop_table th.product-total {
padding: 25px 10px !important;
}
.shop_table td {
padding: 25px 10px !important;
}
.woocommerce-MyAccount-content,
.woocommerce-content-box {
padding: 30px 0 !important;
}
.cart_totals table th {
padding: 25px 10px !important;
}
}
table.shop_table.shop_table_responsive {
margin-bottom: 20px;
}
@media only screen and (max-width: 550px) {
span.step-label {
color: #000;
white-space: break-spaces;
font-size: 10px;
margin-left: 0;
width: auto !important;
line-height: 1.5;
margin-top: 7px;
}
.booking_form_wrap .step-section {
margin-top: 50px;
}
.product_img {
margin-right: 0;
width: 100%;
margin-bottom: 20px;
}
.cart_item_wrap .product_info,
.cart_item_wrap .title,
.cart_item_wrap .price {
width: 100%;
text-align: center;
}
}
@media only screen and (min-width: 800px) and (max-width: 950px) {
#progressbar li {
width: 90px;
height: 90px;
}
}
.product_wrap .price,
.product_wrap_roro .price {
background: #8bc34a;
display: inline-block;
color: #fff;
padding: 2px 15px;
border-radius: 20px;
font-size: 15px;
margin-bottom: 7px;
}
.section_loder {
/* position: ABSOLUTE; */
height: 270px;
WIDTH: 100%;
ALIGN-ITEMS: CENTER;
DISPLAY: FLEX;
JUSTIFY-CONTENT: CENTER;
}
.abso-con {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: #3e47cc;
z-index: 99000000;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
padding: 20px;
}
.abso-con a {
font-weight: 900;
color: #FFF;
letter-spacing: 3px;
}
p.outofstock {
background: #8a0c1e;
color: #FFF;
}
.d-flex-postcode {
display: flex;
align-items: center;
border: 1px solid #e2e2e2;
border-radius: 15px;
max-width: 30%;
margin: 0 auto;
}
.d-flex-postcode span {
height: 40px;
width: 100%;
line-height: 40px;
padding: 0 0 0 10px;
background: #e2e2e2;
border-radius: 15px 0 0 15px;
border-right: 1px solid #e2e2e2;
}
.d-flex-postcode input.form-control {
border: 0 !important;
border-radius: 15px !important;
height: 38px !important;
}
/*input#postcode_suffix.error {
border: 2px solid red !important;
border-radius: 0 25px 25px 0 !important;
}*/
input#postcode_suffix.error {
border: 2px solid red !important;
border-radius: 0 10px 10px 0 !important;
}
.tm-input-flex-element .error + span.select2.select2-container span.select2-selection {
border: 2px solid red !IMPORTANT;
/*border-right: 0 !IMPORTANT;*/
}
body .tm-input-flex-element span.select2.select2-container.select2-container--default + div input {
border-left-width: 0 !important;
}
/*span.select2-selection.select2-selection--single {
border-radius: 40px 0px 0px 40px;
}*/
.skipit-postcode-inputs {
display: flex;
}
:where(.wp-site-blocks :focus) {
outline-style: unset;
outline-width: unset;
}
/*20 jul*/
ul.special_item_list.special_item_list_ul li {
margin-bottom: 10px !important;
}
ul.special_item_list.special_item_list_ul {
margin: 0 !important;
list-style: none;
padding: 0;
}
.cust_quantity.quantity.buttons_added {
background: #fff;
display: inline-block;
}
.cust_quantity .plus_t,
.cust_quantity .minus_t {
font-size: var(--qty_font_size, 14px);
width: var(--qty_size-height, 36px);
height: var(--qty_size-height, 36px);
line-height: 1;
border-color: var(--sep_color);
float: left;
border: 0;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
border-radius: 0;
-webkit-appearance: none;
appearance: none;
background-color: var(--qty_bg_color);
cursor: pointer;
}
.product_wrap img,
.product_wrap_roro img {
width: 110px;
margin-bottom: 10px;
}
.rwd-table {
margin: auto;
min-width: 300px;
max-width: 100%;
border-collapse: collapse;
}
.rwd-table tr:first-child {
border-top: none;
background: #c83200;
color: #fff;
}
.rwd-table tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #f5f9fc;
}
.rwd-table tr:nth-child(odd):not(:first-child) {
background-color: #ebf3f9;
}
/*.rwd-table th {*/
/* display: none;*/
/*}*/
/*.rwd-table td {*/
/* display: block;*/
/*}*/
.rwd-table td:first-child {
margin-top: .5em;
}
.rwd-table td:last-child {
margin-bottom: .5em;
}
.rwd-table td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 120px;
display: none;
color: #000;
}
.rwd-table th,
.rwd-table td {
text-align: left;
}
.rwd-table {
color: #333;
border-radius: .4em;
overflow: hidden;
}
.rwd-table tr {
border-color: #bfbfbf;
}
.rwd-table th,
.rwd-table td {
padding: .5em 1em;
}
@media screen and (max-width: 601px) {
.rwd-table tr:nth-child(2) {
border-top: none;
}
}
@media screen and (min-width: 600px) {
.rwd-table tr:hover:not(:first-child) {
background-color: #d8e7f3;
}
.rwd-table td:before {
display: none;
}
.rwd-table th,
.rwd-table td {
display: table-cell;
padding: .25em .5em;
}
.rwd-table th:first-child,
.rwd-table td:first-child {
padding-left: 0;
}
.rwd-table th:last-child,
.rwd-table td:last-child {
padding-right: 0;
}
.rwd-table th,
.rwd-table td {
padding: 1em !important;
}
}
.advanced_cust_img_table {
display: flex;
align-items: center;
}
.advanced_cust_img_table img {
width: 60px;
margin-right: 20px;
}
.rwd-table tr:last-child {
border-bottom: 0 !important;
}
.rwd-table {
box-shadow: 0 0 1px 1px #bfbfbf;
}
.rwd-table {
margin: 0 !important;
}
a.btn.btn-checkout-custom-booking {
background: #e30613;
color: #fff;
border: 0;
border-radius: 4px;
padding: 12px 25px;
margin-left: auto !important;
display: inline-block;
margin-right: 0;
line-height: 1.2;
}
a.btn.btn-checkout-custom-booking:hover {
background: black;
}
.fusion-button_size-large .quantity {
margin-top: 10px !important;
}
.extra_charge_tab .product_detail {
border: 1px solid hsl(0deg 0% 0% / 20%);
/* max-width: 500px;*/
margin: 0 auto;
padding: 7px 15px;
border-radius: 6px;
height: 100%;
}
.extra_charge_tab .cust_quantity.quantity.buttons_added {
margin: 0 auto;
}
.extra_charge_tab li.special_product_wrap {
width: 100%;
padding: 0 15px;
}
ul.special_item_list.special_item_list_ul.extra_charge_tab {
display: flex;
flex-wrap: wrap;
justify-content: center;
height: 100%;
max-height: 60vh;
overflow-y: auto;
}
span.plus_vat {
font-size: 12px;
font-weight: 900;
}
@media only screen and (max-width: 992px) {
.extra_charge_tab li.special_product_wrap {
width: 50%;
}
}
@media only screen and (max-width: 600px) {
.extra_charge_tab li.special_product_wrap {
width: 100%;
padding: 0 0px;
}
}
.cust_quantity_box_flex {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
margin-top: 10px;
align-items: center;
justify-content: center;
}
.cust_quantity_box_flex .tonnes-label-sep {
font-size: 17px;
}
.cust_quantity_box_flex .cust_quantity .plus_t,
.cust_quantity_box_flex .cust_quantity .minus_t {
width: 30px;
height: 24px;
}
body.fusion-body .cust_quantity_box_flex .quantity .qty {
width: 36px;
height: 24px;
}
.fusion-body .cust_quantity_box_flex .quantity {
width: auto;
}
.product_wrap_roro:hover .tonnes-label-sep {
color: #fff;
}
button.buy_roro {
background: #1a3b70;
color: #fff;
border: 0;
border-radius: 34px;
padding: 9px 25px;
cursor: pointer;
min-width: 110px;
}
.product_wrap_roro:hover button.buy_roro {
background: #fff;
color: #1a3b70;
}
button.buy_roro:hover {
background: var(--skipit-primary-color) !important;
color: #fff;
}
button.buy_roro:hover svg path {
fill: currentColor;
}
.product_detail .title {
font-size: 18px !important;
margin-bottom: 10px;
font-weight: 600;
}
/*20-08-2025 - New design*/
:root {
--skipit-bg: #f7f8fb;
--skipit-card: #ffffff;
--skipit-text: #0f172a;
--skipit-muted: #6b7280;
--skipit-primary: #f47f34;
/* primary */
/*--skipit-secondary: #11224e;*/
--skipit-secondary: #0A0A0A;
/* secondary */
--skipit-ring: rgba(244, 127, 52, .22);
--skipit-line: #e5e7eb;
--skipit-radius: 16px;
--color-border-default: rgba(1, 1, 1, 0.2);
--skipit-primary-color:#F47F35;
}
/**{box-sizing:border-box}
html,body{height:100%}*/
/*body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--skipit-text);background:#fafafa}*/
.skipit-stepper {
margin: 0;
/*font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";*/
color: var(--skipit-text);
background: #fafafa
}
.skipit-container {
max-width: 1100px;
margin-inline: auto;
padding: clamp(16px, 4vw, 32px)
}
.skipit-card {
background: var(--skipit-card);
border-radius: var(--skipit-radius);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 30px rgba(0, 0, 0, .06);
padding: clamp(16px, 3vw, 28px)
}
.skipit-stepper {
position: relative;
display: flex;
align-items: stretch;
/*justify-content: center;*/
justify-content: space-between;
gap: 30px;
/*padding: 20px;*/
border-radius: 0;
background: #fff;
border: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch
margin-bottom: 50px;
overflow-y: hidden;
/*max-width: 1100px;*/
width:100%;
margin: 0 auto;
}
.tm-skipit-track {
position: absolute;
left: 20px;
right: 20px;
top: 68px;
height: 2px;
border-radius: 999px;
z-index: 0;
background:var(--color-border-default);
max-width: calc(1530px + 20px);
}
.tm-skipit-track-fill {
position: absolute;
left: 20px;
top: 68px;
height: 2px;
border-radius: 999px;
z-index: 0;
transition: width .35s ease;
background: var(--skipit-primary-color);
max-width: calc(1530px + 20px);
}
.skipit-step {
position: relative;
display: flex;
align-items: center;
gap: 0;
/*min-width: 145px;*/
/*min-width: 195px;*/
width: calc(100%/6 - 30px);
/*flex: 0 0 auto;*/
flex: 0 0 auto;
scroll-snap-align: center;
z-index: 1;
transition: all .2s ease;
}
.skipit-step:before,
.skipit-step:after {
position: absolute;
left: 20px;
right: 20px;
top: 68px;
height: 2px;
border-radius: 999px;
z-index: -1;
background: var(--color-border-default);
content: "";
left: 50%;
width: 100%;
}
.skipit-step:last-child:before,
.skipit-step:last-child:after {
display: none;
}
.skipit-step:before {
background: var(--skipit-primary-color);
width: 0;
z-index: 0;
transition: all 1s;
}
.skipit-step.skipit-is-complete:before {
width: 100%;
transition: all 1s;
}
/*.skipit-step.skipit-is-complete:before {
width: 100%;
}
*/
.skipit-box {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: #fff;
border: 1px solid var(--color-border-default);
border-radius: 8px;
padding: 16px 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
transition: all .2s ease;
min-height: 80px;
width: 100%;
/*padding: 20px 30px !important;*/
padding: 20px 20px !important;
border-radius: 10px !important;
}
/* ACTIVE */
.skipit-step.skipit-is-current .skipit-box {
background: var(--skipit-primary-color);
border: 1px solid var(--skipit-primary-color);
box-shadow: 0 2px 8px rgba(244, 127, 52, .25);
padding: 16px 20px;
border-radius: 8px
}
.skipit-step.skipit-is-current .skipit-badge {
background: transparent;
color: #fff;
border: none;
font-weight: 700;
font-size: 18px;
background: #fff;
/*padding: 10px 15px;*/
color: #000;
border-radius: 50%;
}
.skipit-step.skipit-is-current .skipit-label {
color: #fff;
font-weight: 600
}
/* COMPLETE */
.skipit-step.skipit-is-complete .skipit-box {
/*border-color: var(--skipit-secondary);*/
background: #fff
}
.skipit-step.skipit-is-complete .skipit-badge {
/*padding: 10px 15px;
border-radius: 50%;*/
/*background: var(--skipit-secondary);*/
background: var(--skipit-primary-color);
color: #fff;
border-color: var(--skipit-primary-color)
}
.skipit-badge {
width: 40px;
height: 40px;
display: grid;
place-items: center;
font-weight: 700;
font-size: 16px;
color: #111111;
background: #FEF6EE;
border: none;
position: relative;
line-height: 1;
padding: 10px 5px;
border-radius: 50%;
}
/*.skipit-label {
font-size: 13px;
letter-spacing: .01em;
color: #374151;
font-weight: 600;
white-space: nowrap;
text-align: center;
line-height: 1.3
}*/
.skipit-label {
font-size: 18px;
letter-spacing: 0;
color: #111111;
font-weight: 600;
white-space: nowrap;
text-align: center;
line-height: 1.5;
}
.step-1 {
.skipit-label-field {
font-weight: 800;
color: var(--skipit-secondary);
font-size: 14px;
margin: 2px 0 8px 6px;
}
.skipit-section-title {
font-size: clamp(20px, 3.2vw, 30px);
line-height: 1.25;
margin: 20px 0 8px
}
.skipit-subtitle {
color: var(--skipit-muted);
margin: 0 0 20px
}
.skipit-row {
display: flex;
gap: 12px;
flex-wrap: wrap
}
.skipit-field-row {
display: flex;
gap: 12px;
align-items: stretch;
flex: 1
}
/* .skipit-input{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;font-size:16px;color:var(--skipit-text)} */
.skipit-input input {
border: 0;
outline: none;
width: 100%;
font: inherit;
color: inherit;
background: transparent
}
.skipit-btn {
appearance: none;
border: 0;
border-radius: 12px;
background: var(--skipit-primary);
color: #fff;
font-weight: 700;
letter-spacing: .02em;
padding: 14px 22px;
cursor: pointer;
transition: transform .05s ease, background .2s ease
}
.skipit-btn:active {
transform: translateY(1px)
}
.skipit-btn:focus-visible {
outline: 3px solid var(--skipit-ring)
}
.skipit-btn.skipit-secondary {
background: #fff;
color: var(--skipit-secondary);
border: 2px solid var(--skipit-secondary)
}
}
@media (max-width:1240px) {
.skipit-step{
/*min-width: 170px;*/
}
}
@media (max-width:1126px) {
.skipit-step{
/*min-width: 150px;*/
}
}
@media (max-width:1044px) {
.tm-skipit-track{
width: 100%;
}
/*.tm-skipit-track-fill{
width: 100%;
}*/
}
@media (max-width:1018px) {
.skipit-box{
padding: 10px 20px !important;
}
.skipit-label{
font-size: 15px;
}
.tm-skipit-track , .tm-skipit-track-fill{
top: 55px;
}
.skipit-step{
/*min-width: 135px;*/
}
.skipit-stepper {
gap: 20px;
}
.skipit-step {
width: calc(100% / 6 - 20px);
}
}
@media (max-width:1016px) {
.skipit-step:before, .skipit-step:after{
top: 50px;
}
}
@media (max-width:900px) {
.skipit-step {
/*min-width: 100px*/
}
.skipit-track,
.skipit-track-fill {
top: 52px
}
}
@media (max-width:792px) {
.skipit-step .skipit-label {
display: none;
}
.skipit-box{
min-height: 60px !important;
}
.skipit-step {
min-width: 60px !important;
}
.skipit-box {
padding: 5px 10px !important;
}
.tm-skipit-track, .tm-skipit-track-fill {
top: 35px;
left: 0;
}
.skipit-stepper{
justify-content: center;
gap: 10px;
}
.skipit-step:before, .skipit-step:after {
top: 30px;
}
}
@media (max-width:700px) {
/*.skipit-badge {
width: 42px;
height: 42px;
border-radius: 10px
}*/
.skipit-stepper{
gap: 10px;
overflow-y: hidden;
}
.skipit-box{
min-height: 60px;
}
.skipit-box {
padding: 8px 12px
}
.skipit-label {
font-size: 11px
}
.skipit-step {
min-width: 92px
}
.skipit-track,
.skipit-track-fill {
left: 16px;
right: 0px
}
}
@media (max-width:420px) {
.skipit-step {
min-width: 50px !important;
}
.skipit-box {
padding: 5px 5px !important;
}
.skipit-badge{
width: 35px;
height: 35px;
}
.skipit-label {
font-size: 11px;
line-height: 1.2 !important;
}
}
@media (max-width:420px) {
.skipit-step {
min-width: 74px
}
.skipit-stepper .skipit-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap
}
.skipit-track,
.skipit-track-fill {
top: 44px
}
.skipit-field-row {
flex-direction: column
}
.skipit-btn {
width: 100%
}
.skipit-track {
width: 130%;
}
}
@media (max-width:408px) {
.tm-skipit-track, .tm-skipit-track-fill {
top: 35px;
left: calc(60px + 0px);
}
}
@media(max-width: 364px){
.tm-skipit-track, .tm-skipit-track-fill {
left: calc(70px + 27px);
}
}
/*form#regiration_form {
max-width: 1040px;
margin: 0 auto;
}
*/
/*Step - 2*/
.text-left {
text-align: left;
}
.step-2 {
.skipit-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 18px
}
.skipit-field {
grid-column: span 12
}
}
@media(min-width:780px) {
.step-2 {
.skipit-field.half {
grid-column: span 6
}
}
}
.step-2 {
/* Labels */
.skipit-label {
font-weight: 800;
color: var(--skipit-secondary);
font-size: 14px;
margin: 2px 0 8px 6px
}
/* Inputs (pill + flat) */
.skipit-input,
.skipit-select select {
width: 100% !important;
padding: 14px 18px !important;
border: 2px solid var(--skipit-line) !important;
border-radius: 28px !important;
background: #fff;
font-size: 16px !important;
outline: none !important;
height: auto !important;
}
.skipit-input::placeholder {
color: #aeb4be;
font-weight: 700
}
/*.skipit-input:focus, .skipit-select select:focus{border-color:var(--skipit-secondary);box-shadow:0 0 0 3px rgba(17,34,78,.15)}*/
/* Composite postcode with prefix chip */
.skipit-postwrap {
display: flex;
align-items: stretch;
border: 2px solid var(--skipit-line);
border-radius: 28px;
overflow: hidden
}
.skipit-chip {
background: #e9effa;
color: var(--skipit-secondary);
font-weight: 800;
padding: 10px 16px;
display: flex;
align-items: center
}
.skipit-postwrap input {
border: 0 !important;
border-left: 2px solid var(--skipit-line) !important;
border-radius: 0 !important;
}
.skipit-postwrap input.error,
.skipit-input.error,
.skipit-select select.error {
border-color: red !important;
}
/* Inline help text */
.skipit-help {
font-size: 12px;
color: var(--skipit-muted);
margin: 6px 8px 0
}
/* Highway question redesigned: badge + content */
.skipit-qa {
position: relative;
border: 2px solid var(--skipit-primary);
border-radius: 22px;
padding: 18px
}
.skipit-qa .skipit-badge-new {
position: absolute;
top: -12px;
left: 16px;
background: var(--skipit-primary);
color: #fff;
font-weight: 900;
font-size: 12px;
letter-spacing: .06em;
border-radius: 999px;
padding: 6px 10px
}
.skipit-qa .skipit-q {
font-size: clamp(18px, 2.6vw, 26px);
font-weight: 800;
margin: 8px 0 12px
}
/* Radio as pill toggles */
.skipit-pills {
display: flex;
gap: 10px;
flex-wrap: wrap
}
.skipit-radio {
position: absolute;
opacity: 0;
pointer-events: none
}
.skipit-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 2px solid var(--skipit-line);
border-radius: 999px;
cursor: pointer;
font-weight: 800
}
.skipit-pill::before {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--skipit-secondary)
}
.skipit-radio:focus+.skipit-pill {
box-shadow: 0 0 0 3px var(--skipit-ring)
}
.skipit-radio:checked+.skipit-pill {
border-color: var(--skipit-primary);
background: #fff1e7
}
.skipit-radio:checked+.skipit-pill::before {
background: var(--skipit-primary);
border-color: var(--skipit-primary)
}
/* Select wrapper with caret */
.skipit-select {
position: relative
}
.skipit-select .caret {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #111
}
/* Action buttons */
.skipit-actions {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 8px
}
.skipit-btn {
appearance: none;
border: 0;
border-radius: 12px;
padding: 14px 22px;
font-weight: 900;
cursor: pointer
}
.skipit-btn.prev {
background: var(--skipit-primary);
color: #fff
}
.skipit-btn.next {
background: var(--skipit-secondary);
color: #fff
}
/* Divider */
.skipit-divider {
height: 1px;
background: #f1f1f1;
margin: 10px 0 18px
}
/* Accessibility note style */
.skipit-note {
display: flex;
gap: 10px;
align-items: flex-start;
background: #fff;
border: 1px dashed var(--skipit-line);
border-radius: 16px;
padding: 12px 14px;
color: #374151
}
.skipit-note svg {
flex: 0 0 auto
}
}
.step-2 .skipit-postwrap input {
border: 2px solid transparent !important;
padding: 10px 18px !important;
border-radius: 0px 28px 28px 0 !important;
}
.step-2 .skipit-postwrap input.error {
border-color: red !important;
}
.step-2 .skipit-select select {
text-align: left !important;
}
/*cart step*/
.step-4 {
.skipit-card {
display: grid;
grid-template-columns: 120px 1fr;
gap: 18px;
align-items: center;
background: rgb(229 231 235 / 5%);
color: var(--skipit-text);
border: 1px solid var(--skipit-line);
border-radius: var(--skipit-radius);
box-shadow: none;
padding: 18px;
max-width: 760px;
width: 100%;
margin: 0 auto;
}
/* media/avatar */
.skipit-media {
width: 120px;
height: 120px;
border-radius: 50%;
display: grid;
place-items: center;
background: #ffffff;
border: 0px solid #eef1f6;
outline: 3px solid var(--skipit-secondary)
}
.skipit-media img {
width: 120px;
height: 120px
}
/*.skipit-media .body{fill:var(--skipit-primary)}
.skipit-media .cab{fill:#ffb187}
.skipit-media .tyre{fill:#0f172a}
.skipit-media .rim{fill:#fff}*/
/* content */
.skipit-title {
margin: 0 0 2px 0;
font-size: clamp(20px, 3.6vw, 32px);
font-weight: 900;
color: var(--skipit-secondary)
}
.skipit-sub {
margin: 0 0 10px;
color: var(--skipit-muted)
}
.skipit-list {
margin: 0 0 14px 0;
padding: 0;
list-style: none
}
.skipit-row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 8px 0;
border-bottom: 1px dashed #edf0f4
}
.skipit-row:last-child {
border-bottom: 0
}
.skipit-label-table {
font-size: 12px;
letter-spacing: .04em;
color: var(--skipit-muted);
font-weight: 800;
white-space: nowrap;
}
.skipit-value {
font-weight: 800
}
.skipit-row.total .skipit-value {
color: var(--skipit-secondary);
font-size: 18px
}
.skipit-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 6px 0 12px
}
.skipit-badge-cart {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff7f0;
color: #7a2e00;
border: 1px solid #ffd7b6;
border-radius: 999px;
padding: 6px 10px;
font-weight: 800;
font-size: 12px
}
.skipit-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: left;
}
.skipit-btn {
appearance: none;
border: 0;
border-radius: 12px;
padding: 12px 18px;
font-weight: 500;
cursor: pointer;
font-family: var(--button_typography-font-family);
}
.skipit-btn.primary {
background: #e31530;
color: #fff;
text-align: center;
margin-left: auto;
}
.skipit-btn.primary:hover {
background: var(--skipit-secondary);
color: #fff
}
.skipit-btn.secondary {
background: #fff;
color: var(--skipit-secondary);
border: 2px solid var(--skipit-secondary)
}
.skipit-btn:focus-visible {
outline: 3px solid var(--skipit-ring)
}
}
/* Responsive */
@media (max-width:620px) {
.step-4 {
.skipit-card {
grid-template-columns: 1fr;
gap: 12px;
text-align: left;
justify-content: left;
}
/*.skipit-media{margin:0 auto}*/
.skipit-actions {
width: 100%
}
.skipit-btn {
flex: 1 1 auto;
width: 100%
}
}
}
.booking_form_wrap {
max-width: 1530px;
margin: 0 auto;
}
@media only screen and (max-width: 640px) {
body .product_list .product_wrap {
width: calc(33.33% - 4px) !important;
.title {
font-size: 16px !important;
margin-bottom: 10px;
font-weight: 600;
line-height: 1.3;
}
.price {
padding: 3px 5px;
font-size: 12px !important;
}
}
}
div#ui-datepicker-div {
z-index: 999 !important;
}
body .product_list .product_wrap .ajax__loder img {
width: 50px;
}
.extra_charge_tab .product_detail {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.extra_charge_tab .product_detail .title {
width: calc(100% - 122px);
margin-bottom: 0;
text-align: left;
padding-right: 10px;
line-height: 1.3;
font-size: 14px !important;
}
.extra_charge_tab .product_detail .title span.plus_vat {
white-space: nowrap;
display: block;
font-weight: 500;
margin-top: 2px;
}
@media only screen and (max-width: 550px) {
body .booking_form_wrap .step-section {
margin-top: 30px;
}
body .booking_form_wrap .step-section h3.step_title {
margin-bottom: 20px !important;
}
.booking_form_wrap .nev-btn {
padding: 20px 0 0;
flex-wrap: wrap;
gap: 10px;
}
body .extra_charge_tab li.special_product_wrap {
margin-bottom: 5px !important;
}
.extra_charge_tab .product_detail {
padding: 5px;
}
.woocommerce .checkout h3 {
font-size: 24px !important;
margin-bottom: 10px !important;
}
}
@media(max-width: 425px){
input.next.btn.btn-next.btn-orange,
input.previous.btn.btn-previous
{
padding: 12px 24px;
font-size: 14px;
}
}
.inner_wrap2 p {
margin-bottom: 0 !important;
margin-top: 0px;
font-weight: 500;
font-size: 18px;
line-height: 1.3;
}
.inner_wrap2 h4 {
margin-top: 20px;
margin-bottom: 0;
}
.inner_wrap2 {
padding: 20px;
margin-top: 20px;
background: rgb(225 226 230 / 30%);
border-radius: 14px;
}
.woocommerce-side-nav li a {
padding: 5px !important;
line-height: 1.5;
font-size: 14px;
}
.checkout .input-text:not(textarea) {
height: 45px !important;
}
@media only screen and (max-width: 760px) {
form.checkout #billing_first_name_field,
form.checkout #shipping_first_name_field,
form.checkout #billing_last_name_field,
form.checkout #shipping_last_name_field {
margin-bottom: 10px !important;
}
}
@media only screen and (max-width: 640px) {
body.woocommerce-order-received #main {
.woocommerce-thankyou-order-received {
font-size: var(--h5_typography-font-size) !important;
margin-bottom: 10px;
}
.avada-customer-details .addresses .title h3,
.avada-myaccount-data .addresses .title h3 {
font-size: var(--h5_typography-font-size) !important;
}
.woocommerce-MyAccount-content form h3,
.woocommerce-MyAccount-content h2,
.woocommerce-content-box h2 {
font-size: var(--h5_typography-font-size) !important;
}
h3 {
font-size: var(--h5_typography-font-size) !important;
margin-top: 0;
margin-bottom: 10px !important;
}
.woocommerce-content-box h2 {
margin-bottom: 20px;
}
}
}
.math-question {
margin-right: 5px;
font-weight: bold;
}
.dscf7-captcha-container {
color: #000;
}
/* Booking Cart Card Design */
.booking-cart-card,.product-cart-summary {
/*max-width: 500px;*/
max-width: 700px;
margin: 20px auto;
background: #fff;
border-radius: 12px;
overflow: hidden;
/*box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/
border: 1px solid var(--color-border-default);
/*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;*/
}
.booking-cart-header,.product-cart-header {
background: var(--skipit-primary);
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
}
.booking-cart-header-left {
display: flex;
align-items: center;
gap: 15px;
}
.booking-cart-icon {
width: 60px;
height: 60px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.booking-cart-icon img {
width: 40px;
height: 40px;
object-fit: contain;
}
.booking-cart-title {
font-size: 18px;
font-weight: 600;
}
.booking-cart-total-price {
font-size: 22px;
font-weight: 700;
}
.booking-cart-body {
padding: 0;
background: #FEF6EE;
}
.booking-cart-item {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr;
gap: 10px;
padding: 20px 40px;
background: #fff;
/*border-bottom: 1px solid #f0f0f0;*/
align-items: center;
}
.booking-cart-item-name {
font-size: 16px;
color: #111;
font-weight: 500;
text-align: left;
}
.booking-cart-item-calc {
font-size: 16px;
color: #333;
text-align: left;
font-weight: normal;
}
.booking-cart-item-price {
font-size: 16px;
color: #333;
font-weight: 600;
text-align: right;
}
.booking-cart-summary {
padding: 15px 40px 20px;
background: #fef9f5;
}
.booking-cart-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
font-size: 16px;
}
.booking-cart-row.callout-row {
border-bottom: 1px solid #e0e0e0;
padding-bottom: 15px;
margin-bottom: 10px;
}
.booking-cart-row.total-row {
font-size: 16px;
font-weight: 700;
color: #333;
padding-top: 15px;
}
.booking-cart-label {
color: #333;
font-weight: bold;
}
.booking-cart-value {
font-weight: 600;
color: #333;
}
.booking-cart-actions {
padding: 0 25px 25px;
background: #fef9f5;
}
.booking-checkout-btn {
display: block;
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #ff8844 0%, #ff6622 100%);
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.booking-checkout-btn:hover {
background: linear-gradient(135deg, #ff7733 0%, #ff5511 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255,102,34,0.4);
color: #fff;
}
@media (max-width: 600px) {
.booking-cart-card {
margin: 10px;
}
.booking-cart-header{
padding: 10px 10px;
}
.booking-cart-item {
/*grid-template-columns: 1fr;*/
gap: 5px;
padding: 20px 10px;
}
.booking-cart-summary{
padding: 15px 10px 20px;
}
/*.booking-cart-item-calc,
.booking-cart-item-price {
text-align: left;
}*/
.booking-cart-header {
flex-direction: row;
align-items: center;
gap: 5px;
}
.booking-cart-icon{
width: 50px;
height: 50px;
}
.booking-cart-title{
font-size: 14px;
}
.booking-cart-total-price {
font-size: 16px;
}
}
@media (max-width: 485px) {
.booking-cart-item{
padding: 15px 10px;
}
.booking-cart-item-name,.booking-cart-item-calc,.booking-cart-item-price,.booking-cart-row,.booking-cart-row.total-row{
font-size: 13px;
}
}
@media (max-width: 444px) {
.booking-cart-row{
font-size: 13px;
}
}
/* Step 4: Extra Charge Styles */
/*.step4-info-bar {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 15px 20px;
background: #f8f8f8;
border-radius: 8px;
margin-bottom: 25px;
font-size: 14px;
}*/
.step4-info-bar {
display: flex;
justify-content: center;
gap: 10px;
padding: 0;
/* background: #f9f9f9; */
border-radius: 8px;
margin-bottom: 30px;
flex-wrap: wrap;
}
/*.step4-info-item {
display: inline-flex;
align-items: center;
gap: 5px;
}*/
.step4-info-bar .step4-info-item {
font-size: 16px;
color: #111111;
line-height: 1.5;
border: 1px solid var(--color-border-default);
padding: 10px 20px;
border-radius: 10px;
}
.step4-info-item strong {
color: #333;
font-weight: 600;
}
.step4-info-item span {
color: #111;
}
/*.extra-charge-wrapper {
background: #fef9f5;
border-radius: 8px;
padding: 10px 0;
margin-bottom: 25px;
}*/
.extra-charge-wrapper {
background: #fef9f5;
border-radius: 10px;
padding: 40px 40px;
margin-bottom: 0px;
}
.extra-cost-wrapper {
max-height: 767px;
overflow-y: auto;
padding-right: 5px;
}
.extra-cost-wrapper::-webkit-scrollbar {
width: 8px;
background: #fff;
border-radius: 10px;
}
/* Track */
/*.extra-cost-wrapper::-webkit-scrollbar-track {
background: transparent;
}*/
/* Handle */
.extra-cost-wrapper::-webkit-scrollbar-thumb {
background: #ff8a33;
border-radius: 10px;
}
/* Handle on hover */
.extra-cost-wrapper::-webkit-scrollbar-thumb:hover {
background: #e67624;
}
/*.extra-charge-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 25px;
background: #fff;
border-bottom: 1px solid #f0f0f0;
position: relative;
}*/
.extra-charge-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background: #fff;
border-bottom: none;
position: relative;
border-radius: 10px;
margin-bottom: 10px;
}
.extra-charge-row:last-child {
border-bottom: none;
}
.extra-charge-left {
display: flex;
/*flex-direction: column;*/
/*gap: 5px;*/
gap: 30px;
flex: 1;
}
/*.extra-charge-name {
font-size: 16px;
font-weight: 600;
color: #333;
}*/
.extra-charge-name {
font-size: 18px;
font-weight: 600;
color: #111;
line-height: 1.5;
}
/*.extra-charge-price {
font-size: 18px;
font-weight: 700;
color: #ff6622;
display: flex;
align-items: baseline;
gap: 5px;
}*/
.extra-charge-price {
font-size: 24px;
font-weight: 600;
color: var(--skipit-primary-color);
display: flex;
align-items: baseline;
gap: 5px;
line-height: 1.4;
}
/*.extra-vat-text {
font-size: 13px;
font-weight: 500;
color: #ff6622;
}*/
.extra-vat-text {
font-size: 20px;
font-weight: 400;
color: #111;
line-height: 1.5;
}
/*.extra-per-item {
font-size: 13px;
font-weight: 400;
color: #999;
}*/
.extra-per-item {
font-size: 16px;
font-weight: 400;
color: #111;
line-height: 1.5;
}
.extra-charge-right {
display: flex;
align-items: center;
position: relative;
}
/*.extra-quantity-controls {
display: flex;
align-items: center;
gap: 0;
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 25px;
overflow: hidden;
}
.extra-qty-btn {
width: 40px;
height: 40px;
background: #fff;
border: none;
color: #ff6622;
font-size: 20px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}*/
.extra-quantity-controls {
display: flex;
align-items: center;
gap: 10px;
background: #fef5f0;
border: 1px solid #fef5f0;
border-radius: 50px;
overflow: hidden;
padding: 8px 8px;
}
.extra-qty-btn {
width: 30px;
height: 30px;
background: #fff;
border: none;
color: #ff6622;
font-size: 20px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
line-height: 30px;
}
.extra-charge-right .extra-quantity-controls.cust_quantity input.extra-qty-value {
background: transparent;
border: 0;
height: 30px;
font-size: 20px;
line-height: 1.5;
width: 50px;
padding: 0 5px;
}
/*.extra-qty-btn:hover {
background: #fff5f0;
color: #ff4400;
}*/
.extra-qty-btn:hover {
background: var(--skipit-primary-color);
color: #fff;
}
.extra-qty-btn:active {
transform: scale(0.95);
}
.extra-qty-value {
width: 50px;
height: 40px;
text-align: center;
border: none;
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
font-size: 16px;
font-weight: 600;
color: #333;
background: #fff;
padding: 0;
margin: 0;
}
.extra-charge-row .ajax_loder1 {
position: absolute;
right: 0;
top: 50%;
background: rgba(255, 255, 255, 0.95);
padding: 5px;
width: 100%;
height: 100%;
border-radius: 0;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
}
.extra-charge-row .ajax_loder1 img {
width: 20px;
}
.no-products-msg {
text-align: center;
padding: 40px 20px;
color: #999;
font-size: 16px;
}
/* Responsive Design for Step 4 */
@media (max-width: 995px) {
.extra-charge-left{
flex-direction: column !important;
gap: 1px !important;
}
.extra-charge-name{
text-align: left;
}
}
@media (max-width: 768px) {
.step4-info-bar {
flex-direction: column;
gap: 10px;
/*padding: 12px 15px;*/
}
.extra-charge-row {
/*flex-direction: column;*/
align-items: flex-start;
gap: 15px;
padding: 15px;
}
/*.extra-charge-left {
width: 100%;
}*/
/*.extra-charge-right {
width: 100%;
justify-content: flex-end;
}*/
.extra-charge-name {
font-size: 15px;
}
.extra-vat-text {
font-size: 15px;
}
.extra-charge-price {
font-size: 16px;
}
}
@media (max-width: 767px) {
.product_list{
gap: 0px 20px;
}
.product_list {
grid-template-columns: repeat(1, 1fr);
}
body .product_list .product_wrap {
width: calc(100% - 0px) !important;
}
}
@media (max-width: 600px) {
.extra-charge-wrapper{
padding: 20px 20px;
}
.extra-quantity-controls{
gap: 5px;
padding: 5px 5px;
}
.extra-qty-btn{
width: 25px;
height: 25px;
line-height: 25px;
font-size: 15px;
}
.extra-charge-right .extra-quantity-controls.cust_quantity input.extra-qty-value{
width: 40px;
}
}
@media (max-width: 485px) {
.extra-vat-text{
font-size: 13px;
}
.extra-per-item{
font-size: 13px;
}
.extra-charge-right .extra-quantity-controls.cust_quantity input.extra-qty-value {
font-size: 15px;
}
}
@media (max-width: 480px) {
.extra-charge-row{
gap: 5px;
padding: 10px 8px;
}
.step4-info-item {
width: 100%;
}
/*.extra-qty-btn {
width: 35px;
height: 35px;
font-size: 18px;
}*/
.extra-qty-value {
width: 45px;
height: 35px;
font-size: 14px;
}
}
@media (max-width: 441px) {
.extra-charge-row {
flex-direction: column;
align-items: center;
}
.extra-charge-name {
text-align: center;
}
.extra-charge-price {
justify-content: center;
}
}
@media (max-width: 425px) {
.product_wrap .cust_quantity_box{
flex-wrap: wrap;
}
.product_wrap .cust_quantity_box .tonnes-label {
flex: 1 1 1000%;
}
.booking-cart-item{
grid-template-columns: 1fr;
}
.booking-cart-item-price{
text-align: left;
}
.booking-cart-item{
border-bottom: 1px solid rgb(1 1 1 / 6%);
}
}
@media (max-width: 373px) {
.booking-cart-header-left .booking-cart-icon , .product-cart-icon {
display: none !important;
}
}
@media (max-width: 335px) {
.booking-cart-row {
flex-direction: column;
align-items: flex-start;
}
}
/*.booking_form_wrap .step-section .step1-form-row > .step1-field:first-child {
flex: 0 0 auto;
}*/
/*.booking_form_wrap .step-section .step1-form-row > .step1-field:first-child .select2-selection--single .select2-selection__rendered {
padding: 12px 20px;
font-size: 16px;
line-height: 1.5;
}*/
/*---Select----*/
.tm-input-flex-element {
display: flex;
width: 100%;
}
.tm-input-flex-element span.select2.select2-container.select2-container--default {
flex: 0;
}
.tm-input-flex-element span.select2-selection {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right: 0;
/*border-width: 0px !important;*/
}
.tm-input-flex-element span.select2-selection .select2-selection__rendered {
padding: 12px 30px 12px 20px;
font-size: 16px;
line-height: 1.5;
font-weight: 500;
/* width: auto; */
/*min-height: 50px;*/
/*height: 48px;
min-height: 48px;*/
color: #fff;
min-width: 171px;
}
.tm-input-flex-element span.select2-selection span.select2-selection__arrow {
border-width: 0 !important;
}
.tm-input-flex-element span.select2.select2-container.select2-container--default + div {
flex: 1;
}
body .tm-input-flex-element span.select2.select2-container.select2-container--default + div input#postcode_suffix.error {
border-left-width: 0 !important;
}
.tm-input-flex-element span.select2.select2-container.select2-container--default + div input {
width: 100%;
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
border-radius: 0;
padding: 12px 15px;
line-height: 1.5;
/*height: auto !important;
min-height: 50px;*/
border: 1px solid #d1d5db;
font-size: 16px;
background: #fff;
transition: all 0.3s ease;
border: 1px solid #d1d5db;
}
.tm-input-flex-element span.select2.select2-container.select2-container--default + div input::placeholder {
font-weight: 500;
color: #111;
}
.select2-results__option{
font-size: 16px;
}
/*.select2-container .select2-dropdown {
border-color: var(--skipit-primary-color) !IMPORTANT;
}*/
.tm-input-flex-element .select2-container .select2-selection{
border-color: var(--skipit-primary-color) ! IMPORTANT;
background: var(--skipit-primary-color) ! IMPORTANT;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--skipit-primary-color);
color: white;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
background-color: var(--skipit-primary-color);
color: #fff;
}
/*.tm-input-flex-element span.select2-selection span.select2-selection__arrow b {
margin: -3px 0 0;
filter: brightness(0) invert(1);
}*/
/*.step1-field input#deliveryDate {
width: 100% !IMPORTANT;
height: 50px;
}*/
.step1-field input#deliveryDate {
width: 100% !IMPORTANT;
height: auto;
padding: 12px 15px;
line-height: 1.5;
border-radius: 10px !IMPORTANT;
min-height: 50px;
border: 1px solid #d1d5db;
font-size: 16px;
background: #fff;
transition: all 0.3s ease;
border: 1px solid #d1d5db;
}
.step1-field input#deliveryDate::placeholder {
color: #000;
font-weight: 500;
}
form#registration_form * {
box-sizing: border-box;
}
.tm-input-flex-element span.select2-selection[aria-expanded="true"] span.select2-selection__arrow b {
transform: rotate(180deg);
}
:focus-visible {
outline-color: var(--skipit-primary-color) ! IMPORTANT;
}
@media(max-width: 1024px){
.step1-form-row{
flex-wrap: wrap;
}
.step1-field {
flex: 1 1 100%;
width: 100%;
}
}
@media(max-width: 484px){
.skipit-box {
min-height: 50px !important;
}
.skipit-step {
min-width: 35px !important;
}
.skipit-badge , .skipit-step.skipit-is-current .skipit-badge{
width: 30px;
height: 30px;
padding: 5px 5px;
font-size: 15px;
}
}
@media(max-width: 425px){
.tm-input-flex-element {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.tm-input-flex-element span.select2.select2-container.select2-container--default {
flex: 1 1 100%;
}
.tm-input-flex-element span.select2-selection {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border-right: 12px !important;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.tm-input-flex-element span.select2.select2-container.select2-container--default + div input{
border-radius: 12px !important;
}
.tm-input-flex-element span.select2.select2-container.select2-container--default + div {
margin-top: 10px;
}
.tm-input-flex-element .error + span.select2.select2-container span.select2-selection {
border-right: 2px solid red !IMPORTANT;
}
body .tm-input-flex-element span.select2.select2-container.select2-container--default + div input#postcode_suffix.error {
border-left-width: 2px !important;
border-radius: 10px ! IMPORTANT;
}
body .tm-input-flex-element span.select2.select2-container.select2-container--default + div input {
border-left-width: 1px !important;
}
}
@media(max-width: 364px){
.skipit-step {
min-width: 44px !important;
}
.skipit-box {
min-height: 44px !important;
}
.skipit-badge, .skipit-step.skipit-is-current .skipit-badge {
width: 27px;
height: 27px;
padding: 5px 5px;
font-size: 14px;
}
.skipit-step:before, .skipit-step:after {
top: 20px;
}
}
@media(max-width: 347px){
/*.skipit-step:before, .skipit-step:after{*/
/* display: none !important;*/
/*}*/
.skipit-stepper{
gap: 5px;
}
}
/* Product Cart Summary Styles */
/*.product-cart-summary {
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
max-width: 550px;
margin: 20px auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.product-cart-header {
background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%);
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}*/
.product-cart-header-left {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.product-cart-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
flex-shrink: 0;
background: #ffffff;
border-radius: 50%;
}
.product-cart-icon img {
width: 40px;
height: 40px;
object-fit: contain;
}
.product-cart-icon svg {
width: 100%;
height: 100%;
display: block;
}
.product-cart-title {
color: #ffffff;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
margin: 0;
}
.product-cart-price {
color: #ffffff;
font-size: 22px;
font-weight: 700;
line-height: 1;
flex-shrink: 0;
}
.product-cart-details {
padding: 20px 40px;
background: #fef9f5;
}
.product-cart-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
}
.product-cart-row:last-child {
border-bottom: none;
}
.product-cart-total {
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid #e0e0e0;
border-bottom: none;
}
.product-cart-label {
color: #333333;
font-size: 16px;
font-weight: 400;
}
.product-cart-total .product-cart-label {
font-weight: 700;
font-size: 16px;
}
.product-cart-value {
color: #333333;
font-size: 16px;
font-weight: 600;
}
.product-cart-total .product-cart-value {
font-size: 16px;
font-weight: 700;
}
.product-cart-actions {
padding: 25px 25px;
background: #ffffff;
}
.product-cart-checkout-btn {
display: block;
width: 100%;
background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%);
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
padding: 16px 24px;
border-radius: 50px;
border: none;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}
.product-cart-checkout-btn:hover {
background: linear-gradient(135deg, #ff7a2e 0%, #ff5521 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
color: #ffffff;
text-decoration: none;
}
.product-cart-checkout-btn:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}
/* Responsive Design */
@media (max-width: 768px) {
.product-cart-summary {
max-width: 100%;
margin: 15px;
border-radius: 10px;
}
.product-cart-header {
padding: 16px 20px;
flex-direction: row;
}
.product-cart-title {
font-size: 16px;
}
/*.product-cart-price {
font-size: 28px;
}*/
.product-cart-details {
padding: 20px;
}
.product-cart-actions {
padding: 20px;
}
}
@media(max-width: 640px){
.product-cart-icon {
width: 50px;
height: 50px;
}
}
@media (max-width: 480px) {
.product-cart-header {
padding: 14px 16px;
gap: 12px;
}
/*.product-cart-icon {
width: 28px;
height: 28px;
}
.product-cart-icon img {
width: 14px;
height: 14px;
}*/
.product-cart-title {
font-size: 14px;
}
.product-cart-price {
font-size: 17px;
}
.product-cart-details {
padding: 16px;
}
.product-cart-row {
padding: 10px 0;
}
.product-cart-label,
.product-cart-value {
font-size: 14px;
}
.product-cart-total .product-cart-label {
font-size: 16px;
}
.product-cart-total .product-cart-value {
font-size: 16px;
}
.product-cart-actions {
padding: 16px;
}
.product-cart-checkout-btn {
font-size: 16px;
padding: 14px 20px;
}
}
/* ========================================
Term Details Popup Styles (Fancybox)
======================================== */
.term-details-popup {
background: #fff;
width: 100%;
}
/*.term-popup-header {
background: #f9fafb;
padding: 25px 30px;
border-bottom: 1px solid #e5e7eb;
}*/
.term-popup-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
margin: 0;
line-height: 1.3;
}
.term-popup-body {
padding-top: 20px;
}
.term-popup-columns {
display: flex;
gap: 30px;
align-items: flex-start;
}
.term-popup-left {
max-width: 200px;
width: 100%;
}
.term-popup-image {
width: 100%;
/*border-radius: 20px;*/
overflow: hidden;
/*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
}
.term-popup-image img {
width: 100%;
height: auto;
display: block;
}
.term-popup-right {
/* flex: 1; */
width: calc(100% - 230px);
}
.term-popup-description {
font-size: 16px;
line-height: 1.5;
color: #333333;
}
.term-popup-description p {
margin: 0 0 15px 0;
}
.term-popup-description p:last-child {
margin-bottom: 0;
}
.term-popup-description h3,
.term-popup-description h4,
.term-popup-description strong {
color: #f97316;
font-weight: 600;
margin: 20px 0 12px 0;
font-size: 16px;
}
.term-popup-description h3:first-child,
.term-popup-description h4:first-child {
margin-top: 0;
}
.term-popup-description ul,
.term-popup-description ol {
margin: 12px 0 15px 0;
padding-left: 20px;
}
.term-popup-description li {
margin-bottom: 8px;
line-height: 1.6;
}
.term-popup-description li strong {
color: #1f2937;
margin: 0;
}
/* Fancybox custom overrides for term popup */
.term-details-fancybox .fancybox-skin {
padding: 50px 30px !important;
border-radius: 30px !important;
box-shadow: 0px 0px 50px 0px rgba(244, 127, 53, 0.1)!important;
background: #fff !important;
border: 1px solid rgb(10 10 10 / 70%);
}
.term-details-fancybox .fancybox-close {
top: 15px !important;
right: 15px !important;
width: 36px !important;
height: 36px !important;
/*background: rgba(0, 0, 0, 0.6) !important;
border-radius: 50% !important;*/
transition: all 0.3s ease !important;
}
.term-details-fancybox .fancybox-close:hover {
/*background: rgba(0, 0, 0, 0.8) !important;*/
transform: rotate(90deg);
}
.term-details-fancybox .fancybox-close::before,
.term-details-fancybox .fancybox-close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
background: #333333;
transform: translate(-50%, -50%) rotate(45deg);
}
.term-details-fancybox .fancybox-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.term-details-fancybox .fancybox-inner {
overflow: auto !important;
height: auto ! IMPORTANT;
}
/* Responsive styles for term popup */
@media (max-width: 768px) {
/*.term-popup-header {
padding: 20px;
}*/
.term-popup-title {
font-size: 20px;
}
/*.term-popup-body {
padding: 20px;
}*/
.term-popup-columns {
flex-direction: column;
gap: 20px;
}
.term-popup-right {
width: 100%;
}
.term-popup-left {
max-width: 200px;
width: 100%;
}
.term-popup-description {
font-size: 14px;
}
.term-popup-description h3,
.term-popup-description h4 {
font-size: 15px;
margin-top: 15px;
}
}
@media (max-width: 640px) {
.term-details-fancybox .fancybox-skin{
padding: 30px 20px 30px !important;
border-radius: 20px !important;
}
.term-popup-image{
border-radius: 8px;
}
.term-details-fancybox .fancybox-close{
top: 5px !important;
right: 5px !important;
}
.service-card .service-title {
margin-bottom: 0;
font-size: 15px !important;
}
.service-card .service-more, .product_wrap .more-info-link {
display: none;
}
.service-card:hover {
/*border-color: var(--skipit-primary-color);*/
box-shadow: 0px 0px 0px 0 var(--skipit-primary-color);
}
}
.term-popup-description strong {
background: #fef5f0;
display: block;
padding: 10px;
margin-bottom: 0;
border-radius: 12px;
font-weight: 500;
}
.step-card .postcode_msg {
margin-top: 20px;
}