/* ====================================================================
   PORTAL COBEA: COMPONENTES DE UI — ARQUIVO CENTRAL DA ÁREA PÚBLICA
   Contém: Botões, Cards, Animações, Helpers e Componentes Visuais.
   Depende de: cobea-tokens.css (variáveis e reset base)
   ==================================================================== */

/* ====================================================================
   HELPERS VISUAIS GLOBAIS
   ==================================================================== */

.x-small { font-size: 0.65rem; }
.text-white-70 { color: rgba(255, 255, 255, 0.7); }
.bg-white-5 { background-color: rgba(255, 255, 255, 0.05); }

/* ====================================================================
   SISTEMA DE TIPOGRAFIA ELITE
   ==================================================================== */

.type-hero-h1 {
    font-size: var(--type-hero-h1) !important;
    font-weight: var(--weight-black) !important;
    letter-spacing: var(--tracking-tighter-plus) !important;
    line-height: 0.95 !important;
}

.type-hero-p {
    font-size: var(--type-hero-p) !important;
    font-weight: var(--weight-medium) !important;
    line-height: 1.6 !important;
}

.type-section-h2 {
    font-size: var(--type-section-h2) !important;
    font-weight: var(--weight-black) !important;
    letter-spacing: var(--tracking-tighter) !important;
    line-height: 1.1 !important;
}

.type-section-p {
    font-size: var(--type-section-p) !important;
    font-weight: var(--weight-medium) !important;
    line-height: 1.6 !important;
}

.type-title-md {
    font-size: var(--type-title-md) !important;
    font-weight: var(--weight-black) !important;
    letter-spacing: var(--tracking-tighter) !important;
}

.type-title-sm {
    font-size: var(--type-title-sm) !important;
    font-weight: var(--weight-black) !important;
    letter-spacing: var(--tracking-tighter) !important;
}

.type-card-h3 {
    font-size: var(--type-card-h3) !important;
    font-weight: var(--weight-black) !important;
    letter-spacing: var(--tracking-tighter) !important;
}

.type-elite-label {
    font-size: var(--type-hero-label) !important;
    font-weight: var(--weight-black) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-widest-plus) !important;
}

.tracking-widest-plus {
    letter-spacing: var(--tracking-widest-plus) !important;
}

.type-table-head {
    font-size: 0.725rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--text-500) !important;
}

.type-micro-label {
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25em !important;
}

/* Standard Form Legend (Section Title) */
.type-form-legend,
fieldset legend,
.section-legend {
    display: block !important;
    width: 100% !important;
    padding-bottom: var(--form-section-padding-bottom) !important;
    margin-bottom: var(--form-section-margin-bottom) !important;
    font-family: var(--form-section-font-family) !important;
    font-size: var(--form-section-font-size) !important;
    font-weight: var(--form-section-font-weight) !important;
    color: var(--form-section-color) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--form-section-letter-spacing) !important;
    border-bottom: 1px solid var(--form-section-border-color) !important;
}

.type-card-header-title {
    font-size: var(--type-title-md) !important;
    font-weight: var(--weight-black) !important;
    color: var(--color-secondary) !important;
    letter-spacing: var(--tracking-tighter) !important;
    line-height: 1.2 !important;
}

.type-card-header-subtitle {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--text-500) !important;
    letter-spacing: 0.01em !important;
    display: block;
}



/* Focus Visibility: WCAG 2.1 Compliance */
:focus-visible {
    outline: 2px solid var(--color-secondary) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}

body .btn:focus, 
body .form-control:focus, 
body .custom-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.15) !important;
}

/* ====================================================================
   BOTÕES COBEA
   ==================================================================== */

.btn-cobea {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    border-radius: var(--radius-button);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    font-family: var(--font-family-title);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    text-decoration: none;
    min-height: 3.5rem;
}

.btn-cobea-primary { background: var(--color-primary); color: var(--color-secondary); }
.btn-cobea-primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(245, 158, 11, 0.25); color: var(--color-secondary); }

