/* Normalize all calmhaven hover buttons */
.calmhaven-btn,
[class^="hover"],
[class*=" hover"] {
  margin: 0;
  padding: 0;
  line-height: 1;
  display: inline-flex;            /* keeps center alignment */
  align-items: center;             /* vertically centers content */
  justify-content: center;         /* horizontally centers content */
  vertical-align: middle; 
  border-radius: 0 !important;         /* removes top inline gap */
  box-sizing: border-box;          /* consistent sizing */
}

/* Ensure no inherited font spacing causes gaps */
.calmhaven-btn * {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.calmhaven-btn {
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
    border-radius: 0 !important; 
}

/* Hover Effects - only animations, no colors */
.hover1 {
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  z-index: 0; /* text above panels */
  transition: color 0.3s ease, border-color 0.3s ease;
}

/* Two panels, initially offscreen */
.hover1::before,
.hover1::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--hover-bg-color); /* dynamic Elementor color */
  transition: transform 0.4s ease;
  z-index: -1; /* behind the text */
}

/* Left panel is off to the left initially */
.hover1::before {
  left: 0;
  transform: translateX(-100%);
}

/* Right panel is off to the right initially */
.hover1::after {
  right: 0;
  transform: translateX(100%);
}

/* On hover: slide both panels IN to cover */
.hover1:hover::before {
  transform: translateX(0);
}
.hover1:hover::after {
  transform: translateX(0);
}

/* Optional: text & border color when covered */
.hover1:hover,
.hover1:hover span,
.hover1:hover .calmhaven-text,
.hover1:hover .hover1-text {
    color: var(--hover-text-color);
}


.hover2 {
  position: relative;
  overflow: hidden;
  display: inline-block;
  z-index: 0;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.hover2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--hover-bg-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.8s ease, height 0.8s ease, opacity 1s ease;
  z-index: -1;
}

.hover2:hover::before {
  width: 300%;
  height: 300%;
  opacity: 1;
  color:var(--hover-text-color) !important ;
}

.hover3 {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  padding: 8px 20px;   /* adjust padding if needed */
}

.hover3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: var(--hover3-underline-height, 4px); /* thickness of underline */
  background-color: var(--hover3-animated-color, #000); /* underline color */
  transition: width 0.3s ease, transform 0.3s ease;
  transform: translateX(-50%);
  border-radius: 0;
}

.hover3:hover::after {
  width: 100%;
}



.hover4 {
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
  box-shadow: var(--hover4-box-shadow, none); 
  vertical-align: middle;
}

.hover4 h2 {
  color: #0ff;
  font-size: 2rem;
  position: relative;
  z-index: 2;
}

.hover4::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -43%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg,
    transparent,
    transparent 50%,
    rgba(0, 255, 255, 0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.hover4:hover {
  transform: scale(1.05);
}

.hover4:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}


/* base */
.calmhaven-btn.hover5 {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  color: var(--text-color, #fff); /* normal text color */
  background-color: var(--bg-color, #4CAF50);
  border: var(--border-width, 0px) solid var(--border-color, #fff);
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* text wrapper */
.calmhaven-btn.hover5 .hover5-text {
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
  color: inherit; /* inherit default text color */
}

/* hover background span */
.calmhaven-btn.hover5 .hover5-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.2);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  z-index: 1;
}

/* hover text color from Elementor */
.calmhaven-btn.hover5:hover .hover5-text {
  color: var(--hover-text-color, #fff);
}

/* hover background animation */
.calmhaven-btn.hover5:hover .hover5-bg {
  width: 225%;
  height: 225%;
}


/* Base button */
.hover6 {
    perspective: 1000px;
}

.hover6{
    display: inline-block;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.hover6:hover {
    transform: rotateX(20deg) rotateY(20deg);
}


/* Hover7 – Outline Out */
.hover7 {
  --btn-color: #4caf50;
  --btn-outline: #2e7d32;           /* default outline color */
  --btn-outline-width: 2px;         /* default outline width */
  --outline-offset: 8px;            /* distance outside the button */
  --hover7-outline-radius: 4px;     /* default outline radius */

  position: relative;
  display: inline-block;
  padding: 12px 24px;
  background: white;
  color: var(--btn-color);
  cursor: pointer;

  overflow: visible;
  z-index: 1;

  border-radius: var(--hover7-outline-radius); /* apply radius to button */
}

/* the outer border */
.hover7::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--outline-offset));
  left: calc(-1 * var(--outline-offset));
  right: calc(-1 * var(--outline-offset));
  bottom: calc(-1 * var(--outline-offset));
  border: var(--btn-outline-width) solid var(--btn-outline);
  border-radius: var(--hover7-outline-radius); /* apply radius to outline */
  pointer-events: none;
  opacity: 0;
  transform: scale(.95);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 0;
}

/* show the outer border on hover */
.hover7:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* text color on hover */
.hover7:hover {
  color: #fff;
  border-color: var(--btn-outline);
}



/* ---------- hover8 (converted from your SCSS) ---------- */
.hover8 {
  --btn-color: #4CAF50;       /* main color (override inline if needed) */
  --btn-color-dark: #2E7D32;  /* darker shade (not required here but kept) */
  --start-size: 20px;         /* initial circle size */
  --expand-width: 200%;       /* final width of the expanded element (tweak) */
  --anim-time: 0.8s;

  position: relative;
  display: inline-block;
  padding: 12px 24px;
  color: var(--btn-color); /* keep original tint behaviour */
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* keep text above animated elements */
.hover8 > span {
  position: relative;
  z-index: 4;
  display: inline-block;
  pointer-events: none;
}

/* two circular pseudo elements (left & right) */
.hover8::before,
.hover8::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--start-size);
  height: var(--start-size);
  background-color: var(--btn-color);
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 1;                   /* behind text */
  pointer-events: none;
}

