/* ============================================================
   Dog Age Calculator — Plugin Stylesheet
   All rules are scoped under .dac-widget so the plugin never
   leaks styles into (or inherits conflicts from) the active
   WordPress theme.
   ============================================================ */
 
.dac-widget{
    
  --dac-bg: #F6F7F2;
  --dac-card: #FFFFFF;
  --dac-primary: #2D5D4F;
  --dac-primary-dark: #1E4238;
  --dac-primary-light: #E7EFEA;
  --dac-accent: #E8A33D;
  --dac-ink: #1F2A24;
  --dac-ink-soft: #52604F;
  --dac-line: #DDE3DA;
  --dac-error: #B3261E;
  --dac-error-bg: #FBEAE9;

  --dac-font-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dac-font-mono: "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  --dac-radius-lg: 20px;
  --dac-radius-md: 14px;
  --dac-radius-sm: 10px;
  --dac-shadow-soft: 0 4px 16px rgba(31,42,36,0.06), 0 1px 3px rgba(31,42,36,0.08);
  --dac-shadow-lift: 0 12px 32px rgba(31,42,36,0.12), 0 2px 6px rgba(31,42,36,0.08);
  --dac-transition: 180ms cubic-bezier(.4,0,.2,1);

  font-family: var(--dac-font-body);
  color: var(--dac-ink);
  line-height: 1.5;
  max-width: 760px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}
.dac-widget, .dac-widget *, .dac-widget *::before, .dac-widget *::after{ box-sizing: border-box; }
.dac-widget img, .dac-widget svg{ display:block; }
.dac-widget button{ font-family: inherit; }
.dac-widget a{ color: var(--dac-primary); }

