/*------------------------------------------------------------------*\
    4. COMPONENTS - Button
\*------------------------------------------------------------------*/

#miv-button,
#miv-portfolio-button  {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: none;
}

#miv-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(14%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--color-accent);
    opacity: 1;
    z-index: 0;
}

#miv-portfolio-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(40%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-accent);
    opacity: 1;
    z-index: 0;
}

#miv-button .elementor-button-text {
    z-index: 2;
}

#miv-portfolio-button .elementor-button-text {
    z-index: 2;
    font-size: 18px;
}

#miv-portfolio-button .elementor-button-icon {
    margin-left: 8px;
    margin-right: 0;
}

/*------------------------------------------------------------------*\
    Pulse CTA — add class "miv-pulse-btn" to the button widget
\*------------------------------------------------------------------*/

.miv-pulse-btn .elementor-button-content-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
}

/* Filled orange dot before the label — fixed size (no reflow) */
.miv-pulse-btn .elementor-button-content-wrapper::before {
    content: "";
    flex-shrink: 0;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background-color: var(--color-accent);
}

/* Label slides a few pixels to the right on hover (stays fixed otherwise) */
.miv-pulse-btn .elementor-button-text {
    /* 12px @1920 base, grows on larger viewports (vw); floored at 12px below 1920 (tablet/mobile bumped via media queries) */
    font-size: clamp(0.75rem, 0.125rem + 0.5208vw, 1.375rem); /* 12px floor → 12px @1920 → 22px @3840 */
    transition: transform 0.35s ease;
}

.miv-pulse-btn:hover .elementor-button-text {
    transform: translateX(0.4em);
}

/* Orange border ring around the dot — appears on hover (no layout shift).
   Sized in em (same basis as the 0.7em dot) and larger than it so the ring
   sits clearly outside the dot instead of hiding behind it. */
.miv-pulse-btn .elementor-button-content-wrapper::after {
    content: "";
    position: absolute;
    left: 0.35em; /* dot centre (half of the 0.7em dot) */
    top: 50%;
    width: 1.4em;
    height: 1.4em;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Pulse emanates from the outer border of the ring (no layout shift) */
.miv-pulse-btn:hover .elementor-button-content-wrapper::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: mivBtnPulse 1.4s ease-out infinite;
}

@keyframes mivBtnPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 185, 81, 0.6);
    }
    70% {
        box-shadow: 0 0 0 0.7em rgba(255, 185, 81, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 185, 81, 0);
    }
}

/* ---- Tablet ≤1024px — CTA grows back up from the 10px desktop base ---- */
@media (max-width: 1024px) {

    .miv-pulse-btn .elementor-button-text {
        font-size: clamp(0.6875rem, 0.9375rem - 0.3906vw, 0.75rem); /* 11px @1024 → 12px @768 */
    }
}

/* ---- Mobile ≤768px ---- */
@media (max-width: 768px) {

    .miv-pulse-btn .elementor-button-text {
        font-size: 10px;
    }

    #miv-portfolio-button .elementor-button-text {
        font-size: 12px;
    }

    #miv-portfolio-button::before {
        width: 36px;
        height: 36px;
    }

    #miv-portfolio-button .elementor-button-icon svg,
    #miv-portfolio-button .elementor-button-icon img,
    #miv-portfolio-button .elementor-button-icon i {
        width: 12px;
    }

}