.tariff-cards-container {
  display: grid;
  flex-wrap: wrap;
  gap: 1rem; 
  justify-content: center; 
  justify-items: center
}

@media (max-width: 1500px) {
  .tariff-cards-group .tariff-cards-container.cards-per-row-4 .tariff-card{
    max-width: 300px;
  }
}

@media (max-width: 1170px) {
  .tariff-cards-group .tariff-cards-container.cards-per-row-4 {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1199px) {
    .tariff-cards-group .tariff-cards-container.cards-per-row-3{
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 767px) {
  .tariff-cards-group .tariff-cards-container.cards-per-row-4,
  .tariff-cards-group .tariff-cards-container.cards-per-row-2 {
      grid-template-columns: repeat(1, 1fr);
  }
}

.tariff-card {
  background: #002340;
  border-radius: 12px;
  color: white;
  padding: 1rem;
  max-width: 350px;
  height: fit-content;
}

.tariff-highlight {
  background-color: #B4FF00;
  padding: 10px;
  color: #002340;
  border-radius: 6px;
  display: inline-flex;
}

.tariff-highlight p{
  margin: 0;
}

.tariff-highlight .highlight-icon{
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.tariff-title {
  padding: 10px 0 0 0;
  font-weight: 600;
  font-size: 20px;
  color: #ffffff
}

.tariff-duration {
  font-size: 15px;
  color: #CCD3D9;
  padding: 0 0 20px 0;
}

.tariff-main-parameters,
.tariff-secondary-parameters {
  list-style: none;
  padding: 0 10px;
}

.tariff-secondary-parameters{
  border-radius: 8px;
  padding: 10px 10px 0 10px;
}

.tariff-main-parameters .parameter,
.tariff-secondary-parameters .parameter{
  display: flex;
}

.parameter-row {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
}

.main-label p{
  display: flex;
  align-items: center;
  gap: 10px;
}

.tariff-secondary-parameters .parameter .main-label{
  margin-bottom: 8px;
}

.parameter-row .check-icon{
  margin-right: 10px;
}
.parameter-row .check-icon img{
  width: 14px;
  height: 14px;
}

.info-icon{
  margin-left: 10px;
  cursor: pointer;
}

.parameter-row .additional-info{
  display:none;
}

.tariff-extras {
  padding: 10px 0;
  border-top: 2px solid #4D657A;
  border-bottom: 2px solid #4D657A;
  margin: 10px 0;
}

.extra-title-wrapper{
  display: flex;
}
.extra-title-wrapper .info-icon{
  margin-left: 10px;
}

.tariff-extras .extra-title p{
  margin: 0;
}

.tariff-extras-carousel {
  margin: 1rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  display: flex;
  cursor: grab;
  touch-action: pan-x;
}

.carousel-inner {
  display: flex;
  gap: 0.5rem;
}

.extras-carousel-item {
  flex: 0 0 auto;
  width: 120px;
  height: 70px;
  background: #062b46;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  user-select: none;
}

.extras-carousel-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 10px;
}

.tariff-extras-carousel.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.tariff-extras-carousel .carousel-inner {
  cursor: grab;
}

.tariff-extras-carousel .carousel-inner.active {
  cursor: grabbing;
}

.tariff-extras-carousel img {
  user-drag: none;          
  -webkit-user-drag: none;  
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  pointer-events: auto;
}

.tariff-prices {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.tariff-prices .price-left{
  width: fit-content;
  color: #E6E9EC;
}
.tariff-prices .price-right{
  text-align: right;
  color: #ffffff;
  margin-left: auto;

}
.tariff-prices .price-left p, .tariff-prices .price-right p{
  margin-bottom: 0;
}

.tariff-cta {
  padding: 10px 0;
  margin-top: 10px;
  border-top: 2px solid #4D657A;
}

.btn-order {
  background-color: #B4FF00;
  color: #002340;
  padding: 10px 16px;
  border-radius: 20px;
  text-decoration-line: none;
  display: flex;
  justify-content: center;
}

.btn-order-tv {
  margin-top: 10px;
  color: #B4FF00;
  background-color: transparent;
  text-decoration-line: underline;
  display: flex;
  justify-content: center;
}

.btn-order:hover{
  color: #002340;
  text-decoration-line: underline;
}
.btn-order-tv:hover {
  color: #B4FF00;
  text-decoration-line: underline;
}

.tariff-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 35, 64, 0.8); 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.tariff-modal .modal-content {
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  width: 600px;
  color: #002340;
  position: relative;
}

.tariff-modal .close-btn {
  position: absolute;
  top: 5%;
  right: 30px;
  cursor: pointer;
}

.tariff-modal .tariff-modal-icon{
  text-align: center; 
  padding: 10px;
  margin-bottom: 20px;
}

.tariff-modal .tariff-modal-icon img{
  width: 100%;
  height: auto;
  max-width: 100px;
  max-width: 100px;
}

.tariff-modal .tariff-modal-button {
  margin-top: 20px;
  text-align: center;
}

.tariff-modal .modal-btn{
  color: #ffffff;
  background-color: #002340;
  padding: 10px 50px;
  border-radius: 20px;
  text-decoration: none;
}
.tariff-modal .modal-btn:hover {
  color:#ffffff;
  text-decoration: underline;
}
.tariff-modal .modal-mobile-line{
  display: none;
}

@media screen and (max-width: 767px) {
  .tariff-modal{
    align-items: flex-end;
  }
  .tariff-modal .modal-content{
    border-radius: 12px 12px 0 0;
  }
  .tariff-modal .modal-mobile-line{
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
  }
  .tariff-modal .modal-line{
    width: 50px;
    border-radius: 20px;
    border: 2px solid #7F909F;
    height: 5px;
    background-color: #7f909f;
  }
  .tariff-modal .close-btn {
    top: 10%;
  }
  
}

.switcher-wrapper{
  color: #002340;
  display: flex;
  justify-content: center;
  gap: 100px;
}
.switcher-button{
  display: flex;
  align-items: center;
  border: 2px solid #002340;
  border-radius: 20px;
  padding: 0 10px;
  /* gap: 10px; */
  cursor: pointer;
}
.switcher-button p{
  margin-bottom: 0;
}
.switcher-title{
  padding: 10px
}
.switcher-description{
  border-left: 2px solid #002340;
  padding: 10px
}
.switcher-button.active{
  background-color: #B4FF00;
  border-color:  #B4FF00;
  color: #002340;
}

@media screen and (max-width: 767px) {
  .switcher-wrapper{
    justify-content: center;
    gap: 20px;
  }
}

@media (min-width: 1200px) and (max-width: 1280px) {
  .container.narrow-width:has(.tariff-cards-group) {
    max-width: unset !important;
  }
  .tariff-prices-wrapper p {
    font-size: 11px;
  }
  .tariff-secondary-parameters p {
    font-size: 13px;
  }
  .tariff-main-parameters p {
    font-size: 13px;
  }
}