/* =====================
   THEME TOKENS
   ===================== */
:root{
  --brand:#12095d;         /* primary */
  --brand-2:#6b63ff;       /* accent */
  --ink:#1f2330;           /* text */
  --muted:#687087;         /* secondary text */
  --line:#e8ebf3;          /* borders */
  --bg:#f6f8ff;            /* page bg */
  --card:#ffffff;          /* cards */
  --success:#0ea35a;
  --warn:#eab308;

  /* used by medical rails */
  --ok:#16a34a;
  --danger:#ef4444;
}

/* =====================
   GLOBAL
   ===================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  background:
    radial-gradient(1200px 600px at 100% -10%, #eef0ff 0%, transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, #eef7ff 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
.page{max-width:1120px;margin:32px auto;padding:0 16px}

/* =====================
   HERO (media + info)
   ===================== */
.hero{display:grid;gap:24px;grid-template-columns:1fr;align-items:start}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(280px,360px) 1fr;align-items:stretch}
}

/* Media box */
.media{
  position:relative;width:100%;max-width:520px;margin:0 auto;
  border-radius:24px;overflow:hidden;background:#e9ecf5;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  aspect-ratio:4/5;min-height:320px;
}
.media::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(18,9,93,.06)}
.media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media (min-width:900px){
  .media{max-width:none;min-height:0}
  .media img{position:absolute;inset:0}
}

