/* ============================================
   VIACOL FAST FORM - Apple Glass Style
   Bottom-to-Top Animation with Acceleration
   ============================================ */

.viacol-wpbff{max-width:980px;margin:0 auto}
.viacol-wpbff--inmodal{max-width:none;margin:0}

:root{
  --viacol-yellow:#f6b100;
  --viacol-black:#0b0b0b;
  --viacol-radius:24px;
  --viacol-shadow:0 24px 70px rgba(0,0,0,.30);
}

/* =========================
   Shortcode Button
   ========================= */
.viacol-wpbff-btn{
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    border: 0;
    background: #f3cb30;
    color: #000000;
    border-radius: 14px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    cursor: pointer;
    box-shadow: none!important;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}
.viacol-wpbff-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.viacol-wpbff-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,122,255,.45), 0 4px 12px rgba(0,122,255,.3);
}
.viacol-wpbff-btn:hover::before{opacity:1}
.viacol-wpbff-btn:active{transform:translateY(0)}
.viacol-wpbff-btn:focus{outline:none}
.viacol-wpbff-btn:focus-visible{
  box-shadow:0 0 0 4px rgba(0,122,255,.25), 0 12px 32px rgba(0,122,255,.45);
}

/* =========================
   Modal Container
   ========================= */
.viacol-wpbff-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:0;
}

.viacol-wpbff-modal.is-open{
  display:flex;
}

/* Backdrop - Strong Blur */
.viacol-wpbff-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(24px) saturate(120%);
  -webkit-backdrop-filter:blur(24px) saturate(120%);
}

/* =========================
   Panel - Glassmorphism + Bottom-to-Top
   ========================= */
.viacol-wpbff-modal__panel{
  position:relative;
  width:100%;
  max-width:540px;
  margin:0 auto 0;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,1);
  border-radius:24px 24px 0 0;
  box-shadow:
    0 -12px 48px rgba(0,0,0,.12),
    0 -4px 16px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  max-height:92vh;
  
  /* Initial state: fuera de pantalla (abajo) */
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Apertura: desde abajo con aceleración */
.viacol-wpbff-modal.is-open .viacol-wpbff-modal__panel{
  transform:translateY(0);
}

/* Cierre: hacia abajo SOLO con transform (sin opacity) */
.viacol-wpbff-modal:not(.is-open) .viacol-wpbff-modal__panel{
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(0.6, 0, 0.8, 0.4);
}

.viacol-wpbff-modal__panel::-webkit-scrollbar{
  width:7px;
}

.viacol-wpbff-modal__panel::-webkit-scrollbar-track{
  background:rgba(0,0,0,.04);
}

.viacol-wpbff-modal__panel::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.18);
  border-radius:10px;
  transition:background .2s ease;
}

.viacol-wpbff-modal__panel::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,.28);
}


.btn-default {
  padding:15px 20px!important;
  min-width: 200px;
  text-align: center;
}


/* =========================
   Close Button
   ========================= */
.viacol-wpbff-modal__close{
  position:absolute;
  top:18px;
  right:18px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.06);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  color:#1d1d1f;
  font-size:26px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index:10;
}

.viacol-wpbff-modal__close:hover{
  background:rgba(0,0,0,.12);
  transform:scale(1.08);
}

.viacol-wpbff-modal__close:active{
  transform:scale(0.94);
}

.viacol-wpbff-modal__close:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,122,255,.3);
}

/* =========================
   Header
   ========================= */
.viacol-wpbff-modal__head{
  padding:32px 28px 22px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.4) 100%
  );
  border-bottom:1px solid rgba(0,0,0,.08);
}

