/* ============================================================
   Dog Age by Breed — Plugin Stylesheet
   Scoped under .dabb-widget to avoid theme/plugin conflicts.
   Exclusive property of dogcarecalculators.com — see plugin
   header and footer notice in the template for the copyright
   and usage restriction that ships with this tool.
   ============================================================ */
.dabb-widget{
  --dabb-bg:#F6F7F2; --dabb-card:#FFFFFF;
  --dabb-primary:#2D5D4F; --dabb-primary-dark:#1E4238; --dabb-primary-light:#E7EFEA;
  --dabb-accent:#E8A33D;
  --dabb-ink:#1F2A24; --dabb-ink-soft:#52604F; --dabb-line:#DDE3DA;
  --dabb-error:#B3261E; --dabb-error-bg:#FBEAE9;
  --dabb-font:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --dabb-mono:"SF Mono","Cascadia Code","Roboto Mono",Consolas,monospace;
  --dabb-r-lg:20px; --dabb-r-md:14px; --dabb-r-sm:10px;
  --dabb-shadow-soft:0 4px 16px rgba(31,42,36,.06),0 1px 3px rgba(31,42,36,.08);
  --dabb-shadow-lift:0 12px 32px rgba(31,42,36,.12),0 2px 6px rgba(31,42,36,.08);
  --dabb-t:180ms cubic-bezier(.4,0,.2,1);

  font-family:var(--dabb-font); color:var(--dabb-ink); line-height:1.6;
  max-width:840px; margin:0 auto; -webkit-font-smoothing:antialiased;
}
.dabb-widget, .dabb-widget *, .dabb-widget *::before, .dabb-widget *::after{ box-sizing:border-box; }
.dabb-widget img, .dabb-widget svg{ display:block; }
.dabb-widget button{ font-family:inherit; }
.dabb-widget :focus-visible{ outline:3px solid var(--dabb-accent); outline-offset:2px; border-radius:6px; }
.dabb-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.dabb-hero{ background:linear-gradient(135deg,var(--dabb-primary-dark),var(--dabb-primary) 130%); color:#fff; border-radius:var(--dabb-r-lg); padding:26px 24px; margin-bottom:-34px; position:relative; z-index:1; }
.dabb-hero h2{ font-size:clamp(22px,5vw,28px); line-height:1.2; margin:0 0 8px; font-weight:800; letter-spacing:-.01em; }
.dabb-hero p{ margin:0; font-size:14.5px; color:rgba(255,255,255,.88); max-width:58ch; }

.dabb-card{ background:var(--dabb-card); border-radius:var(--dabb-r-lg); box-shadow:var(--dabb-shadow-lift); padding:24px; position:relative; z-index:2; margin-bottom:22px; }
@media (min-width:600px){ .dabb-card{ padding:32px; } }
.dabb-widget h3.dabb-title{ font-size:20px; font-weight:800; margin:0 0 6px; letter-spacing:-.01em; }
.dabb-widget h1.dabb-article-title{ font-size:clamp(24px,5vw,30px); font-weight:800; margin:0 0 14px; letter-spacing:-.01em; color:var(--dabb-ink); }
.dabb-widget h2.dabb-article-h2{ font-size:18px; font-weight:800; margin:22px 0 8px; color:var(--dabb-primary-dark); }
.dabb-sub{ color:var(--dabb-ink-soft); font-size:14px; margin:0 0 18px; }

/* Calculator fields */
.dabb-field{ margin-bottom:16px; }
.dabb-field label{ display:block; font-weight:700; font-size:14px; margin-bottom:7px; }
.dabb-widget select, .dabb-widget input[type="number"]{
  width:100%; padding:13px 14px; font-size:16px; border-radius:var(--dabb-r-sm); border:1.5px solid var(--dabb-line);
  background:#fff; color:var(--dabb-ink); appearance:none; -webkit-appearance:none;
}
.dabb-widget select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352604F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:40px;
}
.dabb-widget select:focus, .dabb-widget input:focus{ border-color:var(--dabb-primary); box-shadow:0 0 0 4px rgba(45,93,79,.12); outline:none; }
.dabb-widget input[aria-invalid="true"]{ border-color:var(--dabb-error); background:var(--dabb-error-bg); }
.dabb-error-msg{ display:none; align-items:center; gap:6px; color:var(--dabb-error); font-size:13px; font-weight:600; margin-top:7px; }
.dabb-error-msg.visible{ display:flex; }
.dabb-error-msg svg{ width:15px; height:15px; flex-shrink:0; }
.dabb-input-with-unit{ display:flex; gap:8px; }
.dabb-input-with-unit input{ flex:1; }
.dabb-unit-toggle{ display:flex; background:var(--dabb-primary-light); border-radius:var(--dabb-r-sm); padding:3px; flex-shrink:0; }
.dabb-unit-toggle button{ border:none; background:transparent; padding:0 12px; font-weight:700; font-size:13px; color:var(--dabb-primary-dark); border-radius:7px; cursor:pointer; transition:background var(--dabb-t), color var(--dabb-t); }
.dabb-unit-toggle button[aria-pressed="true"]{ background:var(--dabb-primary); color:#fff; }

.dabb-btn-primary{ width:100%; background:var(--dabb-accent); color:#2A1B02; font-size:17px; font-weight:700; padding:15px 20px; border:none; border-radius:var(--dabb-r-sm); cursor:pointer; box-shadow:var(--dabb-shadow-soft); display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background var(--dabb-t), box-shadow var(--dabb-t), transform var(--dabb-t); }
.dabb-btn-primary:hover{ background:#f0af4b; box-shadow:var(--dabb-shadow-lift); }
.dabb-btn-primary:active{ transform:scale(.98); }
.dabb-btn-primary svg{ width:20px; height:20px; }

/* Result */
.dabb-result{ margin-top:20px; display:none; }
.dabb-result.visible{ display:block; animation:dabb-rise 400ms ease both; }
@keyframes dabb-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
.dabb-result-hero{ background:linear-gradient(135deg,var(--dabb-primary),var(--dabb-primary-dark)); color:#fff; border-radius:var(--dabb-r-lg); padding:24px 22px; text-align:center; }
.dabb-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:8px; }
.dabb-result-number{ font-family:var(--dabb-mono); font-size:clamp(44px,12vw,60px); font-weight:700; line-height:1; }
.dabb-result-number sup{ font-size:.32em; font-weight:700; margin-left:4px; }
.dabb-result-stage{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); padding:7px 15px; border-radius:999px; font-weight:700; font-size:13.5px; }
.dabb-result-stage svg{ width:15px; height:15px; }

.dabb-breed-profile{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
@media (max-width:480px){ .dabb-breed-profile{ grid-template-columns:1fr; } }
.dabb-bp-tile{ background:var(--dabb-primary-light); border-radius:var(--dabb-r-md); padding:13px; text-align:center; }
.dabb-bp-tile .dabb-bp-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--dabb-primary-dark); margin-bottom:4px; }
.dabb-bp-tile .dabb-bp-value{ font-size:16px; font-weight:800; color:var(--dabb-ink); }

/* ---- Breed aging-curve area chart (distinct visual style) ---- */
.dabb-chart-frame{ width:100%; overflow-x:auto; margin-top:6px; }
.dabb-chart-frame svg{ width:100%; height:auto; min-width:480px; }

.dabb-content p{ font-size:15px; color:var(--dabb-ink); margin:0 0 14px; }
.dabb-content p:last-child{ margin-bottom:0; }

.dabb-disclaimer{ font-size:12px; color:var(--dabb-ink-soft); background:var(--dabb-primary-light); border-radius:var(--dabb-r-sm); padding:12px 14px; margin-top:18px; display:flex; gap:8px; align-items:flex-start; }
.dabb-disclaimer svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color:var(--dabb-primary); }

.dabb-copyright{ text-align:center; font-size:11.5px; color:var(--dabb-ink-soft); margin-top:24px; padding-top:16px; border-top:1px solid var(--dabb-line); }