/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
@import url('https://fonts.googleapis.com/css?family=Quicksand');

/* Apply font */
body {
    font-family: 'Quicksand' !important;
}

#sb_coupon_wrap,
#sb_coupon_code {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide company title on booking page */
.company-name, 
.company-title, 
.sb-company-name {
    display: none !important;
}

#main #main-content #sb_content #sb-timeline #steps-content #sb_booking_content .step-content.service-step::before{
  content: "Choose your package: 50-min Weekend | 20-min Weekday | 150-min October Special";
  display: block;
  text-align: center;
  font-size: 28px;
  color: #516191;
  margin: 20px 0;
  font-weight: 500;
  width: 100%;
  line-height: 1.4;
}

#sb-timeline #steps #steps-content #sb_booking_content .paid-attribute-wrapper .paid-attribute-step #sb_attribute_list_container .product-item {
    background-color: rgba(81, 97, 146, 0.05) !important;
}

.btn.map {
  display: none !important;
}

/* change map link to gallery */
/* .btn.map a {
  font: 0;
}


/* remove book now button spaces in between */
#main #main-buttons .company-name,
#main-buttons .wrapper .inner .bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
}

#main-buttons .wrapper .inner .bar {
  padding: 200px 0 0 !important;
}

#main #main-buttons .btn.book {
    background: #516192 !important;
    color: #fff !important;
    border: 1px solid #516192;
    font-weight: 900;
}

#main #main-buttons .btn.book a{
    color: #fff !important;
    font-weight: 900;
}

/* change modal style */
#steps-content #sb_booking_content .tab .full-info {
    background-color: #ffffff ;
    color: #8d6748;
    font-weight: bold;
}


.btn.map a:after {
  content: 'Gallery';
  font-size: 18px;
}

 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/*  */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}







/*CSS customised text */

/* Hide only the "Office Hours" title - Home Page */
#schedule .section-pd > .title-main {
    display: none;  /* completely hides the element */
}

/* My Little Heart beat-spacing - main page */
.col-sm-4 col-md-6.title-main {}

section#about-us { line-height: 1;}

/* Hide the Category row in booking info */
.booking-info--item.booking-info--item_category-name {
    display: none !important;
}


/*Payment page - Early bird savings text*/
#sb_invoice_deposit_container .deposit-paid-event .alert.alert-info {
  font-size: 0; /* hide the original text */
}

#sb_invoice_deposit_container .deposit-paid-event .alert.alert-info::before {
  content: "Early Bird Savings: ";
  font-weight: bold;
  white-space: pre-line;
  font-size: 14px;
  color: #516192;
}

#sb_invoice_deposit_container .deposit-paid-event .alert.alert-info::after {
  content: "Get 10% off when you pay in full. Use coupon code BIGBEAT\A(Valid until Sept 30 only)";
  font-weight: normal;
  white-space: pre-line;
  font-size: 14px;
  color: #516192;
}

/* removed the search bar on service provider page*/
input.form-control.filter--input-field.sb-input {
  display: none !important;
}

/* Promo banner at top of cart */
.right-block--body::before {
    content: "Early Bird Savings!\A Get 10% OFF when you pay in full using coupon code BIGBEAT\A (Valid until Sept 30, 2025)\A\AJust go to the coupon section at the top of this page and enter the code to claim your discount!";
    white-space: pre-line; /* enables line breaks */
    display: block;
    background: linear-gradient(90deg, #ffecb3, #ffe082); /* bright yellow gradient */
    color: #6b3e00; /* rich brown text for readability */
    padding: 18px 20px;
    margin-bottom: 20px;
    border-left: 8px solid #ff9800; /* bold orange accent */
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    text-align: left;
}

/* Payment Methods */

/* Hide the Original payment method text */
.payment-system-container--txt-block .title.title--h3,
.invoice-payment-systems-choose.label {
    display: none;
}

/* Add new custom title + all instructions */
.payment-system-container--txt-block::before {
    content: "Payment Method\A\APlease prepare to scan the QR code.\A\A✅ The QR code is COMPATIBLE with:\A• BPI\A• UnionBank\A• ChinaBank\A• RCBC\A• GCash\A• Maya\A";
    display: block;
    white-space: pre-line;
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 12px;
    color: #5a4a42;
    font-weight:500;
    
}

/* Style “Please prepare…” in blue */
.payment-system-container--txt-block::before {
    font-weight: 400;
	color: #333;
}
.payment-system-container--txt-block::before {
    /* Unfortunately can’t style partial text via content directly,
       so we’ll fake it by wrapping whole block and re-injecting red later */
}

/* Unsupported Banks in red (separate block) */
.payment-system-container--txt-block::after {
    content: "❌ It is NOT SUPPORTED with: \A• BDO\A• SecurityBank\A• Metrobank";
    display: block;
    white-space: pre-line;
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    color: #5a4a42; /* red */
    margin-top: 20px;
    margin-bottom: 10px;
}





/*Hurry Message at the cart*/
.btn-bar--row::before {
    content: "Hurry! Items in your cart will expire in 15 minutes unless payment is completed. If they expire, they'll take 20 minutes to become available again.";
    display: block;
    white-space: pre-line;
    color: #516192;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    margin: 0;               /* remove default margin */
    padding-left: 15px;      /* match cart left padding */
    padding-right: 15px;     /* match cart right padding */
}

.filter.filter__booking-step {
	display: none !important;
}

#sb_next_month .fa,
	#sb_prev_month .fa {
		display: inline !important;
	}

#sb-timeline #steps #steps-content #sb_booking_content .datetime-step .header span.txt {
background-image: none !important;
}

#sb_location_step_container .location-item:nth-child(2) {
display: none;
}

@media (max-width: 767px) {
	
	#sb_datetime_step_container #sb_sidebar_container.hidden-xs {
        display: block !important;
    }
}