/* ESTILOS TIENDA BIOTERIO 2025 */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

body {
    color: #006699;
}

.square-img {
    width: 100%;
    height: 250px; /* Altura ajustada para imagenes cuadradas */
    object-fit: cover; /* Ajuste perfecto, sin distorsión */
}

.card-img-top-custom {
            height: 180px; /* Altura fija para todas las imágenes */
            object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
            border-top-left-radius: var(--bs-card-border-radius);
            border-top-right-radius: var(--bs-card-border-radius);
}
/*Forzar imagen cuadrada en galeria */

.image-square-container {
    width: 100%;
    padding-bottom: 100%; /* This creates the square aspect ratio */
    position: relative;
    overflow: hidden;
}

.square-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the square container */
    top: 0;
    left: 0;
}
/* BOTONES*/


.btn-primary{
	background-color: #9C6730;
	border-color: #EBC265;
	color:#FFF;
}

.btn-success{
	background-color: #2E386F;
	border-color: #495DA2;
	color:#FFF;
}

.btn-outline-success:hover{
	background-color: #EBC265;
	border-color: #9C6730;
	color:#2E386F;
}

.btn-success:hover{
	background-color: #495DA2;
	color: white;
}

/* Ensure buttons in quantity input don't stretch */
.input-group .btn {
    flex-shrink: 0;
}

/* PRECIOS */

        .price-table th, .price-table td {
            vertical-align: middle;
        }
        .price-table thead th {
            background-color: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
        }
        .price-table tbody tr:nth-child(even) {
            background-color: #f2f2f2;
			color:#069;
        }
        .price-table tfoot {
            font-style: italic;
            color: #6c757d;
        }
        .table-responsive {
            overflow-x: auto;
        }
/* Base de la barra flotante */
.social-bar {
    position: fixed;
    top: 30vh;
    right: 0; /* Posición horizontal configurable (left/right) */
    z-index: 1050; 
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Estilo para los elementos individuales (botones) */
.social-bar li {
    margin: 5px 0;
    transition: background-color 0.3s, transform 0.3s;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 5px 0 0 5px; /* Bordes redondeados según posición */
    overflow: hidden; 
    display: flex;
    align-items: center;
    flex-direction: row; /* Direccion para el texto/icono */
}

/* Efecto Hover: Hace el fondo opaco y resalta el botón */
.social-bar li:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translateX(-5px); /* Desplazamiento según posición */
}

/* Estilo para los enlaces/iconos */
.social-bar a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: white;
    font-size: 20px;
    width: 40px; 
    text-align: center;
    transition: width 0.3s, background-color 0.3s;
}

/* Estilos de Orientación Vertical */
.social-bar {
    flex-direction: column;
}
.social-bar li {
    width: 40px; 
    max-width: 40px;
}
.social-bar a {
    float: left; /* Mantiene el icono en el borde */
}

.social-bar li:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

/* Colores dinámicos para cada botón */
.social-bar .youtube a {
    background-color: #FF0000; 
}
.social-bar .facebook a {
    background-color: #1877F2; 
}
.social-bar .tiktok a {
    background-color: #000000; 
}
.social-bar .whatsapp a {
    background-color: #25D366; 
}
/* Responsive column ordering for detail page */
@media (min-width: 992px) { /* On large screens and up */
    .col-lg-8 { /* Image gallery column */
        order: 1;
    }
    .col-lg-4 {
        order: 2;
    }
}

@media (max-width: 991.98px) { /* Pantalla mediana */
    .col-lg-8, .col-lg-4 {
        order: unset; /* Reset */
    }
}

.carousel-item img {
      width: 25vw; 
      height: 25vw;
      object-fit: cover;
}

/* Vertical Carousel Styling */
.carousel-vertical .carousel-inner {
    height: 100%;
}

.carousel-vertical .carousel-item {
    height: 100%;
    width: 100%;
}

.carousel-vertical .carousel-control-prev,
.carousel-vertical .carousel-control-next {
    position: absolute;
    left: 50%; /* Centra controles horizontalmente */
    transform: translateX(-50%); /* Ajuste para centrado */
    width: auto;
    background: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
    padding: 10px;
    opacity: 0.7;
}

.carousel-vertical .carousel-control-prev {
    top: 0;
}

.carousel-vertical .carousel-control-next {
    bottom: 0;
}

.carousel-vertical .carousel-control-prev-icon,
.carousel-vertical .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    background-size: 100% 100%;
}

/* Thumbnail */
.img-thumbnail {
    cursor: pointer;
    border: 2px solid transparent;
}

.img-thumbnail.active-thumbnail {
    border-color: #007bff;
}

/* Ajuste */
.input-group .btn {
    flex-shrink: 0;
}

/* Para pantallas pequeñas */
@media (max-width: 991.98px) {
    .col-lg-4, .col-lg-8 {
        order: unset; /* Reset */
    }
}