/* ===========================
   Responsive Starter CSS
   Mobile-first: 360, 576, 768, 992, 1200, 1440, 1920
   =========================== */

/* 1) Базовые переменные и сброс */
:root{
  --container-padding: 16px;
  --gap: 16px;

  /* Шкала отступов */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Типографика: clamp(min, fluid, max) */
  --fs-base: clamp(14px, 1.6vw, 18px);
  --fs-h1: clamp(28px, 5.2vw, 40px);
  --fs-h2: clamp(22px, 3.6vw, 32px);
  --fs-h3: clamp(18px, 2.6vw, 24px);

  --rounded: 12px;
}

/* Умеренный сброс */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height:1.5;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* 2) Контейнеры */
.container{
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  max-width: 100%;
}
.container.narrow { max-width: 720px; }
.container.wide   { max-width: 1920px; }

/* 3) Медиа-брейкпоинты (минимальные ширины) */
@media (min-width:360px){  .container{ max-width: 100%; } }   /* XS */
@media (min-width:576px){  .container{ max-width: 540px; } }   /* SM */
@media (min-width:768px){  .container{ max-width: 720px; } }   /* MD */
@media (min-width:992px){  .container{ max-width: 960px; } }   /* LG */
@media (min-width:1200px){ .container{ max-width: 1140px; } }  /* XL */
@media (min-width:1440px){ .container{ max-width: 1320px; } }  /* 2XL */
@media (min-width:1920px){ .container{ max-width: 1480px; } }  /* 3XL */

