/* =============================================================================
   EL RACO EXPERIENCE
   Botones rápidos de destinos
   Archivo: estilo-botones-destino-nacional-solo-tours-giras.css

   Usa el HTML generado por el CÓDIGO N°8:
   .raco-botones-destinos
   .raco-boton-destino
   ============================================================================= */

/* ==========================================================================
   Contenedor principal
   ========================================================================== */

.single-product #botones-destinos-container.raco-botones-destinos {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 1180px !important;
    margin: 40px auto 40px auto !important;
    padding: 0 !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Botones de destinos
   Mismo estilo visual que los botones principales del producto
   ========================================================================== */

.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino {
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    float: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background-color: #01717a !important;
    border: 1px solid #01717a !important;
    border-radius: 6px !important;

    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;

    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    white-space: normal !important;
}

/* ==========================================================================
   Hover y foco
   ========================================================================== */

.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino:hover,
.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino:focus {
    background-color: #005f66 !important;
    border-color: #005f66 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
}

.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino:focus-visible {
    outline: 3px solid #003f44 !important;
    outline-offset: 3px !important;
}

/* ==========================================================================
   Seguridad contra estilos de Astra / WooCommerce
   ========================================================================== */

.single-product #botones-destinos-container.raco-botones-destinos a,
.single-product #botones-destinos-container.raco-botones-destinos a:visited,
.single-product #botones-destinos-container.raco-botones-destinos a:hover,
.single-product #botones-destinos-container.raco-botones-destinos a:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1024px) {
    .single-product #botones-destinos-container.raco-botones-destinos {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 40px auto 40px auto !important;
        padding: 0 !important; /* Eliminamos el padding lateral para que se alinee con el sitio */
    }

    .single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   Móvil
   ========================================================================== */

@media (max-width: 768px) {
    .single-product #botones-destinos-container.raco-botones-destinos {
        /* Cambiamos a 2 columnas en lugar de 1 */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 30px 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino {
        min-height: 44px !important;
        padding: 10px 8px !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
    }

    /* El primer botón es más largo, lo hacemos abarcar toda la fila superior */
    .single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino:nth-child(1) {
        grid-column: 1 / -1 !important;
    }
}

/* Ajustes finales para pantallas muy pequeñas */
@media (max-width: 480px) {
    .single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino {
        font-size: 12px !important;
        padding: 8px 6px !important;
    }
}