.btn-cobea:disabled,
.btn-cobea.disabled,
.btn-cobea[disabled] {
    background: var(--form-disabled-bg) !important;
    border-color: var(--form-disabled-border) !important;
    box-shadow: none !important;
    color: var(--form-disabled-color) !important;
    cursor: not-allowed !important;
    opacity: 0.72;
    transform: none !important;
}

.btn-cobea:disabled:hover,
.btn-cobea.disabled:hover,
.btn-cobea[disabled]:hover {
    background: var(--form-disabled-bg) !important;
    box-shadow: none !important;
    color: var(--form-disabled-color) !important;
    transform: none !important;
}

/* Botão institucional de envio/salvar: azul escuro com hover mais vibrante */
.btn-cobea-secondary {
    background: var(--color-secondary);   /* #1E3A8A */
    color: var(--text-on-dark);
    border: 2px solid var(--color-secondary);
}
.btn-cobea-secondary:hover {
    background: var(--color-secondary-hover); /* #1E40AF */
    border-color: var(--color-secondary-hover);
    color: var(--text-on-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(30, 58, 138, 0.25);
}

.btn-cobea-danger { background: var(--color-danger); color: var(--text-on-dark); }
.btn-cobea-danger:hover { background: var(--color-danger-hover); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(225, 29, 72, 0.2); color: var(--text-on-dark); }
.btn-cobea-danger:disabled,
.btn-cobea-danger.disabled,
.btn-cobea-danger[disabled],
.btn-cobea-danger:disabled:hover,
.btn-cobea-danger.disabled:hover,
.btn-cobea-danger[disabled]:hover {
    background: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: var(--text-on-dark) !important;
    opacity: 0.62;
}
.btn-cobea-no-shadow:hover { box-shadow: none; }

.btn-cobea-outline-white {
    background: var(--color-white-5);
    border: 2px solid var(--color-white-10);
    color: var(--text-on-dark);
}
.btn-cobea-outline-white:hover {
    background: var(--color-white-10);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--text-on-dark);
    transform: translateY(-2px);
}

/* ====================================================================
   CARD PADRÃO DO PORTAL
   ==================================================================== */

.card-cobea {
    border-radius: 2.5rem !important;
    border: 1px solid var(--color-border) !important;
    background: white !important;
    transition: all 0.4s ease;
}
.card-cobea:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(30, 58, 138, 0.05);
    border-color: var(--color-primary) !important;
}

/* ====================================================================
   HELPERS DE TRANSIÇÃO E HOVER
   ==================================================================== */

.transition-all { transition: all 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease; }

.hover-scale:hover { transform: scale(1.05); }
.hover-primary:hover { color: var(--color-primary) !important; }
.hover-opacity-100:hover { opacity: 1 !important; }

/* Efeito Testemunhos / Imagens */
.img-grayscale { filter: grayscale(100%); transform: scale(1.1); transition: all 0.7s ease; }
.card-group:hover .img-grayscale { filter: grayscale(0%); transform: scale(1); }

/* ====================================================================
   ANIMAÇÕES
   ==================================================================== */

@keyframes waving-paw {
  0%, 100% { transform: rotate(45deg); }
  50% { transform: rotate(60deg); }
}
.animate-wave-slow { animation: waving-paw 4s ease-in-out infinite; }

@keyframes bounce-marker {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
  25%       { transform: translateY(-0.5rem) scale(1.01) rotate(2deg); }
  50%       { transform: translateY(0) scale(1) rotate(0deg); }
  75%       { transform: translateY(-0.25rem) scale(1) rotate(-1deg); }
}
.animate-bounce-marker {
    animation: bounce-marker 3s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}


/* Paginação Unificada */
.pagination-nav-btn,
.pagination-page-btn {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 0.75rem;
    width: 40px;
    height: 40px;
}

.pagination-nav-btn:hover,
.pagination-page-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination-page-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-on-dark);
}

