/**
 * tk-ui.css — единый стиль кнопок и модалок ЧасПик (tkpay.ru).
 * Только оформление, логику/разметку не меняет. Полностью обратимо.
 * Палитра сайта: синий #194b7d/#14568c, коралл #f65741, шрифт Rubik.
 */

/* ===== Кнопки: единое скругление 10px ===== */
.btn-card,
.form__btn,
.payment-form__btn{
    border-radius:10px !important;
}
.btn-card{transition:filter .15s ease, transform .05s ease;}
.btn-card:hover{filter:brightness(.94);}
.btn-card:active{transform:translateY(1px);}
.form__btn{transition:filter .15s ease;}
.form__btn:hover{filter:brightness(.96);}

/* Кнопка «Баланс карты» на главной */
.payment-form__btn.button--red{transition:filter .15s ease;}
.payment-form__btn.button--red:hover{filter:brightness(.94);}

/* ===== Модалки ===== */
.modal-content{
    border-radius:16px !important;
    border:none !important;
    box-shadow:0 20px 60px rgba(25,75,125,.25) !important;
    overflow:hidden;
}
.modal-header{
    border-bottom:none !important;
    padding:20px 22px 8px !important;
    position:relative;
}
.modal-title{
    font-weight:600 !important;
    color:#194b7d !important;
    font-size:18px !important;
}
.modal-body{padding:6px 22px 24px !important;}

