/* ==========================================================
   ONG ADOÇÕES — CSS (versão ajustada ao layout do print + formulário em 3 seções)
   ========================================================== */

/* ===== Variáveis de tema ===== */
:root{
  --ong-brand:#A516E6;
  --ong-brand-hover:#8B12BF;
  --ong-brand-grad2:#C548FF;
  --ong-text:#111827;
  --ong-muted:#6B7280;
  --ong-border:#E5E7EB;
  --ong-bg:#FFFFFF;
}

/* ===== Utilitários ===== */
.ong-hidden{ display:none !important; }
.ong-divider{ height:1px; background:var(--ong-border); margin:.75rem 0; }

/* ===================== CATÁLOGO (.ong-wrap) ===================== */
.ong-wrap{ margin:1rem 0 2rem; }
.ong-wrap .ong-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.ong-wrap .ong-tab{
  border:1px solid var(--ong-border); background:#fff; color:var(--ong-text);
  padding:.5rem .9rem; border-radius:9999px; cursor:pointer; font-weight:600; transition:all .18s ease;
}
.ong-wrap .ong-tab:hover{ transform:translateY(-1px); }
.ong-wrap .ong-tab.is-active{ background: var(--ong-brand); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.ong-wrap .ong-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
@media (max-width:900px){ .ong-wrap .ong-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){ .ong-wrap .ong-grid{ grid-template-columns:1fr; } }
.ong-wrap .ong-card{ background:#fff; border:1px solid var(--ong-border); border-radius:16px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.ong-wrap .ong-card-media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.ong-wrap .ong-thumb{ width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1); transition:transform .35s ease; display:block; }
.ong-wrap .ong-card-media:hover .ong-thumb{ transform:scale(1.04); }
.ong-wrap .ong-pill-status{ position:absolute; left:.75rem; top:.75rem; padding:.35rem .6rem; font-size:.75rem; border-radius:999px; color:#fff; font-weight:700; }
.ong-wrap .ong-pill-status.available{ background:#10B981; }
.ong-wrap .ong-pill-status.adopted{  background:#EF4444; }
.ong-wrap .ong-card-body{ padding:.9rem; display:flex; flex-direction:column; gap:.5rem; }
.ong-wrap .ong-title{ margin:0; font-size:1.05rem; font-weight:800; color:var(--ong-text); }
.ong-wrap .ong-subline{ display:flex; align-items:center; gap:.5rem; }
.ong-wrap .ong-subtext{ color:var(--ong-muted); font-size:.9rem; }
.ong-wrap .ong-gender{ margin-left:auto; opacity:.9; }
.ong-wrap .ong-desc{ color:#374151; margin:.25rem 0 0; font-size:.95rem; line-height:1.45; }
.ong-wrap .ong-chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.25rem; }
.ong-wrap .ong-chip{ padding:.2rem .55rem; border-radius:999px; background:#F3F4F6; color:#374151; font-size:.8rem; border:1px solid var(--ong-border); }
.ong-wrap .ong-chip.off{ opacity:.7; }
.ong-wrap .ong-card .ong-button.more{ display:inline-flex; align-items:center; justify-content:center; margin:.25rem auto 0; }

/* ===================== BOTÕES reutilizáveis ===================== */
.ong-wrap .ong-button, .ong-single .ong-button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  text-decoration:none; border-radius:9999px; font-weight:800; padding:.75rem 1.25rem; border:0; cursor:pointer;
  transition:background-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.ong-wrap .ong-button .ico, .ong-single .ong-button .ico{ line-height:1; }
.ong-wrap .ong-button.primary, .ong-single .ong-button.primary{
  background:linear-gradient(135deg,var(--ong-brand) 0%,var(--ong-brand-grad2) 100%); color:#fff; box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.ong-wrap .ong-button.primary:hover, .ong-single .ong-button.primary:hover{ background:var(--ong-brand-hover); transform:translateY(-1px); box-shadow:0 12px 32px rgba(0,0,0,.16); }
.ong-wrap .ong-button.primary:active, .ong-single .ong-button.primary:active{ transform:translateY(0); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.ong-wrap .ong-button:not(.primary), .ong-single .ong-button:not(.primary){ background:transparent; color:var(--ong-brand); border:2px solid var(--ong-brand); }
.ong-wrap .ong-button:not(.primary):hover, .ong-single .ong-button:not(.primary):hover{ background:var(--ong-brand); color:#fff; transform:translateY(-1px); }
.ong-wrap .ong-button:not(.primary):active, .ong-single .ong-button:not(.primary):active{ transform:translateY(0); }

/* ===================== SINGLE (Página do animal) ===================== */
.ong-single .ong-single-hero{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; margin:1.25rem 0 1.5rem; }
@media (max-width:900px){ .ong-single .ong-single-hero{ grid-template-columns:1fr; } }
.ong-single .ong-image-card{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--ong-border); }
.ong-single .ong-single-thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center; transform:scale(1); transition:transform .35s ease; display:block; }
.ong-single .ong-image-card:hover .ong-single-thumb{ transform:scale(1.04); }

/* Pílula de status sobre a foto */
.ong-single .ong-pill-status{
  position:absolute; top:12px; left:12px; z-index:3;
  padding:.35rem .6rem; border-radius:999px; color:#fff; font-weight:700; font-size:.75rem;
}
.ong-single .ong-pill-status.available{ background:#10B981; }
.ong-single .ong-pill-status.adopted{  background:#EF4444; }

/* Botão ADOTAR abaixo da foto, centralizado */
.ong-single .ong-col-image .ong-button{ margin-top:.75rem; margin-left:auto; margin-right:auto; display:flex; }

/* Cartão roxo e atributos em caixinhas (padrão do print) */
.ong-single .ong-info-card{
  background: linear-gradient(135deg, var(--ong-brand) 0%, var(--ong-brand-grad2) 100%);
  color:#fff; border:0; border-radius:16px; padding:1rem 1.1rem; box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.ong-single .ong-info-card .ong-name{ color:#fff; margin:0 0 .25rem 0; }
.ong-single .ong-sub{ color:rgba(255,255,255,.9); margin-bottom:.75rem; }

.ong-single .ong-attrs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:.5rem; margin-bottom:.75rem; }
@media (max-width:720px){ .ong-single .ong-attrs{ grid-template-columns:1fr; } }
.ong-single .ong-attr{
  display:flex; flex-direction:column; padding:14px 16px; border-radius:12px;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.ong-single .ong-attr .label{ color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.025em; font-size:.9rem; opacity:.95; padding:0; }
.ong-single .ong-attr .label::after{ content:none; }
.ong-single .ong-attr .value{ color:#fff; font-weight:700; font-size:1.05rem; margin-top:.15rem; }

.ong-single .ong-banner{ background: rgba(255,255,255,.14); color:#fff; border:1px dashed rgba(255,255,255,.35); padding:.6rem .8rem; border-radius:10px; font-weight:600; }

.ong-single .ong-about-card{ background:#fff; border:1px solid var(--ong-border); border-radius:16px; padding:1rem 1.1rem; box-shadow:0 10px 28px rgba(0,0,0,.06); margin-top:1rem; }
.ong-single .ong-about{ color:#111827; line-height:1.6; }
.ong-single .ong-cta-row{ margin-top:1rem; display:flex; gap:.75rem; flex-wrap:wrap; }
@media (max-width:720px){ .ong-single .ong-cta-row{ justify-content:center; } }

/* ===================== FORMULÁRIO (3 seções) ===================== */
.ong-single #form-adocao{ scroll-margin-top:96px; }
.ong-single .ong-form{ margin-top:1rem; background:#fff; border:1px solid var(--ong-border); border-radius:16px; padding:1rem 1.1rem; box-shadow:0 10px 28px rgba(0,0,0,.06); }
.ong-single .ong-form h2{ margin:.25rem 0 1rem; }
.ong-single .ong-form-note{ color:var(--ong-muted); margin:.25rem 0 1rem; }
.ong-single .ong-alert{ border-left:4px solid #F59E0B; background:#FEF3C7; color:#92400E; padding:.6rem .8rem; border-radius:8px; margin-bottom:.75rem; }

.ong-single .ong-form-section{ margin-top:.75rem; padding-top:.5rem; border-top:1px solid var(--ong-border); }
.ong-single .ong-form-section h3{ margin:.25rem 0 .75rem; color:#111827; }
.ong-single .ong-form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
@media (max-width:720px){ .ong-single .ong-form-grid{ grid-template-columns:1fr; } }

.ong-single .ong-form-row{ display:flex; flex-direction:column; gap:.35rem; }
.ong-single .ong-form-row label{ font-weight:700; color:#111827; }
.ong-single .ong-form-row input[type="text"],
.ong-single .ong-form-row input[type="email"],
.ong-single .ong-form-row input[type="tel"],
.ong-single .ong-form-row input[type="number"],
.ong-single .ong-form-row select,
.ong-single .ong-form-row textarea{
  border:1px solid var(--ong-border); border-radius:10px; padding:.6rem .75rem; font-size:1rem; color:#111827; background:#fff;
}
.ong-single .ong-form-row input:focus,
.ong-single .ong-form-row textarea:focus,
.ong-single .ong-form-row select:focus{
  outline:none; border-color:var(--ong-brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ong-brand) 20%, transparent);
}

.ong-single .ong-radio-group{ display:flex; gap:1rem; align-items:center; }
.ong-single .ong-form-row.check label{ font-weight:600; color:#374151; }

.ong-single .ong-form .ong-form-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }

/* Responsivo extra */
@media (max-width:720px){
  .ong-wrap .ong-card .ong-button.more{ width:max-content; }
  .ong-single .ong-col-image .ong-button{ margin-left:auto; margin-right:auto; }
}