/* Importa fonte Montserrat do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

/* Variáveis de Cores do Design */
:root {
    --cor-roxo: #44345A;
    --cor-laranja: #FA811D;
    --cor-verde: #2D5D5C;
    --cor-bege: #ffe6ba;
    --cor-bege-claro: #fff9ef;
    --cor-rosa: #CA567C;

    --fonte-titulo: 'Vidaloka', cursive;
}

.titulo-principal {
    font-family: var(--fonte-titulo) !important;
    font-weight: 600 !important;
}

body {
    font-family: 'Montserrat', sans-serif !important;
}

/* Cores e Imagens de Fundo */

.bg-roxo {
    background-color: var(--cor-roxo) !important;
}

.bg-laranja {
    background-color: var(--cor-laranja) !important;
}

.bg-verde {
    background-color: var(--cor-verde) !important;
}

.bg-bege {
    background-color: var(--cor-bege) !important;
}

.bg-bege-claro {
    background-color: var(--cor-bege-claro) !important;
}

.bg-rosa {
    background-color: var(--cor-rosa) !important;
}

.bg-degrade-home {
    background: linear-gradient(180deg,
            var(--cor-bege-claro) 0%,
            var(--cor-bege) 70%,
            color-mix(in srgb, var(--cor-rosa) 50%, transparent) 100%);
}

.bg-img-none {
    background-image: none !important;
}

/* Fundo Animais que caiba na altura do conteiner */
.bg-img-animais {
    background-image: url('/static/img/animais.webp') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

/* Cores de Textos */

.text-dark {
    font-family: var(--fonte-titulo) !important;
    color: #000 !important;
}
.text-branco {
    color: #fff !important;
}

.text-roxo {
    font-family: var(--fonte-titulo) !important;
    color: var(--cor-roxo) !important;
}

.text-laranja {
    font-family: var(--fonte-titulo) !important;
    color: var(--cor-laranja) !important;
}

.text-verde {
    font-family: var(--fonte-titulo) !important;
    color: var(--cor-verde) !important;
}

.text-bege {
    font-family: var(--fonte-titulo) !important;
    color: var(--cor-bege) !important;
}

.text-rosa {
    font-family: var(--fonte-titulo) !important;
    color: var(--cor-rosa) !important;
}

/* Bordas */

.border-laranja {
    border-color: var(--cor-laranja) !important;
}

.border-roxo {
    border-color: var(--cor-roxo) !important;
}

.border-bege-claro {
    border-color: var(--cor-bege-claro) !important;
}

/* Botões */

.btn-outline-laranja {
    border-color: var(--cor-laranja) !important;
    color: var(--cor-laranja) !important;
}

.btn-outline-laranja:hover {
    background-color: var(--cor-laranja) !important;
    color: #fff !important;
}

.btn-roxo {
    background-color: var(--cor-roxo);
    border-color: var(--cor-roxo);
}

.btn-roxo:hover {
    background-color: #362947;
    border-color: #362947;
}

.btn-outline-roxo {
    border-color: var(--cor-roxo);
    color: var(--cor-roxo);
}

.btn-outline-roxo:hover {
    background-color: var(--cor-roxo);
    border-color: var(--cor-roxo);
    color: #fff;
}

/* Toast Customization */
.toast-container {
    z-index: 9999;
}

.toast {
    min-width: 250px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.toast-offset {
    margin-bottom: 60px;
}

/* Cores personalizadas para toasts */
.toast.text-bg-success {
    background-color: var(--cor-verde) !important;
}

.toast.text-bg-warning {
    background-color: var(--cor-laranja) !important;
}

.toast.text-bg-danger {
    background-color: var(--cor-rosa) !important;
}

/* Estilos de Cards de Categorias */

#categoriasTrack .card {
    transition: transform 0.3s ease;
}

#categoriasTrack .card:hover {
    transform: scale(1.05);
}

#categoriasTrack .card:hover .bg-bege {
    background-color: var(--cor-roxo) !important;
    color: white !important;
}

/* Efeitos de Hover em Cards */

.card-hover-effect,
.artigos-card .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

@media (max-width: 768px) {
    .artigos-card h2 {
        font-size: 2rem !important;
    }
}

/* Responsividade para sidebars sticky */
@media (max-width: 991px) {
    .sticky-top {
        position: relative !important;
        top: auto !important;
    }
}

/* Avatares em Cards */
.card .rounded-circle {
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease;
}

.card:hover .rounded-circle {
    transform: scale(1.05);
}

/* Classes Utilitárias de Avatar */

.avatar-sm {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-md {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-lg {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-xl {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
}

/* Classes Utilitárias de Imagem */

.img-cover {
    object-fit: cover;
    width: 100%;
}

.img-card-top {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.img-post-featured {
    max-height: 500px;
    object-fit: cover;
    width: 100%;
}

.img-post-detail {
    max-height: 600px;
    object-fit: cover;
    width: 100%;
}

.img-square {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 768px) {
    .img-post-featured,
    .img-post-detail {
        max-height: 300px;
    }
}

/* Classes de Container */

.content-container {
    max-width: 600px;
}

@media (max-width: 768px) {
    .content-container {
        max-width: 100%;
    }
}

/* Sidebar Sticky */

.sidebar-sticky {
    position: sticky;
    top: 20px;
}

@media (max-width: 991px) {
    .sidebar-sticky {
        position: static;
        top: auto;
    }
}

/* Ícones Placeholder */

.icon-placeholder-lg {
    font-size: 4rem;
    color: var(--cor-roxo);
    opacity: 0.3;
}

.icon-placeholder-md {
    font-size: 3rem;
    color: var(--cor-roxo);
    opacity: 0.3;
}

.icon-placeholder-sm {
    font-size: 2rem;
    color: var(--cor-roxo);
    opacity: 0.3;
}

.icon-lg {
    font-size: 4rem;
}

.icon-md {
    font-size: 3rem;
}

.icon-sm {
    font-size: 2rem;
}

/* Classes de Conteúdo */

.article-content {
    text-align: justify;
    white-space: pre-wrap;
    line-height: 1.8;
}

.post-content {
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Efeito Hover Padronizado para Cards */

.card-hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Componente de Paginação VetConecta */

.pagination-vetconecta {
    --bs-pagination-margin: 0;
}

.pagination-vetconecta .bg-roxo {
    background-color: var(--cor-roxo) !important;
    color: white !important;
}

.pagination-vetconecta .border-roxo {
    border-color: var(--cor-roxo) !important;
}

.pagination-vetconecta .page-link {
    color: var(--cor-roxo);
    border: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.pagination-vetconecta .page-link:hover {
    background-color: var(--cor-roxo);
    border-color: var(--cor-roxo);
    color: white;
}

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

.pagination-vetconecta .page-item.active .page-link {
    background-color: var(--cor-roxo);
    border-color: var(--cor-roxo);
    color: white;
    font-weight: 600;
    z-index: 3;
}

/* Estilos Específicos de Componentes */

.petgram-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.petgram-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

.border-primary-custom {
    border-color: var(--cor-roxo) !important;
    border-width: 2px !important;
}

/* Utilitários de Título */

.title-article {
    min-height: 2.8rem;
    line-height: 1.4rem;
    font-size: 1rem;
}

.badge-transparent {
    background-color: rgba(255, 255, 255, 0.34);
}

.footer-text {
    font-size: 1rem;
}