/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #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   {
	/* add your css rule here */
}


 #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 */
}



/* Body stays Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
body { font-family: 'Open Sans', sans-serif !important; }

/* FORCE Times New Roman on service CARD titles (multiple theme variants) */
.sb-card__title,
.sb-service__name,
.sb-service-name,
.service-name,
.service__title,
.service-title,
.serviceItem .name,
.service-item .name,
.services .item .title,
[class*="booking"] [class*="service"] [class*="title"],
[class*="booking"] [class*="service"] [class*="name"] {
  font-family: 'Times New Roman', serif !important;
  font-weight: 700 !important;
}

/* Body font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
body {
  font-family: 'Open Sans', sans-serif !important;
}

/* Service titles */
.cap.short {
  font-family: 'Times New Roman', serif !important;
  font-weight: 700 !important;
}

div.cap.short {
  font-family: 'Times New Roman', serif !important;
  font-size: 24px !important; /* Tamaño más grande */
  font-weight: bold; /* Más marcado */
  letter-spacing: 0.5px; /* Espaciado entre letras */
}

div.cap.short {
  font-family: 'Times New Roman', serif !important;
  font-size: 24px !important;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #B23A48 !important; /* Rosa profundo elegante */
}


.company-name {
    color: #ffffff !important; /* white */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); /* soft shadow */
    font-family: "Times New Roman", serif; /* change to Times New Roman */
    font-size: 60px; /* keep same size or adjust as needed */
}


div.company-name {
    color: #ffffff !important; /* white */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* stronger shadow */
    font-family: "Times New Roman", serif !important;
    font-size: 60px !important;
}


/* HERO title: white + strong text-shadow */
div.company-name,
div.company-name *,
div.company-name > *,
div.company-name > * > * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: "Times New Roman", serif !important;
  text-shadow: 3px 3px 8px rgba(0,0,0,0.55) !important; /* the shadow */
}

/* Fallback: drop-shadow on the title element(s) */
div.company-name,
div.company-name * {
  display: inline-block !important;            /* ensures filter applies to text box */
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55)) !important;
}

@media (max-width: 600px) {
  div.company-name { font-size: 40px !important; }
}

#sb_invoice_payment_systems_container > div.payment-system.v2.active.payment-system-delay > div.name {
  font-size: 0 !important; /* hide the original text */
  position: relative !important;
}

#sb_invoice_payment_systems_container > div.payment-system.v2.active.payment-system-delay > div.name::after {
  content: "Transferencia Bancaria";
  font-size: 16px;
  color: #2B212B; /* same color as original */
  position: absolute;
  left: 0;
  top: 0;
}

document.querySelectorAll("#sb_invoice_payment_systems_container .payment-system-delay .name")
.forEach(el => el.textContent = "Transferencia Bancaria");



/* New label */
#sb_invoice_payment_systems_container .payment-system-delay .name::after,
#sb_invoice_payment_systems_container .payment-system-delay.active .name::after {
  content: "Transferencia Bancaria";
  font-size: 16px !important;
  color: #2B212B !important;        /* tweak if you prefer another color */
  position: absolute;
  left: 0; right: 0;
  top: 0;
  text-align: center;
}

/* Hide the built-in label (normal + active states) */
#sb_invoice_payment_systems_container .payment-system-delay .name,
#sb_invoice_payment_systems_container .payment-system-delay .name *,
#sb_invoice_payment_systems_container .payment-system-delay.active .name,
#sb_invoice_payment_systems_container .payment-system-delay.active .name * {
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  position: relative !important;
  display: block !important;
  white-space: nowrap !important;
}

/* Our replacement label */
#sb_invoice_payment_systems_container .payment-system-delay .name::after,
#sb_invoice_payment_systems_container .payment-system-delay.active .name::after {
  content: "Transferencia Bancaria";
  font-size: 16px !important;
  color: #2B212B !important;
  position: absolute;
  left: 0; right: 0;
  top: 0;                 /* adjust if needed: 2px, -2px, etc. */
  text-align: center;
  pointer-events: none;
}


/* Make both tiles control their own caption position */
#sb_invoice_payment_systems_container .payment-system {
  position: relative !important;
}

/* Hide the built-in captions under both tiles */
#sb_invoice_payment_systems_container .payment-system .name {
  font-size: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* New captions, perfectly aligned for BOTH tiles */
#sb_invoice_payment_systems_container .payment-system-stripe::after {
  content: "Stripe";
  position: absolute;
  left: 0; right: 0;
  bottom: -28px;                 /* tweak -24 to -32 if needed */
  text-align: center;
  font-size: 16px;
  color: #2B212B;
}

#sb_invoice_payment_systems_container .payment-system-delay::after {
  content: "Transferencia Bancaria";
  position: absolute;
  left: 0; right: 0;
  bottom: -28px;                 /* same offset => same height as Stripe */
  text-align: center;
  font-size: 16px;
  color: #2B212B;
}