/*:root {
    --border-focus: solid 1px #6133BD;
    --primary-color: #6133bd;
    --primary-color-onhover: #4d2897;
    --primary-soft: #dfd6f1;
    --primary-soft-onhover: #bfade4;
}

.btn-outline-primary {
    --bs-btn-color: #6133bd;
    --bs-btn-border-color: #6133bd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6133bd;
    --bs-btn-hover-border-color: #6133bd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6133bd;
    --bs-btn-active-border-color: #6133bd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6133bd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6133bd;
    --bs-gradient: none;
}*/

:root {
    --border-focus: solid 1px #FE3D01;
    --primary-color: #FE3D01;
    --primary-color-onhover: #D32F00;
    --primary-soft: #FFE8E0;
    --primary-soft-onhover: #FFD1BF;
}

body {
    background: #ffffff !important;
}

.bg-sukasa {
    --bs-bg-opacity: 1;
    background-color: rgb(254 61 1) !important;
}

.btn-outline-primary {
    --bs-btn-color: #FE3D01;
    --bs-btn-border-color: #FE3D01;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #FE3D01;
    --bs-btn-hover-border-color: #FE3D01;
    --bs-btn-focus-shadow-rgb: 254, 61, 1;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #FE3D01;
    --bs-btn-active-border-color: #FE3D01;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #FE3D01;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #FE3D01;
    --bs-gradient: none;
}

.company-logo {
    width: 350px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

@media (max-width: 424px) {
    .company-logo {
        height: 40px;
        width: 200px;
    }
}

.search-dropdown {
    background: #fff;
    display: block;
    left: unset !important;
    position: fixed;
    top: 24px !important;
    width: 770px !important;
    z-index: 1040;
}

.bg-gradient-design {
    background: white !important;
    border: 3px solid #FE3D01 !important;
	box-shadow: 0 0 .5rem #FE3D01 !important;
}






header {
	--bs-bg-opacity: 1;
		background-color: rgb(254 61 1) !important;
	}
	
.categories-image.rounded-circle {
    width: 140px; /* Contenedor exterior más grande */
    height: 140px;
    margin: 0 auto;
    padding: 8px; /* Más padding para separación */
    border: 8px solid #FE3D01;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.categories-image .image-container {
    width: 100px; /* Contenedor interior más pequeño */
    height: 100px;
    overflow: visible; /* Cambiado de hidden a visible */
    background-color: #FE3D01;;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.categories-image .category-img {
    width: 90px; /* Tamaño fijo de la imagen */
    height: 90px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

/* O si prefieres que la imagen sea más grande que el contenedor interior: */
.categories-image .category-img.larger {
    width: 110px;
    height: 110px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

/* Clases de utilidad */
.border-orange {
    border-color: #FE3D01 !important;
}

.rounded-circle {
    border-radius: 50% !important;
}


.slide-container {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 10px; /* Espacio entre las dos imágenes */
    padding: 0 10px; /* Espacio a los lados */
}

.slide-img-bg {
    width: 50%; /* Cada imagen ocupa la mitad del contenedor */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1; /* Para que ambas imágenes tengan el mismo ancho */
}

.slider-bg-image {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.slider-link {
    width: 100%;
    height: 100%;
    display: block;
}

/* Configuración específica para el slider con 2 imágenes */
.swiper.mySwiper {
    --swiper-slides-per-view: 1; /* Por defecto 1 slide a la vez */
}

@media (min-width: 768px) {
    .swiper.mySwiper {
        --swiper-slides-per-view: 1; /* Mantener 1 slide en tablet */
    }
}

@media (min-width: 992px) {
    .swiper.mySwiper {
        --swiper-slides-per-view: 1; /* Mantener 1 slide en desktop */
    }
    
    .slide-container {
        gap: 15px; /* Más espacio en pantallas grandes */
        padding: 0 15px;
    }
}

@media (max-width: 768px) {
    .slide-img-bg {
        height: 200px; /* Altura reducida para móviles */
    }
    
    .slide-container {
        flex-direction: column; /* En móviles, apilar las imágenes verticalmente */
        gap: 8px;
    }
    
    .slide-img-bg {
        width: 100%; /* En móviles, cada imagen ocupa el 100% */
        height: 180px;
    }
}

.address-suggestions {
	position: absolute;
	z-index: 1000;
	background: white;
	border: 1px solid #ddd;
	border-radius: 4px;
	max-height: 200px;
	overflow-y: auto;
	width: 100%;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.address-suggestion {
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}
.address-suggestion:hover {
	background-color: #f8f9fa;
}
.address-suggestion:last-child {
	border-bottom: none;
}
.form-group {
	position: relative;
}