/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 11 2026 | 15:18:39 */
div#sb-booking-wrapper {
    width: 100% !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.cart:has(div#sb-booking-wrapper) {
    display: block !important;
}

.sb-left-steps {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sb-step {
    background: #0B0050;
    padding: 30px;
    border-radius: 32px;
}

.sb-step h3 {
    font-family: Century Gothic;
    font-weight: 700;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
    color: #fff;
}

.sb-step-1 > h3 {
    margin-bottom: 50px;
}

.sb-step-1 .sb-court-buttons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.sb-step-1 .sb-court-buttons .sb-court-btn {
    flex: 1;
    flex-basis: 110px;
    margin: 0px !important;
    border: 1px solid #F2FA12;
    background: #F2FA121F;
    border-radius: 10px;
    color: #F2FA12;
    padding: 20px;
    font-family: Century Gothic;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.3px;
    text-transform: uppercase;
}

.sb-step-1 .sb-court-buttons .sb-court-btn:hover {
    background: #f2fa1238;
}

.sb-step-1 .sb-court-buttons .sb-court-btn.active {
    background:  #F2FA12;
    color: #000000;
}

.sb-step-1 div#sb-court-details:empty {
    display: none;
}

.sb-step-1 div#sb-court-details { 
    font-family: Century Gothic;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.3px;
    color: #FFFFFFDE;
}

.sb-step2-heading-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
} 

div#sb_time_grid {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.sb-time-grid .sb-time-btn {
    flex: 1;
    flex-basis: 110px;
    margin: 0px !important;
    background: #FFFFFF;
    border-radius: 10px;
    color: #0B0050;
    padding: 20px;
    font-family: Century Gothic;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.3px;
    text-transform: uppercase;
}

.sb-time-grid .sb-time-btn.active div#sb-booking-wrapper {
    width: 100% !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.cart:has(div#sb-booking-wrapper) {
    display: block !important;
}

.sb-left-steps {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sb-step {
    background: #0B0050;
    padding: 30px;
    border-radius: 32px;
}

.sb-step h3 {
    font-family: Century Gothic;
    font-weight: 700;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
    color: #fff;
}

.sb-step-1 > h3 {
    margin-bottom: 50px;
}

.sb-step-1 .sb-court-buttons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.sb-step-1 .sb-court-buttons .sb-court-btn {
    flex: 1;
    flex-basis: 110px;
    margin: 0px !important;
    border: 1px solid #F2FA12;
    background: #F2FA121F;
    border-radius: 10px;
    color: #F2FA12;
    padding: 20px;
    font-family: Century Gothic;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.3px;
    text-transform: uppercase;
}

.sb-step-1 .sb-court-buttons .sb-court-btn:hover {
    background: #f2fa1238;
}

.sb-step-1 .sb-court-buttons .sb-court-btn.active {
    background:  #F2FA12;
    color: #000000;
}

.sb-step-1 div#sb-court-details:empty {
    display: none;
}

.sb-step-1 div#sb-court-details {
    margin-top: 32px;
    font-family: Century Gothic;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.3px;
    color: #FFFFFFDE;
} 

.sb-step2-heading-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div#sb_selected_date {
    margin-top: 40px;
} 

input#sb_date{
    position: relative;
    font-family: Century Gothic;
    font-weight: 700;
    font-style: Bold;
    font-size: 30px; 
    line-height: 120%;
    letter-spacing: -3%;
    text-transform: uppercase;
    border: none;
    background: transparent;
    appearance: none;
    text-align: center;
    color: #ffffff;
}

input#sb_date::-webkit-calendar-picker-indicator {
    background: transparent !important; 
    position: absolute;
    top: 0px;
    left: 0px; 
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}


.sb-step2-heading-row img {
    width: 90px;
    height: 20px;
    display: block;
    object-fit: contain;
}
    