.viacol-wpbff-modal__brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.viacol-wpbff-modal__dot{
  width:9px;
  height:9px;
  background:linear-gradient(135deg, #007aff 0%, #0051d5 100%);
  border-radius:50%;
  box-shadow:0 2px 10px rgba(0,122,255,.5);
}

.viacol-wpbff-modal__brandtext{
  font-size:14px;
  font-weight:700;
  letter-spacing:0.8px;
  color:#1d1d1f;
}

.viacol-wpbff-modal__brandtext span{
  color:#007aff;
}

.viacol-wpbff-modal__title{
  margin:0 0 10px;
  font-size:32px;
  font-weight:800;
  color:#1d1d1f;
  letter-spacing:-0.8px;
  line-height:1.1;
}

.viacol-wpbff-modal__sub{
  margin:0;
  font-size:16px;
  color:#6e6e73;
  line-height:1.45;
  font-weight:400;
}

/* =========================
   Body
   ========================= */
.viacol-wpbff-modal__body{
  padding:28px;
}

/* =========================
   Form
   ========================= */
.viacol-wpbff__picker{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.viacol-wpbff__field{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.viacol-wpbff__label{
  font-size:14px;
  font-weight:700;
  color:#1d1d1f;
  letter-spacing:-0.15px;
}

/* =========================
   Inputs - Glassmorphism
   ========================= */
.viacol-wpbff select,
.viacol-wpbff input[type="date"],
.viacol-wpbff__sede,
.viacol-wpbff__date{
  width:100%;
  padding:16px 18px;
  font-size:17px;
  font-weight:500;
  color:#1d1d1f;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1.5px solid rgba(0,0,0,.12);
  border-radius:14px;
  outline:none;
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-appearance:none;
  appearance:none;
}

.viacol-wpbff select:hover,
.viacol-wpbff input[type="date"]:hover,
.viacol-wpbff__sede:hover,
.viacol-wpbff__date:hover{
  border-color:rgba(0,0,0,.2);
  background:rgba(255,255,255,0.8);
}

.viacol-wpbff select:focus,
.viacol-wpbff input[type="date"]:focus,
.viacol-wpbff__sede:focus,
.viacol-wpbff__date:focus{
  border-color:#007aff;
  background:rgba(255,255,255,0.95);
  box-shadow:0 0 0 4px rgba(0,122,255,.12);
}

.viacol-wpbff select:disabled,
.viacol-wpbff input[type="date"]:disabled,
.viacol-wpbff__sede:disabled,
.viacol-wpbff__date:disabled{
  opacity:0.5;
  cursor:not-allowed;
  background:rgba(255,255,255,0.35);
}

/* =========================
   Time Slots
   ========================= */
.viacol-wpbff__times{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
  gap:12px;
  min-height:48px;
}

.viacol-wpbff__time{
  padding:14px 18px;
  font-size:16px;
  font-weight:600;
  color:#007aff;
  background:rgba(0,122,255,.09);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1.5px solid rgba(0,122,255,.22);
  border-radius:12px;
  cursor:pointer;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align:center;
  line-height:1;
  white-space:nowrap;
}

.viacol-wpbff__time:hover{
  background:rgba(0,122,255,.18);
  border-color:rgba(0,122,255,.35);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,122,255,.2);
}

.viacol-wpbff__time:active{
  transform:scale(0.96);
}

.viacol-wpbff__time:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,122,255,.25);
}