/* Info side */
.info{display:flex;flex-direction:column;gap:14px}
.header-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:6px}
h1{margin:0;font-size:clamp(26px,3.4vw,36px);line-height:1.15}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.btn-back{
  display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:10px;text-decoration:none;
  background:#fff;border:1.5px solid #e2e8f0;color:#334155;font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,.06);transition:.2s ease;
}
.btn-back:hover{border-color:#6366f1;color:#6366f1}

/* Tags / Status */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag,.status{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;line-height:1;
  border:1px solid var(--line);background:#fbfbff;font-size:12px
}
.status[data-type="Adoption"]{border-color:var(--brand);color:var(--brand);background:#f1f2ff}
.status[data-type="Sponsorship"],.status[data-type="Both"]{border-color:var(--brand-2);color:var(--brand-2);background:#f2f3ff}

/* Buttons */
.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.btn{
  border:1px solid transparent;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer;
  transition:box-shadow .2s ease,transform .05s ease,background .2s ease,color .2s ease
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{box-shadow:0 10px 22px rgba(18,9,93,.22)}
.btn.alt{background:#eef0ff;color:var(--brand)}
.btn.alt:hover{background:#e3e6ff}
.btn:focus{outline:3px solid #cfd4ff;outline-offset:2px}

/* Strip underlines on button links */
a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:focus, a.btn:active,
.quick-actions a.btn, .btn, .btn * { text-decoration:none !important; -webkit-text-decoration:none !important; }

/* =====================
   CARDS / FACTS
   ===================== */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:20px 18px;box-shadow:0 10px 30px rgba(0,0,0,.05);margin-top:22px;
}
.section h2{font-size:18px;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.section h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.fact{
  border:1px dashed var(--line);border-radius:14px;padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;min-height:64px;background:#fff
}
.fact .label{font-size:11px;color:var(--muted)}
.fact .val{font-weight:600}

/* Tables in sections */
.section table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.section th,.section td{padding:10px 12px;text-align:left}
.section thead th{background:#f6f7ff;font-size:12px;color:var(--muted)}
.section tbody tr+tr td{border-top:1px solid var(--line)}
.section tbody tr:hover td{background:#fbfbff}

/* =====================
   TEMPERAMENT UI
   ===================== */
.metric{display:flex;flex-direction:column;gap:8px}
.pill{
  display:flex;align-items:center;gap:8px;font-weight:700;color:#0f172a;font-size:1rem;
  border:1px solid var(--line);padding:8px 10px;border-radius:12px;background:#fff;margin-bottom:6px;
}
.pill .trait-note{
  display:inline-block;padding:3px 10px;border-radius:9999px;font-size:.95rem;font-weight:700;letter-spacing:.1px;
  background:#f1f5f9;color:#334155;border:1px solid #e2e8f0;
}
.bar{height:6px;background:#f3f4f6;border-radius:9999px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:#94a3b8;opacity:.55;border-radius:inherit;transition:width .7s ease}

/* =====================
   UTILITIES
   ===================== */
.hide{display:none !important}
.mt-0{margin-top:0}

/* Back To Top */
#backToTop{
  position:fixed;bottom:24px;right:24px;z-index:9999;width:48px;height:48px;border:none;border-radius:50%;
  background:rgba(18,9,93,.75);color:#fff;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transform:translateY(15px);
  transition:opacity .3s, transform .3s, visibility .3s, background .3s;
  pointer-events:none;
}
#backToTop.show{opacity:.9;visibility:visible;transform:translateY(0);pointer-events:auto}
#backToTop:hover{background:rgba(18,9,93,.95);transform:scale(1.1)}

/* Optional: donate payment pills spacing */
.don-payment-pills{
  display:grid !important;grid-auto-flow:column !important;grid-auto-columns:max-content !important;
  column-gap:18px !important;row-gap:0 !important;align-items:center !important;
}

/* =====================
   MEDICAL — Accordions & Tables
   ===================== */

/* Summary cards row above accordions */
.med-summary{
  list-style:none;padding:0;margin:0 0 12px 0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.med-summary li{
  display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;
}
.med-summary i{color:var(--brand);margin-top:2px}

/* Accordion container */
details.med-acc{
  border:1px solid var(--line);border-radius:14px;margin:12px 0;background:#fff;overflow:hidden;
  box-shadow:0 8px 22px rgba(24,32,60,.05);transition:box-shadow .2s ease, border-color .2s ease;
}
details.med-acc:hover{border-color:#dfe3ef;box-shadow:0 10px 26px rgba(24,32,60,.08)}
details.med-acc>summary{
  list-style:none;cursor:pointer;padding:14px 16px;font-weight:800;color:#1f2330;
  display:flex;align-items:center;gap:10px;background:#f8f9ff;border-bottom:1px solid var(--line);user-select:none;
  transition:background .2s ease,color .2s ease;
}
details.med-acc>summary::-webkit-details-marker{display:none}
details.med-acc>summary::before{
  content:"";inline-size:10px;block-size:10px;border-right:2px solid #475569;border-bottom:2px solid #475569;
  transform:rotate(-45deg);margin-right:2px;transition:transform .25s ease, border-color .2s ease;
}
details.med-acc[open]>summary{background:#f2f4ff}
details.med-acc[open]>summary::before{transform:rotate(45deg);border-color:#334155}

/* Inner padding block */
.acc-body{padding:12px 14px}

/* Table wrapper for rounded corners inside details */
.table-wrap{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
}

/* Table */
.med-table{
  width:100%;border-collapse:separate;border-spacing:0;border:none;border-radius:0;
}
.med-table thead th{
  position:sticky;top:0;z-index:1;background:#f6f7ff;color:#687087;font-size:12px;text-align:left;
  letter-spacing:.02em;padding:12px 14px;border-bottom:1px solid var(--line);
}
.med-table tbody td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.med-table tbody tr:hover td{background:#fafbff}
.med-table td:last-child{text-align:left}

/* Row state tinting + left rails */
.med-table tbody tr.overdue td{background:#fff6f6}
.med-table tbody tr.soon td{   background:#fffdf2}
.med-table tbody tr.ok td{     background:#f7fff9}
.med-table tbody tr.overdue td:first-child{box-shadow:inset 4px 0 0 0 var(--danger)}
.med-table tbody tr.soon td:first-child{   box-shadow:inset 4px 0 0 0 var(--warn)}
.med-table tbody tr.ok td:first-child{     box-shadow:inset 4px 0 0 0 var(--ok)}

/* Chips */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;
  border:1px solid var(--line);background:#fff;color:#334155;
}
.chip.tag-ok{border-color:#c7f0d4;background:#ecfdf5;color:#065f46}
.chip.tag-warn{border-color:#fde68a;background:#fffbeb;color:#92400e}
.chip.tag-danger{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.chip.tag-muted{opacity:.7}

/* Empty notes under accordions */
.empty-note{color:#8a93a8;font-size:.95em;margin:10px 2px 4px}

/* Responsive: table -> cards */
@media (max-width:640px){
  .med-table, .med-table thead, .med-table tbody, .med-table th, .med-table td, .med-table tr{display:block}
  .med-table thead{display:none}
  .med-table tbody tr{border:1px solid var(--line);border-radius:12px;margin:10px 0;overflow:hidden}
  .med-table tbody td{border:none;border-top:1px solid var(--line);padding:10px 12px;position:relative}
  .med-table tbody td:first-child{border-top:none;padding-top:12px}
  .med-table tbody td::before{
    content:attr(data-th);display:block;font-size:11px;color:#8a93a8;margin-bottom:4px;letter-spacing:.02em;
  }
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width:640px){
  .page{padding:0 12px}
  .tags{gap:8px}
  .btn{padding:11px 14px;border-radius:10px}
  .facts{grid-template-columns:1fr}
}
@media (max-width:420px){
  .header-row{flex-direction:column;align-items:flex-start;gap:8px}
}

/* =====================
   PRINT
   ===================== */
@media print{
  body{background:#fff}
  .btn,.quick-actions{display:none !important}
  .card{box-shadow:none}
  .status,.tag{border-color:#ddd;color:#000}
}

/* =====================
   TABS HEIGHT FIX
   ===================== */

/* Make the tabs card a bit tighter */
.tabs-container.card{
  padding-bottom: 14px;
}

/* Let each tab auto-size instead of using a big min-height */
.tabs-container .tab-content{
  min-height: auto !important;  /* overrides inline min-height */
  padding-top: 16px;
  padding-bottom: 8px;
}

/* =====================
   TABS – SECTION SPACING / LESS CONGESTED
   ===================== */

/* So sections inside tabs breathe more */
.tabs-container .section{
  padding-top: 10px;
  padding-bottom: 4px;
}

/* Add separation line + extra space between stacked sections */
.tabs-container .section + .section{
  border-top: 1px dashed rgba(232,235,243,0.9); /* soft divider */
  margin-top: 16px;
  padding-top: 18px;
}

/* Make tab section headings slightly smaller + lighter divider */
.tabs-container .section h2{
  font-size: 16px;          /* was 18px globally */
  margin-bottom: 10px;
}

.tabs-container .section h2::after{
  opacity: 0.45;            /* lighter horizontal line */
}

/* Inside tabs, make facts a bit tighter so it feels less heavy */
.tabs-container .facts{
  gap: 10px;
}

.tabs-container .fact{
  min-height: 56px;         /* slightly shorter cards inside tabs */
  padding: 10px 12px;
}

/* ===== REAL SPACE BELOW THE TABS CONTAINER (no collapse) ===== */
.tabs-container {
    margin-bottom: 60px !important;
    display: flow-root !important; /* prevents margin collapse */
}

/* Optional: Add breathing space above each h2 inside tabs */
.tab-content .section h2 {
    margin-top: 6px;
    margin-bottom: 18px;
}