/* =========================================================
   V6 — First-visit collapsed Booking Bar + luminous teaser
   ========================================================= */

.booking-dock.collapsed{
  width:auto!important;
  max-width:calc(100% - 20px);
  perspective:900px;
}

/* Compact three-dimensional direct-booking teaser */
.booking-expand{
  position:relative;
  isolation:isolate;
  display:none;
  align-items:center;
  justify-content:flex-start;
  gap:13px;
  width:auto!important;
  min-width:320px!important;
  min-height:70px!important;
  margin:0 auto;
  padding:9px 17px 9px 10px!important;
  overflow:hidden;
  color:#fff;
  border:1px solid rgba(255,255,255,.56)!important;
  border-radius:20px!important;
  background:
    linear-gradient(
      128deg,
      #39b5e7 0%,
      #586dde 34%,
      #7955d6 64%,
      #a542b8 100%
    )!important;
  box-shadow:
    0 4px 0 rgba(63,37,130,.92),
    0 10px 22px rgba(45,50,155,.34),
    0 22px 48px rgba(69,39,135,.30),
    inset 0 1px 0 rgba(255,255,255,.66),
    inset 0 -10px 25px rgba(47,24,117,.19)!important;
  text-align:left;
  cursor:pointer;
  transform-origin:center bottom;
  animation:
    bookingTeaserFloat 3.4s ease-in-out infinite,
    bookingTeaserGlow 2.8s ease-in-out infinite;
  transition:
    transform .25s ease,
    filter .25s ease,
    box-shadow .25s ease;
}

.booking-dock.collapsed .booking-expand{
  display:flex!important;
}

/* A moving light reflection across the surface */
.booking-expand::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-70%;
  bottom:-70%;
  left:-45%;
  width:34%;
  transform:rotate(18deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.10),
      rgba(255,255,255,.72),
      rgba(255,255,255,.13),
      transparent
    );
  filter:blur(1px);
  animation:bookingTeaserShimmer 3.2s ease-in-out infinite;
}

/* Soft aura behind the teaser */
.booking-expand::after{
  content:"";
  position:absolute;
  z-index:-2;
  inset:8px 12px -18px;
  border-radius:50%;
  background:
    radial-gradient(
      ellipse,
      rgba(82,197,255,.56),
      rgba(118,89,230,.35) 48%,
      rgba(173,59,193,.10) 72%,
      transparent
    );
  filter:blur(19px);
  opacity:.82;
  animation:bookingTeaserAura 2.8s ease-in-out infinite;
}

.booking-expand:hover{
  filter:saturate(1.09) brightness(1.06);
  transform:translateY(-4px) rotateX(-2deg) scale(1.025);
  box-shadow:
    0 5px 0 rgba(63,37,130,.94),
    0 13px 28px rgba(45,50,155,.42),
    0 28px 62px rgba(88,41,151,.38),
    0 0 28px rgba(87,193,255,.33),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -11px 26px rgba(47,24,117,.20)!important;
}

.booking-expand:active{
  transform:translateY(1px) scale(.985);
  box-shadow:
    0 2px 0 rgba(63,37,130,.94),
    0 7px 17px rgba(45,50,155,.32),
    inset 0 1px 0 rgba(255,255,255,.62)!important;
}

.booking-expand:focus-visible{
  outline:3px solid rgba(255,255,255,.96);
  outline-offset:4px;
}

.booking-expand-icon{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 48px;
  width:48px;
  height:48px;
  color:#fff;
  border:1px solid rgba(255,255,255,.56);
  border-radius:15px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.31),
      rgba(255,255,255,.10)
    );
  box-shadow:
    0 7px 16px rgba(36,31,113,.22),
    inset 0 1px 0 rgba(255,255,255,.48);
  font-size:1.12rem;
  font-weight:900;
  text-shadow:0 2px 7px rgba(31,24,105,.58);
  animation:bookingTeaserIcon 1.9s ease-in-out infinite;
}

.booking-expand-copy{
  display:flex!important;
  flex:1 1 auto;
  min-width:0;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  line-height:1.15;
}

.booking-expand-eyebrow{
  display:block!important;
  margin:0 0 1px;
  color:rgba(241,246,255,.88);
  font-size:.52rem!important;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

.booking-expand-copy b{
  display:block!important;
  color:#fff;
  font-size:.97rem;
  font-weight:900;
  letter-spacing:.005em;
  text-shadow:
    0 1px 1px rgba(31,23,98,.70),
    0 4px 13px rgba(38,25,111,.46);
  white-space:nowrap;
}

.booking-expand-hint{
  display:block!important;
  overflow:hidden;
  max-width:210px;
  color:rgba(244,246,255,.86);
  font-size:.61rem;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.booking-expand-arrow{
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  margin-left:2px;
  color:#fff;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
  font-size:1rem;
  font-weight:900;
  transition:transform .25s ease,background .25s ease;
}

.booking-expand:hover .booking-expand-arrow{
  transform:translateX(4px);
  background:rgba(255,255,255,.24);
}

@keyframes bookingTeaserFloat{
  0%,100%{transform:translateY(0) rotateX(0)}
  50%{transform:translateY(-5px) rotateX(-1.2deg)}
}

@keyframes bookingTeaserGlow{
  0%,100%{
    filter:saturate(1) brightness(1);
  }
  50%{
    filter:saturate(1.10) brightness(1.055);
  }
}

@keyframes bookingTeaserShimmer{
  0%,20%{left:-48%;opacity:0}
  36%{opacity:.92}
  62%,100%{left:122%;opacity:0}
}

@keyframes bookingTeaserAura{
  0%,100%{opacity:.58;transform:scale(.94)}
  50%{opacity:.96;transform:scale(1.08)}
}

@keyframes bookingTeaserIcon{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

/* Expanded bar still uses the regular V5 layout. */
.booking-dock:not(.collapsed) .booking-expand{
  display:none!important;
}

/* Fade the expanded panel in when opened. */
.booking-dock:not(.collapsed) .booking-shell{
  animation:bookingPanelReveal .34s cubic-bezier(.2,.72,.22,1) both;
}

@keyframes bookingPanelReveal{
  from{
    opacity:0;
    transform:translateY(12px) scale(.975);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@media(max-width:640px){
  .booking-dock.collapsed{
    width:auto!important;
    max-width:calc(100% - 12px);
  }

  .booking-expand{
    min-width:min(315px,calc(100vw - 22px))!important;
    min-height:64px!important;
    padding:8px 13px 8px 8px!important;
    gap:10px;
    border-radius:18px!important;
  }

  .booking-expand-icon{
    flex-basis:43px;
    width:43px;
    height:43px;
    border-radius:13px;
  }

  .booking-expand-copy b{
    font-size:.90rem;
  }

  .booking-expand-hint{
    max-width:190px;
    font-size:.57rem;
  }

  .booking-expand-arrow{
    width:27px;
    height:27px;
    flex-basis:27px;
  }
}

@media(prefers-reduced-motion:reduce){
  .booking-expand,
  .booking-expand::before,
  .booking-expand::after,
  .booking-expand-icon,
  .booking-dock:not(.collapsed) .booking-shell{
    animation:none!important;
  }

  .booking-expand:hover{
    transform:none;
  }
}