/* ================== FARE PICKER (модалка тарифов) ================== */

/* оверлей */
.fare-modal__overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 10000001 !important;
  display: none;
}

/* окно */
.fare-modal{
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: min(880px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  color:#006C83;
  z-index: 10000002 !important;
  display: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* шапка */
.fare-modal__header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 18px;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-weight:700; font-size:18px;
}
.fare-modal__close{
  cursor:pointer; font-size:20px; font-weight:700; line-height:1;
  color:#006C83; padding:4px 6px; border-radius:8px;
}

/* тело окна */
.fare-modal__body{
  overflow:auto;
  max-height: calc(100vh - 24px - 58px - 16px);
  padding: 12px 16px max(24px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  padding-bottom: 56px;                 /* запас под последнюю карточку */
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}

/* карточка тарифа */
.fare-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:14px; margin-bottom:12px;
}
.fare-card:last-child{ margin-bottom:50px; }

.fare-card__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:8px;
}
.fare-card__title{ font-weight:700; font-size:16px; }
.fare-card__price{ font-weight:800; font-size:18px; white-space:nowrap; }

.fare-card__list{ margin:6px 0 0; padding:0 0 0 18px; }
.fare-card__list li{ margin:3px 0; font-size:14px; }

.fare-card__actions{ margin-top:10px; display:flex; justify-content:flex-end; }
.fare-btn{
  appearance:none; border:0; background:#006C83; color:#fff;
  font-weight:700; font-size:14px; padding:8px 12px; border-radius:10px; cursor:pointer;
}
.fare-btn--ghost{ background:#fff; color:#006C83; border:1px solid #006C83; }

/* фильтры в модалке */
.fare-modal__filters{ display:flex; gap:8px; padding:8px 16px 0; flex-wrap:wrap; }
.fare-chip{
  border:1px solid #006C83; color:#006C83; background:#fff;
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; cursor:pointer;
}
.fare-chip.active{ background:#006C83; color:#fff; }

/* иконки-метки в списках условий */
.fare-li{ display:flex; align-items:flex-start; gap:8px; line-height:1.35; }
.fare-li__icon{ font-size:16px; line-height:1; margin-top:1px; }
.fare-li--ok .fare-li__icon,
.fare-li--no .fare-li__icon{ filter:none; }

/* служебное: прячем "добавить багаж" когда надо */
.t396__artboard .extra-luggage.extra-luggage--hidden,
.t396__artboard .js-extra-luggage-mount .extra-luggage.extra-luggage--hidden{
  display: none !important;
}

/* чтобы ничто не «гасило» клики по кнопке Изменить тариф */
.t-popup.t-popup_show .uc-ticket_info .change_tariff{
  position: relative; z-index: 20; pointer-events: auto;
}
.t-popup.t-popup_show .uc-ticket_info .change_tariff .tn-atom{
  cursor: pointer;
}

/* === Кружок-иконка "!" рядом с "Обмен/Возврат" === */
.help-ico{
  display:inline-grid;
  place-items:center;
  width:16px;
  aspect-ratio:1 / 1;
  margin-left:8px;
  border-radius:50%;
  border:1px solid currentColor;
  font-weight:800;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  vertical-align:middle;
  box-sizing:content-box;
}
.help-ico::before{ content:"!"; }
.help-ico:hover{ filter:contrast(1.06); }

/* цвет кружка в инфоблоке — фирменный */
.info_change_before .help-ico,
.info_return_before .help-ico { color:#006C83; }

/* в списках тарифов — цвет строки */
.fare-li .help-ico{ color:inherit; opacity:.9; }
.fare-li .help-ico:hover{ opacity:1; }

/* === Мини-попап (универсальный): оверлей + окно === */
.rules-help__overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  z-index:10000001 !important;
}

.rules-help{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 32px));
  height:auto;
  max-height:85vh;
  background:#fff;
  color:#0b1f35;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  display:none;
  z-index:10000002 !important;
  overflow:auto;
  font-family:inherit;
}

.rules-help__header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-weight:800; font-size:16px; color:#006C83;
}

.rules-help__close{
  cursor:pointer; font-weight:800; font-size:18px;
  padding:4px 8px; line-height:1;
}

.rules-help__body{
  padding:12px 14px; font-size:14px; line-height:1.45;
}
.rules-help__body p{ margin:0 0 10px; }

/* === Исправляем форму кружка "!" внутри инфоблока Tilda === */
.t396__elem .help-ico,
.tn-atom .help-ico {
  width:16px !important;
  height:16px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid currentColor !important;
  font-size:12px !important;
  line-height:1 !important;
  box-sizing:border-box !important;
  background:transparent !important;
  vertical-align:middle !important;
  transform:none !important;
}

.t396__elem .help-ico::before {
  content:"!" !important;
  font-weight:800 !important;
  transform:none !important;
}

/* для уверенности: сбрасываем внутренние трансформации у контейнера */
.t396__elem[data-elem-type="text"] .tn-atom {
  transform:none !important;
  line-height:1.3 !important;
}

/* =========================================================
   АДАПТИВ ДЛЯ FARE-MODAL + RULES-HELP
   ========================================================= */