div#sb_time_grid {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.sb-time-grid .sb-time-btn {
    flex: 1;
    flex-basis: 137px;
    margin: 0px !important;
    background: #FFFFFF;
    border-radius: 10px;
    color: #0B0050;
    padding: 17px;
    font-family: Century Gothic;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.3px;
    text-transform: uppercase;
} 

.sb-time-grid .sb-time-btn:hover {
    background: #ffffffe0;
}

.sb-time-grid .sb-time-btn.active{
    background:  #F2FA12;
    color: #000000;
}

.sb-time-grid .sb-time-btn.disabled{
	pointer-events:none;
	position:relative;
}
.sb-time-grid .sb-time-btn.disabled{
	background:  #b2b2b2 !important;
}
.sb-time-grid .sb-time-btn.disabled {
    pointer-events: none;
    background: #939393 !important;
    color: #393939 !important;
    position: relative;
    overflow: hidden;
}
.sb-time-grid .sb-time-btn.disabled:before{
    content: "Reserved";
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    opacity: 1;
}

.sb-time-grid .sb-time-btn.past-time.disabled::before {
    display: none;
}



/* Past time CSS start */
.sb-time-btn.past-time {     
    pointer-events: none;     
    background: #939393 !important;     
    color: #393939 !important;     
    position: relative;     
    overflow: hidden;  
}  

.sb-time-btn.past-time::after {     
    content: "Time Passed";     
    position: absolute;     
    bottom: 6px;     
    left: 0;     
    width: 100%;     
    display: flex;     
    justify-content: center;     
    align-items: center;     
    font-size: 10px;     
    opacity: 1; 
}
/* Past time CSS end */


.sb-duration {
    margin-top: 40px;
}

.sb-duration h4 {
    font-family: Century Gothic;
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
    color: #ffffff;
}

