/* ==========================================================================
   Cooper Suite: Cooper Button Widget Styles
   Split Box Button (Text Box + Separate Arrow Icon Box)
   ========================================================================== */

.cooper-btn-wrapper {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}

.cooper-btn-wrapper.align-left {
    justify-content: flex-start;
}

.cooper-btn-wrapper.align-center {
    justify-content: center;
}

.cooper-btn-wrapper.align-right {
    justify-content: flex-end;
}

.cooper-btn-wrapper.align-justify .cooper-btn-link {
    width: 100%;
}

.cooper-btn-wrapper.align-justify .cooper-btn-text {
    flex: 1;
}

/* Enlace principal que contiene ambos bloques */
.cooper-btn-link,
.cooper-btn-link:hover,
.cooper-btn-link:focus,
.cooper-btn-link:active,
.cooper-btn-link:visited {
    display: inline-flex;
    align-items: stretch;
    gap: var(--cooper-btn-gap, 3px);
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    border-bottom: none !important;
    background-image: none !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    outline: none;
}

/* Anulación global de subrayados heredados de temas o Elementor */
.cooper-btn-wrapper a,
.cooper-btn-wrapper a:hover,
.cooper-btn-wrapper a:focus,
.cooper-btn-wrapper a:active,
.cooper-btn-wrapper a:visited,
.cooper-btn-wrapper .cooper-btn-text,
.cooper-btn-wrapper .cooper-btn-icon,
.cooper-btn-link,
.cooper-btn-link:hover,
.cooper-btn-link:focus,
.cooper-btn-link:active,
.cooper-btn-link:visited {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    background-image: none !important;
}

.cooper-btn-wrapper a::before,
.cooper-btn-wrapper a::after,
.cooper-btn-link::before,
.cooper-btn-link::after,
.cooper-btn-text::before,
.cooper-btn-text::after {
    display: none !important;
    content: none !important;
}

.cooper-btn-link:focus-visible {
    outline: 2px solid #c8102e;
    outline-offset: 4px;
}

/* 1. Bloque de Texto (Caja Principal) */
.cooper-btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cooper-btn-text-bg, #ffffff);
    color: var(--cooper-btn-text-color, #000000);
    padding: var(--cooper-btn-padding, 16px 28px);
    font-family: inherit;
    font-size: var(--cooper-btn-font-size, 18px);
    font-weight: var(--cooper-btn-font-weight, 700);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    border-radius: var(--cooper-btn-radius, 0);
    border: var(--cooper-btn-border-width, 0px) solid var(--cooper-btn-border-color, transparent);
    box-shadow: var(--cooper-btn-shadow, 0 1px 3px rgba(0,0,0,0.05));
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    white-space: nowrap;
}

.cooper-btn-link:hover .cooper-btn-text,
.cooper-btn-link:focus .cooper-btn-text,
.cooper-btn-link:active .cooper-btn-text {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
}

/* 2. Bloque de Icono (Caja Separada con Flecha) */
.cooper-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cooper-btn-icon-box-width, 58px);
    min-height: 100%;
    background-color: var(--cooper-btn-icon-bg, #ffffff);
    color: var(--cooper-btn-icon-color, #000000);
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    border-radius: var(--cooper-btn-radius, 0);
    border: var(--cooper-btn-border-width, 0px) solid var(--cooper-btn-border-color, transparent);
    box-shadow: var(--cooper-btn-shadow, 0 1px 3px rgba(0,0,0,0.05));
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
}

.cooper-btn-icon svg {
    width: var(--cooper-btn-icon-size, 20px);
    height: var(--cooper-btn-icon-size, 20px);
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.25s ease;
}

/* ==========================================================================
   Estados Hover & Micro-interacciones
   ========================================================================== */

/* Hover sobre el botón completo */
.cooper-btn-link:hover .cooper-btn-text {
    background-color: var(--cooper-btn-text-bg-hover, #ffffff);
    color: var(--cooper-btn-text-color-hover, #000000);
    border-color: var(--cooper-btn-border-color-hover, transparent);
}

.cooper-btn-link:hover .cooper-btn-icon {
    background-color: var(--cooper-btn-icon-bg-hover, #c8102e);
    color: var(--cooper-btn-icon-color-hover, #ffffff);
    border-color: var(--cooper-btn-border-color-hover, transparent);
}

/* Animaciones del Icono al hacer Hover */
.cooper-btn-link.anim-slide-right:hover .cooper-btn-icon svg {
    transform: translateX(4px);
}

.cooper-btn-link.anim-slide-diagonal:hover .cooper-btn-icon svg {
    transform: translate(3px, -3px);
}

.cooper-btn-link.anim-scale:hover .cooper-btn-icon svg {
    transform: scale(1.15);
}

.cooper-btn-link:active {
    transform: translateY(1px);
}