/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #f8f9fa; /* Light gray background */
    font-family: 'Arial', sans-serif; /* Fuente más limpia */
}

/* Estilo general para tarjetas */
.card {
    background-color: #ffffff;
    border: none;
    border-radius: 12px; /* Bordes más redondeados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el ratón */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Estilo gradiente para botones, EXCLUYENDO .navbar-toggler */
button:not(.navbar-toggler), .btn, input[type="submit"] {
    background: linear-gradient(to right, #34c759, #1a8754) !important; /* Gradiente verde claro a oscuro */
    color: white !important;
    border: none !important;
    padding: 8px 16px !important; /* Padding más cómodo */
    border-radius: 10px !important; /* Bordes más suaves */
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
}

button:not(.navbar-toggler):hover, .btn:hover, input[type="submit"]:hover {
    background: linear-gradient(to right, #2ab54a, #145c39) !important; /* Gradiente verde más intenso al hover */
    transform: scale(1.05);
}

/* Asegurar que btn-gradient tenga el mismo estilo */
.btn-gradient {
    background: linear-gradient(to right, #34c759, #1a8754) !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
}

.btn-gradient:hover {
    background: linear-gradient(to right, #2ab54a, #145c39) !important;
    transform: scale(1.05);
}

/* Iconos dentro de los botones */
.btn i.fa-solid, .btn-gradient i.fa-solid, .btn-details i.fa-solid, .btn-search i.fa-solid {
    color: #ffffff !important; /* Iconos blancos dentro de los botones */
    margin-right: 0.5rem; /* Espacio uniforme */
}

/* Estilo específico para el botón de búsqueda */
.btn-search {
    border: none !important; /* Sin borde */
    border-radius: 0 10px 10px 0 !important; /* Lado izquierdo plano, derecho redondeado */
    padding: 0 1rem !important; /* Espaciado ajustado para centrar ícono y texto */
    background: linear-gradient(to right, #34c759, #1a8754) !important; /* Gradiente verde */
    color: #ffffff !important; /* Color blanco para ícono y texto */
    transition: background 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    height: 38px; /* Altura fija para alinear con el input */
}

/* Iconos fuera de los botones */
.fa-solid {
    color: #ffffff; /* Color blanco para iconos fuera de company.php */
    transition: color 0.3s ease;
}

.fa-solid:hover {
    color: #0056b3; /* Color más oscuro al hover */
}

/* Iconos en company.php */
.company-page .fa-solid {
    color: #4da8ff; /* Azul para iconos en company.php */
}

.company-page .fa-solid:hover {
    color: #0056b3; /* Azul más oscuro al hover */
}

/* Estilo para el buscador grande en el CTA */
.cta-header .search-form.main-search-form {
    max-width: 600px; /* Ancho grande */
    margin: 0 auto; /* Centrar horizontalmente */
    padding: 0 15px;
}

.cta-header .search-form.main-search-form .input-group {
    border-radius: 12px; /* Bordes más suaves */
    overflow: hidden; /* Evita desbordes */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

.cta-header .search-form.main-search-form .form-control {
    border-radius: 12px 0 0 12px !important; /* Redondeado solo a la izquierda */
    border: 1px solid #ddd;
    border-right: none !important; /* Sin borde derecho para ceñir al botón */
    padding: 0.75rem 1rem; /* Padding más grande */
    font-size: 1.1rem; /* Texto más grande */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: 46px; /* Altura consistente */
}

.cta-header .search-form.main-search-form .form-control:focus {
    border-color: #4da8ff;
    box-shadow: 0 0 5px rgba(77, 168, 255, 0.5);
}

.cta-header .search-form.main-search-form .btn-search {
    padding: 0 1.5rem !important; /* Botón más grande */
    font-size: 1.1rem !important;
    border-radius: 0 12px 12px 0 !important; /* Lado izquierdo plano, derecho redondeado */
    height: 46px; /* Altura igual al input */
    border-left: none !important; /* Sin borde izquierdo para ceñir al input */
}

/* Estilo para el buscador en el header */
.navbar .search-form.main-search-form {
    max-width: 350px; /* Ancho más pequeño para el header */
    margin-left: auto; /* Alinear a la derecha */
    margin-right: 15px; /* Espacio a la derecha */
}

.navbar .search-form.main-search-form .input-group {
    border-radius: 10px; /* Bordes más pequeños */
    overflow: hidden; /* Evita desbordes */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

.navbar .search-form.main-search-form .form-control {
    border-radius: 10px 0 0 10px !important; /* Redondeado solo a la izquierda */
    border: 1px solid #ddd;
    border-right: none !important; /* Sin borde derecho para ceñir al botón */
    padding: 0.5rem 1rem; /* Padding más pequeño */
    font-size: 0.95rem; /* Texto más pequeño */
    height: 38px; /* Altura consistente */
    background-color: #ffffff; /* Fondo blanco */
    color: #333; /* Texto oscuro */
}

.navbar .search-form.main-search-form .form-control:focus {
    border-color: #4da8ff;
    box-shadow: 0 0 5px rgba(77, 168, 255, 0.5);
}

.navbar .search-form.main-search-form .btn-search {
    padding: 0 1rem !important; /* Padding ajustado */
    font-size: 0.95rem !important; /* Tamaño de fuente más pequeño */
    border-radius: 0 10px 10px 0 !important; /* Lado izquierdo plano, derecho redondeado */
    height: 38px; /* Altura igual al input */
    border-left: none !important; /* Sin borde izquierdo para ceñir al input */
}

.navbar .search-form.main-search-form .btn-search:hover {
    background: linear-gradient(to right, #2ab54a, #145c39) !important; /* Gradiente más oscuro al hover */
    transform: scale(1.05);
}

/* Responsive adjustments para el buscador */
@media (max-width: 991.98px) {
    .navbar .search-form.main-search-form {
        max-width: 100%; /* Ocupa todo el ancho en móvil */
        margin: 1rem auto; /* Centrado en móvil */
        padding: 0 15px;
    }

    .navbar .search-form.main-search-form .input-group {
        max-width: 300px; /* Ancho máximo en móvil */
        margin: 0 auto;
        border-radius: 8px; /* Bordes más pequeños */
    }

    .navbar .search-form.main-search-form .form-control {
        border-radius: 8px 0 0 8px !important; /* Redondeado solo a la izquierda */
        height: 36px; /* Altura más pequeña */
        font-size: 0.9rem;
    }

    .navbar .search-form.main-search-form .btn-search {
        border-radius: 0 8px 8px 0 !important; /* Lado izquierdo plano, derecho redondeado */
        height: 36px; /* Altura igual al input */
        font-size: 0.9rem !important;
    }
}

/* Estilo para el título de la categoría */
.category-title {
    font-size: 2.25rem; /* Más grande para destacar */
    font-weight: 700; /* Más peso */
    color: #333;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.category-title:hover {
    color: #4da8ff; /* Azul al hover */
}

.category-icon {
    font-size: 2.2rem; /* Iconos más grandes */
    margin-bottom: 1rem;
    color: #4da8ff; /* Azul para coherencia */
    transition: transform 0.3s ease;
}

.store-logo {
    max-width: 180px !important; /* Aumentado de 140px a 180px */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra consistente */
    transition: transform 0.3s ease;
    display: block;
    margin-left: auto;
    margin-right: auto; /* Centrar logo */
}

.store-logo:hover {
    transform: scale(1.05); /* Efecto hover en el logo */
}

.pagination {
    flex-wrap: wrap; /* Allow wrapping on small screens */
    justify-content: center; /* Ensure centering */
}

.pagination .page-item {
    margin: 2px; /* Reduced margin for tighter spacing */
}

.pagination .page-link {
    color: #4da8ff; /* Azul para los enlaces */
    border-radius: 6px; /* Slightly smaller radius */
    margin: 0 2px; /* Reduced margin */
    font-size: 0.9rem; /* Slightly smaller font */
    padding: 6px 12px; /* Reduced padding */
    border: 1px solid #ddd;
    display: flex;
    align-items: center; /* Center icons and text */
    justify-content: center;
    min-width: 36px; /* Ensure consistent width */
    height: 36px; /* Fixed height for consistency */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.pagination .page-item.active .page-link {
    background-color: #4da8ff;
    border-color: #4da8ff;
    color: white;
}

.pagination .page-link:hover {
    background-color: #e6f0ff; /* Fondo azul claro al hover */
    color: #0056b3; /* Azul oscuro */
    transform: scale(1.05);
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #f8f9fa;
    border-color: #ddd;
    cursor: not-allowed;
}

/* Hide text on mobile, show only icons for Previous/Next */
.pagination .page-link .text {
    display: inline; /* Visible by default */
}

/* Estilos para las estrellas dinámicas (para reseñas) */
.star-rating {
    display: inline-block;
    font-size: 28px; /* Estrellas más grandes */
    cursor: pointer;
    text-align: center; /* Centrar estrellas */
    margin-bottom: 0; /* Sin espacio debajo */
    line-height: 1; /* Minimizar espacio vertical */
}

.star {
    color: #ccc;
    transition: color 0.3s ease, transform 0.3s ease;
    margin: 0 2px; /* Espacio reducido entre estrellas */
    line-height: 1; /* Minimizar espacio vertical */
}

.star:hover,
.star.selected,
.star.hover {
    color: #f8d825 !important;
    transform: scale(1.1); /* Efecto de agrandamiento al seleccionar/hover */
}

/* Reviews Cluster */
.reviews-cluster {
    margin-top: 3rem;
    padding: 2rem 0;
    background-color: #f8f9fa; /* Light gray background for contrast */
}

.reviews-cluster h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 2rem;
}

.review-card {
    background-color: #ffffff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    transition: transform 0.3s ease;
    height: 100%; /* Ensure consistent height */
}

.review-card:hover {
    transform: translateY(-5px);
}

.review-rating {
    font-size: 1rem;
    color: #f8d825; /* Star color */
}

.review-comment {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
}

.review-author {
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.review-date {
    font-size: 0.85rem;
    color: #6B7280;
    margin-bottom: 0.5rem;
}

.review-store a {
    font-size: 0.85rem;
    color: #6B7280;
    text-decoration: none;
}

.review-store a:hover {
    color: #4da8ff; /* Azul al hover */
}

/* Estilos para las tarjetas-botones de categorías */
.category-button {
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #333;
}

.category-button:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.category-button .category-icon {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.category-button:hover .category-icon {
    transform: scale(1.2);
}

.category-button h5 {
    color: #333;
    margin-bottom: 0;
    font-size: 1.25rem;
    transition: color 0.3s ease;
}

.category-button:hover h5 {
    color: #4da8ff; /* Azul al hover */
}

/* Estilos para las tarjetas de tiendas */
.store-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9ecef; /* Borde sutil */
    padding: 1.5rem !important; /* Más padding */
    text-align: center; /* Centrar contenido */
}

.store-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.store-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.store-title:hover {
    color: #4da8ff; /* Azul al hover */
}

.store-description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0.5rem;
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
}

/* Estilo específico para el botón "Ver detalles" */
.btn-details {
    width: auto;
    padding: 10px 20px !important;
    font-size: 1rem !important;
    margin: 0 auto;
    display: block; /* Centrar en la tarjeta */
}

/* Estilo para la tarjeta de detalles de la tienda */
.store-details-card {
    padding: 2.5rem !important; /* Más espacio */
    border: 1px solid #e9ecef; /* Borde sutil */
}

/* Estilos para la cuadrícula de reseñas */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en escritorio */
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 767.98px) {
    .reviews-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        gap: 1rem; /* Espacio más pequeño entre reseñas */
    }

    .review-card {
        padding: 1.25rem; /* Padding ligeramente más pequeño para mejor ajuste */
        margin-bottom: 1rem; /* Espacio adicional entre tarjetas */
    }
}

/* Estilos para el contenedor del formulario de reseñas */
.review-form-container {
    display: flex;
    justify-content: center;
    margin: 3rem auto 2.5rem; /* Aumentado margin-top a 3rem */
    max-width: 600px;
}

/* Estilos para el formulario de reseñas */
.review-form {
    width: 100%;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 2.5rem !important;
    transition: transform 0.3s ease;
}

.review-form:hover {
    transform: translateY(-5px); /* Efecto hover en el formulario */
}

/* Estilos para los títulos */
h3.text-center {
    font-size: 1.6rem;
    color: #333;
    margin-bottom: 2rem;
    font-weight: 600; /* Más peso para destacar */
}

.review-form h3 {
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    color: #ffffff; /* Texto blanco */
    font-weight: 600;
}

/* Asegurar que los campos del formulario sean simétricos */
.review-form .form-group {
    margin-bottom: 1.5rem;
}

.review-form .form-group.text-center {
    margin-bottom: 2rem; /* Más espacio para el campo de estrellas */
}

.review-form .form-control {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 0.75rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.review-form .form-control:focus {
    border-color: #4da8ff;
    box-shadow: 0 0 5px rgba(77, 168, 255, 0.5);
}

.review-form textarea.form-control {
    resize: vertical;
    min-height: 120px; /* Más altura para mejor estética */
}

/* Estilo específico para el campo de enlace de factura */
.review-form input[type="url"].form-control {
    font-size: 0.95rem; /* Igual que otros inputs */
}

/* Centrar el contenedor de estrellas */
.review-form .star-rating {
    display: inline-block;
    margin: 0 auto;
}

/* Estilo para el badge de Comprador Verificado */
.verified-buyer {
    font-size: 0.85rem;
    color: #4da8ff; /* Azul coherente con el tema */
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem; /* Espacio entre el icono y el texto */
    margin-bottom: 0.5rem; /* Espacio debajo para alinear con estrellas */
}

.verified-icon {
    width: 16px; /* Tamaño del icono */
    height: 16px;
}

/* Estilos para el Header CTA */
.cta-header {
    background: linear-gradient(to right, #4da8ff, #0056b3); /* Gradiente azul */
    color: white;
    padding: 3rem 2rem;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    margin-bottom: 3rem;
    transition: transform 0.3s ease;
}

.cta-header:hover {
    transform: translateY(-5px); /* Efecto hover consistente */
}

.cta-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Espacio entre ícono y texto */
}

.cta-subtitle {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #e6f0ff; /* Color claro para contraste */
    line-height: 1.5;
}

.btn-cta {
    padding: 12px 30px !important; /* Botón más grande */
    font-size: 1.1rem !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, transform 0.3s ease !important;
}

.btn-cta:hover {
    background: linear-gradient(to right, #2ab54a, #145c39) !important;
    transform: scale(1.1) !important;
}

/* Header */
.header {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

.navbar-dark {
    background: linear-gradient(to right, #4da8ff, #0056b3); /* Gradiente azul consistente con cta-header */
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff !important;
}

.brand-icon {
    font-size: 1.4rem;
    color: #ffffff;
}

.brand-text {
    color: #ffffff;
}

.nav-link {
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: background-color 0.2s ease;
}

.nav-link:hover, .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.navbar-dark .nav-link .nav-icon { 
    color: #ffffff !important; 
    font-size: 0.9rem; 
    margin-right: 0.5rem; 
}

.navbar-nav {
    gap: 0.5rem;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #ffffff;
        padding: 1rem;
        border-radius: 8px;
        margin-top: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .nav-link {
        color: #1f2a44 !important;
        font-size: 1rem;
        text-align: center;
    }

    .nav-link:hover, .nav-link.active {
        background-color: #eff6ff;
        color: #3b82f6 !important;
    }

    .nav-link .nav-icon {
        color: #1f2a44 !important; /* Iconos azul oscuro en móvil */
    }

    .nav-link:hover .nav-icon, .nav-link.active .nav-icon {
        color: #3b82f6 !important; /* Iconos azul claro en hover/activo en móvil */
    }
}

/* Footer Styles */
.footer {
    background: linear-gradient(to right, #0056b3, #4da8ff) !important; /* Gradiente azul */
    color: #ffffff !important; /* Base text color */
    padding-top: 4rem; /* Increased padding for a more spacious feel */
    padding-bottom: 3rem;
    position: relative;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.15); /* Stronger top shadow */
    transition: background 0.3s ease;
}

.footer-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 2rem; /* Slightly larger brand logo */
    font-weight: 700;
    gap: 0.5rem; /* Consistent spacing */
}

.footer-brand .brand-icon {
    font-size: 1.8rem; /* Larger icon */
    color: #ffffff; /* White icon */
    transition: transform 0.3s ease;
}

.footer-brand .brand-text {
    color: #ffffff; /* White text */
    transition: transform 0.3s ease;
}

.footer-brand:hover .brand-icon,
.footer-brand:hover .brand-text {
    transform: scale(1.05); /* Consistent hover effect */
}

.footer-title {
    font-size: 1.35rem; /* Slightly larger for emphasis */
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.5rem; /* More space below titles */
    text-align: center; /* Ensure titles are centered */
}

.footer-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e6f0ff; /* Off-white for contrast */
    margin-bottom: 0;
    text-align: center; /* Center text for consistency */
}

.footer-links {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center links */
}

.footer-link {
    color: #e6f0ff; /* Color claro para contraste */
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0; /* Slightly more padding */
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-link:hover {
    color: #ffffff;
    transform: translateX(5px);
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.3); /* More visible */
    margin: 2.5rem 0; /* More space around divider */
}

.social-icons {
    display: flex;
    justify-content: center; /* Center icons */
    align-items: center;
    gap: 1.5rem; /* More space between icons */
}

.social-icon {
    color: #ffffff; /* White icons */
    font-size: 1.8rem; /* Larger icons */
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer; /* Indicate interactivity */
}

.social-icon:hover {
    color: #e6f0ff; /* Slightly lighter on hover */
    transform: scale(1.3); /* Slightly larger hover effect */
}

.footer-copyright {
    font-size: 0.9rem; /* Slightly larger for readability */
    color: #e6f0ff; /* Off-white for contrast */
}

/* Prevent gray background overrides */
.footer, .footer * {
    background-color: transparent !important; /* Ensure no inherited gray */
}

/* Responsive Footer Adjustments */
@media (max-width: 768px) {
    .footer {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

    .footer-brand {
        font-size: 1.8rem;
    }

    .footer-brand .brand-icon {
        font-size: 1.6rem;
    }

    .footer-title {
        font-size: 1.2rem;
    }

    .footer-text, .footer-link {
        font-size: 0.9rem;
    }

    .social-icon {
        font-size: 1.6rem;
    }
}

@media (max-width: 576px) {
    .footer {
        text-align: center;
    }

    .footer-brand {
        justify-content: center;
        font-size: 1.6rem;
    }

    .footer-brand .brand-icon {
        font-size: 1.4rem;
    }

    .footer .col-md-4 {
        margin-bottom: 2rem;
    }

    .social-icons {
        justify-content: center;
    }
}

.star-rating-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.star-rating-animation .starindex {
    font-size: 1.5rem;
    color: #ccc;
    fill: #ccc;
    margin: 0 6px;
    animation: lightUp 0.6s ease forwards;
    cursor: default;
}

.star-rating-animation .starindex i.fa-solid.fa-star {
    font-weight: 900;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    color: inherit;
    fill: inherit;
}

.star-rating-animation .starindex:hover,
.star-rating-animation .starindex i.fa-solid.fa-star:hover {
    color: #f8d825;
    fill: #f8d825;
}

@keyframes lightUp {
    0% {
        color: #ccc;
        fill: #ccc;
    }
    100% {
        color: #f8d825;
        fill: #f8d825;
    }
}

/* Estilos específicos para company.php */
.company-page .review-comment {
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
    transform: translateY(0.7rem); /* Mover texto un poco menos hacia arriba */
    margin-bottom: 0; /* Sin espacio debajo */
    line-height: 1.3; /* Reducir espacio vertical */
}

.company-page .review-icon {
    display: inline-block; /* No ocupar línea completa */
    margin-bottom: 0;
    margin-right: 0.3rem; /* Espacio lateral */
    color: #4da8ff; /* Azul para iconos */
}

.company-page .review-header {
    margin-bottom: 0; /* Sin espacio debajo */
    line-height: 1.2; /* Minimizar espacio vertical */
}

.company-page .store-description {
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
    margin-bottom: 0.5rem; /* Restaurar margen inferior */
    line-height: 1.5; /* Mejor legibilidad */
}

.company-page .description-icon {
    display: inline; /* Inline para primera línea */
    margin-right: 0.5rem; /* Espacio entre icono y texto */
    color: #4da8ff; /* Azul para iconos */
    vertical-align: middle; /* Alinear con texto */
}

.company-page .store-details-card .mb-2 {
    margin-bottom: 0 !important; /* Sin espacio debajo */
}

.company-page .star-rating-wrapper {
    display: inline-block; /* No añadir espacio extra */
    margin-bottom: 0; /* Sin espacio debajo */
    line-height: 1; /* Minimizar espacio vertical */
}

/* Estilo para las reseñas */
.review-comment {
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.review-icon {
    display: block;
    margin-bottom: 0.5rem;
    color: #6c757d;
}

.review-header {
    margin-bottom: 0.25rem;
}

/* Estilo para la descripción de la empresa */
.store-description {
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
    margin-bottom: 0.5rem;
}

.description-icon {
    display: block;
    margin-bottom: 0.5rem;
    color: #6c757d;
}

.store-details-card .mb-2 {
    margin-bottom: 0.25rem !important;
}

/* Estilos para el aviso de revisión de factura */
.review-form .receipt-notice {
    background-color: #e7f3ff; /* Fondo azul claro */
    color: #333; /* Texto oscuro para legibilidad */
    border-color: #b6d4fe; /* Borde azul suave */
}

.review-form .receipt-notice i {
    color: #0d6efd; /* Icono azul para coherencia */
}

/* Estilos para el encabezado del formulario de reseñas */
.review-form-header {
    background: linear-gradient(to right, #4da8ff, #0056b3); /* Gradiente azul como en cta-header */
    padding: 1rem; /* Espaciado interno */
    border-radius: 8px 8px 0 0; /* Bordes redondeados solo en la parte superior */
    margin: -2.5rem -2.5rem 1.5rem -2.5rem; /* Compensar el padding de .review-form */
}

.review-form-header h3 {
    color: #ffffff; /* Texto blanco */
    font-size: 1.6rem; /* Tamaño consistente con otros títulos */
    font-weight: 600;
    margin: 0; /* Sin margen adicional */
}

.review-form-header h3 i.fa-solid {
    color: #ffffff; /* Ícono blanco */
}

/* FAQ Section */
.faq-cluster {
    max-width: 900px;
    margin: 0 auto 50px;
    padding: 2rem 1rem;
}

.faq-cluster .cta-header {
    margin-bottom: 2rem;
    background: linear-gradient(to right, #4da8ff, #0056b3); /* Gradiente igual al navbar-dark */
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.faq-cluster .cta-header:hover {
    transform: translateY(-3px);
}

.faq-cluster .cta-title {
    color: #ffffff; /* Blanco para contraste */
    font-weight: 700;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.faq-cluster .cta-subtitle {
    color: #e0e7ff; /* Blanco suave para subtítulo */
    font-size: 1rem;
    line-height: 1.5;
}

.faq-cluster .faq-accordion {
    max-width: 800px; /* Mantener ancho limitado para no ocupar todo el monitor */
    margin: 0 auto;
}

.faq-cluster .faq-item {
    border: none; /* Sin borde */
    border-radius: 8px;
    margin-bottom: 1rem;
    background-color: #ffffff; /* Fondo blanco limpio */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra sutil */
    transition: box-shadow 0.3s ease;
    width: 100%; /* Asegurar que el item ocupe el ancho del acordeón */
}

.faq-cluster .faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* Elevación en hover */
}

.faq-cluster .faq-header {
    background: #f9fafb !important; /* Fondo gris claro, forzado */
    padding: 0; /* Sin padding para maximizar el ancho del texto */
    border-bottom: none; /* Sin borde inferior */
    border-radius: 8px 8px 0 0; /* Bordes redondeados arriba */
    width: 100%; /* Asegurar que el header ocupe todo el ancho */
}

.faq-cluster .faq-toggle {
    width: 100%; /* Texto ocupa todo el ancho del contenedor */
    text-align: left;
    color: #1e3a8a !important; /* Azul marino forzado para visibilidad */
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 1.5rem; /* Padding para legibilidad */
    text-decoration: none;
    background: transparent !important; /* Sin gradientes */
    border: none; /* Sin borde */
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;
    display: flex;
    justify-content: space-between; /* Texto e ícono distribuidos a lo largo */
    align-items: center;
}

.faq-cluster .faq-toggle:hover {
    color: #3b82f6 !important; /* Azul suave en hover */
    background: #eff6ff !important; /* Fondo azul claro en hover */
}

.faq-cluster .faq-toggle::after {
    content: '\f067'; /* Icono de más (Font Awesome) */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #3b82f6; /* Azul suave para iconos */
    font-size: 0.9rem;
    transition: color 0.3s ease, transform 0.3s ease;
    margin-left: 0.5rem; /* Espacio para no pegar el ícono al texto */
}

.faq-cluster .faq-toggle:not(.collapsed)::after {
    content: '\f068'; /* Icono de menos (Font Awesome) */
    transform: rotate(180deg); /* Rotar para efecto visual */
}

.faq-cluster .faq-toggle:hover::after {
    color: #1e3a8a; /* Azul marino en hover */
}

.faq-cluster .faq-body {
    padding: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #374151; /* Gris oscuro para texto */
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 0 0 8px 8px; /* Bordes redondeados abajo */
}

.faq-cluster .faq-body a {
    color: #3b82f6; /* Azul suave para enlaces */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.faq-cluster .faq-body a:hover {
    color: #1e3a8a; /* Azul marino en hover */
    text-decoration: underline;
}

/* FAQ CTA Button */
.faq-cluster .btn-faq-cta {
    background: linear-gradient(to right, #4da8ff, #0056b3); /* Gradiente igual al navbar-dark */
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.faq-cluster .btn-faq-cta:hover {
    background: linear-gradient(to right, #3b82f6, #1e3a8a); /* Gradiente invertido en hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.faq-cluster .btn-faq-cta i {
    color: #ffffff; /* Icono blanco */
    margin-right: 0.5rem;
}

/* Estilos para la sección de FAQs en company.php (sin efectos hover) */
.faq-section .accordion {
    max-width: 800px; /* Ancho limitado para centrar */
    margin: 0 auto; /* Centrar el acordeón */
}

.faq-section .accordion-item {
    border: none; /* Sin borde */
    border-radius: 8px; /* Bordes redondeados */
    margin-bottom: 1rem; /* Espacio entre elementos */
    background-color: #ffffff; /* Fondo blanco limpio */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra fija */
}

.faq-section .accordion-header {
    background: linear-gradient(to right, #4da8ff, #0056b3) !important; /* Gradiente azul fijo */
    border-radius: 8px 8px 0 0; /* Bordes redondeados solo arriba */
    padding: 0; /* Sin padding para maximizar el ancho */
}

.faq-section .accordion-button {
    background: transparent !important; /* Fondo transparente para heredar gradiente */
    color: #ffffff !important; /* Texto blanco */
    font-size: 1.1rem; /* Tamaño legible */
    font-weight: 600; /* Peso para destacar */
    padding: 1rem 1.5rem; /* Espaciado interno */
    border: none; /* Sin borde */
    width: 100%; /* Ocupar todo el ancho */
    text-align: left; /* Alinear texto a la izquierda */
    box-shadow: none !important; /* Sin sombra */
}

.faq-section .accordion-button:not(.collapsed) {
    background: linear-gradient(to right, #3b82f6, #1e3a8a) !important; /* Gradiente más oscuro cuando está abierto */
    color: #ffffff !important; /* Texto blanco */
}

.faq-section .accordion-button::after {
    content: '\f067'; /* Icono de más (Font Awesome) */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #ffffff; /* Icono blanco */
    font-size: 0.9rem; /* Tamaño del ícono */
    transition: transform 0.3s ease; /* Solo transición para rotación del ícono */
}

.faq-section .accordion-button:not(.collapsed)::after {
    content: '\f068'; /* Icono de menos (Font Awesome) */
    transform: rotate(180deg); /* Rotar para efecto visual */
    color: #ffffff; /* Mantener blanco */
}

.faq-section .accordion-body {
    padding: 1.5rem; /* Espaciado interno */
    font-size: 0.95rem; /* Tamaño de fuente legible */
    line-height: 1.6; /* Mejor legibilidad */
    color: #374151; /* Gris oscuro para el texto */
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 0 0 8px 8px; /* Bordes redondeados abajo */
}

.faq-section .accordion-body a {
    color: #3b82f6; /* Azul suave para enlaces */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.faq-section .accordion-body a:hover {
    color: #1e3a8a; /* Azul marino en hover */
    text-decoration: underline;
}

/* Forzar eliminación de efectos hover */
.faq-section .accordion-item:hover,
.faq-section .accordion-button:hover {
    transform: none !important; /* Sin transformaciones */
    box-shadow: none !important; /* Sin cambio de sombra */
    background: transparent !important; /* Mantener fondo heredado */
    opacity: 1 !important; /* Sin transparencia */
}