.pagination-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-chevron {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

/* Accordion & FAQ (Details) */
.faq-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    font-weight: 900;
    color: var(--color-secondary);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary i {
    font-size: 0.75rem;
    color: var(--text-label);
    transition: transform 0.3s ease;
}

.faq-item[open] summary i {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.faq-body {
    border-top: 1px solid var(--color-border);
    padding: 1rem 1.5rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-main);
}

/* Cards Informativos (Quem Somos, Contato, etc) */
body .about-card, body .action-item, body .legal-card, body .cta-about {
    border-radius: 1rem;
}

.about-card-icon, .action-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--color-secondary);
    background: var(--status-info-bg);
}

/* Tabelas (Rede de Proteção) */
body .table-head-text {
    color: var(--color-secondary);
    font-family: var(--font-family-title);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.table-data-text {
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Animations */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Botões de Submit Premium */
body .btn-submit-tutor, body .btn-cobea-submit {
    min-width: 180px;
    background-color: var(--color-secondary);       /* #1E3A8A */
    color: var(--text-on-dark);
    border: 2px solid var(--color-secondary);
    font-family: var(--font-family-title);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-button);
}

.btn-submit-tutor:hover, .btn-cobea-submit:hover {
    background-color: var(--color-secondary-hover); /* #1E40AF */
    border-color: var(--color-secondary-hover);
    color: var(--text-on-dark);
    box-shadow: 0 10px 22px rgba(30, 58, 138, 0.25);
    transform: translateY(-2px);
}

/* Guia de Adoção Accordion Decor */
.adoption-guide-icon { color: var(--text-muted); transition: transform 0.3s, color 0.3s; }
body .btn-link:not(.collapsed) .adoption-guide-icon { transform: rotate(45deg); color: var(--color-primary); }
body .btn-link:not(.collapsed) { background-color: rgba(248, 250, 252, 0.8); }

/* Filtros de Adoção: Feedback Visual Premium */
.adoption-filter {
    color: var(--text-500) !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 0.75rem !important;
}

.adoption-filter[data-active="true"] {
    background-color: var(--color-primary) !important;
    color: var(--color-secondary) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
    transform: scale(1.05);
}

.adoption-filter:hover:not([data-active="true"]) {
    background-color: rgba(0,0,0,0.03) !important;
    color: var(--color-secondary) !important;
}

/* ====================================================================
   CARD DE ANIMAL (Desaparecidos + Adoção) — extrai inline styles
   ==================================================================== */

.card-img-frame { height: 250px; overflow: hidden; }

.card-pet-name { font-size: 1.65rem !important; }

.card-badge-corner {
    top: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    border-bottom-left-radius: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.55rem;
    font-weight: 800;
}
.card-badge-lost  { background-color: #f59e0b; }
.card-badge-adopt { background-color: #10b981; }

.card-detail-divider { border-color: rgba(0,0,0,0.04) !important; }

.card-detail-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.15em !important;
    color: #64748b !important;
}

.card-detail-value {
    font-size: 0.9rem !important;
    color: #1e293b !important;
}

.card-detail-text {
    font-size: 0.9rem;
    line-height: 1.6;
    height: 6rem;
    overflow: hidden;
    font-weight: 400;
    color: #475569;
}

/* ====================================================================
   PAGINAÇÃO — layout helpers
   ==================================================================== */

.pagination-wrapper { gap: 0.75rem; margin-top: 5rem; }
.pagination-numbers  { gap: 0.5rem; }

/* ====================================================================
   GUIA DE ADOÇÃO — accordion cards e checklist
   ==================================================================== */

.adoption-guide-card { border-radius: 2rem !important; }

.checklist-border-item {
    border-left-width: 2px !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}
.checklist-item-label { letter-spacing: 0.08rem; }

.crime-warning {
    background-color: rgba(225, 29, 72, 0.05);
    border-radius: 1rem !important;
}

.bullet-dot { width: 6px; height: 6px; }