/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.wt-steps{display:flex;justify-content:space-between;}
.service-wt-service-options{display:grid;grid-template-columns: repeat(2, 1fr);column-gap:60px;margin-top: 20px;}
.booking-service{background-color:#96B281;border-radius:30px;padding:24px;position:relative;}
.form-curve::after{position:absolute;content:"";right:0;top:0;background:url("../images/form-curve.png")no-repeat;width:100%;height:100%;max-width:158px;}
.booking-service img{justify-self:center;}
.booking-service figure{background-color:#fff;padding-top: 10px;border-radius: 10px;height: max-content;}
.service-category-title{font-size:24px;font-family:"Outfit-Bold";color:#fff;letter-spacing:1px;margin-bottom:20px;position:relative;}
.service-category-title::after{content:"";position:absolute;bottom:-10px;left:0;width:78%;height:1px;background:#F5F5F5;opacity:0.5;}
.booking-service p{font-size:16px;font-family:"Outfit-Regular";color:#333333;letter-spacing:1px;padding-top:5px;}
.service-wt-select{font-size:18px;font-family:"Outfit-Medium";color:#F5F5F5;background:#333333;border:none;position:relative;padding:12px 55px 12px 19px;border-radius: 20px;}
.service-wt-select::after{position:absolute;right:20px;top:18px;content:"";padding:6px;border-radius:50%;border:solid 2px #fff;width:16px;height:16px;}
.service-wt-select-button{position:absolute;top:0;right:0;width:auto!important;z-index:1;padding-right: 0px !important;padding-left: 0px !important;}
.service-wt-select.active::after, .service-size-card.active.selected .wt-select::after{background-color:#fff;}
.service-wt-step-content{border-bottom:solid 1px #33333333;padding:30px 0px}
.wt-footer{text-align:end;margin-top:30px;}
.wt-total,.appled_coupon_value{font-size:18px;font-family:"Outfit-Bold";color:#4E7B39;}
.wt-prev,.wt-next{font-family:"Outfit-Bold";color:#F5F5F5;font-size:18px;letter-spacing:1px;padding:8px 24px;border-radius:3px;background:#333333;margin:0px 20px;}

.size-wt-select.selected, .service-wt-select.selected.active {background: #4e7b39 !important;}
.upload-box .preview { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 10px; }
.upload-box .preview button{border: 1px solid red; font-size: 15px; padding: 5px 15px; border-radius: 5px;}
.time_slot_message.d-none {display: none;}
#postcode_edit{ width: fit-content; display: inline-block; padding: 5px 15px !important; border: 1px solid #cccccc; border-radius: 5px; margin: unset !important; font-size: 16px !important; margin-top: 10px !important;}
.postcode_data{ margin: 0; padding: 12px; background: white; border-radius: 10px; border: 1px solid #cccccc; }
.apply_coupon_btn{height: 50px;}
.apply-coupon{align-items: end;}
.cancel_coupon_btn {  background-color: red !important;padding: 4px 10px; border: 0;border-radius: 5px;font-size: 14px;color: #fff;}
.size_price span{font-size: 18px !important;font-family:"Outfit-Bold";color:#333333;}
.size_price{font-style: italic;font-family: "Poppins-Regular";font-weight: 400;color: #333333;font-size: 14px; margin-top: 15px;}
.wt-service-card .image-box{padding:0px !important;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.pickup-form{padding: 30px 0px;}
.form-row{margin-top: 20px !important;}
.form-group,.message-area { flex: 1; display: flex; flex-direction: column; }
.pickup-btn {padding: 10px 20px;background: #4CAF50;border: none;color: #fff;cursor: pointer;border-radius: 5px;}
.pickup-btn:hover { background: #45a049; }
.form-group label,.message-area label{  font-style: italic;font-family: "Poppins-Regular";font-weight: 400;color: #333333CC;font-size: 14px;margin: 10px 0px;}
.message-area textarea{padding: 20px 10px 100px 10px;margin-bottom: 20px;border: 1px solid #33333333;border-radius: 10px;}
.form-group input{padding: 12px;border: 1px solid #33333333;border-radius: 10px;}
.required-icon{color: red;}

/* order Form */
 .order-details { padding: 50px; background-color: #FFFFFF; border: 1px solid #33333333; border-radius: 10px; }
.order-details div { margin-bottom: 20px; display: grid; grid-template-columns: repeat(2, 1fr); }
.order-details label {font-size: 20px;color: #333333;margin-bottom: 15px;font-weight: 400;font-family: "Outfit-Regular";}
.order-details span {font-size: 20px;color: #333333;margin-bottom: 15px;font-weight: 600;font-family: "Outfit-SemiBold";margin-left: 40px;}
.order-details .price {font-weight: bold;color: #333;}
.apply-coupon {display: flex;flex-direction: row;}
.apply-coupon input { width: 90%; padding: 8px; margin-right: 10px;border-radius: 4px;border: 1px solid #ccc;}
.apply-coupon button { padding: 8px 15px; background-color: #4E7B39; color: white; border: none; border-radius: 4px; cursor: pointer;}
.apply-coupon button:hover {background-color: #45a049;}
.form-privacy{font-style: italic;font-family: "Poppins-Regular";font-weight: 400;color: #333333CC;font-size: 14px;margin-top: 20px;}
.discount{display: flex;flex-direction: column;}
.wt-popup-overlay{position: fixed;top: 0; left: 0;width: 100%; height: 100%;background: rgba(0,0,0,0.6);display: flex;justify-content: center;align-items: center;z-index: 9999;}
.wt-popup-content{ background: #fff;  }
.wt-popup-content #wt-step-postcode { max-width: 500px; }
#wt-step-postcode h3{font-size:28px;font-family:"Outfit-semiBold";color:#333333;margin-bottom:0px 0px 40px 0px; padding-bottom: 20px;text-transform: capitalize; position: relative;line-height:36px;}
#wt-step-postcode h3:after{ position: absolute; content: ''; width: 100%; height: 4px; margin-top: 20px; background: #4E7B39; display: block; }
#wt-step-address h3{font-size:24px;font-family:"Outfit-Medium";color:#333333; position: relative; margin-bottom: 40px;}
#wt-step-address{padding: 40px 20px;height: 100%; overflow-y: scroll; padding-left: 30px; overflow: hidden;}
#wt-step-address h3:after{ position: absolute; content: ''; width: 100%; height: 4px; margin-top: 20px; background: #4E7B39; display: block; }
#wt-address-list { height: 60vh;overflow-y: scroll;  scrollbar-width: none; -ms-overflow-style: none;}
#wt-address-list::-webkit-scrollbar {display: none;}
#wt-step-postcode{ padding:40px; }
#wt-postcode-input{font-size: 18px;font-family: "Outfit-Regular";border: solid 1px #e1e1e1;padding: 10px 18px;}
#wt-check-postcode{padding: 10px 18px;border: solid 1px #e1e1e1;font-size: 16px;font-family: "Outfit-Regular";margin-left: 16px;background: #45a049;color: #fff;letter-spacing: 1px; margin-bottom: 24px;}
.wt-address-item{list-style-type:none;font-family:"Outfit-Regular";color:#333333;font-size:18px;padding:15px 35px;cursor:pointer; margin: 12px 0;}
.wt-address-item:nth-child(odd){background:#F7FFDB;}
.wt-address-item:nth-child(even){background:#FBFFED;}
.wt-address-item:hover{background:#96B281;}
.wt-popup-content{ border-radius: 24px; }

.wt-attach-photo{padding: 50px 0px;}
.upload-photo-wrapper{ display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
  align-items: flex-start;
  justify-content: space-between;}
  .upload-box{text-align: center;background-color: #FFF;border-radius: 15px; }
  .upload-title{font-size: 18px;
  font-style: italic;
  font-family: "Poppins-Regular";
  font-weight: 400;color: #333333CC;margin-bottom: 0px;}
  .or{  font-family: "Poppins-Regular";
  font-weight: 400;color: #333333CC;font-size: 16px;margin-bottom: 10px;}
  .upload-btn .fas{color: white !important;
    font-size: 20px !important;margin-right: 20px;}
 .upload-btn{color: #FFFFFF;font-weight: 700;font-size: 18px;font-family: "Outfit-Bold";padding: 15px 35px;background-color: #4E7B39;border: unset;border-radius: 5px;} 
.upload-inner { position: relative;margin: 15px;padding: 40px 20px;  border-radius: 10px;display: flex;flex-direction: column;  align-items: center;justify-content: center;

 /* Border animation */
background-image: repeating-linear-gradient(0deg, #3333334D 0 10px, transparent 10px 20px),   repeating-linear-gradient(90deg, #3333334D 0 10px, transparent 10px 20px), repeating-linear-gradient(180deg, #3333334D 0 10px, transparent 10px 20px), repeating-linear-gradient(270deg, #3333334D 0 10px, transparent 10px 20px); 
  background-size: 2px calc(100% + 20px), calc(100% + 20px) 2px, 2px calc(100% + 20px), calc(100% + 20px) 2px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  animation: borderAnim 1s linear infinite;
}

@keyframes borderAnim {
  from {
    background-position: 0 0, -20px 0, 100% -20px, 0 100%;
  }
  to {
    background-position: 0 -20px, 0 0, 100% 0, -20px 100%;
  }
}
.wt-step-progress {position: relative;font-size: 18px;font-family:"Outfit-Regular";color:rgba(51, 51, 51, 1);display: flex;flex-direction: column;align-items: center;}
.wt-step-progress.active,.wt-step-progress.completed {color: #96B281;}
.wt-step-progress.active .progress-circle,.wt-step-progress.completed .progress-circle{background:#96B281;}
#pickup-info-form button { background-color: #333333; font-family: "Outfit", Sans-serif; font-size: 18px;font-weight: 700; letter-spacing: 1px; fill: #FFFFFF; color: #FFFFFF; border-radius: 5px 5px 5px 5px; padding: 15px 25px 15px 25px; width: fit-content; margin: auto; border: 0; transition: all .6s;}
#pickup-info-form button:hover{ background-color: #4E7B39; transition: all .6s;}
.green-text{color:#4E7B39;}
.wt-progressbar {display: flex;justify-content: space-between;margin-bottom: 20px;position: relative; margin-top: 20px; }
.wt-progressbar::before {  content: "";  position: absolute;  top: 16%;  left: 0;  width: 100%;  height: 2px;  background: #ccc;}
.progress-circle{ display:block; width: 14px;  height: 14px; background: #ccc; border-radius:50%; }
.size_price {font-size: 15px;}
.size_price span{ font-size: 20px; font-weight: 500; }
.row.wt-service-card {display: flex !important; flex-direction: row;}
/* Size */
.wt-service-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}
.form-title {
  color: #333333;
  font-size: 24px;
  font-family: "Outfit-Bold";
  font-weight: 700;}
.wt-service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #96B281;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  position: relative;
}
.wt-service-card::after{position: absolute;right: -2px;top: -1px;content: "";width: 160px;height: 83px;background: url(../images/form-curve.png)no-repeat;border-top-right-radius: 20px;}
.wt-service-card .meta{
  margin-bottom: 10px;
  color: #F5F5F5;
  font-size: 16px;
  font-style: italic;
  font-family: "Poppins-SemiBold";
  font-weight: 600;
}

.wt-service-card h4 {
  margin: 0 0 30px;
  color: #FFFFFF;
  font-size: 24px;
  font-family: "Outfit-Bold";
  font-weight: 700;
}
.divider-line{position: relative;}
.divider-line::after{position: absolute;content: ""; width: 290px;height: 1px;background-color: #F5F5F5;top: -15px;left: 0px;}
.wt-service-card .desc {
  font-size: 16px;
  color: #333333;
  margin-bottom: 15px;
  flex-grow: 1; 
  overflow: visible; 
  font-weight: 400;
  font-family: "Outfit-Regular";
}
.size-wt-select-button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}

/* Button styles */
.wt-service-card .size-wt-select-button .wt-select {
  position: relative;
  background: #333;
  color: #F5F5F5;
  border: none;
  padding: 13px 55px 14px 19px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 18px;
  font-weight: 500;
  font-family: "Outfit-Medium";
  overflow: hidden; /* ensures pulses don’t leak outside */
}

.wt-service-card .wt-select:hover {
  background: #4E7B39;
}

/* Circle indicator on the right */
.wt-select::after {
  position: absolute;
  top: 17px;
  right: 17px;
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50px;
  background-color: #333;
  border: 2px solid #FFF;
  z-index: 2;
}

@keyframes pulse {
  0% { transform: scale(0.5); opacity: 1; }
  50% { opacity: 0.5; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes pulse-2 {
  0% { transform: scale(2); opacity: 1; }
  50% { opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

.pulse-bg,
.pulse-bg-2 {
  top: 17px;
  right: 17px;
  width: 15px;
  height: 15px;
  background-color: #33333333; 
  border-radius: 50%;
  position: absolute;
  z-index: 1;
}

.pulse-bg {
  animation: pulse 1.5s ease-in-out infinite;
}

.pulse-bg-2 {
  background-color: #9c9999;
  animation: pulse-2 1.5s ease-in-out infinite;
}
#wt-booking-popup.hidden{ display: none !important; }
#wt-booking-popup.show{ display: flex !important; }
.postcode_back_button{ padding: 5px 20px 5px 20px; background-color: #333333; color: white; font-family: "Outfit", Sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 1px; border-radius: 5px 5px 5px 5px; margin: 15px 0; }

@media(max-width:1199px){
	.service-wt-service-options{column-gap:40px;}
	.service-wt-select {padding: 9px 44px 9px 19px;}
	.service-wt-select::after {top:15px}
	.wt-prev, .wt-next {padding:4px 20px;}
}
@media(max-width:991px){
	.service-category-title {margin-top:20px;font-size:22px;}
	.booking-service{display: block !important;width:100%;padding:10px;border-radius:20px;}
	.service-content-category-title{padding-right:0px!important;padding-left:0px!important;}
	.service-wt-step-content {padding-bottom:30px}
	.wt-footer {margin-top:20px;}
}
@media(max-width:767px){
	.service-wt-service-options{grid-template-columns:repeat(1,1fr);gap:20px;justify-items: center;}
	#wt-step-postcode { padding: 20px; }
}
@media(max-width:599px){
	.booking-service figure {max-width:90px}
	.service-category-title{margin-top: 10px;}
	.wt-prev, .wt-next {margin:10px 0px}
  .order-details div{margin-bottom: 10px;}
  .apply-coupon button{font-size: 12px;}
  #payment-result h3{font-size: 20px;}
   #payment-result p{word-wrap: break-word;
    font-size: 16px;}
}
@media(max-width:479px){
	.booking-service figure {max-width:90px}
	.service-category-title{margin-top: 10px;}
	.wt-prev, .wt-next {margin:10px 0px}
}

#custom-pay-btn {padding: 10px 25px 10px 25px;border-radius: 10px;border: 0;background: #4e7b39;font-family: "Outfit-Bold";
    color: #F5F5F5;
    font-size: 18px;}
@media(min-width:608px){
	.sq-card-iframe-container{height: 50px!important;}
}

.toggle-dropdown {cursor: pointer;}
h6{text-transform: none;}
.dropdown_content a{color: #000;}
.service-wt-select.selected::before,.wt-select.size-wt-select.selected::before {
    content: "\2713";       
    position: absolute;
    right: 19px;            
    top: 15px;
    font-weight: 900;   
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    color: #000;             
    border-radius: 50%;
    width: 18px;
    height: 18px;
    z-index: 99;
}
.service-wt-select.selected::after,.wt-select.size-wt-select.selected::after{
  right: 20px;
  top: 14px;
  width: 25px;
  height: 25px;
	background:#fff
}

/*  */
.wt-addons.skip-hire {line-height: 30px;}
.time_slot_message {color: #333333CC;}
@media(max-width:767px){
	.wt-step-progress.active {font-size: 18px !important;}
	.wt-step-progress {font-size: 14px !important;}
	.service-wt-step-content, .pickup-form {padding: 20px 0px !important;}
	.service-wt-step-content .order-details {padding: 30px !important;}
	.service-wt-step-content .order-details label {font-size: 18px;}
	.service-wt-step-content .order-details span {font-size: 18px;margin-bottom: 15px;margin-left: 25px;line-height: normal;}	
}

@media(max-width: 576px){
	.service-wt-step-content, .pickup-form {padding: 15px 0px !important;}
	.service-wt-step-content .order-details {padding: 20px !important;}
	.service-wt-step-content .order-details div {margin-bottom: 15px;}
	.service-wt-step-content .order-details label, .wt-booking-wizard .wt-prev, .wt-booking-wizard .wt-next, .wt-booking-wizard .wt-total, .wt-booking-wizard .appled_coupon_value {font-size: 16px;}
	.service-wt-step-content .order-details span {font-size: 16px;margin-bottom: 12px;margin-left: 16px;}
	.wt-booking-wizard .wt-prev, .wt-booking-wizard .wt-next {padding: 4px 18px;}
	.upload-btn {padding: 12px 28px;}	
}

@media(max-width:479px){
	.wt-step-progress.active {font-size: 16px !important;}
	.wt-step-progress {font-size: 14px !important;}
	.service-wt-step-content, .pickup-form {padding: 10px 0px !important;}
	.divider-line::after {width: calc(100% + 32px)
	.service-wt-step-content .order-details {padding: 15px !important;}
	.service-wt-step-content .order-details span {margin-bottom: 8px;margin-left: 8px;}
}
	
@media(max-width:399px){
	.service-wt-step-content .order-details div {grid-template-columns: repeat(1, 1fr);}
	.service-wt-step-content .order-details span {margin-left: 12px;}
	.service-wt-step-content .order-details label {margin-bottom: 6px;}
}
	

/*  */