/* Container */
.ia-wrap {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 12px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* Header */
.ia-head {
  gap: 8px;
}

html[dir="rtl"] .ia-head {
  flex-direction: row-reverse;
}

.ia-title {
  margin: 0;
  font-weight: 800;
  font-size: 24px;
  color: #0b2537;
}

/* Arrows (circular like screenshot) */
.ia-arrows {
  gap: 8px;
}

.ia-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: #e7edf2;
}

.ia-btn:after {
  font-size: 16px;
  color: #0b2537;
}

.swiper-button-disabled.ia-btn {
  opacity: .45;
  cursor: default;
}

/* Make the LEFT button green in RTL (and right in LTR) like the screenshot */
html[dir="rtl"] .ia-btn-prev,
html[dir="ltr"] .ia-btn-next {
  background: #0aa06e;
}

html[dir="rtl"] .ia-btn-prev:after,
html[dir="ltr"] .ia-btn-next:after {
  color: #fff;
}

/* Slider margin */
.ia-swiper {
  margin-top: 14px;
}

/* Card */
.ia-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  min-width: 260px;
  height: 88px;
  border: 1px solid #e9eef2;
  border-radius: 16px;
  background: #ffffff;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, ;
}

.ia-card:hover {
  transform: translateY(-2px);
  border-color: #dbe5eb;
}

/* Icon ALWAYS visible (no heavy filters) */
.ia-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ia-icon img {
  max-width: 40px;
  max-height: 40px;
  display: block;
  filter: grayscale(100%);
  opacity: .85;
}

.ia-card:hover .ia-icon img {
  opacity: 1;
}

/* Name */
.ia-name {
  font-size: 16px;
  font-weight: 700;
  color: #6C737F;
  white-space: nowrap;
  word-wrap: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}



/* Active (selected) card = solid green chip with white icon/text */
.ia-card.is-active {
  background: #0aa06e;
  border-color: #0aa06e;
}

.ia-card.is-active .ia-name {
  color: #ffffff;
}

.ia-card.is-active .ia-icon img {
  filter: none;
  opacity: 1;
}

/* Pagination (subtle) */
.ia-swiper .swiper-pagination {
  margin-top: 8px;
  position: static;
}

.ia-swiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  opacity: .4;
}

.ia-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

.ia-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}

/* Two-line text in cities compass cards */
.ia-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.ia-short {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}

/* Make button version of ia-card look like a card */


/* Details panel below slider (cities compass) */
.ia-details {
  margin-top: 20px;
  padding: 24px 24px 20px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.ia-details-item {
  display: none;
}

.ia-details-item.is-active {
  display: block;
}

.ia-details-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: #0b2537;
}

.ia-details-body {
  font-size: 15px;
  line-height: 1.7;
  color: #1f3c50;
}

.ia-arrows .swiper-button-prev,
.ia-arrows .swiper-button-next {
  position: static;
  inset: auto;
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #e7edf2;
}

.ia-arrows .swiper-button-prev:after,
.ia-arrows .swiper-button-next:after {
  font-size: 16px;
  color: #0b2537;
}

.ia-btn-next {
  background: #0aa06e !important;
}

.ia-btn-next:after {
  color: #fff !important;
}

/* Disabled state (added by Swiper) */
.swiper-button-disabled {
  opacity: 1;
  /* keep full opacity */
  background: #abb2b7 !important;
}

.swiper-button-disabled:after {
  color: #70767c !important;
}

/* lighter arrow */

.ia-swiper .swiper-wrapper {
  gap: 16px;
}

@media (min-width: 768px) {
  .ia-swiper .swiper-wrapper {
    gap: 20px;
  }
}

@media (min-width: 992px) {
  .ia-swiper .swiper-wrapper {
    gap: 22px;
  }
}

@media (min-width: 1200px) {
  .ia-swiper .swiper-wrapper {
    gap: 24px;
  }
}

/* Mobile: show ~1.2 slides (peek) */
.ia-swiper .ia-slide-fixed {
  width: 80%;
}

/* ≥576px: about 2.2 slides */
@media (min-width: 576px) {
  .ia-swiper .ia-slide-fixed {
    width: 45%;
  }
}

/* ≥768px: 3 per row */
@media (min-width: 768px) {
  .ia-swiper .ia-slide-fixed {
    width: calc((100% - 2 * 20px) / 3);
  }
}

/* ≥992px: 4 per row */
@media (min-width: 992px) {
  .ia-swiper .ia-slide-fixed {
    width: calc((100% - 3 * 22px) / 4);
  }
}

/* ≥1200px: 6 per row */
@media (min-width: 1200px) {
  .ia-swiper .ia-slide-fixed {
    width: calc((100% - 6 * 20px) / 7);
  }
}