/**
 * Vitrine de Medicos em Destaque - CSS
 * @version 3.3 - FORÇA TOTAL (IMPORTANT)
 * 
 * MUDANÇAS FORÇADAS:
 * - Setas ESCONDIDAS com !important
 * - Imagem QUADRADA COMPLETA com !important
 * - Padding reduzido com !important
 */

.vitrine-fade-section {
    width: 100%;
    padding: 40px 0;
    overflow: hidden;
}

.vitrine-fade-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 15px;
}

.vitrine-fade-title {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px;
}

.vitrine-fade-description {
    font-size: 16px;
    color: #666;
    margin: 0 auto;
    max-width: 600px;
}

/* CONTAINER - PADDING REDUZIDO FORÇADO */
.vitrine-fade-container {
    position: relative !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important; /* FORÇADO */
}

.vitrine-fade-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    position: relative !important;
}

/* CARDS */
.vitrine-fade-item {
    flex: 0 0 calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
    opacity: 0;
    visibility: hidden;
    display: none;
    width: calc(25% - 15px) !important;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.vitrine-fade-item.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.vitrine-fade-item.is-fading-out {
    opacity: 0 !important;
}

.vitrine-fade-item.is-fading-in {
    opacity: 1 !important;
}

.vitrine-fade-card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.vitrine-fade-card:hover {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-5px) !important;
}

/* ============================================
   IMAGEM 360x360 - FORÇAR QUADRADO COMPLETO
   ============================================ */
.vitrine-fade-figure {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    /* FORÇAR PROPORÇÃO QUADRADA */
    aspect-ratio: 1 / 1 !important;
    /* Background neutro */
    background: #f5f5f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* FORÇAR IMAGEM COMPLETA - TODAS AS VARIAÇÕES POSSÍVEIS */
.vitrine-fade-figure img,
.vitrine-fade-card .vitrine-fade-figure img,
.vitrine-fade-section .vitrine-fade-figure img,
.vitrine-fade-section .vitrine-fade-card .vitrine-fade-figure img,
figure.vitrine-fade-figure img,
.vitrine-fade-item .vitrine-fade-figure img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    /* CONTAIN = IMAGEM INTEIRA VISÍVEL */
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    position: static !important; /* NÃO absolute */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    transition: transform 0.3s ease !important;
}

.vitrine-fade-card:hover .vitrine-fade-figure img {
    transform: scale(1.05) !important;
}

.vitrine-fade-figure a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* TAGS */
.vitrine-fade-tags-top-left {
    position: absolute !important;
    top: 8px !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 5 !important;
}

.vitrine-fade-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px 4px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    color: #fff !important;
    position: relative !important;
}

.vitrine-fade-tag::after {
    content: '' !important;
    position: absolute !important;
    right: -8px !important;
    top: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 11px 0 11px 8px !important;
}

.vitrine-fade-tag i {
    font-size: 10px !important;
}

.vitrine-fade-tag-featured {
    background: #00bcd4 !important;
}

.vitrine-fade-tag-featured::after {
    border-color: transparent transparent transparent #00bcd4 !important;
}

.vitrine-fade-tag-verified {
    background: #f0ad4e !important;
}

.vitrine-fade-tag-verified::after {
    border-color: transparent transparent transparent #f0ad4e !important;
}

.vitrine-fade-tag-category {
    position: absolute !important;
    bottom: 10px !important;
    right: 0 !important;
    padding: 4px 10px 4px 8px !important;
    background: #00a8ff !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
}

.vitrine-fade-tag-category::after {
    content: '' !important;
    position: absolute !important;
    right: -8px !important;
    top: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 11px 0 11px 8px !important;
    border-color: transparent transparent transparent #00a8ff !important;
}

/* CONTEUDO */
.vitrine-fade-content {
    padding: 15px !important;
}

.vitrine-fade-head {
    position: relative !important;
    padding-right: 40px !important;
    margin-bottom: 5px !important;
}

.vitrine-fade-head .doc-favoriteicon {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 30px !important;
    color: #fff !important;
    background: #e74c3c !important;
    text-align: center !important;
    border-radius: 50% !important;
}

.vitrine-fade-head .doc-favoriteicon.doc-notfavorite {
    background: #ddd !important;
}

