/* DogCompatibility — breed comparison UI (shared) */
.hp-fcard.dc-cmp-host{position:relative}
.dc-cmp-btn{display:inline-flex;align-items:center;gap:.4em;border:1px solid #c9d3cb;background:#fff;color:#1f3a2e;
  border-radius:999px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;line-height:1;padding:.5em .8em}
.dc-cmp-btn .dc-cmp-btn-ic{width:14px;height:14px;border-radius:3px;border:1.5px solid currentColor;position:relative;flex:0 0 auto}
.dc-cmp-btn.is-added{background:#1f6f43;border-color:#1f6f43;color:#fff}
.dc-cmp-btn.is-added .dc-cmp-btn-ic::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.dc-cmp-btn.dc-cmp-card{position:absolute;top:8px;right:8px;z-index:3;font-size:.72rem;padding:.4em .6em;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.dc-cmp-btn.dc-cmp-card .dc-cmp-btn-lbl{display:none}
.dc-cmp-btn.dc-cmp-card::after{content:"Compare"}
.dc-cmp-btn.dc-cmp-card.is-added::after{content:"Added"}
.dc-cmp-breedwrap{margin:.6rem 0}
.dc-cmp-btn.dc-cmp-breed{font-size:.9rem;padding:.6em 1em}

/* floating tray */
.dc-cmp-tray{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#12241b;color:#fff;
  transform:translateY(110%);transition:transform .22s ease;box-shadow:0 -4px 20px rgba(0,0,0,.25)}
.dc-cmp-tray.is-open{transform:none}
.dc-cmp-tray-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.7rem 1rem}
.dc-cmp-tray-lbl{font-weight:700;font-size:.85rem;opacity:.85}
.dc-cmp-chips{display:flex;gap:.4rem;flex-wrap:wrap;flex:1 1 auto}
.dc-cmp-chip{display:inline-flex;align-items:center;gap:.4em;background:#25402f;border-radius:999px;padding:.35em .3em .35em .8em;font-size:.82rem}
.dc-cmp-x,.cmp-head-x{background:none;border:none;color:#cfe6d8;cursor:pointer;font-size:1.05rem;line-height:1;padding:0 .3em}
.dc-cmp-go{white-space:nowrap}
.dc-cmp-go.is-disabled{opacity:.5;pointer-events:auto}
.dc-cmp-count{font-size:.82rem;font-weight:700;color:#cfe6d8;white-space:nowrap}
.dc-cmp-clear{background:none;border:none;color:#cfe6d8;cursor:pointer;font-weight:600;font-size:.85rem}
/* at-capacity Add controls */
.dc-cmp-btn.is-disabled{opacity:.45;cursor:not-allowed}
.cmp-picker-opt.is-disabled{opacity:.5;cursor:not-allowed}
.cmp-picker-opt.is-disabled .cmp-picker-tag{color:#8a939c}
.dc-cmp-limit{position:fixed;left:50%;bottom:5.5rem;transform:translateX(-50%) translateY(10px);z-index:70;
  background:#7a1f1f;color:#fff;padding:.7em 1.1em;border-radius:10px;font-size:.9rem;max-width:90vw;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.dc-cmp-limit.is-show{opacity:1;transform:translateX(-50%)}

/* modal + table */
.dc-cmp-overlay{position:fixed;inset:0;z-index:80;background:rgba(10,20,15,.55);display:flex;align-items:center;justify-content:center;padding:1rem}
.dc-cmp-modal{background:#fff;border-radius:14px;max-width:1160px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.dc-cmp-modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid #e6ece8}
.dc-cmp-modal-head h2{margin:0;font-size:1.15rem}
.dc-cmp-close{background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#4a5b52}
.dc-cmp-scroll,.cmp-scroll{overflow:auto}
.cmp-table{border-collapse:collapse;width:100%;min-width:520px}
.cmp-table th,.cmp-table td{border-bottom:1px solid #eef2ef;padding:.6rem .7rem;text-align:left;vertical-align:top;font-size:.88rem}
.cmp-rowlbl{font-weight:600;color:#33463c;white-space:nowrap;background:#f7faf8;position:sticky;left:0}
.cmp-head{text-align:center;min-width:150px}
.cmp-head-link{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-decoration:none;color:inherit}
.cmp-head-img{width:64px;height:64px;object-fit:contain}
.cmp-head-name{font-weight:700;font-size:.92rem}
.cmp-head-grp{display:block;text-align:center;font-size:.72rem;color:#6c7d73}
.cmp-cell-lbl{font-weight:600}
.cmp-bar{display:block;height:6px;background:#e6ece8;border-radius:4px;margin-top:.35rem;overflow:hidden}
.cmp-bar-fill{display:block;height:100%;background:#2f8a56}
.cmp-na{color:#9aa8a0}
.cmp-text{font-weight:400;color:#3a4a41}

/* /compare.html page */
.cmp-page{max-width:1000px;margin:0 auto;padding:2rem 1rem 6rem}
.cmp-page-head h1{margin:0 0 .4rem}
.cmp-descriptor{color:#4a5b52;max-width:60ch;margin:0 0 1.2rem}
.cmp-cta{background:#f1f7f3;border:1px solid #d9e6de;border-radius:12px;padding:1rem 1.2rem;margin:0 0 1.6rem;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.cmp-cta .btn{margin:0}
.cmp-cta-support{font-size:.85rem;color:#5a6b61}
.cmp-picker{position:relative;margin:0 0 1.4rem;max-width:420px}
.cmp-picker-input{width:100%;padding:.7em .9em;border:1px solid #cdd8d1;border-radius:10px;font:inherit}
.cmp-picker-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #d9e2dc;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:5;overflow:hidden}
.cmp-picker-opt{display:flex;justify-content:space-between;align-items:center;width:100%;border:none;background:#fff;padding:.6em .9em;cursor:pointer;font:inherit;text-align:left}
.cmp-picker-opt:hover{background:#f2f7f4}
.cmp-picker-tag{font-size:.78rem;color:#2f8a56;font-weight:700}
.cmp-picker-opt.is-added .cmp-picker-tag{color:#8a939c}
.cmp-empty{padding:2rem 1rem;text-align:center;color:#4a5b52;border:1px dashed #cdd8d1;border-radius:12px}
.cmp-empty-h{font-weight:700;margin:0 0 .3rem}
@media(max-width:560px){.dc-cmp-tray-inner{padding:.6rem .7rem}.cmp-head-img{width:48px;height:48px}}