/* =========================================================================
   ChangeNOW replica — local interaction styles
   The original stylesheet ships the entire visual design; this file only
   adds what the original JS used to do (panel switching, carousel,
   combobox rendering without virtualization, popovers, support button).
   ========================================================================= */

[hidden] { display: none !important; }

/* ------------------------------------------------------------- exchange hub */
.exchange-hub__calcs { position: relative; }
[data-hub-panel][hidden] { display: none; }

/* ------------------------------------------------- combobox (non-virtualized)
   The original renders the currency list inside a virtualized container;
   we render plain rows into the same container/classes. Match the original
   row height (63px) and let the list flow instead of absolute positioning. */
.combobox-dropdown-item {
  position: static !important;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
/* beat the original `.combobox__items-list .combobox-dropdown-item{height:auto}`
   so rows keep the site's 63px height */
.combobox__items-list .combobox-dropdown-item {
  height: 63px;
  min-height: 63px;
  padding: 2px 20px 2px 10px;
}
.combobox__items-container li { list-style: none; }

/* --------------------------------------------------------------- carousel */
.review-cards .slick-list { overflow: hidden; }
.review-cards .slick-track {
  display: flex;
  gap: 24px;
  width: auto !important;
  transform: none;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.review-cards .slick-slide {
  float: none !important;
  width: auto !important;
  flex: 0 0 calc((100% - 48px) / 3);
  padding: 0;
}
.review-cards .slick-slide > div { height: 100%; }
@media (max-width: 1199px) { .review-cards .slick-slide { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 767px)  { .review-cards .slick-slide { flex-basis: 100%; } }
.review-cards .slick-arrow.slick-disabled { opacity: .35; pointer-events: none; }

/* ------------------------------------------------------------- popovers */
.replica-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

.replica-lang-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: var(--ui-kit-header-v2-dropdown-bg, #262628);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
  z-index: 400;
}
.replica-lang-menu button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.replica-lang-menu button:hover { background: rgba(255, 255, 255, .08); }

/* --------------------------------------------------------- cookie banner */
.cookie-warning.replica-cookie-hidden { transform: translateY(100%); pointer-events: none; }

/* --------------------------------------------------------- support button */
.tg-support-button { cursor: pointer; border: none; }

/* keep layouts stable when JS-driven widths change */
.exchange-hub-crypto__rate-amount bdi { font-variant-numeric: tabular-nums; }