/* =========================================================
   VITA UNIKA — HERO POLISH V18
   ========================================================= */


/* =========================================================
   01 — HEADER / MENU
   دقیقاً 70 درصد عرض دسکتاپ
   ========================================================= */

.hero-float-nav{
  position:sticky!important;
  top:0!important;

  width:min(70vw,1320px)!important;
  max-width:none!important;

  margin-left:auto!important;
  margin-right:auto!important;

  box-sizing:border-box!important;

  padding-left:30px!important;
  padding-right:30px!important;

  transform:none!important;
  translate:none!important;

  border-left:1px solid rgba(19,39,37,.08)!important;
  border-right:1px solid rgba(19,39,37,.08)!important;
}


/* فضای داخلی Header را کامل استفاده کن */

.hero-float-nav > .shell,
.hero-float-nav .header-inner,
.hero-float-nav .v6-header-inner{
  width:100%!important;
  max-width:none!important;

  margin-left:auto!important;
  margin-right:auto!important;

  padding-left:0!important;
  padding-right:0!important;
}


/* لوگوی کوچک Header از لبه فاصله داشته باشد */

.hero-float-nav img[alt*="Vita Unika"]{
  max-height:48px;
  width:auto;
}


/* =========================================================
   02 — HERO
   ========================================================= */

.vita-hero-v15{
  background:#fff!important;
  background-image:none!important;
}


/* Hours دیگر وجود ندارد،
   ولی اگر Cache قدیمی چیزی نگه داشت مخفی بماند */

.v15-hours{
  display:none!important;
}


/* =========================================================
   03 — MAIN COMPOSITION
   مرکز Hero فضای بیشتری برای لوگو بگیرد
   ========================================================= */

@media(min-width:1051px){

  .v15-main{
    width:min(100%,1420px)!important;

    grid-template-columns:
      minmax(210px,1fr)
      minmax(580px,760px)
      minmax(210px,1fr)!important;

    gap:
      clamp(44px,5vw,82px)!important;
  }

}


/* =========================================================
   04 — LOGO
   wrapper اشتباه V17 حذف شده،
   پس خود Logo دوباره سایز اصلی و بزرگ می‌گیرد
   ========================================================= */

.v15-logo-wrap{
  width:
    clamp(
      560px,
      45vw,
      760px
    )!important;

  max-width:100%!important;
}


.v15-logo{
  width:100%!important;
  height:auto!important;

  display:block!important;
}


/* کمی تنفس بین Logo و CTA */

.v15-center{
  overflow:visible!important;
}


.v15-logo-wrap{
  margin-bottom:
    clamp(34px,4vh,48px)!important;
}


/* =========================================================
   05 — CTA CONTAINER
   قاب مادر کاملاً حذف شود
   ========================================================= */

.v15-actions{
  width:min(100%,510px)!important;

  display:flex!important;
  grid-template-columns:none!important;

  align-items:stretch!important;
  justify-content:center!important;

  gap:14px!important;

  margin-top:0!important;

  padding:0!important;

  border:0!important;
  outline:0!important;

  background:transparent!important;

  box-shadow:none!important;

  overflow:visible!important;
}


/* =========================================================
   06 — CTA BUTTONS
   هر دکمه یک آبجکت مستقل
   ========================================================= */

.v15-actions a{
  position:relative!important;

  flex:1 1 0!important;

  min-width:0!important;
  min-height:68px!important;

  display:grid!important;

  grid-template-columns:
    1fr
    40px!important;

  grid-template-rows:
    auto
    auto!important;

  align-items:center!important;

  column-gap:16px!important;

  padding:
    12px
    13px
    12px
    20px!important;

  overflow:hidden!important;

  border-radius:16px!important;

  text-decoration:none!important;

  isolation:isolate;

  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    background-color .55s ease,
    border-color .55s ease,
    box-shadow .55s ease,
    color .55s ease!important;
}


/* label کوچک بالای متن */

.v15-actions a::before{
  position:relative;

  z-index:2;

  grid-column:1;
  grid-row:1;

  align-self:end;

  display:block;

  margin-bottom:4px;

  font-size:8px;
  line-height:1;

  font-weight:600;

  letter-spacing:.18em;

  opacity:.6;
}


.v15-actions a:first-child::before{
  content:"START HERE";
}


.v15-actions a:last-child::before{
  content:"DISCOVER";
}


/* متن اصلی */

