/* =========================================================
   VITA UNIKA — SECTION 7 CLEAN ORB V2
   ========================================================= */

.booking-orb-v2{

  --orb-teal:#0b7978;
  --orb-dark:#075e5d;
  --orb-gold:#b48d42;

  position:relative;

  width:
    clamp(
      290px,
      25vw,
      390px
    );

  aspect-ratio:1;

  display:block;

  flex:none;

  overflow:hidden;

  border-radius:50%;

  color:#fff!important;

  text-decoration:none!important;

  background:
    radial-gradient(
      circle at 32% 24%,
      rgba(255,255,255,.11),
      transparent 32%
    ),
    var(--orb-teal);

  box-shadow:
    0 28px 70px
    rgba(11,121,120,.14);

  isolation:isolate;

  transition:
    transform .65s cubic-bezier(.16,1,.3,1),
    box-shadow .65s ease,
    background .65s ease;

}


/* subtle internal depth */

.booking-orb-v2::before{

  content:"";

  position:absolute;

  z-index:0;

  inset:17px;

  border:
    1px solid
    rgba(255,255,255,.19);

  border-radius:50%;

  pointer-events:none;

}


.booking-orb-v2::after{

  content:"";

  position:absolute;

  z-index:0;

  width:44%;
  height:44%;

  left:28%;
  top:28%;

  border-radius:50%;

  background:
    rgba(255,255,255,.025);

  pointer-events:none;

}


/* =========================================================
   RING + GOLD POINT
   ========================================================= */

.booking-orb-v2__ring{

  position:absolute;

  z-index:1;

  inset:31px;

  display:block;

  border:
    1px dashed
    rgba(255,255,255,.22);

  border-radius:50%;

  animation:
    bookingOrbRotate
    24s
    linear
    infinite;

}


.booking-orb-v2__ring i{

  position:absolute;

  left:50%;
  top:-7px;

  width:14px;
  height:14px;

  margin-left:-7px;

  display:block;

  border-radius:50%;

  background:
    var(--orb-gold);

  box-shadow:
    0 5px 16px
    rgba(180,141,66,.32);

}


@keyframes bookingOrbRotate{

  to{
    transform:
      rotate(360deg);
  }

}


/* =========================================================
   CONTENT
   ========================================================= */

.booking-orb-v2__content{

  position:absolute;

  z-index:4;

  left:50%;
  top:50%;

  width:70%;

  transform:
    translate(-50%,-50%);

  text-align:center;

}


.booking-orb-v2__content small{

  display:block;

  margin-bottom:15px;

  color:
    rgba(255,255,255,.68);

  font-size:
    clamp(
      8px,
      .65vw,
      10px
    );

  font-weight:600;

  letter-spacing:.22em;

  line-height:1.4;

}


.booking-orb-v2__content strong{

  display:block;

  color:#fff;

  font-family:
    "DM Serif Display",
    Georgia,
    serif;

  font-size:
    clamp(
      31px,
      2.5vw,
      43px
    );

  font-weight:400;

  font-style:italic;

  letter-spacing:-.045em;

  line-height:.94;

}


.booking-orb-v2__status{

  margin-top:20px;

  display:inline-flex;

  align-items:center;

  gap:8px;

  color:
    rgba(255,255,255,.76);

  font-size:
    clamp(
      8px,
      .58vw,
      10px
    );

  font-weight:600;

  letter-spacing:.13em;

}


.booking-orb-v2__status b{

  width:5px;
  height:5px;

  display:block;

  border-radius:50%;

  background:
    var(--orb-gold);

  animation:
    bookingOrbPulse
    3.8s
    ease-out
    infinite;

}


@keyframes bookingOrbPulse{

  0%{

    box-shadow:
      0 0 0 0
      rgba(180,141,66,.36);

  }

  70%{

    box-shadow:
      0 0 0 9px
      rgba(180,141,66,0);

  }

  100%{

    box-shadow:
      0 0 0 9px
      rgba(180,141,66,0);

  }

}


/* =========================================================
   ARROW
   ========================================================= */

.booking-orb-v2__arrow{

  position:absolute;

  z-index:6;

  right:30px;
  bottom:30px;

  width:56px;
  height:56px;

  display:grid;

  place-items:center;

  border-radius:50%;

  color:
    var(--orb-teal);

  background:#fff;

  box-shadow:
    0 14px 32px
    rgba(0,0,0,.11);

  transition:
    color .5s ease,
    background .5s ease,
    transform .6s
    cubic-bezier(.16,1,.3,1);

}


.booking-orb-v2__arrow svg{

  width:20px;
  height:20px;

  overflow:visible;

}


.booking-orb-v2__arrow path{

  fill:none;

  stroke:currentColor;

  stroke-width:1.55;

  stroke-linecap:round;

  stroke-linejoin:round;

}


/* =========================================================
   HOVER
   ========================================================= */

.booking-orb-v2:hover{

  background:
    radial-gradient(
      circle at 32% 24%,
      rgba(255,255,255,.10),
      transparent 32%
    ),
    var(--orb-dark);

  transform:
    translateY(-5px);

  box-shadow:
    0 38px 88px
    rgba(11,121,120,.22);

}


.booking-orb-v2:hover
.booking-orb-v2__arrow{

  color:#fff;

  background:
    var(--orb-gold);

  transform:
    translate(3px,-3px);

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

  .booking-orb-v2{

    width:
      min(
        360px,
        68vw
      );

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:720px){

  .booking-orb-v2{

    width:
      min(
        330px,
        86vw
      );

    margin:
      15px auto
      0;

  }


  .booking-orb-v2__ring{

    inset:26px;

  }


  .booking-orb-v2__arrow{

    width:50px;
    height:50px;

    right:24px;
    bottom:24px;

  }


  .booking-orb-v2__content strong{

    font-size:
      clamp(
        30px,
        9vw,
        38px
      );

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .booking-orb-v2__ring,
  .booking-orb-v2__status b{

    animation:none!important;

  }

}