:root{
    --primary: #049056;
    --light-green: #f0fef9;
    --dark-green: #03684D;
    /* --light:#f6f9f8; */
    --light:#F4FBF9;
    --secondary: #FF922D;
    --dark-orange: #DE7B20;
}


::-moz-selection {
    color: white;
    background: var(--secondary);
}

::selection {
    color: white;
    background: var(--secondary);
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--light-green);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--dark-green);
    border-radius: 10px;
    border: 2px solid var(--light-green);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dark-green);
}


a:not(.main-header a, .bnt-whatsapp, .footer a, .btn-secondary, .negocio a, .front-sidebar a, .front-sidebar-negocio a){
    color: var(--dark-green)!important;
    &:hover{
        color: var(--secondary)!important;
    }
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--dark-green) var(--light-green);
}

.text-primary{
    color: var(--primary)!important;
}
.text-dark-green{
    color: var(--dark-green)!important;
}
.text-secondary{
    color: var(--secondary)!important;
}

.main-header{
    background: var(--dark-green);
    z-index: 99999999!important;
    a{
        color: white;
        &:hover{
            color: var(--secondary);
       
        }
    }
    .submenu{
        color: white!important;
        &:hover{
            color: var(--secondary)!important;
        }
    }
}

.menu-mobile{
    border:none;
    svg{
        color: white;
        fill:white;
    }
    &_content{
        background: var(--primary);
        a{
            color: white;
            &:hover{
                color: var(--secondary);
           
            }
        }
    }
}



input, select, textarea{
    border:1px solid var(--dark-green);
    &:focus{
        border:1px solid var(--primary);
        box-shadow: 0 0 0 3px rgba(4, 144, 86, 0.3)!important;
        outline:none;
    }
}

.cards{
    a{
        color: var(--primary);
        &:hover{
            color: var(--secondary);
        }
    }
}

.bg-p-green{
    background: var(--light-green);

}
.bg-p-light{
    background: var(--light);
}
  .bg-p-light:hover{
        background: var(--light-green);
      
    }
.bg-orange{
    background: var(--secondary);
}
.bg-green{
    background: var(--primary)!important;
}
.bg-dark-green{
    background: var(--dark-green);
}
.btn-primary{
    background: var(--primary);
    color: white!important;
    &:hover{
        background: var(--dark-green);
        color: white!important;
    }
}
.btn-secondary{
    background: var(--secondary);
    color: white!important;
    &:hover{
        background: var(--dark-orange);
        color: white!important;
    }
}

.overlay-search{
    background: rgba(48, 131, 109, 0.85);
}

.overlay-search input{
    border:1px solid var(--dark-orange);
   
}

.overlay-search input:focus{
        border:1px solid var(--secondary)!important;
        box-shadow: 0 0 0 3px rgba(255, 146, 45, 0.3)!important;
        outline:none;
    }
.swiper-button-next:not('.header'), 
.swiper-button-prev:not('.header') {
    color: white!important;
    background: var(--primary)!important;
}

.footer {
    background-color: rgb(8 69 52);
}

.footer p, .footer span, .footer li{
    color: white!important;
}

.footer a{
    color: white!important;
    &:hover{
        color: var(--secondary)!important;
    }
}

.swiper-button-next, .swiper-button-prev {
    color: white!important;
}

img.w-24.h-24.rounded-lg.object-cover.cursor-pointer.hover\:opacity-80.transition-opacity.duration-200.product-image-lightbox {
    width: 100%;
    height: 160px;
}

@media (width < 768px) {
    .btn-search {
        padding-block: 1rem !important;
        text-align: center;
    }
    
    /* Ajustar tamaños de texto de precios para evitar corte en móvil */
    .text-2xl.font-bold.text-green-600,
    .text-2xl.font-bold.text-gray-900 {
        font-size: 1.25rem !important; /* 20px en lugar de 24px */
        line-height: 1.75rem !important;
    }
    
    .text-lg.text-gray-500.line-through {
        font-size: 0.875rem !important; /* 14px en lugar de 18px */
    }
    
    /* Permitir wrap en contenedores de precios */
    .flex.items-center.space-x-4,
    .flex.items-center.space-x-3 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    /* Ajustar badge "Servicio" para que no se salga */
    .flex.items-start.justify-between .inline-flex.items-center.px-3.py-1 {
        margin-left: 0.5rem !important; /* Reducir ml-4 a ml-2 */
        font-size: 0.75rem !important; /* Reducir tamaño de texto */
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        white-space: nowrap;
    }
    
    /* Layout de tarjetas de producto/servicio: imagen arriba, info abajo */
    .product-card-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    

    /* .product-image-container {
        flex-shrink: 0 !important;
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 0.25rem !important;
    } */
    .contact-card h3 {
        text-align: center !important;
        margin-bottom: 0.25rem !important;
    }
    .contact-card p,
    .contact-card a,
    .contact-card span {
        text-align: center !important;
        display: block !important;
    }

    .contact-card {
        padding: 0.75rem !important;
        border-radius: 0.75rem !important;
        background: #fff !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }
    
    .product-image-container img:not(.logo-negocio),
    .product-image-container div {
        width: 48px !important;
        height: 48px !important;
        max-width: 100% !important;
    }
}

/* Estilos para swiper de promociones en detalle de negocio */
.promociones-negocio-swiper .swiper-button-next,
.promociones-negocio-swiper .swiper-button-prev {
    background: rgba(0, 0, 0, 0.5) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
}

.promociones-negocio-swiper .swiper-button-next:after,
.promociones-negocio-swiper .swiper-button-prev:after {
    font-size: 20px !important;
}

.promociones-negocio-swiper .swiper-pagination-bullet {
    background: var(--secondary) !important;
    opacity: 0.5;
}

.promociones-negocio-swiper .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: var(--secondary) !important;
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--secondary)!important;
}

