/* ============================================
   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:linear-gradient(135deg, #007aff 0%, #0051d5 100%);
  color:#fff;
  border-radius:14px;
  padding:16px 32px;
  font-size:16px;
  font-weight:700;
  letter-spacing:-0.2px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,122,255,.35), 0 2px 8px rgba(0,122,255,.2);
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}
.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.75);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,0.2);
  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);
}

/* =========================
   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:9999999 !important;
}

.modal-backdrop.show{
  z-index:9999998 !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);
  }
}