/* 0–382px — очень узкие экраны */
@media (max-width: 382px){
  /* FARE MODAL — мобильный фуллскрин */
  .fare-modal{
    left:auto; top:auto; transform:none;
    inset: calc(env(safe-area-inset-top, 0px) + 8px)
           8px
           calc(env(safe-area-inset-bottom, 0px) + 8px)
           8px !important;
    width:auto; height:auto; max-height:none; border-radius:12px !important;
  }
  .fare-modal__body{
    max-height:none !important;
    height: calc(100% - 58px - 16px) !important;
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 20px)) !important;
  }

  /* RULES-HELP — центрированная мобильная модалка */
  .rules-help{
    left:50% !important; top:50% !important;
    transform:translate(-50%, -50%) !important;
    width:min(92vw, 360px) !important;
    height:auto !important;
    max-height:85vh !important;
    overflow:auto !important;
    border-radius:14px !important;
    box-shadow:0 18px 40px rgba(0,0,0,.30) !important;
    z-index:10000002 !important;
  }
  .rules-help__header{
    padding:10px 16px 8px !important;
    font-size:16px !important;
  }
  .rules-help__close{
    position:absolute !important;
    top:6px !important; right:8px !important;
    font-size:22px !important;
    padding:6px 10px !important;
    line-height:1 !important;
  }
  .rules-help__body{
    padding:14px 16px !important;
    font-size:15px !important;
    line-height:1.45 !important;
  }
  .rules-help__overlay{
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,.5) !important;
    z-index:10000001 !important;
  }
}

/* 383–410px — компактные телефоны */
@media (min-width: 383px) and (max-width: 410px){
  .fare-modal{
    left:auto; top:auto; transform:none;
    inset: calc(env(safe-area-inset-top, 0px) + 8px)
           8px
           calc(env(safe-area-inset-bottom, 0px) + 8px)
           8px !important;
    width:auto; height:auto; max-height:none; border-radius:12px !important;
  }
  .fare-modal__body{
    max-height:none !important;
    height: calc(100% - 58px - 16px) !important;
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 20px)) !important;
  }

  .rules-help{
    left:50% !important; top:50% !important;
    transform:translate(-50%, -50%) !important;
    width:min(92vw, 360px) !important;
    height:auto !important;
    max-height:85vh !important;
    overflow:auto !important;
    border-radius:14px !important;
    box-shadow:0 18px 40px rgba(0,0,0,.30) !important;
    z-index:10000002 !important;
  }
  .rules-help__header{
    padding:10px 16px 8px !important;
    font-size:16px !important;
  }
  .rules-help__close{
    position:absolute !important;
    top:6px !important; right:8px !important;
    font-size:22px !important;
    padding:6px 10px !important;
    line-height:1 !important;
  }
  .rules-help__body{
    padding:14px 16px !important;
    font-size:15px !important;
    line-height:1.45 !important;
  }
  .rules-help__overlay{
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,.5) !important;
    z-index:10000001 !important;
  }
}

/* 411–766px — оставляем вид, добавляем только нижний отступ */
@media (min-width: 411px) and (max-width: 766px){
  .fare-modal__body{ padding-bottom: 28px !important; }
  .rules-help{ z-index:10000002 !important; }
  .rules-help__overlay{ z-index:10000001 !important; }
}

/* 767–980px */
@media (min-width: 767px) and (max-width: 980px){
  .fare-modal__body{ padding-bottom: 28px !important; }
  .rules-help{ z-index:10000002 !important; }
  .rules-help__overlay{ z-index:10000001 !important; }
}

/* 981–1278px */
@media (min-width: 981px) and (max-width: 1278px){
  .fare-modal__body{ padding-bottom: 28px !important; }
  .rules-help{ z-index:10000002 !important; }
  .rules-help__overlay{ z-index:10000001 !important; }
}

/* 1279–1332px */
@media (min-width: 1279px) and (max-width: 1332px){
  .fare-modal__body{ padding-bottom: 28px !important; }
  .rules-help{ z-index:10000002 !important; }
  .rules-help__overlay{ z-index:10000001 !important; }
}

/* 1333–1438px */
@media (min-width: 1333px) and (max-width: 1438px){
  .fare-modal__body{ padding-bottom: 28px !important; }
  .rules-help{ z-index:10000002 !important; }
  .rules-help__overlay{ z-index:10000001 !important; }
}

/* 1439–1678px */
@media (min-width: 1439px) and (max-width: 1678px){
  .fare-modal__body{ padding-bottom: 28px !important; }
  .rules-help{ z-index:10000002 !important; }
  .rules-help__overlay{ z-index:10000001 !important; }
}

/* 1679–1918px */
@media (min-width: 1679px) and (max-width: 1918px){
  .fare-modal__body{ padding-bottom: 28px !important; }
  .rules-help{ z-index:10000002 !important; }
  .rules-help__overlay{ z-index:10000001 !important; }
}

/* ≥1919px — базовый вид */
@media (min-width: 1919px){
  .fare-modal__body{ padding-bottom: 28px !important; }
  .rules-help{ z-index:10000002 !important; }
  .rules-help__overlay{ z-index:10000001 !important; }
}

/* === FARE-MODAL: поверх всех слоёв на всех устройствах === */
.fare-modal__overlay{
  z-index: 10000001 !important;
}

.fare-modal{
  z-index: 10000002 !important;
}