.viacol-wpbff__time.is-active{
  background:linear-gradient(135deg, #007aff 0%, #0051d5 100%);
  border-color:#007aff;
  color:#fff;
  box-shadow:0 4px 16px rgba(0,122,255,.35);
}

/* =========================
   Help Text
   ========================= */
.viacol-wpbff__help{
  min-height:20px;
  font-size:14px;
  color:#6e6e73;
  line-height:1.4;
}

/* =========================
   Hidden Elements
   ========================= */
.viacol-wpbff__stage{
  position:absolute;
  left:-99999px;
  top:-99999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* =========================
   Inline Booking Form
   ========================= */
.viacol-wpbff__booking{
  margin-top:20px;
}

/* Los modales de WPBookit que aparecen normalmente */
.confirm-booking.modal.show,
.modal.show{
  z-index:999 !important;
}



.modal-backdrop.show{
  z-index:98 !important;
}

.viacol-wpbff-modal-open .wpb-shortcode-wrapper .btn-close.add-btn-close {
            font-size: 0.75rem !important;
}
.viacol-wpbff-modal-open .confirm-booking{
        margin: 0 !important;
    padding: 0 !important;
}

.viacol-wpbff-modal-open .modal-footer  button[type=button]:not(:disabled) {
    cursor: pointer;
    cursor: pointer;
    height: 46px !important;
    padding: 10px 34px !important;
    border-radius: 40px!important;
        font-weight: 900;
    font-size: 16px;
}


.viacol-wpbff-modal-open .modal-footer button[type=submit]:not(:disabled) {
    cursor: pointer;
    height: 46px !important;
    padding: 10px 34px !important;
        font-weight: 900;
    font-size: 16px;
}


.viacol-wpbff-modal-open .wpb-shortcode-wrapper .wpb-booking-shortcode button[type=submit]:not(:disabled) {
    background: #fcb900 !important;
    padding: 10px 30px !important;
}

.wpb-shortcode-booking-form .wpb-shortcode-wrapper .wpb-booking-shortcode .confirm-booking {
    background-color: #eee !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 20px;
}

    .wpb-shortcode-wrapper .modal-dialog {

        margin: 0!important;
        padding: 0!important;
    }
    
    .wpb-shortcode-wrapper .btn-close.add-btn-close {
    font-size: .75rem !important;
    border: 0px solid !important;
    color: #000 !important;
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, .10)!important;
    border-radius: 50% !important;
        padding: 11px !important;
}

.viacol-wpbff__booking .viacol-wpbff-inline,
.viacol-wpbff__booking .viacol-wpbff-modal-inline{
  position:static !important;
  inset:auto !important;
  display:block !important;
  opacity:1 !important;
  background:transparent !important;
  padding:0 !important;
  overflow:visible !important;
  height:auto !important;
}

.viacol-wpbff__booking .viacol-wpbff-inline .modal-dialog,
.viacol-wpbff__booking .viacol-wpbff-modal-inline .modal-dialog{
  max-width:100% !important;
  margin:0 !important;
}

.viacol-wpbff__booking .viacol-wpbff-inline .modal-content,
.viacol-wpbff__booking .viacol-wpbff-modal-inline .modal-content{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.viacol-wpbff__booking .viacol-wpbff-inline .modal-header,
.viacol-wpbff__booking .viacol-wpbff-modal-inline .modal-header{
  padding-bottom:14px !important;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.viacol-wpbff__booking .viacol-wpbff-inline .btn-close,
.viacol-wpbff__booking .viacol-wpbff-modal-inline .btn-close{
  opacity:.65;
  transition:opacity .2s ease;
}

.viacol-wpbff__booking .viacol-wpbff-inline .btn-close:hover,
.viacol-wpbff__booking .viacol-wpbff-modal-inline .btn-close:hover{
  opacity:1;
}

/* =========================
   Body Lock
   ========================= */
.viacol-wpbff-modal-open{
  overflow:hidden;
}

/* =========================
   Mobile Responsive
   ========================= */
@media (max-width: 640px){
  .viacol-wpbff-modal__panel{
    max-width:100%;
    max-height:94vh;
    border-radius:22px 22px 0 0;
  }

  .viacol-wpbff-modal__head{
    padding:28px 24px 20px;
  }

  .viacol-wpbff-modal__title{
    font-size:28px;
  }

  .viacol-wpbff-modal__body{
    padding:24px;
  }

  .viacol-wpbff__times{
    grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));
    gap:10px;
  }

  .viacol-wpbff__time{
    padding:12px 16px;
    font-size:15px;
  }
}

@media (max-width: 480px){
  .viacol-wpbff-modal__head{
    padding:24px 20px 18px;
  }

  .viacol-wpbff-modal__title{
    font-size:26px;
  }

  .viacol-wpbff-modal__body{
    padding:20px;
  }

  .viacol-wpbff__times{
    grid-template-columns:repeat(auto-fill, minmax(85px, 1fr));
    gap:8px;
  }
}

/* =========================
   Dark Mode Support
   ========================= */
@media (prefers-color-scheme: dark){
  .viacol-wpbff-modal__panel{
    background:rgba(28,28,30,0.85);
    border-color:rgba(255,255,255,.12);
    box-shadow:
      0 -12px 48px rgba(0,0,0,.25),
      0 -4px 16px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,0.1);
  }

  .viacol-wpbff-modal__head{
    background:linear-gradient(
      180deg,
      rgba(44,44,46,0.85) 0%,
      rgba(28,28,30,0.4) 100%
    );
    border-bottom-color:rgba(255,255,255,.12);
  }

  .viacol-wpbff-modal__title,
  .viacol-wpbff-modal__brandtext,
  .viacol-wpbff__label{
    color:#f5f5f7;
  }

  .viacol-wpbff-modal__sub,
  .viacol-wpbff__help{
    color:#a1a1a6;
  }

  .viacol-wpbff select,
  .viacol-wpbff input[type="date"],
  .viacol-wpbff__sede,
  .viacol-wpbff__date{
    background:rgba(58,58,60,0.7);
    border-color:rgba(255,255,255,.14);
    color:#f5f5f7;
  }

  .viacol-wpbff select:hover,
  .viacol-wpbff input[type="date"]:hover,
  .viacol-wpbff__sede:hover,
  .viacol-wpbff__date:hover{
    background:rgba(58,58,60,0.85);
    border-color:rgba(255,255,255,.2);
  }

  .viacol-wpbff-modal__close{
    background:rgba(255,255,255,.12);
    color:#f5f5f7;
    border-color:rgba(255,255,255,.2);
  }

  .viacol-wpbff-modal__close:hover{
    background:rgba(255,255,255,.18);
  }

  .viacol-wpbff__booking .viacol-wpbff-inline .modal-content,
  .viacol-wpbff__booking .viacol-wpbff-modal-inline .modal-content{
    background:rgba(44,44,46,0.85);
    border-color:rgba(255,255,255,.12);
  }
}