@media (max-width: 768px) {
    .promociones-negocio-swiper .swiper-button-next,
    .promociones-negocio-swiper .swiper-button-prev {
        width: 36px !important;
        height: 36px !important;
    }
    
    .promociones-negocio-swiper .swiper-button-next:after,
    .promociones-negocio-swiper .swiper-button-prev:after {
        font-size: 16px !important;
    }
}

.logo-negocio {
    box-shadow: rgba(0, 0, 0, 0.5) 0 5px 10px;
}

.cards .tag,
.cards .code {
    background: var(--light-green);
    border: 1px solid var(--primary);

}

@media (width > 768px) {
    .logo-negocio{
        width: 200px !important;
        height: 200px !important;
        max-width: initial!important;
    }
}

@media (width < 768px) {
    .logo-negocio{
        width: 133px !important;
        height: 133px !important;
        max-width: initial!important;
    }
    .hero{
        margin-inline: 1rem;
        margin-top: 0 !important;
    }
    .hero .rounded-2xl {
        border-radius: 0!important;
    }
}


/* Forzar listas dentro de contenido HTML proveniente de TinyMCE */
.content-html ul {
    list-style: disc !important;
    margin-left: 1.25rem !important;
    padding-left: 1.25rem !important;
}
.content-html ol {
    list-style: decimal !important;
    margin-left: 1.25rem !important;
    padding-left: 1.25rem !important;
}
.content-html li { margin-bottom: .25rem !important; }
.content-html p { margin-bottom: .75rem !important; }

.hero-swiper{
    border-radius: 15px;
}
.swiper-desc{
    max-width: 800px;
    text-align: center;
    margin-inline: auto;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: saturate(180%) blur(10px);
    padding: 1rem;
    border-radius: 10px;
}
div#searchModal {
    z-index: 99999999!important;
}
.the-map-modal{
    z-index: 99999!important;
}


element.style {
    display: flex;
}
.lightbox,
.product-lightbox {
    z-index: 99999999999!important;
}

/* Ocultar barra de progreso duplicada en Android PWA */
/* Chrome en Android muestra dos barras en modo PWA standalone:
   1. La barra nativa del navegador (no se puede ocultar)
   2. Una barra adicional del theme-color que se muestra como barra de estado
*/
@media screen and (max-width: 768px) {
    /* Ocultar cualquier barra de progreso adicional en Android */
    html::before,
    body::before {
        display: none !important;
    }
    
    /* Ocultar barra de progreso del theme-color en Android Chrome PWA */
    /* En modo standalone, Chrome muestra el theme-color como barra de estado adicional */
    meta[name="theme-color"]::after {
        display: none !important;
    }
}

/* Ocultar barra de progreso adicional específica de Android Chrome en modo PWA */
/* Esta es la barra que aparece cuando hay un theme-color y se carga la página en modo standalone */
@supports (-webkit-appearance: none) {
    /* Solo aplicar en navegadores WebKit (Chrome, Edge) */
    html {
        /* Prevenir que Chrome muestre barra de progreso adicional */
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Ocultar cualquier pseudo-elemento que pueda ser la barra de progreso */
    html::before,
    html::after {
        display: none !important;
        content: none !important;
    }
}

/* CSS específico para modo PWA standalone en Android */
/* Detectar si está en modo standalone y ocultar barra de progreso adicional */
@media (display-mode: standalone) {
    /* En modo standalone, Chrome puede mostrar una barra de progreso adicional */
    /* Ocultar cualquier elemento que pueda ser una barra de progreso duplicada */
    html::before,
    html::after,
    body::before,
    body::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
        width: 0 !important;
        visibility: hidden !important;
    }
    
    /* Ocultar barra de progreso del theme-color en modo standalone */
    /* Chrome muestra el theme-color como barra de estado en la parte superior */
    * {
        /* Prevenir que cualquier elemento se muestre como barra de progreso */
        -webkit-tap-highlight-color: transparent;
    }
}

.filtro-notificacion.bg-primary-600{
    background: var(--primary-dark)!important;
}