/* =========================================================
   V8 — Classic compact teaser + translucent booking surfaces
   ========================================================= */

:root{
  --booking-glass-border:rgba(255,255,255,.58);
  --booking-glass-shadow:rgba(31,29,94,.23);
  --booking-glass-text:#292a59;
  --booking-glass-muted:#666a8d;
}

/* ---------------------------------------------------------
   Collapsed button: restore the original simple 2-line form.
   --------------------------------------------------------- */

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

.booking-expand.booking-expand-classic{
  position:relative;
  isolation:isolate;
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:auto!important;
  min-width:220px!important;
  min-height:58px!important;
  margin:0 auto;
  padding:8px 19px 8px 15px!important;
  overflow:hidden;
  color:#fff;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:18px 18px 9px 9px!important;
  background:
    linear-gradient(
      132deg,
      #38afe1 0%,
      #5477df 38%,
      #7657d7 67%,
      #9847b5 100%
    )!important;
  box-shadow:
    0 4px 0 rgba(65,41,137,.90),
    0 10px 23px rgba(53,63,171,.34),
    0 23px 48px rgba(82,47,145,.28),
    inset 0 1px 0 rgba(255,255,255,.66),
    inset 0 -11px 24px rgba(54,28,123,.18)!important;
  text-align:left;
  cursor:pointer;
  transform-origin:center bottom;
  animation:
    bookingClassicFloat 3.5s ease-in-out infinite,
    bookingClassicGlow 2.9s ease-in-out infinite;
  transition:
    transform .24s ease,
    filter .24s ease,
    box-shadow .24s ease;
}

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

/* Moving light streak, borrowed from the newer effect. */
.booking-expand.booking-expand-classic::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-75%;
  bottom:-75%;
  left:-48%;
  width:31%;
  transform:rotate(18deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.08),
      rgba(255,255,255,.76),
      rgba(255,255,255,.11),
      transparent
    );
  filter:blur(1px);
  animation:bookingClassicShimmer 3.25s ease-in-out infinite;
}

/* Coloured glow behind the original compact button. */
.booking-expand.booking-expand-classic::after{
  content:"";
  position:absolute;
  z-index:-2;
  inset:12px 10px -18px;
  border-radius:50%;
  background:
    radial-gradient(
      ellipse,
      rgba(72,199,255,.52),
      rgba(118,91,229,.36) 48%,
      rgba(173,63,194,.10) 72%,
      transparent
    );
  filter:blur(18px);
  opacity:.76;
  animation:bookingClassicAura 2.9s ease-in-out infinite;
}

.booking-expand.booking-expand-classic:hover{
  filter:saturate(1.10) brightness(1.065);
  transform:translateY(-4px) rotateX(-2deg) scale(1.025);
  box-shadow:
    0 5px 0 rgba(65,41,137,.94),
    0 14px 30px rgba(53,63,171,.42),
    0 29px 62px rgba(82,47,145,.37),
    0 0 27px rgba(75,194,255,.32),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -11px 25px rgba(54,28,123,.20)!important;
}

.booking-expand.booking-expand-classic:active{
  transform:translateY(1px) scale(.985);
  box-shadow:
    0 2px 0 rgba(65,41,137,.94),
    0 7px 16px rgba(53,63,171,.31),
    inset 0 1px 0 rgba(255,255,255,.62)!important;
}

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

.booking-expand-caret{
  display:grid!important;
  place-items:center;
  flex:0 0 23px;
  width:23px;
  height:34px;
  color:#fff;
  font-size:.88rem;
  font-weight:900;
  line-height:1;
  text-shadow:
    0 2px 7px rgba(35,27,105,.58);
  animation:bookingClassicCaret 1.9s ease-in-out infinite;
}

.booking-expand-simple-copy{
  display:flex!important;
  min-width:0;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:2px;
  line-height:1.1;
}

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

.booking-expand-simple-copy small{
  display:block!important;
  color:rgba(244,247,255,.90);
  font-size:.64rem;
  font-weight:600;
  white-space:nowrap;
}

/* Hide the V6 child styles if browser cached old markup/CSS. */
.booking-expand-icon,
.booking-expand-copy,
.booking-expand-arrow,
.booking-expand-eyebrow,
.booking-expand-hint{
  display:none!important;
}

/* ---------------------------------------------------------
   Expanded Booking Bar: translucent lavender/blue surface.
   --------------------------------------------------------- */

.booking-shell{
  border:1px solid var(--booking-glass-border)!important;
  background:
    linear-gradient(
      128deg,
      rgba(244,247,255,.76) 0%,
      rgba(236,240,255,.68) 46%,
      rgba(241,231,255,.66) 100%
    )!important;
  box-shadow:
    0 24px 58px var(--booking-glass-shadow),
    inset 0 1px 0 rgba(255,255,255,.78)!important;
  -webkit-backdrop-filter:blur(18px) saturate(128%);
  backdrop-filter:blur(18px) saturate(128%);
}

/* A subtle inner tint prevents the panel looking stark white. */
.booking-shell::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(
      112deg,
      rgba(73,172,223,.055),
      rgba(104,100,218,.075) 52%,
      rgba(154,67,180,.055)
    );
  pointer-events:none;
}