.v15-actions a > span{
  position:relative;

  z-index:2;

  grid-column:1;
  grid-row:2;

  align-self:start;

  font-size:12px;
  line-height:1.25;
}


/* SVG تبدیل شود به Orb */

.v15-actions a > svg{
  position:relative;

  z-index:2;

  grid-column:2;
  grid-row:1 / span 2;

  width:38px!important;
  height:38px!important;

  box-sizing:border-box;

  padding:10px;

  border-radius:50%;

  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    background-color .55s ease,
    border-color .55s ease!important;
}


/* ---------------------------------------------------------
   PRIMARY CTA
   --------------------------------------------------------- */

.v15-actions a:first-child{
  color:#fff!important;

  background:
    linear-gradient(
      135deg,
      #0b7978 0%,
      #0d8b87 100%
    )!important;

  border:
    1px solid
    rgba(11,121,120,.68)!important;

  box-shadow:
    0 12px 28px
    rgba(11,121,120,.12)!important;
}


.v15-actions a:first-child > svg{
  border:
    1px solid
    rgba(255,255,255,.22);

  background:
    rgba(255,255,255,.10);
}


/* ---------------------------------------------------------
   SECONDARY CTA
   --------------------------------------------------------- */

.v15-actions a:last-child{
  color:#132725!important;

  background:
    rgba(255,255,255,.96)!important;

  border:
    1px solid
    rgba(11,121,120,.18)!important;

  box-shadow:
    0 10px 25px
    rgba(19,39,37,.045)!important;
}


.v15-actions a:last-child > svg{
  border:
    1px solid
    rgba(19,39,37,.30);

  background:
    rgba(255,255,255,.8);
}


/* ---------------------------------------------------------
   LIGHT SWEEP
   --------------------------------------------------------- */

.v15-actions a::after{
  content:"";

  position:absolute;
  z-index:1;

  top:-50%;
  bottom:-50%;

  left:-50%;

  width:40%;

  transform:
    translateX(-220%)
    rotate(12deg);

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.22),
      transparent
    );

  transition:
    transform .85s
    cubic-bezier(.16,1,.3,1);
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

@media(hover:hover) and (pointer:fine){

  .v15-actions a:hover{
    transform:
      translateY(-4px)!important;
  }


  .v15-actions a:hover::after{
    transform:
      translateX(520%)
      rotate(12deg);
  }


  .v15-actions a:hover > svg{
    transform:
      translate(2px,-2px)
      rotate(-8deg);
  }


  .v15-actions a:first-child:hover{
    background:
      linear-gradient(
        135deg,
        #132725 0%,
        #0b7978 100%
      )!important;

    box-shadow:
      0 18px 34px
      rgba(11,121,120,.16)!important;
  }


  .v15-actions a:last-child:hover{
    color:#fff!important;

    background:
      linear-gradient(
        135deg,
        #0b7978 0%,
        #b48d42 120%
      )!important;

    border-color:
      rgba(180,141,66,.45)!important;

    box-shadow:
      0 18px 34px
      rgba(19,39,37,.10)!important;
  }


  .v15-actions a:last-child:hover > svg{
    border-color:
      rgba(255,255,255,.30);

    background:
      rgba(255,255,255,.12);
  }

}


/* =========================================================
   07 — SIDE COPY PARALLAX
   Parent = Mouse movement
   Children = independent soft loop
   ========================================================= */

html.v15-ready .v15-side{
  transform:
    translate3d(
      var(--v18-mx,0px),
      var(--v18-my,0px),
      0
    )!important;

  transition:
    transform
    .5s
    cubic-bezier(.16,1,.3,1)!important;

  will-change:transform;
}


/* loop نرم جدا از Mouse */

html.v15-ready
.v15-side--left
.v15-side-number,

html.v15-ready
.v15-side--left p{
  animation:
    v18LeftFloat
    7.4s
    ease-in-out
    infinite;
}


html.v15-ready
.v15-side--right
.v15-side-number,

html.v15-ready
.v15-side--right p{
  animation:
    v18RightFloat
    8.2s
    .7s
    ease-in-out
    infinite;
}


@keyframes v18LeftFloat{

  0%,
  100%{
    transform:
      translate3d(0,0,0);
  }

  50%{
    transform:
      translate3d(0,-7px,0);
  }

}


@keyframes v18RightFloat{

  0%,
  100%{
    transform:
      translate3d(0,-3px,0);
  }

  50%{
    transform:
      translate3d(0,6px,0);
  }

}


