// =============================================================================
// BOOKING CARDS — .info-card slider (2+ cards only)
// Standalone, reusable anywhere (not drawer-specific) — was .drawer__cards.
// Card styling lives in _info-card.scss; this file is slider layout only.
//
// Only used when there are 2+ cards (see drawer/templates/frontend.html —
// a single card renders as a bare .info-card with no slider markup at all,
// so .booking__cards is exclusively the Swiper root here). Mirrors
// .drawer-slider/.drawer-slider__nav (same drawer panel) for visual
// consistency: 24px pill nav buttons, same gap, same resting opacity.
// =============================================================================

@import '../mixins';

.booking__cards {
  width: 100%;
  cursor: grab;
  user-select: none;

  &:active {
    cursor: grabbing;
  }
}

.booking__cards .swiper-slide {
  width: 100%;
  height: auto;
}

.booking__cards-nav {
  display: flex;
  gap: 5px; // matches drawer-slider__nav's own gap
  margin: 16px 0;
}

.booking__cards-nav-btn {
  @include slider-nav-btn;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-satin-linen);
  color: var(--color-mantle);

  svg,
  img {
    width: 12px;
    height: 12px;
    display: block;
  }
}

.booking__cards-nav-btn--prev {
  opacity: 0.35;
}

.booking__cards-nav-btn--next {
  opacity: 1;
}