.booking-label{
  color:var(--booking-glass-text)!important;
}

.booking-label span{
  color:var(--booking-glass-muted)!important;
}

.booking-field{
  color:var(--booking-glass-text)!important;
  border:1px solid rgba(255,255,255,.50)!important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.53),
      rgba(244,244,255,.38)
    )!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 5px 15px rgba(52,49,130,.055);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
}

.booking-field:hover{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.67),
      rgba(240,240,255,.50)
    )!important;
  border-color:rgba(112,101,213,.25)!important;
}

.booking-field small{
  color:#696c91!important;
}

.booking-field strong{
  color:#292b59!important;
}

.field-icon{
  color:#5f59ca!important;
  border:1px solid rgba(255,255,255,.50);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.65),
      rgba(221,224,255,.52)
    )!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.64);
}

/* ---------------------------------------------------------
   Date calendar and guest popover:
   translucent but still readable.
   --------------------------------------------------------- */

.date-popover,
.guest-popover{
  color:var(--booking-glass-text)!important;
  border:1px solid rgba(255,255,255,.63)!important;
  background:
    linear-gradient(
      138deg,
      rgba(247,249,255,.84),
      rgba(235,238,255,.79) 52%,
      rgba(244,234,255,.78)
    )!important;
  box-shadow:
    0 28px 70px rgba(34,31,100,.29),
    inset 0 1px 0 rgba(255,255,255,.82)!important;
  -webkit-backdrop-filter:blur(22px) saturate(132%);
  backdrop-filter:blur(22px) saturate(132%);
}

.date-popover::before,
.guest-popover::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(68,178,226,.09),
      transparent 38%
    ),
    radial-gradient(
      circle at 88% 90%,
      rgba(153,73,190,.09),
      transparent 42%
    );
  pointer-events:none;
}

.popover-head strong,
.calendar-month h4,
.guest-row b{
  color:#292b59!important;
}

.popover-head button,
.popover-foot button{
  color:#454779!important;
  border:1px solid rgba(255,255,255,.52)!important;
  background:rgba(255,255,255,.45)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58);
}

.popover-head button:hover,
.popover-foot button:hover{
  background:rgba(255,255,255,.67)!important;
}

.weekdays span,
.guest-row small,
.popover-foot span{
  color:#6c7095!important;
}

.day{
  color:#35375f;
}

.day:hover,
.day.selected{
  color:#fff!important;
  background:
    linear-gradient(
      135deg,
      #42a9df,
      #6962d8 58%,
      #9450b7
    )!important;
  box-shadow:0 6px 14px rgba(83,76,190,.22);
}

.day.in-range{
  color:#373a69!important;
  background:rgba(207,207,255,.52)!important;
}

.guest-row{
  border-bottom-color:rgba(91,89,160,.15)!important;
}

.guest-row button{
  color:#414476;
  border:1px solid rgba(255,255,255,.62)!important;
  background:rgba(255,255,255,.50)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 4px 10px rgba(54,51,130,.07);
}

.guest-row button:hover{
  color:#fff;
  border-color:transparent!important;
  background:
    linear-gradient(
      135deg,
      #46a9df,
      #6d61d7
    )!important;
}

.guest-done{
  border:1px solid rgba(255,255,255,.46)!important;
  background:
    linear-gradient(
      135deg,
      #3da9df,
      #6861d8 57%,
      #984bb7
    )!important;
  box-shadow:
    0 10px 22px rgba(82,70,184,.23),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Expanded panel reveal remains soft and dimensional. */
.booking-dock:not(.collapsed) .booking-shell{
  animation:bookingGlassReveal .35s cubic-bezier(.2,.72,.22,1) both!important;
}

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

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

@keyframes bookingClassicGlow{
  0%,100%{filter:saturate(1) brightness(1)}
  50%{filter:saturate(1.09) brightness(1.05)}
}

@keyframes bookingClassicShimmer{
  0%,20%{left:-48%;opacity:0}
  37%{opacity:.92}
  63%,100%{left:122%;opacity:0}
}

@keyframes bookingClassicAura{
  0%,100%{opacity:.54;transform:scale(.95)}
  50%{opacity:.92;transform:scale(1.08)}
}

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

@media(max-width:640px){
  .booking-expand.booking-expand-classic{
    min-width:210px!important;
    min-height:55px!important;
    padding:7px 16px 7px 13px!important;
  }

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

  .booking-expand-simple-copy small{
    font-size:.60rem;
  }

  .booking-shell{
    background:
      linear-gradient(
        128deg,
        rgba(245,247,255,.82),
        rgba(235,238,255,.76) 48%,
        rgba(243,232,255,.75)
      )!important;
  }

  .date-popover,
  .guest-popover{
    background:
      linear-gradient(
        138deg,
        rgba(247,249,255,.89),
        rgba(235,238,255,.85) 52%,
        rgba(244,234,255,.84)
      )!important;
  }
}

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

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

/* Fallback for browsers without backdrop-filter. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .booking-shell{
    background:rgba(239,241,253,.94)!important;
  }

  .date-popover,
  .guest-popover{
    background:rgba(241,243,253,.97)!important;
  }
}