/* =========================================================
   08 — MOBILE / TABLET
   ========================================================= */

@media(max-width:1050px){

  .hero-float-nav{
    width:88vw!important;

    padding-left:20px!important;
    padding-right:20px!important;
  }


  .v15-logo-wrap{
    width:min(92vw,620px)!important;
  }

}


@media(max-width:760px){

  .hero-float-nav{
    width:
      calc(100% - 20px)!important;
  }


  .v15-actions{
    width:100%!important;

    flex-direction:column!important;

    gap:10px!important;
  }


  .v15-actions a{
    width:100%!important;
  }


  html.v15-ready
  .v15-side{
    transform:none!important;
  }


  .v15-side-number,
  .v15-side p{
    animation:none!important;
  }

}


/* =========================================================
   09 — REDUCED MOTION
   ========================================================= */

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

  html.v15-ready
  .v15-side{
    transform:none!important;
  }


  .v15-side-number,
  .v15-side p{
    animation:none!important;
  }


  .v15-actions a,
  .v15-actions a > svg{
    transition:none!important;
  }

}


/* =========================================================
   HERO SIDE LABELS
   ========================================================= */

.v15-side-number{
  width:auto!important;

  font-size:9px!important;
  line-height:1!important;

  font-weight:600!important;

  letter-spacing:.16em!important;

  white-space:nowrap!important;

  color:#b48d42!important;
}


/* خط تزئینی کمی بلندتر */

.v15-side-number::after{
  width:34px!important;
}


/* فاصله مناسب از متن اصلی */

.v15-side-number{
  margin-bottom:20px!important;
}


/* =========================================================
   HERO CTA — SEMANTIC ICONS
   ========================================================= */

.v15-actions a > .v18-cta-symbol{
  width:40px!important;
  height:40px!important;

  padding:9px!important;

  border-radius:50%!important;

  transform:none!important;

  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    background-color .5s ease,
    border-color .5s ease!important;
}


/* Booking */

.v15-actions a:first-child
.v18-cta-symbol--booking{
  background:
    rgba(255,255,255,.11);

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


/* Services */

.v15-actions a:last-child
.v18-cta-symbol--services{
  background:
    rgba(11,121,120,.045);

  border:
    1px solid
    rgba(11,121,120,.25);
}


/* no arrow-style rotation */

@media(hover:hover) and (pointer:fine){

  .v15-actions a:hover
  > .v18-cta-symbol{

    transform:
      translate3d(0,-2px,0)
      scale(1.06)!important;
  }


  .v15-actions a:first-child:hover
  .v18-cta-symbol--booking{

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

    border-color:
      rgba(255,255,255,.32);
  }


  .v15-actions a:last-child:hover
  .v18-cta-symbol--services{

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

    border-color:
      rgba(255,255,255,.28);
  }

}


/* =========================================================
   V18 CTA SEMANTIC ICONS — FINAL
   ========================================================= */

.v15-actions a > .v18-cta-symbol{
  position:relative!important;

  z-index:3!important;

  grid-column:2!important;
  grid-row:1 / span 2!important;

  align-self:center!important;
  justify-self:end!important;

  width:40px!important;
  height:40px!important;

  box-sizing:border-box!important;

  padding:9px!important;

  border-radius:50%!important;

  transform:none!important;

  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    background-color .5s ease,
    border-color .5s ease!important;
}


/* BOOKING — calendar */

.v15-actions a:first-child
.v18-cta-symbol--booking{
  color:#fff!important;

  background:
    rgba(255,255,255,.11)!important;

  border:
    1px solid
    rgba(255,255,255,.24)!important;
}


/* SERVICES — modules */

.v15-actions a:last-child
.v18-cta-symbol--services{
  color:#0b7978!important;

  background:
    rgba(11,121,120,.055)!important;

  border:
    1px solid
    rgba(11,121,120,.22)!important;
}


@media(hover:hover) and (pointer:fine){

  .v15-actions a:hover
  > .v18-cta-symbol{

    transform:
      translate3d(0,-2px,0)
      scale(1.055)!important;
  }


  .v15-actions a:first-child:hover
  .v18-cta-symbol--booking{

    background:
      rgba(255,255,255,.17)!important;

    border-color:
      rgba(255,255,255,.34)!important;
  }


  .v15-actions a:last-child:hover
  .v18-cta-symbol--services{

    color:#fff!important;

    background:
      rgba(255,255,255,.14)!important;

    border-color:
      rgba(255,255,255,.28)!important;
  }

}