/* 4) Адаптивная сетка (CSS Grid) */
.row{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.col-1{ grid-column: span 1; }
.col-2{ grid-column: span 2; }
.col-3{ grid-column: span 3; }
.col-4{ grid-column: span 4; }
.col-5{ grid-column: span 5; }
.col-6{ grid-column: span 6; }
.col-7{ grid-column: span 7; }
.col-8{ grid-column: span 8; }
.col-9{ grid-column: span 9; }
.col-10{ grid-column: span 10; }
.col-11{ grid-column: span 11; }
.col-12{ grid-column: span 12; }

/* Быстрые пресеты сетки */
.grid-1{ display:grid; grid-template-columns:1fr; gap:var(--gap); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }

/* 5) Типографика */
h1{ font-size: var(--fs-h1); margin: var(--space-6) 0 var(--space-4); }
h2{ font-size: var(--fs-h2); margin: var(--space-5) 0 var(--space-3); }
h3{ font-size: var(--fs-h3); margin: var(--space-4) 0 var(--space-2); }
p{ margin: 0 0 var(--space-4); }

/* 6) Медиа (изображения/видео) */
img, video, canvas{ max-width:100%; height:auto; display:block; }

/* 7) Карточки (пример компонента) */
.card{
  background:#fff;
  color:#111;
  border-radius: var(--rounded);
  padding: var(--space-5);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  .card{ background:#171a21; color:#e7e7e7; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
}

/* 8) Утилиты отступов */
.mt-0{ margin-top: var(--space-0) !important; }
.mt-1{ margin-top: var(--space-1) !important; }
.mt-2{ margin-top: var(--space-2) !important; }
.mt-3{ margin-top: var(--space-3) !important; }
.mt-4{ margin-top: var(--space-4) !important; }
.mt-5{ margin-top: var(--space-5) !important; }
.mt-6{ margin-top: var(--space-6) !important; }
.mb-0{ margin-bottom: var(--space-0) !important; }
.mb-1{ margin-bottom: var(--space-1) !important; }
.mb-2{ margin-bottom: var(--space-2) !important; }
.mb-3{ margin-bottom: var(--space-3) !important; }
.mb-4{ margin-bottom: var(--space-4) !important; }
.mb-5{ margin-bottom: var(--space-5) !important; }
.mb-6{ margin-bottom: var(--space-6) !important; }

/* 9) Видимость (простые утилиты) */
.only-mobile{ display:block; }
.only-tablet, .only-desktop{ display:none; }

/* ≥576: планшеты и выше */
@media (min-width:576px){
  .only-mobile{ display:none !important; }
  .only-tablet{ display:block !important; }
}
/* ≥992: десктопы и выше */
@media (min-width:992px){
  .only-tablet{ display:none !important; }
  .only-desktop{ display:block !important; }
}

/* Сокрытие вверх/вниз (часто хватает этих трёх) */
.hide-xs-down{ display:none !important; }         /* скрыть только на XS (<576) — включите по месту */
@media (min-width:576px){ .hide-sm-up{ display:none !important; } } /* скрыть на ≥576 */
@media (min-width:992px){ .hide-lg-up{ display:none !important; } } /* скрыть на ≥992 */

/* 10) Ориентация устройства */
.only-portrait{ display:block; }
.only-landscape{ display:none; }
@media (orientation:landscape){
  .only-portrait{ display:none !important; }
  .only-landscape{ display:block !important; }
}

/* 11) Адаптивные пресеты сетки (частые кейсы) */
@media (min-width:576px){
  .sm\:grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
  .sm\:grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
}
@media (min-width:768px){
  .md\:grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
  .md\:grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
  .md\:grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
}
@media (min-width:1200px){
  .xl\:grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
  .xl\:grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
  .xl\:grid-6{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap); }
}

/* 12) Пример навигации (стек на мобиле, ряд на десктопе) */
.nav{
  display:flex; flex-wrap:wrap; gap: var(--gap);
  padding: var(--space-4) 0;
}
.nav a{
  text-decoration:none; padding:8px 12px; border-radius:8px;
  background: rgba(0,0,0,.06); color:inherit;
}
@media (prefers-color-scheme: dark){
  .nav a{ background: rgba(255,255,255,.08); }
}
@media (min-width:768px){
  .nav{ flex-wrap:nowrap; }
}

/* 13) Хелперы ширины */
.w-100{ width:100% !important; }
.max-w-sm{ max-width: 540px; }
.max-w-md{ max-width: 720px; }
.max-w-lg{ max-width: 960px; }
.max-w-xl{ max-width: 1140px; }
.max-w-2xl{ max-width: 1320px; }

/* 14) Пример адаптива таблиц/блоков (горизонтальный скролл на узких) */
.responsive-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width:768px){
  #main {
    padding: 100px 0 0 0;
  }

  .site-profile-point-menu,
  .site-company-points,
  .site-company-settings,
  .site-profile {
    position: unset;
  }

  .site-profile-point-menu .nav, .site-company-points .nav, .site-company-settings .nav, .site-profile .addon-information .nav {
    right: 20px;
    left: auto;
    top: -80px;
  }

  .site-profile[data-profile-type="partner"] .addon-information .nav {
    top: -20px;
  }

  .site-profile .editable-form form, .site-company-settings .editable-form form {
    width: 70%;
  }

  .site-profile .addon-information h2 .logotype {
    left: 20px;
    right: auto;
    top: 20px;
  }

  .site-profile .addon-information h2 .agency-percent {
    right: 20px;
    left: auto;
    text-align: right;
  }

  .site-profile-point-menu .data, .site-company-points .data {
    position: relative;
    width: 100%;
    margin: 0 0 0 0;
  }

  .site-company-points #add-point-link {
    top: -50px;
    width: 40px;
    height: 40px;
    font-size: 30px;
  }

  .site-company-points #add-point-link::before {
    width: 40px;
    height: 40px;
  }

  .modal-content .modal-body form {
    margin: 0 30px;
  }

  .site-profile-point-menu .data .menu-rows {
    display: block!important;
  }

  .site-profile-point-menu .data .menu-card {
    width: 100%;
    margin: 0 0 20px 0;
  }

  .site-profile-point-menu h3 {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    margin: 20px 0 20px 0;
  }

  .site-profile-point-menu .step-form {
    display: block;
  }

  .site-profile-point-menu .step-form .step {
    margin: 0 0 30px 0;
  }

  .site-profile-point-menu .step-form .step-number {
    display: inline-block;
    text-align: center;
  }

  .site-profile-point-menu .step-form .step-content {
    display: block;
    width: 100%;
  }

  .site-profile-point-menu .step-form .step-content label {
    font-size: 16px;
    margin: 5px 0 5px 5px;
  }

  .site-profile-point-menu .step-form .options-list.showed {
    border-bottom: 1px solid #d5d5d5;
    padding: 0 0 10px 0;
  }

  .site-profile-point-menu #menu-form .submits {
    text-align: center;
  }

  .site-company-points .points-list .actions {
    display: block;
  }

  .site-company-points .points-list .icon-btn {
    margin: 0 0 15px 0;
  }

  .points-list .info {
    margin: 0 20px 0 0;
  }

  .site-company-points .title {
    margin: 0 0 20px 0;
  }

  .site-order h1 {
    margin: 0 0 10px 0;
  }

  .site-order .steps {
    display: block;
  }

  .site-order .steps > div {
    width: 100%;
    padding: 0;
    position: relative;
  }

  .site-order .steps > div:first-of-type {
    border-right: none;
  }

  .site-order form .form-group > label {
    font-size: 18px;
  }

  .site-order form .form-group div[role="radiogroup"] > label input ~ span {
    font-size: 16px;
  }

  .site-order form .form-group div[role="radiogroup"] {
    flex-wrap: wrap;
    gap: 10px;
  }

  .site-points {
    position: unset;
  }

  .site-points .on-map {
    right: 25px;
    top: 45px;
  }

  .site-points .point-header {
    display: block;
  }

  .site-points .company-logo {
    margin: 0 0 20px 0;
  }

  .site-points .time-data {
    text-align: left;
    border: none;
  }

  .site-points .rating-data {
    text-align: left;
  }

  .site-points .price {
    text-align: left;
    margin: 20px 0 0 0;
  }

  .site-points .order-timeline .timeline-item .timeline-content {
    width: 80%;
  }

  .site-points .order-timeline .timeline-content .subtitle {
    text-align: left;
  }

  .site-index .orders-list .order {

  }

  .site-index .orders-list .order .order-header {
    display: block;
  }

  .site-index .orders-list .order .order-distance {
    display: block;
    margin: 10px 0 20px 0;
  }

  .site-index .existing-orders {
    position: relative;
    margin: 0 0 50px 0;
    right: auto;
    top: auto;
    max-width: 100%;
  }
}