/**
 * 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:0 !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;}