@media (prefers-reduced-motion: reduce){
  .dac-widget *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
.dac-widget :focus-visible{
  outline: 3px solid var(--dac-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

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

/* Card wrapper */
.dac-card{
  background: var(--dac-card);
  border-radius: var(--dac-radius-lg);
  box-shadow: var(--dac-shadow-lift);
  padding: 26px;
  position: relative;
  z-index: 2;
}
@media (min-width:600px){ .dac-card{ padding: 34px; } }

.dac-widget h3{
  font-size: 20px;
  font-weight:800;
  margin: 0 0 6px;
  letter-spacing:-0.01em;
}
.dac-section-sub{ color: var(--dac-ink-soft); font-size: 14px; margin: 0 0 20px; }

/* Tabs */
.dac-tabs{ display:flex; background: var(--dac-primary-light); border-radius: var(--dac-radius-md); padding: 4px; margin-bottom: 20px; }
.dac-tab-btn{ flex:1; border:none; background:transparent; padding: 11px 8px; border-radius: var(--dac-radius-sm); font-weight:700; font-size: 14.5px; color: var(--dac-primary-dark); cursor:pointer; transition: background var(--dac-transition), color var(--dac-transition), box-shadow var(--dac-transition); }
.dac-tab-btn[aria-selected="true"]{ background: var(--dac-primary); color:#fff; box-shadow: var(--dac-shadow-soft); }

/* Fields */
.dac-field{ margin-bottom: 18px; }
.dac-field label{ display:block; font-weight:700; font-size: 14px; margin-bottom: 7px; color: var(--dac-ink); }
.dac-field .dac-hint{ font-size:12.5px; color: var(--dac-ink-soft); margin-top:6px; }
.dac-widget input[type="number"], .dac-widget select{
  width:100%; padding: 13px 14px; font-size:16px; border-radius: var(--dac-radius-sm);
  border: 1.5px solid var(--dac-line); background:#fff; color: var(--dac-ink);
  transition: border-color var(--dac-transition), box-shadow var(--dac-transition);
  appearance: none; -webkit-appearance: none;
}
.dac-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;
}
.dac-widget input[type="number"]:focus, .dac-widget select:focus{
  border-color: var(--dac-primary); box-shadow: 0 0 0 4px rgba(45,93,79,0.12); outline:none;
}
.dac-widget input[aria-invalid="true"]{ border-color: var(--dac-error); background: var(--dac-error-bg); }
.dac-error-msg{ display:none; align-items:center; gap:6px; color: var(--dac-error); font-size:13px; font-weight:600; margin-top:7px; }
.dac-error-msg.visible{ display:flex; }
.dac-error-msg svg{ width:15px; height:15px; flex-shrink:0; }

.dac-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:420px){ .dac-field-row{ grid-template-columns:1fr; } }

/* Buttons */
.dac-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; border-radius: var(--dac-radius-sm); font-weight:700; transition: transform var(--dac-transition), box-shadow var(--dac-transition), background var(--dac-transition); }
.dac-btn:active{ transform: scale(0.98); }
.dac-btn-primary{ width:100%; background: var(--dac-accent); color: #2A1B02; font-size:17px; padding:16px 20px; box-shadow: var(--dac-shadow-soft); }
.dac-btn-primary:hover{ background:#f0af4b; box-shadow: var(--dac-shadow-lift); }
.dac-btn-primary svg{ width:20px; height:20px; }
.dac-btn-ghost{ background: var(--dac-primary-light); color: var(--dac-primary-dark); font-size:13.5px; padding: 10px 14px; }
.dac-btn-ghost:hover{ background:#dcebe4; }
.dac-btn-ghost svg{ width:16px; height:16px; }
.dac-action-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.dac-action-row .dac-btn-ghost{ flex:1 1 auto; }

/* Results */
.dac-results{ margin-top:18px; animation: dac-rise 420ms ease both; }
.dac-results[hidden]{ display:none; }
@keyframes dac-rise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform: translateY(0); } }

.dac-result-hero{ background: linear-gradient(135deg, var(--dac-primary), var(--dac-primary-dark)); color:#fff; border-radius: var(--dac-radius-lg); padding: 28px 24px; text-align:center; position:relative; overflow:hidden; }
.dac-result-hero .dac-eyebrow{ font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color: rgba(255,255,255,0.75); margin-bottom:10px; }
.dac-result-number{ font-family: var(--dac-font-mono); font-size: clamp(52px, 15vw, 76px); font-weight:700; line-height:1; letter-spacing:-0.02em; }
.dac-result-number sup{ font-size:0.3em; font-weight:700; margin-left:4px; }
.dac-result-stage{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; background: rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); padding:8px 16px; border-radius:999px; font-weight:700; font-size:14.5px; }
.dac-result-stage svg{ width:16px; height:16px; }

.dac-stage-trail{ margin-top:24px; padding: 18px 6px 4px; }
.dac-trail-track{ position:relative; display:flex; justify-content:space-between; }
.dac-trail-line{ position:absolute; top:14px; left:14px; right:14px; height:3px; background: rgba(255,255,255,0.22); border-radius:2px; z-index:0; }
.dac-trail-line-fill{ position:absolute; top:14px; left:14px; height:3px; background: var(--dac-accent); border-radius:2px; z-index:1; transition: width 500ms ease; }
.dac-trail-step{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; }
.dac-trail-dot{ width:28px; height:28px; border-radius:50%; background: var(--dac-primary-dark); border:2px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; transition: background var(--dac-transition), border-color var(--dac-transition), transform var(--dac-transition); }
.dac-trail-dot svg{ width:14px; height:14px; opacity:0.55; }
.dac-trail-step.is-active .dac-trail-dot{ background: var(--dac-accent); border-color: var(--dac-accent); transform: scale(1.18); }
.dac-trail-step.is-active .dac-trail-dot svg{ opacity:1; }
.dac-trail-step.is-passed .dac-trail-dot{ background: rgba(232,163,61,0.55); border-color: rgba(232,163,61,0.55); }
.dac-trail-label{ font-size:10.5px; font-weight:700; text-align:center; color: rgba(255,255,255,0.65); max-width:56px; line-height:1.2; }
.dac-trail-step.is-active .dac-trail-label{ color:#fff; }

.dac-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
@media (max-width:480px){ .dac-info-grid{ grid-template-columns:1fr; } }
.dac-info-tile{ background: var(--dac-primary-light); border-radius: var(--dac-radius-md); padding:16px; }
.dac-info-tile .dac-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color: var(--dac-primary-dark); display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.dac-info-tile .dac-label svg{ width:14px; height:14px; }
.dac-info-tile .dac-value{ font-size:19px; font-weight:800; color: var(--dac-ink); }
.dac-info-tile .dac-sub{ font-size:12px; color: var(--dac-ink-soft); margin-top:2px; }

.dac-tips-section{ margin-top:22px; }
.dac-tips-section h4{ font-size:15px; font-weight:800; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.dac-tip-list{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px; }
.dac-tip-card{ display:flex; gap:12px; background:#fff; border:1.5px solid var(--dac-line); border-radius: var(--dac-radius-md); padding:14px; }
.dac-tip-icon{ flex-shrink:0; width:38px; height:38px; border-radius:10px; background: var(--dac-primary-light); display:flex; align-items:center; justify-content:center; }
.dac-tip-icon svg{ width:19px; height:19px; color: var(--dac-primary); }
.dac-tip-body h5{ margin:0 0 3px; font-size:14px; font-weight:700; }
.dac-tip-body p{ margin:0; font-size:13px; color: var(--dac-ink-soft); }

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

.dac-sticky-summary{ display:none; }
@media (max-width: 640px){
  .dac-sticky-summary.visible{ display:flex; position: sticky; bottom:0; left:0; right:0; z-index: 20; background: var(--dac-primary-dark); color:#fff; padding: 12px 16px; align-items:center; justify-content:space-between; box-shadow: 0 -6px 20px rgba(0,0,0,0.18); margin: 18px -20px -20px; }
  .dac-sticky-summary .dac-ss-text{ font-size:13px; font-weight:700; }
  .dac-sticky-summary .dac-ss-num{ font-family: var(--dac-font-mono); font-size:20px; font-weight:800; }
}

.dac-faq{ margin-top: 32px; }
.dac-faq-item{ border-bottom: 1px solid var(--dac-line); }
.dac-faq-item:first-child{ border-top: 1px solid var(--dac-line); }
.dac-faq-q{ width:100%; text-align:left; background:none; border:none; padding: 16px 4px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:15.5px; font-weight:700; color: var(--dac-ink); cursor:pointer; }
.dac-faq-q svg{ width:18px; height:18px; flex-shrink:0; transition: transform var(--dac-transition); color: var(--dac-primary); }
.dac-faq-q[aria-expanded="true"] svg{ transform: rotate(180deg); }
.dac-faq-a{ overflow:hidden; max-height:0; transition: max-height 260ms ease; }
.dac-faq-a p{ margin: 0 4px 16px; color: var(--dac-ink-soft); font-size:14.5px; }

.dac-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; }

.dac-skip-link{ position:absolute; left:-999px; top:auto; background:#fff; color:var(--dac-primary-dark); padding:12px 18px; border-radius:8px; font-weight:700; z-index:100; }
.dac-skip-link:focus{ left:14px; top:14px; }

@media print{
  .dac-hero, .dac-action-row, .dac-faq, .dac-sticky-summary, .dac-skip-link{ display:none !important; }
  .dac-card{ box-shadow:none; }
  .dac-result-hero{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}