.vitrine-fade-head .doc-favoriteicon:hover {
    background: #e74c3c !important;
}

.vitrine-fade-head .doc-favoriteicon i {
    color: #fff !important;
    font-size: 14px !important;
}

.vitrine-fade-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    color: #363636 !important;
}

.vitrine-fade-name a {
    color: #363636 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.vitrine-fade-name a:hover {
    color: #00bcd4 !important;
}

.vitrine-fade-tagline {
    font-size: 13px !important;
    color: #00bcd4 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

.vitrine-fade-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #eee !important;
    flex-wrap: wrap !important;
}

.vitrine-fade-likes {
    font-size: 13px !important;
    color: #999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.vitrine-fade-likes i {
    color: #00bcd4 !important;
}

.vitrine-fade-views {
    font-size: 13px !important;
    color: #999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.vitrine-fade-views i {
    color: #00bcd4 !important;
}

.vitrine-fade-divider {
    color: #ddd !important;
    font-size: 13px !important;
}

.vitrine-fade-stars {
    display: inline-flex !important;
    align-items: center !important;
}

.vitrine-fade-stars-outer {
    position: relative !important;
    display: inline-block !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

.vitrine-fade-stars-outer > i {
    font-size: 12px !important;
    color: #ddd !important;
}

.vitrine-fade-stars-inner {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    width: 0% !important;
}

.vitrine-fade-stars-inner i {
    font-size: 12px !important;
    color: #ffc107 !important;
}

.vitrine-fade-info {
    font-size: 13px !important;
    color: #363636 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    line-height: 1.4 !important;
}

.vitrine-fade-info:last-child {
    margin-bottom: 0 !important;
}

.vitrine-fade-info i {
    color: #00bcd4 !important;
    width: 14px !important;
    text-align: center !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.vitrine-fade-info address {
    margin: 0 !important;
    font-style: normal !important;
    color: #363636 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.vitrine-fade-info a {
    color: #00bcd4 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.vitrine-fade-info a:hover {
    text-decoration: underline !important;
}

.vitrine-fade-distance {
    color: #999 !important;
}

.vitrine-fade-distance span {
    font-style: italic !important;
}

/* ============================================
   SETAS - FORÇAR ESCONDER
   ============================================ */
.vitrine-fade-nav,
.vitrine-fade-prev,
.vitrine-fade-next,
button.vitrine-fade-nav,
button.vitrine-fade-prev,
button.vitrine-fade-next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* DOTS */
.vitrine-fade-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
}

.vitrine-fade-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #ddd !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    padding: 0 !important;
}

.vitrine-fade-dot:hover {
    background: #bbb !important;
}

.vitrine-fade-dot.is-active {
    background: #00a8ff !important;
    transform: scale(1.2) !important;
}

.vitrine-fade-empty {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #999 !important;
    font-size: 16px !important;
}

/* RESPONSIVO - TABLET */
@media (max-width: 991px) {
    .vitrine-fade-item {
        flex: 0 0 calc(33.333% - 13.33px) !important;
        max-width: calc(33.333% - 13.33px) !important;
        width: calc(33.333% - 13.33px) !important;
    }
    .vitrine-fade-container {
        padding: 0 20px !important;
    }
}

/* RESPONSIVO - MOBILE GRANDE */
@media (max-width: 767px) {
    .vitrine-fade-item {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
    }
    .vitrine-fade-wrapper {
        gap: 15px !important;
    }
    .vitrine-fade-container {
        padding: 0 15px !important;
    }
    .vitrine-fade-section {
        padding: 30px 0 !important;
    }
    
    .vitrine-fade-name {
        font-size: 13px !important;
    }
    
    .vitrine-fade-tagline {
        font-size: 12px !important;
    }
    
    .vitrine-fade-info {
        font-size: 12px !important;
    }
}

/* RESPONSIVO - MOBILE PEQUENO */
@media (max-width: 480px) {
    .vitrine-fade-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .vitrine-fade-container {
        padding: 0 15px !important;
    }
    .vitrine-fade-wrapper {
        gap: 10px !important;
    }
    .vitrine-fade-content {
        padding: 12px !important;
    }
}

.vitrine-fade-dot:focus {
    outline: 2px solid #00a8ff !important;
    outline-offset: 2px !important;
}
