/**
Theme Name: Miami Shuttle Transportation Child
Author: Oncemillon LLC
Author URI: https://oncemillon.com/portafolio/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miami-shuttle-transportation-child
Template: astra
*/

/* =========================================================
   HERO (CONTENEDOR PADRE)
   - Debe estar en el Container que tiene la imagen de fondo
   - Clase en el bloque: mst-hero
   ========================================================= */

.mst-hero{
  position: relative !important;
  overflow: hidden !important;

  /* alto del banner */
  min-height: 640px;

  /* full width real aunque Astra tenga container */
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Si tu Container trae padding interno de Astra, lo anulamos */
.mst-hero > .uagb-container-inner,
.mst-hero .uagb-container__inner-wrap{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =========================================================
   FRANJA AZUL + CONTENIDO (UN SOLO CONTENEDOR)
   - Clase en el bloque hijo: mst-hero-band
   - Este bloque DEBE estar dentro del mst-hero
   ========================================================= */

.mst-hero-band{
  position: absolute !important;

  /* ubicación base del "centro" de la franja dentro del hero */
  top: 52%;
  left: 26%;

  /* tamaño de la franja (más controlable que 150% de alto) */
  width: 120vw;
  height: 340px;

  background: rgba(15, 63, 145, 0.95);

  /* inclinación */
  transform: translate(-50%, -50%) rotate(-42deg);
  transform-origin: center;

  z-index: 2;

  /* centrar contenido dentro de la franja */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* espacio interno (ajusta a gusto) */
  padding: 40px 60px;
}

/* =========================================================
   TIPOGRAFÍA y BOTÓN dentro de la franja
   (heredan la inclinación porque están dentro del contenedor rotado)
   ========================================================= */

.mst-hero-band h1,
.mst-hero-band p{
  color: #fff !important;
  margin: 0 !important;
  text-align: center;
  text-transform: uppercase;
}

.mst-hero-band h1{
  font-size: 46px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .5px;
  margin-bottom: 14px !important;
}

.mst-hero-band p{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: .95;
  margin-bottom: 18px !important;
}

/* Botón de Gutenberg / Spectra */
.mst-hero-band .wp-block-button__link,
.mst-hero-band a{
  display: inline-block;
  background: #f5b31a !important;
  color: #111 !important;
  text-decoration: none !important;

  padding: 14px 28px;
  border-radius: 12px;

  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;

  width: fit-content;
}

/* Hover */
.mst-hero-band .wp-block-button__link:hover,
.mst-hero-band a:hover{
  filter: brightness(.95);
}
.mst-hero-band-mobile.wp-block-uagb-container.alignfull.uagb-is-root-container .uagb-container-inner-blocks-wrap{
	margin-left:10px !important;
}
/* Estilo de rutas populares homepage / Mobile */
.popular-rutes-mobile .wc-block-product{
    background-color:white;
}
.popular-rutes-mobile .wp-block-woocommerce-product-image, .popular-rutes-mobile .wc-block-product{
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}
/* === WooCommerce Standard booking Datepicker === */
.wc-bookings-date-picker .ui-datepicker td.bookable a {
    background-color: #d8bd77 !important;
}
.wc-bookings-date-picker .ui-datepicker td.bookable-range .ui-state-default {
    background-color: #b2964e !important;
}
.wc-bookings-booking-form .block-picker li a.selected {
    background-color: #b2964e !important;
}
.wc-bookings-booking-form .block-picker a:hover{
	background: #d8bd77 !important;
}
/* === WooCommerce Add-ons: Datepicker === */
.ui-datepicker.wc_pao_datepicker{
  position: absolute;
  z-index: 99999 !important;
  background: #fff !important;
  border: 1px solid #dbe2f0 !important;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  overflow: hidden !important;
  height: auto !important;
  min-width: 300px;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
.ui-datepicker.wc_pao_datepicker .ui-datepicker-header {
  background: #B2964E;
  color: #fff;
  border: 0;
  padding: 12px 16px;
  line-height: 1.2;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.ui-datepicker.wc_pao_datepicker .ui-datepicker-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
}
.ui-datepicker.wc_pao_datepicker .ui-datepicker-title select {
  min-width: 100px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
  text-align-last: center;
}
.ui-datepicker.wc_pao_datepicker .ui-datepicker-title select option {
  color: #1f2937;
  background: #fff;
}
.ui-datepicker.wc_pao_datepicker .ui-datepicker-prev,
.ui-datepicker.wc_pao_datepicker .ui-datepicker-next {
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  cursor: pointer;
}
.ui-datepicker.wc_pao_datepicker .ui-datepicker-prev span,
.ui-datepicker.wc_pao_datepicker .ui-datepicker-next span { display: none; }
.ui-datepicker.wc_pao_datepicker .ui-datepicker-prev::before,
.ui-datepicker.wc_pao_datepicker .ui-datepicker-next::before {
  content:""; display:block; width:0; height:0; border-style:solid; margin:0 auto;
}
.ui-datepicker .ui-datepicker-prev::before { border-width:6px 8px 6px 0; border-color:transparent #fff transparent transparent; }
.ui-datepicker .ui-datepicker-next::before { border-width:6px 0 6px 8px; border-color:transparent transparent transparent #fff; }
.ui-datepicker.wc_pao_datepicker table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 10px 12px 12px; font-size: 13px; }
.ui-datepicker.wc_pao_datepicker th { padding: 6px 0; font-weight: 700; color: #2D4995; text-align: center; font-size: 12px; }
.ui-datepicker.wc_pao_datepicker td { padding: 0; }
.ui-datepicker.wc_pao_datepicker td a, .ui-datepicker td span {
  display: block;
  width: 100%;
  padding: 8px 0;
  text-align: center;
  text-decoration: none;
  color: #1f2937;
  background: transparent;
  border: 0;
  font-size: 14px !important;
}
.ui-datepicker.wc_pao_datepicker td a:hover { background: #eef2ff; }
.ui-datepicker.wc_pao_datepicker .ui-state-active,
.ui-datepicker.wc_pao_datepicker .ui-state-highlight {
  background: #B2964E !important;
  color: #fff !important;
  border-radius: 4px;
}