/* =====================================================================
   NSFWRating - Kolet interactive UI (2026-08-05)
   Styles for the header search panel and the compare tray, which the
   design mock never shipped for inner pages.
   ===================================================================== */

/* ---------- Header search panel ---------- */
.ksearch {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #0A0A0A;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px clamp(18px, 4vw, 52px);
  z-index: 120;
}
.ksearch[hidden] { display: none; }
.ksearch__f {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}
.ksearch__f input[type="search"] {
  flex: 1 1 auto;
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
  font-size: 0.97rem;
}
.ksearch__f input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.ksearch__f input[type="search"]:focus {
  outline: none;
  border-color: #F92FBB !important;
  background: rgba(255, 255, 255, 0.11) !important;
}
.ksearch__x {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 0 !important;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 0 6px;
  min-height: 0 !important;
}
.ksearch__x:hover { color: #fff !important; }

/* ---------- Compare tray (theme markup, Kolet skin) ---------- */
.aihub-tray {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(14px) !important;
  bottom: 20px !important;
  z-index: 960;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff !important;
  color: #0A0A0A !important;
  border: 1.5px solid #0A0A0A !important;
  border-radius: 999px !important;
  box-shadow: 4px 4px 0 #F92FBB;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  max-width: min(94vw, 760px);
}
.aihub-tray.is-on {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}
.aihub-tray__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.aihub-tray__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFF2E0 !important;
  color: #0A0A0A !important;
  border: 1px solid rgba(10, 10, 10, 0.18) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 0 !important;
  cursor: pointer;
}
.aihub-tray__chip:hover { background: #FFE4F6 !important; }
.aihub-tray__go {
  background: #F92FBB !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-weight: 750;
  white-space: nowrap;
  text-decoration: none !important;
}
.aihub-tray__clear {
  background: transparent !important;
  border: 0 !important;
  color: rgba(10, 10, 10, 0.55) !important;
  cursor: pointer;
  min-height: 0 !important;
  padding: 0 4px !important;
}
.aihub-tray__clear:hover { color: #0A0A0A !important; }

/* Card compare buttons: show selected state clearly */
.aihub-compare-toggle[aria-pressed="true"] {
  background: #F92FBB !important;
  color: #fff !important;
  border-color: #0A0A0A !important;
}
.hdr__cmp.has-items { background: rgba(249, 47, 187, 0.25) !important; }

@media (max-width: 640px) {
  .aihub-tray { width: calc(100vw - 24px); border-radius: 18px !important; flex-wrap: wrap; }
  .ksearch__f { flex-wrap: wrap; }
}


/* =====================================================================
   Card feature badges (2026-08-05)
   .aihub-badges has overflow:hidden, which clipped the 3px sticker shadow
   on the outer chips so every badge looked sliced off at the card edge.
   Let the row show its overflow and give the shadows room to sit in.
   ===================================================================== */
.aihub-badges {
  overflow: visible !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
  padding: 2px 4px 5px 0;
  max-width: 100%;
}
.aihub-badges .aihub-badge {
  max-width: 100%;
  box-shadow: 2px 2px 0 var(--k-black, #0A0A0A) !important;
  padding: 5px 11px !important;
  font-size: 0.78rem !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Cards must never clip their own children's shadows either. */
.aihub-card, .aihub-collection__item, .aihub-artcard { overflow: visible !important; }

@media (max-width: 480px) {
  .aihub-badges .aihub-badge { font-size: 0.74rem !important; padding: 4px 9px !important; }
}