/* =========================================================
   DAISY'S DOG HOUSE
   PREMIUM BUTTONS
========================================================= */

.button{
  position:relative;
  overflow:hidden;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-height:60px;
  padding:0 36px;

  border:none;
  border-radius:999px;

  font-family:"Poppins",sans-serif;
  font-size:.96rem;
  font-weight:600;
  letter-spacing:.03em;

  cursor:pointer;
  text-decoration:none;

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

/* =========================================================
   SHINE
========================================================= */

.button::before{

content:"";

position:absolute;

top:0;
left:-150%;

width:55%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.30),
transparent
);

transform:skewX(-20deg);

transition:left .9s ease;

}

.button:hover::before{

left:170%;

}

/* =========================================================
   PRIMARY
========================================================= */

.button-primary{

color:#ffffff;

background:

linear-gradient(
145deg,
#a68492,
#8b7185
);

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

box-shadow:

0 18px 42px
rgba(139,113,133,.22);

}

.button-primary:hover{

background:

linear-gradient(
145deg,
#8b7185,
#7047a3
);

transform:

translateY(-5px);

box-shadow:

0 28px 54px
rgba(112,71,163,.26);

}

/* =========================================================
   SECONDARY
========================================================= */

.button-secondary{

color:var(--brand-purple);

background:

rgba(255,255,255,.86);

border:1px solid
rgba(112,71,163,.18);

backdrop-filter:blur(16px);

box-shadow:

0 14px 30px
rgba(112,71,163,.08);

}

.button-secondary:hover{

background:#ffffff;

border-color:

rgba(112,71,163,.32);

transform:

translateY(-5px);

box-shadow:

0 22px 42px
rgba(112,71,163,.12);

}

/* =========================================================
   ICONS
========================================================= */

.button i,
.button svg{

width:18px;
height:18px;

stroke-width:2;

transition:

transform .35s ease;

}

.button:hover svg{

transform:

translateX(2px);

}

/* =========================================================
   ACTIVE
========================================================= */

.button:active{

transform:

translateY(-1px)

scale(.98);

}

/* =========================================================
   FOCUS
========================================================= */

.button:focus-visible{

outline:none;

box-shadow:

0 0 0 5px
rgba(199,173,182,.32),

0 18px 42px
rgba(139,113,133,.22);

}

/* =========================================================
   HERO BUTTONS
========================================================= */

.home-hero-actions{

display:flex;
gap:18px;
flex-wrap:wrap;

}

.home-hero-actions .button{

min-width:205px;

}

/* =========================================================
   CTA BUTTON
========================================================= */

.booking-cta .button{

min-width:230px;

}

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

@media (max-width:768px){

.button{

width:100%;

}

.home-hero-actions{

flex-direction:column;

}

.home-hero-actions .button{

width:100%;

}

}