/* Elementor: CITIM Hero Slider (horizontal slider with pagination dots) */
@layer components {
  .CITIMHeroSlider {
    position: relative;
    overflow: hidden;
  }

  .CITIMHeroSlider:not(.CITIMHeroSlider--fullwidth) {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .CITIMHeroSlider__track {
    display: flex;
    transition: transform 0.4s ease-out;
    will-change: transform;
  }

  .CITIMHeroSlider__slide {
    flex: 0 0 100%;
    min-width: 0;
    width: 100%;
  }

  .CITIMHeroSlider__slide .CITIMHeader {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Pagination: bottom left, circular dots (visual clue per slide) */
  .CITIMHeroSlider__pagination {
    position: absolute;
    bottom: var(--citim-spacing-md, 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    padding: 0 var(--citim-spacing-md, 1.5rem);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
  }

  .CITIMHeroSlider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .CITIMHeroSlider__dot:hover {
    background-color: rgba(0, 0, 0, 0.4);
  }

  .CITIMHeroSlider__dot--active {
    background-color: rgba(0, 0, 0, 0.6);
  }

  .CITIMHeroSlider__dot .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media (max-width: 767px) {
    .CITIMHeroSlider__pagination {
      position: static;
      bottom: auto;
      left: auto;
      transform: none;
      justify-content: center;
      padding: var(--citim-spacing-sm, 1rem) var(--citim-spacing-sm, 1rem);
      gap: 0.75rem;
    }

    .CITIMHeroSlider__dot {
      width: 12px;
      height: 12px;
    }
  }
}