/* Крестик — аккуратная кнопка */
.modal .close{
    width:32px;height:32px;border-radius:9px;
    background:#eaf1f8 !important;color:#194b7d !important;opacity:1;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;line-height:1;text-shadow:none;margin:0;float:none;
    position:absolute;right:16px;top:16px;
}
.modal .close:hover{background:#dbe7f3 !important;color:#12385e !important;opacity:1;}

/* Поля ввода в модалках — рамка, скругление, фокус */
.modal .form-field__input,
.modal input[type="text"],
.modal input[type="tel"],
.modal input[type="number"]{
    border:1.5px solid #dbe4ee !important;
    border-radius:10px !important;
    min-height:46px;
    padding:0 14px !important;
    background:#f7fafc !important;
    font-size:16px !important;
    box-shadow:none !important;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.modal .form-field__input:focus,
.modal input[type="text"]:focus,
.modal input[type="tel"]:focus,
.modal input[type="number"]:focus{
    outline:none !important;
    border-color:#f65741 !important;
    box-shadow:0 0 0 3px rgba(246,87,65,.15) !important;
    background:#fff !important;
}

/* Кнопка действия «Добавить» внутри add-card модалок — коралловая CTA */
.modal .form__btn{
    background:#f65741 !important;
    color:#fff !important;
    padding:12px 26px !important;
    font-weight:600 !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    line-height:1.2 !important;
    height:auto !important;
    width:100% !important;
    margin-top:4px !important;
}
.modal .form__btn:hover{background:#e5442e !important;filter:none;}

/* ===== Шапка: почта пользователя и кнопка выхода ===== */
.btn-personal-link,
.btn-exit{border-radius:10px !important;}

/* ===== Модалка подтверждения (tk-lk.js) — замена нативного confirm() ===== */
#tk-confirm{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100000;display:none;
    align-items:center;justify-content:center;background:rgba(25,50,80,.45);padding:16px;}
#tk-confirm.open{display:flex;}
#tk-confirm .tk-confirm__box{background:#fff;border-radius:16px;box-shadow:0 24px 64px rgba(25,75,125,.32);
    max-width:410px;width:100%;padding:26px 26px 22px;box-sizing:border-box;
    font-family:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
#tk-confirm .tk-confirm__title{font-size:19px;font-weight:600;color:#194b7d;margin-bottom:10px;}
#tk-confirm .tk-confirm__msg{font-size:14.5px;line-height:1.55;color:#5a6b7d;margin-bottom:22px;}
#tk-confirm .tk-confirm__btns{display:flex;gap:10px;}
#tk-confirm button{flex:1;font:inherit;font-size:14.5px;font-weight:600;padding:12px;border-radius:10px;
    cursor:pointer;border:1.5px solid transparent;transition:filter .15s ease,border-color .15s ease;}
#tk-confirm .tk-confirm__cancel{background:#fff;color:#194b7d;border-color:#dbe4ee;}
#tk-confirm .tk-confirm__cancel:hover{border-color:#194b7d;}
#tk-confirm .tk-confirm__ok{background:#14568c;color:#fff;}
#tk-confirm .tk-confirm__ok:hover{filter:brightness(.94);}
#tk-confirm .tk-confirm__ok--danger{background:#f65741;}

/* ============================================================
   Страница карты (Поездки / Пополнения)
   ============================================================ */

/* --- Табы (Поездки / Пополнения / Обратно к списку) --- */
.submenu{display:flex !important;flex-wrap:wrap;gap:4px;list-style:none;padding:0 !important;
    margin:0 0 20px !important;border-bottom:1px solid #dbe4ee;}
.submenu-item{margin:0 !important;}
.submenu-lnk{display:inline-block;padding:11px 18px;color:#6c7f92;text-decoration:none;font-weight:500;
    border-bottom:2px solid transparent;border-radius:8px 8px 0 0;transition:color .15s,background .15s,border-color .15s;}
.submenu-lnk:hover{color:#194b7d;background:#f2f6fa;}
.submenu-item.current .submenu-lnk{color:#194b7d;font-weight:600;border-bottom-color:#f65741;}
.submenu-lnk.back_list{margin-left:auto;color:#194b7d;}

/* --- Фильтр по датам --- */
.form-inline .form-field__input{border:1.5px solid #dbe4ee !important;border-radius:10px !important;
    min-height:44px;padding:0 14px !important;background:#f7fafc !important;box-shadow:none !important;
    transition:border-color .15s,box-shadow .15s;}
.form-inline .form-field__input:focus{outline:none !important;border-color:#f65741 !important;
    box-shadow:0 0 0 3px rgba(246,87,65,.15) !important;background:#fff !important;}
.form-inline .form__btn{background:#14568c !important;color:#fff !important;}
.info_text{color:#6c7f92;font-size:13px;}

/* --- Таблица истории: на десктопе нормальная таблица (мобильные карточки — потом) --- */
@media (min-width:992px){
    table.table-card-mob{display:table !important;width:100%;border-collapse:collapse;}
    table.table-card-mob thead{display:table-header-group !important;}
    table.table-card-mob tbody{display:table-row-group !important;}
    table.table-card-mob tr{display:table-row !important;}
    table.table-card-mob td{display:table-cell !important;}
}
table.table-card-mob{width:100%;border-radius:12px;overflow:hidden;border:1px solid #e3ebf3;}
table.table-card-mob thead td{background:#eaf1f8;color:#194b7d;font-weight:600;font-size:13px;
    padding:13px 14px;border:none;text-align:center;}
table.table-card-mob tbody td{padding:12px 14px;border-top:1px solid #eef2f6;color:#33475b;
    font-size:14px;text-align:center;background:#fff;}
table.table-card-mob tbody tr:hover td{background:#f7fafc;}
table.table-card-mob a{color:#f65741;text-decoration:none;font-weight:500;}
table.table-card-mob a:hover{text-decoration:underline;}

/* --- ЧЕК: иконка вместо текстовой ссылки + зебра строк --- */
table.table-card-mob a.tk-receipt{display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:9px;background:#fdece9;color:#f65741;
    transition:background .15s,color .15s;}
table.table-card-mob a.tk-receipt:hover{background:#f65741;color:#fff;text-decoration:none;}
table.table-card-mob a.tk-receipt svg{width:19px;height:19px;}
table.table-card-mob tbody tr:nth-child(even) td{background:#f6f9fc;}
table.table-card-mob tbody tr:hover td{background:#eef4fa;}

/* Кнопка «Личный кабинет» в шапке (главная, для гостя) */
.btn-lk{border-radius:10px !important;transition:filter .15s ease;}
.btn-lk:hover{filter:brightness(.94);}

/* Ссылки под формой восстановления пароля — в одну строку */
.form__links{display:flex !important;flex-wrap:wrap;gap:6px 20px;align-items:center;}
.form__links-item{display:inline-block;}

/* Липкая шапка: кнопка «Личный кабинет» — по центру, а не прижата к верху.
   Штатный add.css задаёт .is-sticky .tools-sticky-desktop{margin-top:-14px} */
.is-sticky .tools-sticky-desktop{margin-top:0 !important;display:flex;align-items:center;}

/* Мобильный/планшет (<=1024px): «#» убрана из разметки, поэтому НЕ прячем
   теперь первый столбец (Дата) — штатное add.css прятало именно «#». */
@media screen and (max-width:1024px){
    .table.table-simple.table-card-mob thead tr td:first-child,
    .table.table-simple.table-card-mob tbody tr td:first-child{display:table-cell !important;}
}

/* Мобильный: красная вертикальная плашка «Отправить сообщение» (фикс. слева)
   перекрывала заголовок — не скрываем, а сдвигаем к низу. */
@media (max-width:768px){
    /* Круглая коралловая кнопка со значком письма — в пару к синей «вверх» справа */
    .init-form-popup{
        top:auto !important; bottom:18px !important; left:16px !important;
        width:46px !important; height:46px !important;
        min-width:46px !important; max-width:46px !important;
        min-height:46px !important; max-height:46px !important;
        border-radius:50% !important; box-sizing:border-box !important;
        padding:0 !important; margin:0 !important; transform:none !important;
        box-shadow:0 4px 14px rgba(0,0,0,.22) !important; overflow:hidden;
        background:#f65741 url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='m3%207%209%206%209-6'/%3E%3C/svg%3E") center/22px 22px no-repeat !important;
    }
    /* прячем родной текст и иконку — кнопка остаётся кликабельной */
    .init-form-popup .init-form-popup-inner{visibility:hidden !important;}
}

/* ===== Мобильные доработки ЛК ===== */
@media (max-width:600px){
  /* Фильтр дат: с/по по половине строки, «Показать» на всю ширину */
  .form-inline .form-group{display:flex;flex-wrap:wrap;gap:8px;}
  .form-inline .form-field__input{flex:1 1 calc(50% - 4px);min-width:0;width:auto !important;}
  .form-inline .form__btn{flex:1 1 100%;width:100%;}

  /* Карточка карты — компактнее */
  .card-image{width:190px !important;height:120px !important;background-size:cover !important;}
}

/* Модалка пополнения: каждый номинал с новой строки */
.packege_label{display:block !important;margin:0 0 10px !important;}

/* Пагинация истории (tk-lk.js) */
.tk-pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin:18px 0 6px;}
.tk-pager button{min-width:38px;height:38px;padding:0 10px;border:1.5px solid #dbe4ee;background:#fff;color:#194b7d;
    border-radius:9px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:border-color .15s,background .15s;}
.tk-pager button:hover:not(:disabled){border-color:#194b7d;}
.tk-pager button.tk-pager__cur{background:#f65741;color:#fff;border-color:#f65741;cursor:default;}
.tk-pager button:disabled{opacity:.45;cursor:default;}
.tk-pager__dots{padding:0 4px;color:#6c7f92;}

/* Скрытие строк пагинацией (перебивает table-row !important десктопного фикса) */
.table.table-simple.table-card-mob tbody tr.tk-row-hidden{display:none !important;}

/* ===== Мобильные доработки v2 ===== */
@media (max-width:600px){
  /* Заголовок «Карта …» — в одну строку (только на странице карты) */
  body:has(.submenu .back_list) h1{font-size:19px !important;line-height:1.25 !important;}
  /* Табы Поездки/Пополнения/Обратно — в одну строку (скролл при нехватке) */
  .submenu{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .submenu-lnk{white-space:nowrap;padding:10px 12px;}
  .submenu-lnk.back_list{margin-left:14px;}
  /* Номер на картинке карты — в одну строку */
  .card-number-new{font-size:11px !important;white-space:nowrap !important;letter-spacing:0 !important;}
}
/* Убрать лишний ₽ (FontAwesome \f158) после иконки чека на планшете/мобиле */
@media screen and (max-width:1024px){
  .table.table-simple.table-card-mob tbody tr td:last-child span:after{content:"" !important;}
}

/* Кнопка «Вход» — нормальная (была бледно-голубая .form__btn) */
#auth-submit,#forgot-submit,#reg-submit{background:#f65741 !important;color:#fff !important;}
#auth-submit:hover,#forgot-submit:hover,#reg-submit:hover{background:#e5442e !important;filter:none;}

/* Длинная почта в шапке — не вылезает за край (обрезаем многоточием). Стиль не меняем. */
.btn-personal-link{max-width:230px;overflow:hidden;}
.btn-personal-link a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}






/* ============================================================
   Волжск — вкладки «Услуги | Пополнить баланс» + сворачиваемый email
   ============================================================ */
.tk-vtabs{margin-top:4px}
.tk-tabnav{display:flex;gap:8px;border-bottom:1px solid #e3ecf5;margin-bottom:16px}
.tk-tab{-webkit-appearance:none;appearance:none;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 14px;font-size:15px;font-weight:600;color:#7a8a9a;cursor:pointer;font-family:inherit}
.tk-tab:hover{color:#194b7d}
.tk-tab.active{color:#194b7d;border-bottom-color:#f4552f}
.tk-tabpanel{display:none}
.tk-tabpanel.active{display:block}
.tk-vtabs .packege_label{display:flex;align-items:center;gap:10px;margin-bottom:8px;cursor:pointer}
.tk-sum-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tk-tabpanel[data-panel="balance"] .card-sum-id{display:block}
/* Правая колонка «email + Оплатить» — единообразно для волжска и пакетов */
.tk-pay-foot .user-email-input{display:block;max-width:100%;margin-bottom:12px}
.tk-pay-foot .card-submit{display:block}
/* Поля ввода в стиле кнопок: скруглённые, аккуратная рамка, высота как у кнопок */
.card-item .card-sum-id:not([type="hidden"]),
.card-item .user-email-input{
  border-radius:10px !important;border:1.5px solid #cdd8e4 !important;background:#fff !important;
  height:45px !important;padding:8px 16px !important;font-size:15px !important;
  box-shadow:none !important;box-sizing:border-box !important;color:#243444 !important;
}
.card-item .card-sum-id:not([type="hidden"]):focus,
.card-item .user-email-input:focus{border-color:#2b6cb0 !important;outline:none !important;}
.card-item .card-sum-id::placeholder,.card-item .user-email-input::placeholder{color:#9fb0c2;}

/* ============================================================
   ЛК — модалка «Пополнить карту» для волжска (Услуги | Баланс)
   ============================================================ */
.tk-modal-dialog{max-width:460px;margin:40px auto;width:auto;}
.tk-modal{padding:2px;}
.tk-modal .tk-tabnav{display:flex;border:1px solid #d7e2ef;border-radius:12px;background:#f1f5fa;margin-bottom:18px;padding:0;}
.tk-modal .tk-tab{flex:1;-webkit-appearance:none;appearance:none;background:transparent;border:none;border-radius:9px;margin:3px;padding:9px 8px;font-size:15px;font-weight:600;color:#6b7a8a;cursor:pointer;font-family:inherit;}
.tk-modal .tk-tab.active{background:#fff;color:#194b7d;box-shadow:0 1px 4px rgba(20,65,105,.12);}
.tk-modal-lbl{font-size:14px;font-weight:600;color:#33475b;margin:0 0 10px;}
.tk-svc{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid #eef3f8;cursor:pointer;margin:0;}
.tk-svc:last-child{border-bottom:none;}
.tk-svc input{width:18px;height:18px;accent-color:#194b7d;flex:0 0 auto;margin:0;}
.tk-svc-n{color:#33475b;font-size:14.5px;}
.tk-svc-p{margin-left:auto;font-weight:700;color:#194b7d;white-space:nowrap;padding-left:12px;}
.tk-modal .card-sum-id{width:100% !important;max-width:none !important;}
.tk-modal-hint{color:#8a97a5;font-size:12.5px;margin-top:8px;}
.tk-modal .card-range-big{color:#c0392b;font-size:12.5px;margin-top:8px;font-weight:600;}
.tk-modal-foot{margin-top:18px;}
.tk-modal-sum{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eef3f8;padding-top:14px;margin-bottom:14px;font-size:15px;color:#5b6b7d;}
.tk-modal-sum b{color:#194b7d;font-size:18px;}
.tk-modal .tk-modal-pay{display:block;width:100%;}

/* ============================================================
   Мобильный: на узких экранах контейнер теряет паддинг, а отрицательные
   margin у .row прижимают инфу/номиналы к левому краю. Обнуляем margin строк
   карты — паддинг колонок (15px) даёт нормальный отступ по краям.
   ============================================================ */
@media (max-width: 767px){
  .card-item > form > .row{ margin-left: 0 !important; margin-right: 0 !important; }
}

/* ============================================================
   Email для чека — компактный вид: текст + синяя ссылка, отступ над кнопкой
   ============================================================ */
/* «Email для чека» — мельче, менее заметный */
.card-header.tk-email-head{font-size:13px !important;font-weight:600 !important;color:#8a97a5 !important;margin:0 0 6px !important;}
/* Компактный текст email + ссылка, кнопка прижата снизу */
.tk-email-view{font-size:13.5px;color:#33475b;line-height:1.5;margin:0 0 10px;word-break:break-word;}
.tk-email-view .tk-email-ic{color:#9fb0c2;margin-right:2px;}
.tk-email-view .tk-email-addr{color:#33475b;}
.tk-email-view .tk-email-link{color:#2b6cb0;cursor:pointer;font-size:13px;margin-left:8px;text-decoration:none;}
.tk-email-view .tk-email-link:hover{text-decoration:underline;color:#194b7d;}
/* Режим ввода: поле по ширине email, «Сохранить» рядом, кнопка остаётся снизу */
.tk-email-edit{display:block;margin:0 0 10px;}
.tk-email-edit .user-email-input{display:inline-block;width:240px;max-width:100%;margin:0;vertical-align:middle;height:40px !important;}
.tk-email-edit .tk-email-save{color:#2b6cb0;cursor:pointer;font-size:13px;margin-left:10px;text-decoration:none;vertical-align:middle;white-space:nowrap;}
.tk-email-edit .tk-email-save:hover{text-decoration:underline;color:#194b7d;}

/* ============================================================
   Планшет/мобильный: последние штрихи
   ============================================================ */
/* Кнопка «Личный кабинет» (и email/Выйти, когда авторизован) — к правому краю меню */
.mobile-lk-container{ text-align:right !important; padding-right:15px; }
/* Форма «Баланс карты» — «капсула»: поле и кнопка в одном белом контейнере.
   На мобильном НЕ переносим в две строки — поле сжимается, остаётся одна строка. */
.payment-form{
  display:flex !important; flex-wrap:nowrap !important; align-items:center; gap:5px;
  background:#fff !important;
  border:1px solid #e6edf5 !important;
  border-radius:14px !important;
  padding:5px !important;
  box-shadow:0 4px 18px rgba(20,65,105,.08) !important;
}
.payment-form__input{
  flex:1 1 auto; min-width:0; width:auto !important; margin:0 !important;
  background:transparent !important;
  border:none !important; border-radius:10px !important;
  box-shadow:none !important;
  height:46px !important; padding:0 16px !important;
}
.payment-form__input:focus{outline:none !important;}
.payment-form__btn{
  flex:0 0 auto; white-space:nowrap;
  border-radius:10px !important;
  height:46px !important; padding:0 26px !important;
}
@media (max-width:767px){
  .payment-form{ padding:4px !important; flex-direction:row !important; flex-wrap:nowrap !important; }
  .payment-form__input{ width:auto !important; flex:1 1 auto !important; min-width:0 !important; margin:0 !important; padding:0 12px !important; font-size:15px !important; height:44px !important; }
  .payment-form__btn{ width:auto !important; flex:0 0 auto !important; padding:0 14px !important; font-size:13px !important; height:44px !important; }
}
/* Узкие экраны: короткий текст кнопки «Баланс» (полный «Баланс карты» — для скринридеров) */
@media (max-width:480px){
  .payment-form__btn{ font-size:0 !important; }
  .payment-form__btn::after{ content:"Баланс"; font-size:13.5px; font-weight:600; color:#fff; white-space:nowrap; }
}