/* Hide sede selector when locked per-sede mode is used */
.viacol-wpbff[data-hide-sede="1"] .viacol-wpbff__field--sede{display:none !important;}


/* =========================================================
   FIX MOBILE: evita zoom al escribir + bloquea scroll lateral
   ========================================================= */

/* 1) Bloquea el overflow lateral del modal y del panel */
html, body{
  overflow-x: hidden;
  width: 100%;
}

/* Cuando el modal está abierto */
.viacol-wpbff-modal.is-open{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;          /* estable con teclado (iOS/Android modernos) */
  overflow: hidden;        /* no scroll en el contenedor externo */
  overscroll-behavior: none;
  touch-action: none;      /* evita “arrastres” raros del background */
}

/* Backdrop full */
.viacol-wpbff-modal__backdrop{
  position: absolute;
  inset: 0;
}

/* Panel: scroll interno solo vertical, nada lateral */
.viacol-wpbff-modal__panel{
  position: relative;
  width: min(96vw, 720px);
  max-width: 96vw;
  margin: 0 auto;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  box-sizing: border-box;
}

/* 2) Evita el “zoom” al enfocar inputs en iOS: min 16px */
.viacol-wpbff-modal__panel input,
.viacol-wpbff-modal__panel select,
.viacol-wpbff-modal__panel textarea{
  font-size: 16px !important;  /* clave */
  line-height: 1.25;
  max-width: 100%;
  box-sizing: border-box;
}

/* 3) Evita que cosas internas “empujen” el ancho (icons, grids, etc.) */
.viacol-wpbff-modal__panel *,
.viacol-wpbff-modal__panel *::before,
.viacol-wpbff-modal__panel *::after{
  box-sizing: border-box;
}

/* 4) Ajuste extra en móviles pequeños */
@media (max-width: 576px){
  .viacol-wpbff-modal__panel{
    width: 94vw;
    max-width: 94vw;
    margin: 12px auto;
    border-radius: 16px; /* opcional */
  }
}