/* Start:/bitrix/templates/ups/css/style.css?176276194218883*/
:root{--ink:#0f141a;--line:#1b2026;--bw:1px;--fs:13px;--err:#c60b0b;--brand:#50719a}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font:var(--fs)/1.35 Arial,Helvetica,sans-serif;font-size:12px}
html, body {
  height: 100%;
}
body.page {
  margin: 0;
}

.wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1 0 auto;
  margin-bottom:40px;
}
h1 {text-align:center;font-size:16px;}
h2 {font-size:14px}
label{cursor:pointer;}
a{color:var(--brand);font-weight:700;text-decoration:none}
.wrap{max-width:1200px;margin:16px auto 0px;padding:12px 0px 0px;background:#fff}
.section{margin:0;background:#fff;border:var(--bw) solid var(--line)}
.section>.head{display:flex;align-items:center;gap:8px;min-height:34px;padding:6px 10px;font-weight:700;background:#95b3d7;border-bottom:var(--bw) solid var(--line)}
.num{display:inline-block;width:20px;height:20px;margin-right:6px;font-size:12px;line-height:18px;text-align:center;border:1px solid #000;background:#fff}
.head-note{font-weight:400;font-size:10px}
.head-note--left{margin-left:10px}
.head-note--center{margin-left:auto;margin-right:90px;}
.section-error{margin-left:auto;font-size:11px;color:var(--err);display:none}
.section-error.visible{display:inline}
.main-grid{display:grid;grid-template-columns:58% 1fr;gap:0}
.col-left .section{border-right:none}
.col-right .section{border-left:1px solid #000}
.col-left .section + .section{border-top:none}
.col-right .section + .section{border-top:none}
.pair38{display:grid;grid-template-columns:58% 1fr;gap:0;align-items:stretch}
.pair38 .section{display:flex;flex-direction:column}
.pair38 .section .head{flex:0 0 auto}
.pair38 .section .body{flex:1 1 auto;display:block}
.pair38 .left.section{border-right:none;border-top:0}
.pair38 .right.section{border-left:1px solid #000;border-top:0}
.rows.new-style{display:block}
.rows.new-style .row{position:relative;display:flex;flex-direction:column;padding:10px 8px 8px;border-top:1px solid #000}
.rows.new-style .row:first-child{border-top:none}
.rows.new-style .row label{position:absolute;top:1px;left:8px;font-size:10px;color:#999}
.rows.new-style .row input{margin:3px 0 0;padding:0;border:none;outline:none;font:inherit;font-size:12px}
.req-msg{position:absolute;top:1px;right:8px;color:var(--err);font-size:10px;display:none}
.req-msg.visible{display:inline}
.error-text{color:var(--err)!important}
.content-3{display:grid;grid-template-columns:3fr 1fr 2fr;gap:8px;padding:10px}
.cell{position:relative;display:flex;flex-direction:column;padding:18px 8px 8px;border:1px solid #000}
.cell label{position:absolute;top:4px;left:8px;font-size:10px;color:#999}
.cell input,.cell textarea{width:100%;margin:0;padding:0;border:none;outline:none;font:inherit}
.cell textarea{min-height:117px}
.middle{display:flex;flex-direction:column;gap:8px}
.gab .row{margin-bottom:6px;padding:4px;border:1px solid #000}
.gab .fields{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:2px}
.gab .fields input{width:100%;height:24px;padding:2px;text-align:center;font:inherit;border:1px dashed #000}
.gab .note{text-align:center;font-size:7px;color:#999}
.line-field{position:relative;margin-top:10px}
.line-field input{width:100%;border:none;border-bottom:1px dashed #000;outline:none;font:inherit}
.line-field .note{margin-top:4px;font-size:12px;color:#555}
.doc-row{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.cb{display:inline-flex;align-items:center;gap:6px;font-size:11px;cursor:pointer}
.cb input{width:13px;height:13px;margin:0}
.withnote{flex:1;min-width:220px}
.withnote input{width:100%;border:none;border-bottom:1px dashed #000;outline:none;font:inherit}
.withnote .note{margin-top:4px;font-size:12px;color:#555}
.agree-left{margin:10px;padding:10px 0;font-size:11px;line-height:1.4}
.sign-right{margin-top:10px;padding:10px 0;text-align:center}
.sign-right .line{height:28px;margin-bottom:4px;border-bottom:1px solid #000}
.sign-right .note{font-size:12px;color:#555}
.block5 .body{padding:8px 10px;font-size:11px;line-height:1.4}
.block6{display:flex;flex-direction:column}
.block6 .row-a{display:grid;grid-template-columns:6fr 4fr}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.block6 .right-opts{padding:10px;border-left:1px solid #000}
.right-opts .flex-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rect{position:relative;flex:1;padding:6px;border:2px solid #000;margin-top:5px}
.rect input{width:100%;border:none;outline:none;font:inherit}
.rect .note{position:absolute;right:4px;bottom:2px;font-size:11px;color:#555}
.right-opts .rect + .rect{margin-top:8px}
.block6 .row-b{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;border-top:1px solid #000}
.inn-cell{position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.dash-input{width:100%;border:none;border-bottom:1px dashed #000;outline:none;font-size:12px;text-align:center}
.hint{margin-top:4px;font-size:12px;color:#555;text-align:right}
.block7 .row1{display:flex;gap:10px;flex-wrap:wrap;padding:10px;font-size:12px}
.block7 .row1 .txt{min-width:120px}
.block7 .row2{position:relative;padding:10px;border-bottom:0}
.block7 .row2 input{width:100%;padding:0;border:none;outline:none;font:inherit}
input:focus,input:focus-visible{outline:none;box-shadow:none}
.block8 .body{padding-top:0}
.block8 .text-confirm{padding:10px;font-size:11px;line-height:1.4}
.block8 .text-confirm .note{margin-top:20px;font-size:10px;color:#999}
.block8 .row-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0}
.block8 .cell8{position:relative;display:flex;flex-direction:column;padding:18px 8px 8px;border-top:1px solid #000}
.block8 .cell8:first-child{border-right:1px solid #000}
.block8 .cell8 label{position:absolute;top:4px;left:8px;font-size:10px;color:#999}
.block8 .cell8 input{width:100%;margin:0;padding:0;border:none;outline:none;font:inherit}
.header{border:none}
.header .inner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0}
.contact{font-size:12px;line-height:1.4}
.social-icons{margin-top:6px;display:flex;gap:8px}
.social-icons img{width:20px;height:20px;display:block}
.logo{font-weight:700;font-size:20px}
.logo img{width:135px;height:auto;border:0}
.pkg label{font-size:12px;display:block;margin-bottom:4px}
.header .pkg input{width:160px;height:26px;border:1px solid #000}
.col-right{border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000}
.section.block5,.section.block6,.section.block7{border-left:none;border-right:none}
.section.block7{border-bottom:0}
.blur{filter:blur(3px);pointer-events:none;user-select:none}
.blur-medium{filter:blur(1.2px);pointer-events:none;user-select:none}
.hidden_mobile{display:inline}
.footer{margin-top:20px;padding:15px 0px;}
.footer .agree{margin-bottom:12px}
.footer .agree input{margin-right:6px}
.footer .btn{padding:10px 20px;font-size:12px;border:none;background:var(--brand);color:#fff;cursor:pointer}
.footer .btn.small{padding: 7px 10px;font-size: 12px;border: none;background: var(--brand);color: #fff;margin-left: 5px;cursor: pointer;border-radius: 2px;}
.footer .btn:disabled{opacity:0.5;cursor:not-allowed}
.footer .cost{margin:12px 0;padding:10px;border:1px dashed #000}
.footer .options{display:flex;gap:10px;flex-wrap:wrap}
.footer .option{border:1px solid #000;padding:8px 12px;cursor:pointer;user-select:none}
.footer .option.active{background:var(--brand);color:#fff;border:none}
.footer .order-done{margin-top:20px;padding:30px;text-align:center}
.footer .order-done .btns{margin-top:10px;display:flex;gap:10px;justify-content: center;}
.footer .order-done .title {display:block;padding-bottom:20px;font-weight:bold;text-align:center;font-size:13px}
#innFooter, #third_fio_input, #third_org_input {font-size:12px;padding:8px}
#sendEmailInput, #sendEmailInputCount {font-size:12px;padding:5px;min-width:200px}
.footer_block {margin: 20px 30px 20px 0px}
.footer_block .title{font-size:12px; margin-bottom:5px; font-weight:bold}
#confirmData {display:block;margin-bottom:6px;}
.confirm-label{display:flex;align-items:flex-start;gap:6px;font-size:12px;line-height:1.5}
.confirm-label input{margin-top:2px}
.third_person{margin-top:20px}
.third_person input{width:100%}
.footer_main {display:flex}
.agree-left .req-msg{
  position: static;
  display: none;
  margin-top: 6px;
  font-size: 11px;
  color: var(--err);
  margin-left: 26px;
}
.agree-left .req-msg.visible{
  display: block;
}
#block6, #block7, #block8 { position: relative; }
.hover-hint{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  color:#3c5675;
  padding:6px 10px;
  border-radius:4px;
  font-size:12px;
  text-align:center;
  z-index:10;
  font-weight:bold;
  display:none;
  pointer-events:none;
}
#block8 .hover-hint{
  top: auto;
  bottom:20%;
}
#block7 .hover-hint{
  top: 60%;
}
html {
  scroll-behavior: smooth;
}
#gabSection .req-msg{
  display:none;
}
.site-footer {
  background: #f3f3f3;
  color: #000;
  padding: 20px 0;
  font-size: 12px;
  flex: 0 0 auto;
  margin-top: auto;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-menu ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.footer-menu a {
  color: #000;
  text-decoration: none;
  transition: color .2s;
}
.footer-copy p {
  margin: 2px 0;
  opacity: 0.8;
}
/* Кнопки — как на главной (копия глобального .footer .btn) */
.lk .btn{padding:10px 20px;font-size:12px;border:none;background:var(--brand);color:#fff;cursor:pointer;border-radius:2px}
.lk .btn.small{padding:7px 10px;font-size:12px;margin-left:5px}
.lk .btn:disabled{opacity:.5;cursor:not-allowed}

#sendEmailInputInvoice, #sendEmailInputBill {
    height: 27px;
    width: 200px;
}

/* Авторизация */
.block-auth .body{padding:10px}
.auth-form .auth-actions{display:flex;align-items:center;gap:12px;margin-top:10px}
.auth-link{font-weight:400}

/* Таблица заказов */
.orders-list-wrap{padding:10px}
.orders-list{width:100%;border-collapse:collapse;font-size:12px}
.orders-list th,
.orders-list td{border-top:1px solid #000;padding:8px 10px;vertical-align:middle}
.orders-list thead th{background:#f7f7f7;border-top:none;text-align:left;font-weight:700}
.orders-list .ta-right{text-align:right}
.orders-list a{text-decoration:underline}
.orders-list button{white-space:nowrap}
.bx-sls .dropdown-block{
    border: none;
    background: none;
    box-shadow: none;
    padding: 0 22px 0 20px;
}
.bx-sls .dropdown-icon{
    left: 0px;
}
.bx-sls .bx-ui-sls-fake, .bx-sls .bx-ui-sls-route{
	height: 30px;
}
#tar_zone .req-msg{
	display:none!important;
}
#error {
    position: relative;
    color: red;
    font-weight: bold;

    text-align: center;
}
#map{
	width:100%;
}
.invoice-mode [data-no-invoice] { display: none !important; }
.invoice-mode [data-invoice-only] { display: block !important; }

.pay-grid {
    display: flex;
    gap: 16px 24px;
    padding: 20px 10px;
    border-top: 1px solid #000;
    width: 100%;
    justify-content: space-between;
}
.btn.loading { opacity:.7; pointer-events:none; }
.pay-col .cb {
  display: block;
  margin-bottom: 8px;
  line-height: 1.4;
}

.pay-col .inn-cell {
  margin-top: 8px;
}
#qr_code img{
	width: 80px;
	height: auto;
}
#invoice_code{
	font-size:20px;
	font-weight:bold;
}
#orderMain{
	border: 2px dotted #000 !important;
}
/* === ≤768px: складываем оплату в колонку === */
@media (max-width: 768px) {
  .pay-grid {
    display: flex;            /* уже flex — просто меняем направление */
    flex-direction: column;   /* одна колонка */
    gap: 12px;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
  }
}

/* === ≤700px: мобильная таблица заказов (как было) === */
@media (max-width:700px){
  .orders-list thead{display:none}
  .orders-list tr{display:block;border:1px solid #000;margin-bottom:10px}
  .orders-list td{display:flex;justify-content:space-between;gap:10px;border:none;border-top:1px solid #000}
  .orders-list td:first-child{border-top:none}
  .orders-list td::before{content:attr(data-col);font-weight:700}
  .orders-list .ta-right{text-align:left}
}

/* === ≤900px: убираем сложные сетки — всё в одну колонку по потоку === */
@media (max-width:900px){
  .wrap{max-width:100%;padding:10px}

  /* вместо двух колонок — обычный поток */
  .main-grid{display:block}

  /* сохраняем рамки секций */
  .col-left .section{border-right:1px solid #000}
  .col-right .section{border-left:1px solid #000;border-right:1px solid #000}
  .col-right .section + .section{border-top:none}

  /* пара блоков (#block3 и #block8) — тоже в поток, один под другим */
  .pair38{display:block}
  .pair38 .left.section,
  .pair38 .right.section{
    border-left:1px solid #000;
    border-right:1px solid #000;
    border-top:none;
  }

  .hidden_mobile{display:none}
}

/* === ≤700px: всё, что могло быть «две колонки», делаем одной === */
@media (max-width:700px){
  body{font-size:11px}
  .section>.head{padding:6px 8px;min-height:30px}
  .num{width:18px;height:18px;line-height:16px;font-size:11px}

  /* главный контент из 3 блоков -> одна колонка */
  .content-3{
    grid-template-columns: 1fr;
    grid-auto-rows:auto;
  }
  .content-3 > :nth-child(1){grid-column:auto}

  /* средняя колонка (вес/места) — тоже в столбик */
  .middle{
    flex-direction: column;
    gap: 8px;
  }
  .middle .cell{
    flex: 1;
    max-height: none; /* не обрезаем */
  }

  /* правый столбец «вид сервиса»: всё по одной */
  .block6 .row-a{grid-template-columns:1fr}
  .block6 .right-opts{border-left:none;border-top:1px solid #000;margin-top:6px}

  /* две колонки чекбоксов -> одна */
  .two-col{grid-template-columns:1fr}

  /* нижняя сетка оплат/плательщика -> одна */
  .block6 .row-b{grid-template-columns:1fr}

  /* подтверждение доставки: две ячейки -> одна */
  .block8 .row-grid2{grid-template-columns:1fr}
  .block8 .cell8:first-child{border-right:none}

  /* поля справа не зажимаем по ширине */
  .rect {max-width:none; width:100%}

  .right-opts .flex-row{justify-content:flex-start}
}

/* === ≤480px: мелкие правки (как было, с доп. усилениями) === */
@media (max-width:480px){
  #block7, #block8, .pkg, .sign-right {display:none}
  body{font-size:9.5px}
  .header .inner{flex-wrap:wrap;gap:8px}
  .logo img { max-width:100%; height:auto; }
  .header .pkg input{ width:100%; max-width:130px; }

  /* дублируем, чтобы точно было в столбик на самых узких */
  .middle{flex-direction:column}
  .cb{font-size:9.5px}
  .withnote{min-width:unset}
  .block8 .cell8{padding:14px 8px 8px}
  .footer_block { margin:10px 0; }
  .footer_main {display:block}
}
/* ПАНЕЛЬ ПРОФИЛЕЙ */
.profiles-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: #f7f9fc;
  border: 1px solid #e6edf5;
  border-radius: 10px;
}

.profiles-bar label {
  color: #3c5675;
  font-weight: 600;
  margin-right: 2px;
}

.profiles-bar select {
  width: 60%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #ced7e1;
  border-radius: 8px;
  background: #fff;
  color: #1f2a44;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
  outline: none;
  appearance: none;
  background-image:
     linear-gradient(45deg, transparent 50%, #8795a7 50%),
     linear-gradient(135deg, #8795a7 50%, transparent 50%),
     linear-gradient(#fff, #fff);
  background-position:
     calc(100% - 18px) 16px,
     calc(100% - 12px) 16px,
     calc(100% - 36px) 0.6em;
  background-size: 6px 6px, 6px 6px, 1px 2em;
  background-repeat: no-repeat;
}
.profiles-bar select:focus {
  border-color: #6aa3ff;
  box-shadow: 0 0 0 3px rgba(106,163,255,.2);
}

.profiles-bar .btn.small,
#createProfileBtn.btn.small {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .2s ease;
}

.profiles-bar .btn.small:active,
#createProfileBtn.btn.small:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(59,116,255,.25);
}

#profilesMsg {
  color: #2f6a2f;
  font-size: 13px;
}

/* Когда селект скрыт — подравниваем отступы, чтобы панель не «сыпалась» */
.profiles-bar.--no-profiles {
  justify-content: flex-start;
}
/* пока висит "тихий" режим — панель городов скрыта */
.bx-ui-sls-input-block[data-ups-quiet] .bx-ui-sls-pane { display:none !important; }
.bx-ui-sls-input-block[data-ups-quiet] .bx-ui-sls-loader { display:none !important; }
/* --- кнопка удаления профиля --- */
#deleteProfileBtn.delete-profile-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #d33; /* красный фон */
  position: relative;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#deleteProfileBtn.delete-profile-btn:hover {
  background: #b00;
  transform: scale(1.05);
}

#deleteProfileBtn.delete-profile-btn:active {
  background: #900;
  transform: scale(0.97);
}

/* Белый крестик */
#deleteProfileBtn.delete-profile-btn .icon {
  position: relative;
  width: 12px;
  height: 12px;
}

#deleteProfileBtn.delete-profile-btn .icon::before,
#deleteProfileBtn.delete-profile-btn .icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: white;
  border-radius: 1px;
  transform-origin: center;
}

#deleteProfileBtn.delete-profile-btn .icon::before {
  transform: translateY(-50%) rotate(45deg);
}
#deleteProfileBtn.delete-profile-btn .icon::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* Адаптация под тёмные темы (если надо) */
@media (prefers-color-scheme: dark) {
  #deleteProfileBtn.delete-profile-btn {
    background: #e33;
  }
}

/* End */
/* /bitrix/templates/ups/css/style.css?176276194218883 */