/* =============================================================================
   Botones Oliva — flecha animada reutilizable (utilidad global)

   Aplica una de estas clases a CUALQUIER botón/enlace (o al widget de botón de
   Elementor, incluido el custom "Botón de reserva") y se le añade,
   automáticamente y sin marcado extra, la misma flecha de la tienda
   (.oliva-card-arrow) con su efecto: la "cola" crece al pasar el ratón.

     · botones-oliva-negro   → flecha negra
     · botones-oliva-blanco  → flecha blanca

   Cómo resuelve los distintos casos:
     · En Elementor la clase se pone en "Avanzado › Clases CSS" y queda en el
       WRAPPER del widget → apuntamos al <a>/<button> que haya dentro.
     · Si la clase se pone directamente sobre un <a>/<button> → lo estilizamos tal cual.

   La flecha se dibuja con los pseudo-elementos ::before (cola) y ::after
   (punta), reordenados con flexbox para quedar SIEMPRE tras el texto.
   ============================================================================= */

/* Color de la flecha por variante (custom property; se hereda al interior). */
.botones-oliva-negro  { --oliva-arrow: #1a1a1a; }
.botones-oliva-blanco { --oliva-arrow: #ffffff; }

/* ── Elemento que lleva la flecha: el propio botón/enlace, o el <a>/<button>
      que exista dentro del wrapper que tenga la clase. ─────────────────────── */
a.botones-oliva-negro,
a.botones-oliva-blanco,
button.botones-oliva-negro,
button.botones-oliva-blanco,
.botones-oliva-negro a,
.botones-oliva-blanco a,
.botones-oliva-negro button,
.botones-oliva-blanco button {
    display: inline-flex !important;
    align-items: center !important;
}

/* ── Cola (línea horizontal) ─────────────────────────────────────────────── */
a.botones-oliva-negro::before,
a.botones-oliva-blanco::before,
button.botones-oliva-negro::before,
button.botones-oliva-blanco::before,
.botones-oliva-negro a::before,
.botones-oliva-blanco a::before,
.botones-oliva-negro button::before,
.botones-oliva-blanco button::before {
    content: "";
    order: 2;                 /* tras el texto (order 0) */
    display: inline-block;
    width: 10px;
    height: 1.5px;
    margin-left: 10px;        /* separación respecto al texto */
    flex-shrink: 0;
    background-color: var(--oliva-arrow);
    transition: width 0.35s ease;
}

/* ── Punta (chevron) ─────────────────────────────────────────────────────── */
a.botones-oliva-negro::after,
a.botones-oliva-blanco::after,
button.botones-oliva-negro::after,
button.botones-oliva-blanco::after,
.botones-oliva-negro a::after,
.botones-oliva-blanco a::after,
.botones-oliva-negro button::after,
.botones-oliva-blanco button::after {
    content: "";
    order: 3;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: -4px;        /* se une a la cola, como en la tienda */
    border-top: 1.5px solid var(--oliva-arrow);
    border-right: 1.5px solid var(--oliva-arrow);
    border-bottom: 0;         /* por si el tema/Elementor añade bordes */
    border-left: 0;
    background: none;
    transform: rotate(45deg); /* apunta a la derecha */
    flex-shrink: 0;
}

/* ── Efecto hover / foco: la cola crece ──────────────────────────────────── */
a.botones-oliva-negro:hover::before,
a.botones-oliva-blanco:hover::before,
button.botones-oliva-negro:hover::before,
button.botones-oliva-blanco:hover::before,
a.botones-oliva-negro:focus-visible::before,
a.botones-oliva-blanco:focus-visible::before,
button.botones-oliva-negro:focus-visible::before,
button.botones-oliva-blanco:focus-visible::before,
.botones-oliva-negro:hover a::before,
.botones-oliva-blanco:hover a::before,
.botones-oliva-negro:hover button::before,
.botones-oliva-blanco:hover button::before,
.botones-oliva-negro a:focus-visible::before,
.botones-oliva-blanco a:focus-visible::before,
.botones-oliva-negro button:focus-visible::before,
.botones-oliva-blanco button:focus-visible::before {
    width: 28px;
}