/* =========================================================
   HCC — Compare System (CLEAN / SINGLE SOURCE OF TRUTH)
   Used by:
   - /vergleich/
   - /slug-vs-slug/
   - Nächster sinnvoller Schritt (Ähnliche Rassen)
   ========================================================= */

/* =========================================================
   Shared wrappers
   ========================================================= */
.hcc-compare,
.hcc-vs-page .hcc-compare{
  margin: 24px 0;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 16px;
  padding: 14px;
}

.hcc-muted{
  opacity: .78;
  margin: 0 0 12px;
  line-height: 1.6;
}

/* =========================================================
   TABLE (vergleich + vs pages)
   ========================================================= */
.hcc-table-wrap{
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
}

.hcc-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
  table-layout: fixed; /* مهم عشان الهيدر يبقى فوق العمود بالظبط */
}

.hcc-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 12px 10px;
  font-weight: 900;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.hcc-table th,
.hcc-table td{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: middle;
}

.hcc-table tbody tr:nth-child(odd){
  background: rgba(0,0,0,.02);
}

/* first column (labels) */
.hcc-corner,
.hcc-row-label{
  text-align: left;
  font-weight: 800;
  width: 160px;
}

/* =========================================================
   COLUMN HEADS (breeds inside table header)
   ========================================================= */
.hcc-th{
  text-align: center !important;
  vertical-align: top;
  width: 220px;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Link must fill the column so image+name are centered over the column */
.hcc-th-link{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-decoration: none;
  color: inherit;
  padding: 8px 0 !important; /* صفر يمين/شمال لتفادي انحراف الثيم */
  margin: 0 !important;
}

.hcc-th-img{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  display: block !important;
  margin: 0 auto 8px !important;
  object-fit: contain;          /* بدون قص */
  object-position: center top;  /* يبان الرأس */
}

.hcc-th-name{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-weight: 900;
  line-height: 1.15;
}

/* Prevent theme link padding inside thead */
.hcc-table thead th a{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   VALUE PILLS (Neutral)
   ========================================================= */
.hcc-pill{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color: #111;
  opacity: .92;
}

.hcc-pill.good,
.hcc-pill.mid,
.hcc-pill.bad{
  background: #fff;
  border-color: rgba(0,0,0,.10);
  color: #111;
}

.hcc-na{
  opacity: .55;
  font-weight: 700;
}

/* =========================================================
   VS pages — keep horizontal scroll INSIDE table wrap
   ========================================================= */
.hcc-vs-page{
  overflow-x: hidden;
}

/* =========================================================
   NEXT STEP (Ähnliche Rassen) — BIG IMAGES + FIXED LAYOUT
   ========================================================= */
.hcc-next-step .hcc-box{
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 16px;
  padding: 14px;
}

.hcc-next-step h3{
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.hcc-pick-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

@media (max-width: 980px){
  .hcc-pick-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px){
  .hcc-pick-grid{ grid-template-columns: 1fr; }
}

.hcc-pick-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.03); /* عشان تبان حتى بدون hover */
  overflow: hidden;
  position: relative;
  min-height: 124px; /* يناسب الصورة الكبيرة */
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.hcc-pick-card:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.18);
}

/* checkbox */
.hcc-pick-card input.hcc-pick{
  position: absolute;
  left: 12px;
  top: 12px;
  margin: 0;
  z-index: 2;
  transform: scale(1.05);
}

/* IMPORTANT: content link class */
.hcc-pick-card > a.hcc-pick-link{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 14px 14px 14px 46px; /* مساحة للـ checkbox */
  text-decoration: none;
  color: #111;
}

/* BIG image */
.hcc-next-step .hcc-card-img{
  width: 96px;
  height: 96px;
  border-radius: 16px;
  object-fit: contain;          /* بدون قص */
  object-position: center top;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  flex: 0 0 96px;
  display: block;
}

.hcc-next-step .hcc-card-img.ph{
  background: rgba(0,0,0,.06);
}

/* text */
.hcc-next-step .hcc-card-title{
  font-weight: 950;
  line-height: 1.15;
  margin: 0;
}

.hcc-next-step .hcc-card-sub{
  margin-top: 4px;
  font-size: 13px;
  opacity: .75;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.hcc-btn,
a.hcc-btn,
button.hcc-btn{
  background: #111 !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hcc-btn:hover,
.hcc-btn:focus{
  border-color: rgba(0,0,0,.28) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

/* =========================================================
   BACK LINK (VS pages)
   ========================================================= */
.hcc-back{ margin-top: 14px; }
.hcc-back-link{
  font-size: 14px;
  text-decoration: none;
  opacity: .8;
}
.hcc-back-link:hover{ text-decoration: underline; }

/* =========================================================
   COMPARE PICKER (Ajax Search UI) — /vergleich/
   ========================================================= */
.hcc-picker{
  margin: 24px 0;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius: 16px;
  padding: 16px;
}

.hcc-picker h2{
  margin: 0 0 10px;
  font-weight: 950;
  letter-spacing: -0.3px;
  line-height: 1.12;
  font-size: 34px;
}

.hcc-picker h3{
  font-weight: 950;
  letter-spacing: -0.3px;
}

.hcc-picker-tools{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.hcc-search{
  width: 100%;
  max-width: 720px;
  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  outline: none;
}

.hcc-search:focus{
  border-color: rgba(0,0,0,.28);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.hcc-selected-wrap{
  margin-top: 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px;
  background: rgba(0,0,0,.01);
}

.hcc-selected{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.hcc-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
}

.hcc-chip-name{ font-weight: 900; }

.hcc-chip-x{
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
}
.hcc-chip-x:hover{ opacity: 1; }

.hcc-results-wrap{ margin-top: 14px; }
.hcc-results-title{ font-weight: 900; margin: 0 0 10px; }

.hcc-results{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 900px){
  .hcc-results{ grid-template-columns: 1fr; }
}

/* Results card (no color flip, name always visible) */
.hcc-res-card{
  display:flex;
  gap: 10px;
  align-items:center;
  text-align:left;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.035);
  cursor:pointer;
  transition: box-shadow .15s ease, transform .15s ease;
  color: #111;
}

.hcc-res-card:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.hcc-res-card *{ color: #111; }

.hcc-res-img{
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: contain;
  object-position: center top;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  flex: 0 0 58px;
}

.hcc-res-meta{ min-width: 0; }
.hcc-res-title{ font-weight: 950; line-height: 1.2; }
.hcc-res-sub{ opacity: .72; font-size: 13px; margin-top: 2px; }

.hcc-loading,
.hcc-empty-res{
  opacity:.75;
  padding: 10px 2px;
}

.hcc-do-compare{
  width: 100%;
  max-width: 260px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .hcc-table{ min-width: 620px; }
  .hcc-th{ width: 200px; }
  .hcc-th-img{ width: 74px; height: 74px; }
}
/* =========================================
   HCC Picker H2: match site headings (theme)
   ========================================= */

.hcc-picker h2{
  /* خليه يرث ستايل الثيم بدل ما نعمله "bold زيادة" */
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  font-size: inherit !important;

  /* بس نسيب له spacing نظيف */
  margin: 0 0 10px !important;
}

/* لو الثيم مابيطبقش ستايل واضح داخل section، خليها قريبة من H1/H2 العام */
.hcc-picker h2{
  font-weight: 800 !important;         /* مش 950 */
  letter-spacing: -0.2px !important;   /* أقل */
  line-height: 1.15 !important;
  font-size: 26px !important;          /* بدل 34 */
}

@media (max-width: 768px){
  .hcc-picker h2{
    font-size: 22px !important;
  }
}