/* left circle starts just outside left edge */
.hover8::before {
  left: calc(-1 * var(--start-size));
}

/* right circle starts just outside right edge */
.hover8::after {
  left: calc(100% + var(--start-size));
}

/* On hover, run the criss-cross animations */
.hover8:hover::before {
  animation: criss-cross-left var(--anim-time) both;
}

.hover8:hover::after {
  animation: criss-cross-right var(--anim-time) both;
}

/* Keyframes */
@keyframes criss-cross-left {
  0% {
    left: calc(-1 * var(--start-size));
    width: var(--start-size);
    height: var(--start-size);
    border-radius: 50%;
    transform: translateY(-50%);
  }
  50% {
    left: 50%;
    width: var(--start-size);
    height: var(--start-size);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  100% {
    left: 50%;
    width: var(--expand-width);
    height: 100%;               /* full button height */
    border-radius: 0;
    transform: translate(-50%, -50%);
  }
}

@keyframes criss-cross-right {
  0% {
    left: calc(100% + var(--start-size));
    width: var(--start-size);
    height: var(--start-size);
    border-radius: 50%;
    transform: translateY(-50%);
  }
  50% {
    left: 50%;
    width: var(--start-size);
    height: var(--start-size);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  100% {
    left: 50%;
    width: var(--expand-width);
    height: 100%;               /* full button height */
    border-radius: 0;
    transform: translate(-50%, -50%);
  }
}

/* optional: change text color on hover */
.hover8:hover > span {
  color: #ffffff; /* or use a CSS var */
}

.hover9 {
  position: relative;
  display: inline-block;
  padding: 15px 40px;
  font-size: 18px;
  color: #fff;
  background: #111;
  overflow: hidden;
  border: 2px solid #0ff;
  cursor: pointer;
  vertical-align: middle;
}

.hover9::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,255,255,0.1),
    rgba(0,255,255,0.1) 2px,
    transparent 2px,
    transparent 6px
  );
  transform: translateY(-100%);
  transition: transform 0.5s ease;
}

.hover9:hover::before {
  transform: translateY(100%);
  transition: transform 0.5s ease;
}





/* === Hover10 – Animated frame reveal === */
.hover10 {
  position: relative;
    position: relative;
    border-top: 2px solid var(--hover10-border-top, #ff0);
    border-bottom: 2px solid var(--hover10-border-bottom, #0ff);
    border-left: 2px solid var(--hover10-border-left, #f0f);
    border-right: 2px solid var(--hover10-border-right, #0f0);
    transition: all .3s ease;
}
/* Top border */
.hover10::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: var(--hover10-border-top);
  top: 0;
  left: 0;
  transition: all 0.4s ease;
}

/* Bottom border */
.hover10::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: var(--hover10-border-bottom);
  bottom: 0;
  right: 0;
  transition: all 0.4s ease;
}

/* Right border */
.hover10 span::before {
  content: '';
  position: absolute;
  height: 0;
  width: 2px;
  background: var(--hover10-border-right);
  top: 0;
  right: 0;
  transition: all 0.4s ease;
}

/* Left border */
.hover10 span::after {
  content: '';
  position: absolute;
  height: 0;
  width: 2px;
  background: var(--hover10-border-left);
  bottom: 0;
  left: 0;
  transition: all 0.4s ease;
}

/* Hover animations */
.hover10:hover::before,
.hover10:hover::after {
  width: 100%;
}

.hover10:hover span::before,
.hover10:hover span::after {
  height: 100%;
}