.sb-duration-wrap {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.sb-duration-wrap .sb-duration-btn {
    flex: 1;
    flex-basis: 137px;
    max-width: 187px;
    margin: 0px !important;
    background: #FFFFFF;
    border-radius: 10px;
    color: #0B0050;
    padding: 17px;
    font-family: Century Gothic;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.3px;
    text-transform: uppercase;
} 

.sb-duration-wrap .sb-duration-btn:hover {
    background: #ffffffe0;
}

.sb-duration-wrap .sb-duration-btn.active{
    background:  #F2FA12;
    color: #000000;
}

.sb-duration-headin-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.sb-durationnnnn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sb-durationnnnn svg {
    height: 20px;
    width: 20px;
}

.sb-durationnnnn p {
    margin: 0px !important;
    font-family: Century Gothic;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.3px;
    color: #fff;
}

.sb-add-to-cart {
    margin-top: 40px;
}

.sb-add-to-cart .single_add_to_cart_button {
    margin: 0px !important;
    background: #FFFFFF;
    border-radius: 10px;
    color: #0B0050 !important;
    padding: 21px !important;
    font-family: Century Gothic !important;
    font-weight: 700 !important;
    font-size: 0px !important;
    line-height: 100% !important;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    background: #F2FA12 !important;
}

.sb-add-to-cart .single_add_to_cart_button::before {
    content: "";
    display: block;
    height: 16px;
    width: 16px;
    background-image: url(https://lightcyan-boar-984063.hostingersite.com/wp-content/uploads/2025/12/add-circle.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sb-add-to-cart .single_add_to_cart_button::after {
    content: "Confirm Booking";
    font-size: 14px !important;
}

.sb-summary {
    background: #0B0050;
    padding: 30px;
    border-radius: 32px;
    grid-column: span 2;
}

.sb-summary h3 {
    font-family: Century Gothic;
    font-weight: 700;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
    color: #fff;
}

.sb-summary-dets-wrap {
    margin-top: 40px;
    display: grid;
    grid-template-columns: max-content 1fr 1fr 1fr 1fr 1fr max-content;
    gap: 16px;
}

.sb-summary-row.sb-slot-image {
    width: 80px;
    padding-top: 60px;
}

.sb-summary-row.sb-slot-image img {
    width: 100%;
    aspect-ratio: 1/1;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}

.sb-summary-row > span:first-child {
    font-family: "Century Gothic", Sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 56px;
    color: #FFFFFFB2;
}

.sb-summary-row > span:last-child {
    font-family: "Century Gothic", Sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.1px;
    text-transform: uppercase;
    display: block;
    color: #FFFFFF;
}

.sb-summary-row:not(.sb-slot-image) {
    padding: 8px;
}

.sb-summary-row:has(button#delete-slot) {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

.sb-summary-row button#delete-slot {
    padding: 16px 0px !important;
    background: transparent !important;
}

p.sb-timer-note {
    font-family: "Century Gothic", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 131%;
    letter-spacing: -0.48px;
    color: #000;
    margin-top: 20px;
}

.quantity + .single_add_to_cart_button {
    margin: 0px !important;
    margin-left: auto !important;
    margin-top: 30px !important;
    background: #FFFFFF;
    border-radius: 10px;
    color: #0B0050 !important;
    padding: 21px !important;
    font-family: Century Gothic !important;
    font-weight: 700 !important;
    font-size: 0px !important;
    line-height: 100% !important;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    width: fit-content !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    background: #F2FA12 !important;
}

.quantity + .single_add_to_cart_button::before {
    content: "Proceed to Checkout";
    font-size: 14px !important;
}

.quantity + .single_add_to_cart_button::after {
    content: "";
    display: block;
    height: 16px;
    width: 16px;
    background-image: url(https://lightcyan-boar-984063.hostingersite.com/wp-content/uploads/2025/12/solar_arrow-up-outline.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}  

.sb-court-dets-block {
    margin-top: 32px;
}

.sb-court-dets-block .sb-custom-field {
    font-family: Century Gothic;
    font-weight: 400;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.3px;
    color: #FFFFFFDE;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sb-step-1 div#sb-court-details {
    margin-bottom: 24px;
}

.sb-product-description > h3:first-child {
    display: none;
}

.sb-product-description {
    font-family: Century Gothic;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.3px;
    color: #ffffff;
    margin-top: 24px;
}

.sb-product-description > p:last-child {
    margin-bottom: 0px;
}

.sb-court-dets-block .sb-custom-field strong {
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


.sb-hidden {
    display: none;
}

.sb-see-more-btn {
      color: white;
    background: transparent;
    padding: 0;
    text-decoration: underline;
    font-size: 16px;
    text-transform: uppercase;
    margin: 0;
}

body:has(#sb_date:invalid) :is(.sb-time-btn, .sb-duration-btn) {
    filter: grayscale(1);
    pointer-events: none;
    opacity: 0.7;
    user-select: none;
} 

body:has(#sb_date:invalid) :is(.sb-time-grid, #sb_duration_wrap) {
    cursor: not-allowed;
}



section.woocommerce-order-details #sb-thankyou-timer {
    display: none !important;
} 




@media (max-width: 1080px){
	.sb-time-grid .sb-time-btn, 
	.sb-duration-wrap .sb-duration-btn {
		flex-basis: 110px !important;
	}
	
	.sb-time-grid .sb-time-btn, button.sb-duration-btn {
		flex-basis: 110px !important;
	}

	.sb-step h3, .sb-summary h3 {
		font-size: 22px;
	}

	.sb-court-dets-block .sb-custom-field {
		font-size: 16px;
		line-height: 140%;
		letter-spacing: -0.3px;
		width: 100%;
	}	
	
}








@media (max-width: 767px) { 
	
	div#sb-booking-wrapper {
		grid-template-columns: 100% !important;
	}

	.sb-summary {
		grid-column: auto;
	}	 
}



@media (max-width: 575px) {
	.sb-step-2 {
		flex-direction: column !important;
		gap: 30px !important;
		align-items: flex-start !important;
	} 
}