/* 0) Design Tokens (converted to rem; base 1rem = 15px) */
:root {
  /* Layout */
  --container-max: 96rem;            /* 1440px */
  --container-padding-x: 1.333333rem;/* 20px */

  /* Colors */
  --color-text: #7B7B7B;
  --color-bg: #F5F5F5;
  --color-bg-alt: #EDEDED;
  --color-headings: #003257;
  --color-menu-link: #657077;
  --color-menu-active-fg: #FFFFFF;
  --color-menu-active-bg: #2385CD;
  --color-link: #2385CD;

  /* Buttons */
  --btn-primary-bg: #2385CD;
  --btn-primary-fg: #FFFFFF;
  --btn-primary-bg-active: #1E76B8;

  --btn-secondary-bg: #123A57;
  --btn-secondary-fg: #FFFFFF;
  --btn-secondary-bg-active: #164B76;

  /* Extra text colors */
  --color-text-extra-1: #A3A3A3;
  --color-text-extra-2: #BAD5EA;

  /* Radii */
  --radius-block: 1.333333rem;   /* 20px */
  --radius-btn: 0.666667rem;     /* 10px */
  --radius-btn-menu: 1.333333rem;/* 20px */

  /* Typography */
  --font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-base-size: 15px;
  --lh-base: 1.5;

  /* Headings */
  --h1-size: 2.133333rem;        /* 32px */
  --modal-title-size: 1.333333rem; /* 20px */

  /* Form */
  --form-input-size:15px;
  --control-height:40px;

  /* Spacing */
  --space-block: 1.333333rem;    /* 20px */

  /* Shadows */
  --shadow-none: none;
}

.blue {color:#2385CD;}


/* 1) Reset & normalize */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { height: 100%; -webkit-text-size-adjust: 100%; }
body {min-height: 100%;  background: var(--color-bg);  color: var(--color-text);  font-family: var(--font-family);  font-size: var(--font-base-size);  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;  text-rendering: optimizeLegibility;}
.fixed {z-index: 10;}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 1px solid #2385CD; outline-offset: 2px; }

/* 2) Base layout */
.container {max-width: var(--container-max);  margin-inline: auto;  padding-inline: var(--container-padding-x);}
@media (max-width: 1280px) {
    .container {max-width: 100% !important; width: 100% !important;}
}

/* Headings */
h1 {color: var(--color-headings);  font-size: var(--h1-size);  font-weight: 500;}
.modal-title {font-size: 20px; font-weight: 500; color: #283C4B; text-transform: uppercase;}

/* Menu links */
.menu-link { color: var(--color-menu-link); text-decoration: none; }
.menu-link--active {
  color: var(--color-menu-active-fg);
  background: var(--color-menu-active-bg);
  border-radius: var(--radius-btn-menu);
}

/* Buttons */
button, .btn {display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); border: none; border-radius: var(--radius-btn);
  box-shadow: var(--shadow-none); cursor: pointer; line-height: 1; font-size: 16px; transition: background-color 0.2s ease, color 0.2s ease; outline: none;}
button:hover, button:focus, button:active, .btn:hover, .btn:focus, .btn:active {border: none; outline: none; box-shadow: none;}

/* Primary */
.btn--primary {background: var(--btn-primary-bg); color: var(--btn-primary-fg);}
.btn--primary:hover, .btn--primary:active {background: var(--btn-primary-bg-active);}

/* Secondary */
.btn--secondary {background: var(--btn-secondary-bg); color: var(--btn-secondary-fg);}
.btn--secondary:hover, .btn--secondary:active {background: var(--btn-secondary-bg-active);}

/* Forms */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
  font-size: var(--form-input-size);
  min-height: var(--control-height);
  border: 1px solid #D0D2D9;
  border-radius: var(--radius-btn);
  padding-inline: 0.8rem;
  outline: none;
}
input:focus, textarea:focus {border-color: #2385CD; outline: none; box-shadow: none;}
/* Blocks */
.block {padding: var(--space-block); border-radius: var(--radius-block); box-shadow: var(--shadow-none); background: #fff;}

/* Helpers */
.text-extra-1 { color: var(--color-text-extra-1); }
.text-extra-2 { color: var(--color-text-extra-2); }
.bg-alt { background: var(--color-bg-alt); }

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Layout — body */
.site-body {min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text);}

/* Footer */
.site-footer { background: transparent; }
.site-footer__inner {max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding-x); border-top: 1px solid #D2D8DE;}
.site-footer__text {text-align: center; padding-block: 26px; font-size: 13px; color: var(--color-text-extra-1);}

/* Header */
.site-header {color: var(--color-menu-link);}
.site-header__inner {max-width: var(--container-max); margin-inline: auto; padding-inline:40px; height: 64px; display: flex; align-items: center; justify-content: space-between;}
.site-header__nav {display: none; margin-left: auto; gap: 1.5rem; font-size: 0.875rem;}
@media (min-width: 992px) {
  .site-header__nav { display: flex; }
}
@media (max-width: 992px) {
   .site-header__inner { padding-inline:20px; } 
}
.site-header__nav a, .site-header__div  
{display: inline-flex; align-items: center; gap: 0.6rem; border-radius: var(--radius-btn-menu); padding: 0 1rem; color: #657077; font-weight: 600;
  line-height: 0;}
.site-header__nav a:hover {background: var(--color-bg-alt); text-decoration: none;}
.site-header__nav a.active {background: var(--btn-primary-bg); color: #fff;}
.site-header__nav a img {vertical-align: middle; margin-top: 3px;}
.site-header__nav a.active img {filter: brightness(0) invert(1);}
.site-header__burger {margin-left: auto; padding: 0.5rem;}
@media (min-width: 992px) {
  .site-header__burger { display: none; }
}
.site-header__offcanvas {background: #fff; width: 16rem; padding: 1.5rem;}
.nav-mobile__offcanvas {display: flex; align-items: center; justify-content: space-between; padding: 7px 0;}
.nav-mobile__offcanvas .mobile_img { margin-right: 8px; }
.nav-mobile__offcanvas.active { color: #2385CD; }
@media (max-width: 1080px) {
   .site-header__nav {gap: 0;}
}

/*============================
Filtr Index
============================*/
.hero {position: relative; background: #cce4f8 url("../img/hero-bg.svg") center/cover no-repeat; padding:180px 30px 30px; border-radius: 20px;}
.hero__tabs {display: flex;}
.hero__tab {background: #2179BA; padding: 11px 40px;  border-radius:0px; font-weight: 500; display: flex; align-items: center; transition: all 0.2s ease; color: #fff;
  position: relative; font-size: 16px;}
.hero__tab--active {background-color: #fff; color: #2179BA;}
.hero__tab:first-child {border-radius: 20px 20px 0 0; z-index: 1;}
.hero__tab:last-child {border-radius: 0 20px 0 0; margin: 0 0 0 -20px; z-index: 0;}
.hero__tab img {margin-right: 10px; filter: brightness(0) invert(1);}
.hero__tab--active img {filter: brightness(0) invert(0);}

/* Fields container */
.hero__fields {background: #fff; padding: 15px 10px; display: flex; flex-direction: column; gap: 1rem; align-items: stretch; border-radius: 0 20px 20px 20px;}
@media (min-width: 768px) {
  .hero__fields {
    flex-direction: row;
  }
}
/* Field buttons */
.hero__field {flex: 1; display: flex; align-items: center; justify-content: space-between; border: none; padding: 0.75rem 1rem;  text-align: left; transition: border 0.2s ease;}
.hero__field-left {display: flex; align-items: center; gap: 0.5rem;}
.hero__label {font-size: 0.75rem; color: #6b7280;}
.hero__value { color: #003257; font-size: 18px; text-transform: uppercase;}
.hero__submit {background-color: #123A57; color: #fff; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; width: 73px; height: 73px;}
.hero__submit:hover {background-color: #2179BA;} 
@media (max-width: 1024px) {
  .hero__value {font-size: 15px;}
  .hero__field .hero__icon img {width: 25px !important; height: 25px !important;}
  .hero__caret {display: none;}
}  
@media (max-width: 767px) {
  .hero {padding:20px;}
  .hero__caret {display: block;} 
  .hero__submit {width:100%; height: 53px;} 
} 
@media (max-width: 470px) {
  .hero__tab {font-size: 13px; line-height: 15px; padding: 11px 30px;}
}  
@media (max-width: 380px) {
  .hero__fields {border-radius: 0 0 20px 20px;}
}  

/*============================
About Index
===========================*/
.about {padding:100px 0;}
.about__title {text-align: center; font-size: 40px; line-height: 1.1; color: #003257;}
.about__subtitle {text-align: center; font-size: 40px; color: #AEAEB3; line-height: 1.1; text-transform: uppercase;}
.about__features {display: grid; grid-template-columns: 1fr; gap: 24px; border-top: 1px solid #D2D8DE; margin-top: 40px;}
@media (min-width: 960px) {
  .about__features {grid-template-columns: repeat(3, 1fr); gap: 60px;}
}
.about__feature-title {font-size: 16px; line-height: 1.35; font-weight: 600; color: #123A57; margin: 0 0 5px;}
.about__feature-text {font-size: 13px; line-height:17px; color: #7B7B7B; margin: 0;}
@media (min-width: 960px) {
  .about__feature {position: relative; padding:25px 0 20px 0;}
  .about__feature:not(:first-child) {border-left: 1px solid #D2D8DE; padding-left: 30px;}
}
@media (max-width: 959px) {
  .about {padding:50px 0;}
  .about__title {font-size: 30px;}
  .about__subtitle {font-size: 30px;}
 .about__features {padding-top: 20px;} 
}

/*============================
Transport Index
============================*/
.transport {padding: 40px 0;}
.transport__layout {display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:1024px){
  .transport__layout {grid-template-columns:1.3fr 1fr; align-items:stretch;}
}
/* active block */
.transport__active { position:relative; min-height:460px; }
.transport__panel {min-height: 500px; inset:0; border-radius:20px; background: url("../img/tr_bg_1.jpg") center/cover no-repeat;
  padding:90px 25px 25px 25px; display:grid;}
.transport__panel-inner {width:100%; background:rgba(255,255,255,.7); border-radius:18px; padding:25px 30px 25px 30px;}
.transport__title {margin:0 0 10px; font-size:24px; text-transform:uppercase; color:#0B2A3F;}
.transport__lead {margin:0 0 14px; font-size:15px; line-height:1.6; color:#7B7B7B;}
.transport__list {list-style:none; margin:0 0 18px; padding:0; display:grid; gap:6px;}
.transport__item {position:relative; padding-left:25px; font-size:15px; line-height:1.5; color:#7B7B7B;}
.transport__item::before {content:""; position:absolute; left:0; top:2px; width:15px; height:15px; background: url("../img/marker.svg") center/cover no-repeat; display:grid;
  place-items:center;}
.transport__cta {display:inline-block; border-radius:30px; padding:10px 30px; font-weight:700; color:#fff; background:#0E2F47; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
.transport__cta:hover {background: #2179BA; text-decoration: none;}
.transport__cta img {display: inline-block; margin-left: 10px;}

/* right cards */
.transport__cards {display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:1023px){
  .transport__cards{ grid-template-columns:repeat(2,1fr); }
}
.transport__card {position:relative; display:grid; place-items:center; min-height:320px; padding:18px 12px; border-radius:22px; background:#F3F3F3;
  border:1px solid #E5E5E5; cursor:pointer; text-decoration:none; transition:background .2s ease, transform .2s ease, box-shadow .2s ease;}
.transport__card:hover {background:#EFEFEF; transform:translateY(-1px); box-shadow:0 8px 10px rgba(0,0,0,.08); text-decoration: none;}
.transport__card-label {writing-mode:vertical-rl; transform:rotate(180deg); font-size:28px; color:#143247; text-align:center;}
.transport__card-arrow {position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  border:1px solid #D7D7D7; background:#fff; font-size:16px; color:#5A6A77;}
.transport__card-num {position:absolute; right:16px; bottom:12px; font-size:120px; font-weight:800; line-height:1; color:#E9E9E9; pointer-events:none;}
/* Alpine cloak */
[x-cloak]{ display:none !important; }
.transport__panel {will-change: transform, opacity;}
@media (max-width: 1024px) {
  .transport {padding:0;}
  .transport__panel{min-height: 500px; padding:20px;}
  .transport__card-num, .transport__card-arrow {display: none;}
  .transport__card-label{writing-mode:unset; transform:rotate(0deg); font-size:20px;}
  .transport__card {min-height:20px; padding:18px 10px;}
}

/*============================
Support Index
============================*/
.support {text-align: center; padding:100px 0;}
.support__title {max-width: 650px; font-size: 70px; line-height: 70px; color: #BAD5EA;  margin:0 auto 30px;}
.support__text {max-width: 500px; margin: 0 auto 30px; font-size: 13px; line-height: 17px; color: #7B7B7B;}
.support__cta {display: inline-block; padding: 12px 28px; border-radius: 24px; font-weight: 600; text-decoration: none; background: #0E2F47; color: #fff;
  transition: background .2s ease, transform .2s ease;}
.support__cta:hover {background: #2179BA; text-decoration: none;}
.support img {display: inline-block; margin-left: 10px;}
@media (max-width: 959px) {
  .support {padding:50px 0;}
  .support__title {font-size: 30px; line-height: 1.1;}
}


/*============================
Date Picker
============================*/
.cal { display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; padding:12px 12px 14px; min-width:320px; max-width:420px; box-sizing:border-box; color:#111827;
margin: 20px 0 0 0; }
.cal__monthbar { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:6px; }
.cal__month { text-align:center; font-weight:600; font-size:18px; line-height:1.2; }
.cal__arrow { appearance:none; background:transparent; border:0; font-size:20px; line-height:1; cursor:pointer; padding:6px 4px; border-radius:5px; color:#374151; }
.cal__arrow:hover { background:rgba(0,0,0,.06); }
.cal__arrow:active { background:rgba(0,0,0,.1); }

.cal__weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:0 2px; }
.cal__weekdays > span { text-align:center; font-size:11px; font-weight:700; letter-spacing:.04em; color:#6B7280; }

.cal__grid { display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:44px; gap:6px; }
@media (max-width:380px){ 
  .cal__grid{ grid-auto-rows:40px; } 
}

.cal__day { position:relative; width:100%; height:100%; border:0; background:transparent; border-radius:5px; cursor:pointer; font-weight:500; color:#111827; }
.cal__day:hover { background:rgba(0,0,0,.06); }
.cal__day:focus-visible { outline:1px solid #2385CD; outline-offset:1px; }
.cal__day.is-out { color:#9CA3AF; background:#F3F4F6; cursor:default; }
.cal__day.is-out:hover { background:#F3F4F6; }
.cal__day > span { display:inline-flex; width:32px; height:32px; border-radius:999px; align-items:center; justify-content:center; margin:0 auto; }
.cal__day.is-selected > span { background:#2385CD; color:#fff; }

.cal__footer { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.cal__btn { appearance:none; border:1px solid transparent; border-radius:5px; padding:10px 14px; font-size:15px; cursor:pointer; }
.cal__btn--ghost { background:#fff; color:#111827; border: 1px solid #D0D2D9; justify-self:start; }
.cal__btn--ghost:hover { background:#F9FAFB; border:1px solid #2385CD;}
.cal__btn--primary { background:#2385CD; color:#fff; border:1px solid #2385CD; justify-self:end; }
.cal__btn--primary:hover {background:#123A57; border:1px solid #123A57;}

.cal__day.is-disabled {color: #9CA3AF; cursor: not-allowed;}
.cal__day.is-disabled:hover {background: transparent;}


/*============================
Select City
============================*/
.city-picker__header {display: flex; justify-content: flex-start; align-items: center; border-bottom: 1px solid #D2D8DE; padding: 0 0 15px 0; margin-bottom: 20px;}
.city-picker__header img {margin-right: 10px;}
.city-picker__header  h2 {color: #003257; font-size: 20px; text-transform: uppercase;}

.city-picker__controls {display: grid; gap: 12px; margin: 12px 0 30px 0; }
.city-picker__search {width: 100%; padding:0 15px; border: 1px solid #D0D2D9; border-radius: 5px; height: 40px; font-size: 15px;}
.city-picker__search:hover {border:1px solid #2385CD;}

.cp-country {position: relative; display: flex; justify-content: flex-start; align-items: center;}

/* Кнопка открытия селекта */
.cp-country__btn {display: flex; align-items: center; justify-content: space-between; width: 220px; background: #fff; border: 1px solid #D0D2D9;
  border-radius: 5px; height: 40px; padding: 0 10px; cursor: pointer; color: #003257; text-transform: uppercase; transition: border .2s; margin-left: 15px;}
.cp-country__btn:hover {border:1px solid #2385CD;}

.cp-country__flag {margin-right: 8px; border-radius: 2px;  flex-shrink: 0;  box-shadow: 0 0 0 1px #e5e7eb;}
.cp-country__caret {margin-left: 8px; color: #667185; flex-shrink: 0;}

/* Список опций */
.cp-country__list {position: absolute; top: 100%; left: 118px;  right: 0; background: #fff; border: 1px solid #D0D2D9; border-radius: 5px; margin-top: 2px;
  max-height: 220px; width: 220px; overflow-y: auto; z-index: 30; box-shadow: 0 4px 10px rgba(0,0,0,.06);}

.cp-country__option {display: flex; align-items: center; width: 100%; padding: 6px 10px; background: #fff; border: 0; text-align: left; cursor: pointer;
  transition: background .15s; justify-content: flex-start;}
.cp-country__option:hover {background: #f0f3f9;}
.cp-country__option img {margin-right: 8px; border-radius: 2px; box-shadow: 0 0 0 1px #e5e7eb;}

.city-picker__select {
  width: 280px; padding: 10px 12px; border: 1px solid #d8dee7; border-radius: 6px;
  background: #fff; font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Сетка городов */
.city-picker__grid {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 40px; padding-top: 14px;}

/* Чип города */
.city-picker__chip {display:flex; align-items: center; justify-content:space-between; padding:0 20px; border-radius: 999px; border: 0; background: transparent;
  cursor: pointer; transition: background .15s ease, color .15s ease;white-space: nowrap;min-height: 30px;}

/* Выбранный чип — «синяя пилюля» */
.city-picker__chip.is-selected {background: #2385CD; color: #fff; text-decoration: none;}

/* Крестик внутри выбранного чипа */
.city-picker__remove {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.25); color: #fff; font-size: 12px; line-height: 1;
}
.city-picker__chip.is-selected .city-picker__remove { display: flex; }

@media (max-width:992px){ 
  .city-picker__grid {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px; padding: 0;}
}
@media (max-width:768px){ 
  .city-picker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px;}
}
@media (max-width:560px){ 
  .city-picker__grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0;}
  .city-picker__controls {display: grid; gap: 12px; margin: 12px 0 20px 0; }
}
@media (max-width:480px){ 
  .cp-country-label{ display: none; } 
  .cp-country__btn {margin-left:0;}
  .cp-country__list {left: 0;}
}
/* Футер */
.city-picker__footer {
  display:flex; justify-content:  space-between; gap: 8px; margin-top: 20px; padding: 20px 0 0 0; border-top: 1px solid #D2D8DE;}
.cp-btn {appearance:none; border:1px solid transparent; border-radius:5px; padding:10px 14px; font-size:15px; cursor:pointer;}
.cp-btn--ghost { background:#fff; color:#111827; border: 1px solid #D0D2D9; }
.cp-btn--ghost:hover { background:#F9FAFB; border:1px solid #2385CD;}
.cp-btn--primary { background:#2385CD; color:#fff; border:1px solid #2385CD; }
.cp-btn--primary:hover {background:#123A57; border:1px solid #123A57;}
.cp-btn[disabled] { opacity: .5; cursor: not-allowed; }


/*============================
Select mode of transport
============================*/
.transport-type-picker__grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px; padding-top: 10px;}
.transport-type-picker__card {display:flex;  align-items: center;  justify-content:flex-start;  border:none;  border-radius:10px; margin-bottom: 40px;
  padding:0 0 0 10px;  background: #fff;  cursor: pointer;  transition: all 0.2s ease;  box-shadow: 0 0 10px 0 rgba(0,0,0,.15);border:1px solid #fff;}
.transport-type-picker__card:hover, .transport-type-picker__card.is-active {border:1px solid #2385CD;  box-shadow: 0 0 10px 0 rgba(0,0,0,.15); 
  background: rgba(0,0,0,.04);}
.transport-type-picker__icon {width: 90px; height: 90px; margin-right: 10px;}
.transport-type-picker__label {font-size:16px; text-transform: uppercase; color: #2385CD;}
@media (max-width:992px){ 
  .transport-type-picker__grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px;}
}
@media (max-width:768px){ 
  .transport-type-picker__grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px;}
  .transport-type-picker__card {margin-bottom: 20px;}
}
@media (max-width:560px){ 
  .transport-type-picker__grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px;}
}
@media (max-width:480px){ 
  .transport-type-picker__grid {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0;}
}

/*============================
Filtr Cargo
============================*/
.top__cargo {position: relative; background: #cce4f8 url("../img/hero-bg.svg") center/cover no-repeat; padding:45px 10px 10px; border-radius: 20px;}
.top__cargo-inner {background: #fff; padding: 25px; display: flex; gap: 2rem; align-items: stretch; border-radius: 20px;flex-wrap: wrap;}

.tc__field, .tc__toggle, .tc__more {flex: 1 1 0; min-width: 180px;}
.tc__submit {flex: 0 0 auto;}


/* Поля */
.tc__field {display:flex; align-items: center; justify-content: space-between; gap: 14px; height:41px; padding:5px 15px 0 15px; background: #fff;  
  border: 1px solid #D0D2D9 !important; border-radius: 10px; cursor: pointer; position: relative;}
.tc__field:hover {border: 1px solid #2385CD !important;}
.tc__field-left {display:flex; align-items:center; gap:10px;}

.tc__label {font-size:13px; position:absolute; top:-10px; left:10px; background: #fff; padding: 0 5px;}

.tc__value {color: #003257; text-transform: uppercase; font-size: 13px;}
.tc__caret img {display: block; opacity:.7; }


/* Переключатель */
.tc__toggle {display: flex; align-items: center; gap: 10px; background: #fff; cursor: pointer;}
.tc__toggle-input {position: absolute; opacity: 0; pointer-events: none; }
.tc__toggle-slider {position: relative; width: 44px; height: 24px; border-radius: 9999px; background: #d1d5db; transition: background .2s;}
.tc__toggle-slider::after {content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); transition: left .2s;}
.tc__toggle-input:checked + .tc__toggle-slider { background: #2385CD; }
.tc__toggle-input:checked + .tc__toggle-slider::after { left: 23px; }
.tc__toggle-text {color: #003257;  font-size: 13px;}

/* More filters */
.tc__more {display: flex; align-items: center; justify-content: space-between; padding:0 14px; background: #CDE6F9; color: #003257; border: 1px solid #BAD5EA !important; 
  border-radius: 10px; height:41px; padding:15px; font-size: 13px;}
.tc__more:hover {border: 1px solid #2385CD !important;}

/* Submit */
.tc__submit {display: flex; align-items: center; justify-content: center; width: 50px; height: 41px; border-radius: 10px; background: #123A57; border: none; cursor: pointer;}
.tc__submit:hover { background: #2179BA;}


@media (max-width: 860px) {
  .tc__field, .tc__toggle, .tc__more { flex: 1 1 auto; }
  .tc__submit { flex: 0 0 40px; }
}


/*============================
Cargo type picker
============================*/
.ct-grid {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 50px; padding-top: 10px;}

.ct-card {border-radius: 10px; cursor: pointer; position: relative; text-align:center;border: 1px solid #fff !important; padding: 20px 15px;
display: block; margin-bottom: 40px; box-shadow: 0 0 10px 0 rgba(0,0,0,.15);}
.ct-card:hover {border: 1px solid #2385CD !important;}
.ct-card.is-active {border: 1px solid #2385CD !important;}

.ct-icon {width:92px; height:92px; display: block; margin: 0 auto;}
.ct-label {font-size:16px; color:#2385CD;}

.cp-btn {appearance:none; border:1px solid transparent; border-radius:5px; padding:10px 14px; font-size:15px; cursor:pointer;}
.cp-btn--ghost { background:#fff; color:#111827; border: 1px solid #D0D2D9; }
.cp-btn--ghost:hover { background:#F9FAFB; border:1px solid #2385CD;}
.cp-btn--primary { background:#2385CD; color:#fff; border:1px solid #2385CD; }
.cp-btn--primary:hover {background:#123A57; border:1px solid #123A57;}
.cp-btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 992px) {
  .ct-grid {grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 30px;}
}
@media (max-width: 768px) {
  .ct-grid {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0  10px;}
}
@media (max-width: 560px) {
  .ct-grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px;}
}
@media (max-width: 480px) {
  .ct-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px;}
}


/*============================
More filters
============================*/

.mf-line {display: flex; justify-content: flex-start; align-items: center; margin-bottom:20px;}
.mf-label {width:200px; margin-left:5px; color:#283C4B; font-weight:500;}

.mf-caps{display:flex; align-items:center; gap:1px}
.mf-rtf {padding:0 10px;}

input[type="text"].mf-input, input[type="number"].mf-num {width:175px; height:41px; border-radius:10px; border:1px solid #D0D2D9 !important; 
  background:#f5f5f5 !important; box-shadow:none !important; padding:0 12px; color: #003257; outline:none;}
.mf-input[readonly]{cursor:pointer}
input[type="number"].mf-num {width:90px !important; text-align:center;}

.mf-line--weight {display: flex; align-items: center; justify-content: space-between; gap: 0;}
.mf-toggle-group {display: flex; align-items: center; gap: 8px; margin-left: auto;}

/* ======= Календарь ======= */
.cal-overlay {position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); z-index:1040}
.cal-dialog {width:100%; max-width:420px; background:#fff; border-radius:16px; box-shadow:var(--mf-shadow); padding:16px}
.cal-head {display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.cal-caption {font-weight:500; color:#283C4B;}
.cal-nav {height:32px; padding:0 10px; border:1px solid var(--mf-gray); background:#fff; border-radius:8px; cursor:pointer}
.cal-week {display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font:12px/1 system-ui; color:var(--mf-muted); margin-bottom:6px}
.cal-grid {display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-day {height:36px; border:1px solid var(--mf-line); border-radius:10px; background:#fff; font:13px/1 system-ui; cursor:pointer}
.cal-day.is-out {background:#f7f9fc; color:#9aa7b5}
.cal-day.is-today {box-shadow:0 0 0 2px #2385CD inset}
.cal-day.is-selected {background: #2385CD; color:#fff;}
.cal-actions {display:flex; justify-content:flex-end; gap:10px; margin-top:14px}

/* ======= Тумблер ======= */
.mf-line .toggle {position:relative; width:50px; height:28px !important; border-radius:30px; background:#f5f5f5; border:1px solid #D0D2D9; cursor:pointer; 
 display:inline-flex; align-items:center; padding: 0 !important;}
.mf-line .toggle__dot {position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#2385CD; box-shadow:0 1px 2px rgba(0,0,0,.14); 
  transition:transform .18s;}
.mf-line .toggle.is-on{background:#2385CD;}
.mf-line .toggle.is-on .toggle__dot{transform:translateX(22px); background: #fff;}
.mf-line .toggle-lab {margin-left:8px; color:#283C4B; font-weight:500;}

/* Кнопка-иконка в капсуле */
.mf-cap-btn {display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:0; background:none; box-shadow:none; cursor:pointer;}
.mf-line .pill {display:block; align-items:center; padding:0 30px; border-radius:30px; border:1px solid #fff; height:30px !important;
  background:none; box-shadow:none; cursor:pointer; font-size: 15px; line-height: 27px;}
.mf-line .pill.is-active {background:#2385CD; color:#fff; border:1px solid #2385CD;}

/* ======= Сегмент-switch (Business/Individual) ======= */
.segment {display:inline-flex; border-radius:30px; background:#f5f5f5; border:1px solid #D0D2D9; box-shadow:none; padding: 3px;}
.segment span {min-width:145px; height:30px; padding:0 30px; text-align: center; border-radius:30px; border:none; background:transparent; cursor:pointer; line-height: 27px;}
.segment .is-on {background:#2385CD; color:#fff}

/* ======= Loading type карточки ======= */
.mf-cards {display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.mf-card {border:none; border-radius:10px; background:#fff; box-shadow:none; padding:10px; text-align:center; cursor:pointer;}

.mf-card:hover {transform:translateY(-1px)}
.mf-card.is-on {border:none; box-shadow:0 0 10px rgb(0,0,0,.15)}
.mf-card img {width:auto; height:auto; display:block; margin:0 auto 8px;}

/* ======= Чекбоксы ======= */
.cb {display:inline-flex; align-items:center; gap:10px; margin-right: 20px; cursor: pointer;}
.cb-box {width:25px; height:25px; border:1px solid #ccc; border-radius:5px; background:#fff; box-shadow:var(--mf-shadow);
  display:inline-block; position:relative;}
.cb input {display:none}
.cb input:checked + .cb-box {background:#2385CD; border:1px solid #2385CD;}
.cb input:checked + .cb-box::after {content:""; position:absolute; left:9px; top:0; width:7px; height:19px; border:2px solid #fff; 
  border-left:none; border-top:none; transform:rotate(45deg);}

@media (max-width: 768px) {
  .mf-line {flex-wrap: wrap; justify-content: flex-start;}
  .mf-label {width:auto; margin-left:0; flex: 0 0 80%; margin:0 0 0 5px;}
  .mf-caps {margin: 10px 0 0 0;}
  .mf-cards {grid-template-columns:repeat(3,1fr); gap:10px; margin: 10px 0;}
}
@media (max-width: 480px) {
  .mf-cards {grid-template-columns:repeat(2,1fr); gap:10px;}
  .mf-toggle-group {display: flex; align-items: center; gap: 8px; margin-left: auto; margin-top: 10px;}
  .mf-caps {flex-wrap: wrap;}
  .cb {margin-right: 20px; margin-bottom: 10px;}
}


/*============================
Catalog top block
============================*/
.head__inline {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin:20px 0 40px 0;}
.head__inline-title {flex:0 0 50%;} 
.head__inline-sorting {flex:0 0 48%; display: flex;align-items:center; gap:16px;justify-content: flex-end;} 

.head__inline-title h1 {font-size: 32px; font-weight: 500; color: #003257; margin: 0 0 10px 0; display: flex; align-items: center; justify-content: flex-start;}
.head__inline-title h1 img {margin-right: 15px;}
.head__inline-result {font-size: 15px;}

.btn-sort {position: relative; display:flex; align-items:center; justify-content: space-between; min-width: 175px; height:40px; padding:0 15px; gap: 20px;
  background:none; color: #003257;  border:1px solid #D0D2D9 !important; border-radius:10px; cursor:pointer;}
.head__inline-label {position: absolute; top: -12px; left: 15px; font-size: 13px; color: #7B7B7B; background: var(--color-bg);}
.btn-sort:focus-visible, .btn-sort:hover {border:1px solid #2385CD !important;}

.btn-map {display:inline-flex; align-items:center; gap:10px; padding:0 15px; height:40px; background:#2385CD; color:#fff; border:1px solid #2385CD !important; 
  border-radius:10px; cursor:pointer; font-weight:600; min-width: 175px;}
.btn-map:hover, .btn-map:focus-visible {background:#2179BA; border:1px solid #2179BA;}

@media (max-width: 992px) {
  .head__inline {align-items: flex-start; justify-content: flex-start; margin: 40px 0;}
  .head__inline-title {flex:0 0 100%;} 
  .head__inline-sorting {flex:0 0 100%; margin-top: 25px;justify-content: flex-start; flex-wrap: wrap;}  
}
@media (max-width: 480px) {
  .btn-sort, .btn-map {flex:0 0 100%;}
  .head__inline-title h1 {font-size: 26px;}
}

.sort-modal {display: flex; flex-direction: column; align-items: stretch;}
.sort-modal .city-picker__header {display: flex; align-items: center; justify-content:center;}

.sort-list {display: flex; flex-direction: column; gap: 8px;}
.sort-item {width: 100%; border: none; background: #f5f5f5; text-align: left; border-radius: 10px;
  padding: 10px 14px; cursor: pointer; transition: background 0.15s;}
.sort-item:hover {background:#CDE6F9;}
.sort-item.is-active {background: #CDE6F9; color: #2d2d2d;}


/*============================
Cargo card block
============================*/
.cargo-card {background: #EDEDED; border-radius: 20px; padding:15px 8px 8px 8px; margin-bottom: 40px;}

.cargo-card__top {display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px;}
.cargo-card__title {display: flex; align-items: center; gap: 10px; margin-left: 20px;}
.cargo-card__heading {font-size: 20px; font-weight: 500; color: #003257; margin: 0;}
.cargo-card__heading a:hover {text-decoration: none; color:#2385CD;}

.cargo-card__top-meta {display:flex; align-items: center; gap:35px; flex-wrap:wrap; margin-right: 20px;}
.cargo-card__price {display:flex; align-items: center; gap:4px; font-weight: 500; color: #003257;}
.cargo-card__time {display:flex; align-items: center; gap:4px; font-size: 13px;}
.cargo-card__wish {display:flex; align-items: center; gap:4px; font-size: 13px; cursor: pointer;}

.cargo-card__inner {background:#fff; border-radius:20px; display: flex; align-items: flex-start; justify-content: space-between; padding:20px; gap:10px}

.cargo-card__media {margin: 0; flex: 0 0 20%; max-width: 180px;}
.cargo-card__media img {width: 100%; height: 140px; object-fit: cover; border-radius: 10px; display: block;}

.cargo-card__info {flex: 0 0 25%;}
.cargo-card__company {color:#2385CD; text-decoration:none; margin-bottom: 10px; display: block;}
.cargo-card__company:hover {text-decoration: none; color: #2d2d2d;}
/* specs */
.cargo .specs {list-style: none; margin: 0; padding: 0;}
.cargo .specs__item {display: flex; align-items: center; gap: 8px; margin-bottom: 2px;}
.cargo .specs__item--muted {color: var(--muted);}
.cargo .specs__label {color:#a3a3a3; font-size: 13px; flex: 0 0 125px;}
.cargo .specs__value {color:#2d2d2d; font-size: 13px;}
.cargo .specs__icon {width: 25px; text-align: center; flex: 0 0 25px;}
.cargo .specs__icon img {width: 25px !important;}
.cargo-card__badges {background: #CDE6F9; color: #2d2d2d; font-size: 10px; text-transform: uppercase; display: inline-block; padding: 2px 15px; margin-bottom: 10px;}

.note {display: inline-block; padding: 6px 10px; border-radius: 4px; font-size: 13px; line-height: 1; margin-top: 5px;}
.note--good {background: #229A02; color: #fff; }

/* route */
.cargo-card__route {flex: 0 0 30%;}
.route__bar {height: 3px; background: #2385CD; border-radius: 3px; margin:20px 0;}
.route {display: flex; align-items: flex-start; justify-content: space-between;}
.route__cities {font-size: 24px; font-weight: 500; color: #003257; line-height: 1.5;}
.route__arrow {display:inline-block; margin: 0 8px;}

.route__distance {display: flex; align-items: center; gap: 4px; font-weight: 500;}

@media (max-width: 992px) {
  .cargo-card__top {flex-wrap: wrap; justify-content: flex-start;}
  .cargo-card__top-meta {display:flex; align-items: center; gap:15px; flex-wrap:wrap; margin:0 0 0 20px;}
  .cargo-card__info .specs__item {gap: 3px; margin-bottom: 2px;}
  .cargo-card__inner {flex-wrap:wrap;}
  .cargo-card__info {flex: 0 0 35%;}
  .cargo-card__route {flex: 0 0 100%;}
  .route__bar {margin: 20px 0 10px 0;}
}
@media (max-width: 768px) {
  .cargo-card__media {flex: 0 0 100%; max-width: 100%;}
  .cargo-card__media img {width: 100%; height: 200px;}
  .cargo-card__info {flex: 0 0 48%;}
}  
@media (max-width: 560px) {
  .cargo-card__info {flex: 0 0 100%;}
}  


/*============================
Cargo card page
============================*/
.breadcrumb {list-style: none; margin: 0 0 5px -3px; padding: 20px 0 0 0; border-top: 1px solid #D2D8DE; display: flex; align-items: center; font-size: 13px; color: #787878;}
.breadcrumb li {padding: 0 3px;}
.breadcrumb a {color: #787878; text-decoration: none;}
.breadcrumb a:hover {color: #2385CD; text-decoration: none;}

.cargo-page__info {font-size: 13px; color: #A3A3A3; margin-bottom: 10px; display: flex; gap: 20px; align-items: center;}
.cargo-page__info img {display: inline-block;}
h1.cargo-page__title {font-size: 32px; font-weight: 500; color: #003257;}

.cargo-page-route {display:flex; align-items: center; gap: 15px; font-size: 16px; font-weight: 500; margin: 15px 0 0 0;}
.cargo-page-distance {display:flex; align-items: center;}
.cargo-page-distance img {margin: -2px 3px 0 0;}
.cargo-page-route .btn-map {height: 34px; font-size: 15px; font-weight: 500;}

.cargo-detail {margin: 30px 0 50px 0; display: flex; gap: 20px; align-items: stretch; justify-content: space-between;}

.cargo-gallery {display: grid; grid-template-columns: 92px 1fr; flex: 0 0 49%; gap: 10px;}
.cargo-gallery--single { grid-template-columns: 1fr; }

.cargo-gallery__thumbs {display: flex; flex-direction: column; gap: 5px;}
.cargo-gallery__thumb {width: 90px; height: 80px; border-radius: 10px; overflow: hidden; border: 1px solid #ccc; padding: 0; background:none; cursor: pointer;}
.cargo-gallery__thumb--active, .cargo-gallery__thumb:hover {border: 1px solid #2385CD !important;}
.cargo-gallery__thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}

.cargo-gallery__main {position: relative; border-radius: 10px; overflow: hidden;  aspect-ratio: 16/12;}
.cargo-gallery__main img {width: 100%; height: 100%; object-fit: cover; display: block;}

.cargo-gallery__icons {position: absolute; top: 20px; right: 20px; display: flex; gap: 9px;}
.cargo-gallery__icon {border-radius:50px; background: rgba(255,255,255,.75); display: grid; place-items: center; border: 0; cursor: pointer; padding: 0 7px;}
.cargo-gallery__icon img {width: 25px; height: 25px; display: block; filter: grayscale(100%);}
.cargo-gallery__icon:hover {background: rgba(255,255,255,1);}

.cargo-gallery__nav {position:absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; border: 0; cursor: pointer;
  background: rgba(0,0,0,.35); color: #fff; font-size: 28px; line-height: 1; border-radius: 10px; display: grid; place-items: center;}
.cargo-gallery__nav--prev {left: 12px;}
.cargo-gallery__nav--next {right: 12px;}


/* --- right column --- */
.cargo__side {flex: 0 0 48%;}

.cargo__side-delivery {background: #fff; padding:15px 10px 10px 10px; border-radius: 10px;}
.card__side-title {margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px;}
.cargo__side-row {background: #F5F5F5; padding:20px; border-radius: 10px; display: flex; align-items: flex-start; justify-content:space-between;}
.cargo__side-block {flex: 0 0 48%;}
.cargo__side-price {display:flex; justify-content: flex-end; align-items: center; gap:4px; font-weight: 500;}
.cargo__side-price span {font-size: 32px; font-weight: 600; color: #003257; padding-left: 10px;}

/* Buttons */
.cargo__side-block .btn { height:40px; border-radius: 10px; border: 0; cursor: pointer; margin: 10px 0 0 0; float: right; padding: 0 30px;}
.cargo__side-block .btn--primary {background: #2385CD; color: #fff; font-weight: 600; font-size: 13px;}
.cargo__side-block .btn--primary:hover {background: #1E76B8; }

.cargo__side-owner {background: #fff; padding:10px; border-radius: 10px; margin-top: 10px; font-size: 13px;}
.cargo__side-row--2 {background: #F5F5F5; padding:20px; border-radius: 10px; display: flex; align-items:center; justify-content:space-between;}
.cargo__owner-block {flex: 0 0 70%;}
.owner__card-logo {flex: 0 0 28%;}
.owner__card-logo img {width: 100%; height: auto; object-fit: cover;}
.cargo__owner-_title { text-transform: uppercase;}
.owner-card__name {font-size: 15px; color: #2385CD; text-decoration: none; font-weight: 500;}
.owner-card__name:hover {color:#222;}
.cargo__side-owner p {margin: 10px 0;}

.cargo__side-head {font-weight: 500; color: #003257; text-transform: uppercase;}
.cargo__side-ul {margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.cargo__side-ul li {background: #EAEAEA; padding: 3px 15px; display: flex; align-items: center;color: #222; margin: 3px 0; flex:0 0 49%;}
.cargo__owner-label {color: #A3A3A3; font-size: 13px; min-width: 150px;}


@media (max-width: 1535px) {
  .cargo-gallery__main {position: relative; border-radius: 10px; overflow: hidden;  aspect-ratio: 16/16;}
}
@media (max-width: 1180px) {
  .cargo-gallery {flex: 0 0 35%;}
  .cargo__side {flex: 0 0 62%;}
  .cargo-gallery__thumb {width: 60px; height: 50px;}
  .cargo-gallery {grid-template-columns: 62px 1fr;}
}
@media (max-width: 992px) {
  .cargo-detail {gap: 0; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap;}
  .cargo-gallery {flex: 0 0 100%; margin-bottom: 20px;}
  .cargo__side {flex: 0 0 100%;}
  .cargo-gallery__main {aspect-ratio: 16/8;}
  .cargo-gallery__thumb {width: 90px; height: 80px;}
  .cargo-gallery {grid-template-columns: 92px 1fr;}
  .cargo__owner-block {flex: 0 0 100%;}
  .cargo__side-row--2 {gap: 0; flex-wrap: wrap;}
  .cargo__owner-block {order:2}
  .owner__card-logo {order:1; flex: 0 0 28%;}
  .owner__card-logo img {width: 200px; height: auto; object-fit: cover; margin-bottom: 10px;}
  .cargo-detail {margin: 30px 0 10px 0;}
}
@media (max-width: 768px) {
  .cargo__side-ul li {flex:0 0 100%;}
  .cargo-gallery {display: flex; flex-wrap: wrap;}
  .cargo-gallery__main {order:1;}
  .cargo-gallery__thumbs {order:2;flex-direction: row;}
  .cargo-page-route {gap: 10px; flex-wrap: wrap; margin: 0;}
  .owner__card-logo {flex: 0 0 100%;}
}  
@media (max-width: 680px) {
  .cargo__side-row {justify-content: flex-start; flex-wrap: wrap;}
  .cargo__side-block {flex: 0 0 100%; margin-bottom: 15px;}
  .cargo__side-price {justify-content: flex-start;}
  .cargo__side-block .btn {float: none; padding: 0 30px;}
}  
@media (max-width: 560px) {
  .cargo-page__info {gap: 0; flex-wrap: wrap;}
  .cargo-page__info span {flex:0 0 100%;}
  h1.cargo-page__title {font-size: 26px;}
}
@media (max-width: 480px) {
  .btn-map {display: flex;  justify-content: center;}
  .cargo-gallery__thumb {width: 40px; height: 40px;}
  .cargo-gallery__thumbs {flex-wrap: wrap;}
}


/*============================
Transport card block
============================*/
.route__location {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end;}
.route__location-label {flex: 0 0 100%; font-weight: 500; text-align: right;}
.route__to {font-weight: 500; color: #003257; font-size: 24px; display: flex;}

@media (max-width: 1180px) {
  .route__location {justify-content: flex-start;}
  .route__location-label {text-align: left;}
}

.transport-types .transport-type-picker__card {display:block; padding:20px 10px;}
.transport-types .transport-type-picker__icon {width:auto; height: 80px; margin: 0 auto 10px auto;}
.transport-types .transport-type-picker__grid {grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 30px;}

@media (max-width: 991px) {
  .transport-types .transport-type-picker__grid {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px;}
}
@media (max-width: 768px) {
  .transport-types .transport-type-picker__grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px;}
}
@media (max-width: 480px) {
  .transport-types .transport-type-picker__grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px;}
}


/*============================
Account layout
============================*/
.account__body {margin: 0; background: #283C4B;}
.account__layout {display:flex; min-height:100vh;}
.account__sidebar {width: 260px;  color:#C8D1D9;}
.account__main {background: #F5F5F5; flex:1; display:flex; flex-direction: column; margin: 10px 10px 10px 0; border-radius: 20px; padding: 20px;}

/* ============ ACCOUNT MENU ============ */
.account__menu {display: flex; flex-direction: column; height: 100%; padding: 30px 20px;}
.menu__top {flex: 1; display: flex; flex-direction: column; gap: 3px;}
.menu__bottom {margin-top: auto; display: flex; flex-direction: column; gap: 4px;}
.menu__item {display: flex; align-items:center; justify-content: flex-start;  gap: 6px; padding: 5px 10px; font-size: 15px; color: #C8D1D9;
  text-decoration: none; border-radius:30px; transition: 0.15s;}
.menu__item:hover, .menu__active {background: #2385CD; text-decoration: none;}
.menu__separator {height: 1px; background: #375165; margin: 10px 0;}
.menu__icon {width: 36px; display: block;}

.account__sidebar-overlay {position: fixed; inset: 0; z-index: 40; display: none;}
[x-cloak] {display: none !important;}


@media (max-width: 1024px) {
  .account__layout {flex-direction: column;}
  .account__sidebar {position: fixed; top: 0; bottom: 0; left: 0; max-width: 260px; width: 100%; transform: translateX(-100%); transition: transform 0.2s ease-out;
    background: #283C4B; z-index: 50;}
  .account__sidebar-mobile-open {transform: translateX(0);}
  .account__sidebar-overlay {display: block;}
}
.menu__toggle {display: none; width: 30px; height: 30px; border: none; padding:0; margin-right: 10px; cursor: pointer; background:none;}
.menu__toggle span {display:block; height: 2px; border-radius: 999px; margin: 3px 0; background-color: currentColor;}
@media (max-width: 1024px) {
  .menu__toggle {display: inline-flex; flex-direction: column; justify-content: center; align-items: stretch;}
  .dashboard__top {flex-wrap: nowrap;}
  .dashboard__search {flex: 1;}
}

/* top bar */
.dashboard__top {display: flex; align-items: center; justify-content: flex-start; gap: 18px;}

.dashboard__search {position:relative; flex:0 0 66%;}
.dashboard__search-input {width:100%; border-radius:10px  !important; background: none  !important; border: 1px solid #D0D2D9 !important; padding:0 50px; 
  height: 40px; font-size: 15px; outline: none;}
.dashboard__search-input::placeholder {color: #AEAEB3;}
.dashboard__search-input:focus {border:1px solid #2385CD !important; box-shadow:none;}

.icon__search {position: absolute; right: 20px; top: 18px; width: 14px; height: 14px; transform: translateY(-50%); border-radius: 999px; border: 2px solid #555;}
.icon__search::after {content: ""; position: absolute; width: 10px; height: 2px; background: #555; border-radius: 999px;
  transform: rotate(45deg); right: -9px; bottom: -4px;}
.dashboard__top-right {display: flex; align-items: center; gap: 16px;}

/* currency */
.currency__box {display: flex; flex-direction: column; align-items: center; position: relative;}
.currency__box-label {font-size: 13px; position: absolute; top: -11px; left: 15px;}
.currency__switch-btn {display: flex; align-items: center; justify-content: flex-start; padding:0 10px; height: 40px; background: none !important; min-width: 160px;
  border: 1px solid #D0D2D9 !important; border-radius: 10px; cursor: pointer; gap: 20px;}
.currency__active {display: flex; align-items: center; gap: 5px;}

/* account short */
.account__short {display: flex; align-items: center; gap: 12px;}
.account__avatar {position: relative; width: 32px; height: 32px;  border-radius: 999px; background: #2385CD; color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer;}
.account__badge {position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 10px; display: flex; align-items: center; justify-content: center;}
.account__name-label {font-size: 11px; color: #9ca3af;}
.account__name-main {font-size: 13px; font-weight: 500;}
.account__short a:hover {color: #2385CD; text-decoration: none !important;}
 

@media (max-width: 1280px) {
  .dashboard__search {position:relative; flex:0 0 50%;}
}
@media (max-width: 1024px) {
  .dashboard__search {display: none;}
}
@media (max-width: 480px) {
  .account__short {display: flex; align-items: center; gap: 12px; flex: 0 0 100%;}
  .menu__toggle {order: 2;}
  .dashboard__top-right {flex-wrap: wrap;}
  .dashboard__top {display: flex; align-items: flex-start;}
}

.dashboard {margin:0;}
.dashboard__title {display: flex; align-items: center; gap: 16px; font-size: 36px; color: #003257; font-weight: 500;}
.dashboard__darkblue {color: #003257; display: block; font-weight: 500;}
.dashboard__inline {display: flex; gap: 30px; align-items: stretch; justify-content: space-between;flex-wrap: wrap;}
.dashboard__inline-block {background: #fff; padding: 10px 5px 5px 5px; border-radius: 20px; flex: 30%;display: flex;flex-direction: column;}
.dashboard__inline-save {flex: 30%;}
.dashboard__inline-profile {flex: 35%;}
.dashboard__inline-information {flex: 67.7%; padding: 5px;}
.dashboard__inline-header {display: flex; gap: 10px; align-items: center; justify-content: flex-start; padding-left: 10px; margin-bottom: 10px; position: relative;}
.dashboard__arrow {position: absolute; right: 10px; top: -5px;}
.dashboard__inline-inner {background: #F5F5F5; padding: 20px; border-radius: 20px;flex: 1;}
.dashboard__nocontent {text-align: center; color: #A3A3A3;}
.dashboard__logo {position: relative; display: block; margin-bottom: 20px; background: #fff; border-radius: 10px; border: 1px solid #D0D2D9; padding: 15px; text-align: center;}
.dashboard__logo img {width: auto; height: auto; max-height: 100px; object-fit: cover; margin: auto;}
.dashboard__inline-inner p {font-size: 13px;}
.dashboard__upload-field {display: flex; align-items: center; width: 100%; border: 1px solid #D0D2D9; border-radius: 10px; justify-content: space-between;
  padding: 0 0 0 10px; position: relative; cursor: pointer; height: 41px; gap: 20px;}
.dashboard__upload-label {font-size: 13px; background: #f5f5f5; position: absolute; top: -10px; left: 5px; padding: 0 0 0 5px;}
.dashboard__upload-input {position: absolute; inset: 0; opacity: 0; cursor: pointer;}

.dashboard__inline-in {display: flex; gap: 20px; align-items: center; justify-content: space-between;}
.profile-logo {flex: 0 0 50%; background: #fff; padding: 10px; border: 1px solid #D0D2D9;}
.profile-company {flex: 0 0 50%; color: #003257; font-weight: 500;}
.profile-row {font-size: 13px; display: flex; gap: 5px; margin-bottom: 5px;}
.profile-link {color: #2385CD;}
.profile-label {display: flex; gap: 5px; align-items: center;}

/* ===== cargo ===== */
.cargo-number {display:flex; align-items:center; justify-content: space-between; gap: 8px; margin-bottom: 10px;}
.cargo-id {color: #003257; font-weight: 500; font-size: 24px;}
.cargo-status {padding: 0 12px; background: #BAD5EA; color: #003257; font-size: 12px; font-weight: 500;}
.cargo-route {font-size: 13px;}
.cargo-progress {height: 20px; background: #EAEAEA; border-radius: 999px; margin:4px 0 10px 0; overflow: hidden;}
.cargo-progress-bar {width: 35%; height: 100%; border-radius: inherit; background: #2385CD;}
.cargo-route-top {display:flex; justify-content: space-between; color: #003257; font-weight: 500;}
.cargo-route-bottom {display: flex; justify-content: space-between; color: #7B7B7B;}
.cargo-carrier {margin-top: 20px; padding:10px 20px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: space-between;font-size: 13px;}
.cargo-carrier-label {color: #ADADAD;}
.cargo-carrier-name {font-weight: 500; color: #003257;}

/* ===== transport ===== */
.vehicle-title {display:flex; align-items:center; justify-content: space-between; gap: 8px; margin-bottom: 10px;}
.vehicle-name {color: #003257; font-weight: 500; font-size: 24px;}
.vehicle-plate {font-size: 14px; text-transform: uppercase;}
.vehicle-status {padding: 0 12px; background: #BAD5EA; color: #003257; font-size: 12px; font-weight: 500;}
.vehicle-status-green {background: #BAEAC4;}

.vehicle-list {margin-top: 20px;}
.vehicle-row {display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;}
.vehicle-row-name {color: #003257; font-weight: 500; font-size: 20px;}
.vehicle-row-plate {font-size: 14px; text-transform: uppercase;}
.vehicle-progress-bar {width:70%;}

@media (max-width: 1440px) {
  .dashboard__inline-block {flex: 48%;}
}
@media (max-width: 480px) {
  .cargo-progress {height: 15px;}
  .cargo-id, .vehicle-name {font-size: 18px;}
  .vehicle-row-name {font-size: 16px;}
}

.dashboard__profile-item {display: flex; align-items: center; justify-content: space-between; padding: 6px 15px; position: relative; background: #fff;}
.dashboard__profile-item:nth-child(2n) {background: #EAEAEA;}
.dashboard__profile-label {font-size: 13px;}
.dashboard__profile-text {padding-left: 10px;color: #2385CD;}
.dashboard__profile--text {font-size: 15px; font-weight: 500; color: #003257; padding-left: 0;}
.dashboard__profile-input {display: none; width: auto; padding:0 10px; border: 1px solid #D0D2D9; border-radius: 4px !important; font-size: 13px !important; 
  height: 30px;}
.dashboard__profile-actions {display: flex; gap: 10px; margin-left: 10px;}
.dashboard__profile-edit, .dashboard__profile-save {width: 20px; height: 20px; cursor: pointer;}
.dashboard__profile-save {display: none;}

#password-toggle {cursor:pointer; position:absolute; right:40px; top:50%; transform:translateY(-50%);}
.dashboard__profile-subtitle {color: #003257; font-weight: 500;font-size: 13px;}


.ff-checkbox {display: flex;}
.ff-checkbox-box {display: inline-flex; align-items: center; cursor: pointer; position: relative; width: 18px; height: 18px; border: 1px solid #787878;
  border-radius: 5px; flex-shrink: 0; position: relative;}
.ff-checkbox input {position: absolute; opacity: 0; width: 0; height: 0;}
.ff-checkbox-box::after {content: ""; position: absolute; inset: 3px 4px 3px 4px; border-right: 3px solid #1C7ED6; border-bottom: 3px solid #1C7ED6;
  transform: rotate(45deg); opacity: 0;}
.ff-checkbox input:checked + .ff-checkbox-box::after {opacity: 1;}

.dashboard__profile-notes {width: 100%; display: flex; padding: 15px 20px; font-size: 13px; margin: 10px 0 0 0; min-height: 100px; font-size: 13px;}
.dashboard__inline-save .btn {padding: 0 10px; width: 100%;}
.ff-checkbox-text {font-size: 13px; padding-left: 10px;}

@media (max-width: 1024px) {
  .dashboard__profile-notes {min-height: 200px;}
  .dashboard__inline-information {flex: 100%; padding: 5px;}
}
@media (max-width: 799px) {
  .dashboard__profile-notes {min-height: 150px;}
}
@media (max-width: 480px) {
  .dashboard__title {font-size: 26px; gap: 10px;}
  .dashboard__title img {width: 30px; height: 30px;}
}

/* ===== add cargo ===== */
.dashboard__general-row {display: flex; align-items: center; gap: 20px; margin-bottom: 40px;}
.dashboard__general-label {flex: 0 0 20%; font-size: 13px; gap: 5px; display: flex; align-items: center; justify-content: flex-end;}
.dashboard__general-input {position: relative; flex: 0 0 78%;}
.dashboard__general-input input {width: 100%;}
.dashboard__general-characters {position: absolute; bottom: -25px; right: 10px; font-size: 13px; font-style: italic;}


.dashboard__information-row {display: flex; align-items: center; gap: 20px; margin-bottom: 20px; justify-content: space-between;}
.dashboard__information-row .mf-label {width:auto; margin-right: 20px; font-size: 13px;}
.dashboard__information-row input[type="text"].mf-input, .dashboard__information-row input[type="number"].mf-num { border:1px solid #D0D2D9 !important; 
  background:#fff !important; box-shadow:none !important; padding:0 12px; color: #003257; outline:none; font-size: 13px;}
.dashboard__information-row .mf-line {margin-bottom:0;}

.dashboard__profile-cost {color: #2385CD; font-weight: 600;}
.dashboard__profile-info {display: block; width: 100%; padding: 10px; font-size: 13px; margin: 10px 0; min-height: 150px;}

.cargo-photos {display: flex; gap: 8px; padding: 8px; background: #f5f6f8; border-radius: 12px; flex-wrap: wrap;}

.cargo-photo-item, .cargo-photo-add {position: relative; width: 70px; height: 70px; border-radius: 8px; overflow: hidden; background: #fff;
  border: 1px solid #D0D2D9; display: inline-flex; align-items: center; justify-content: center;}
.cargo-photo-item img {width: 100%; height: 100%; object-fit: cover;}
.cargo-photo-remove {text-align: center; line-height: 15px; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; border: none;
  background: #ff4d4d; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; padding: 0;}
.cargo-photo-add {border-style: dashed; cursor: pointer; font-size: 28px; color: #D0D2D9;}
.btn--secondary {background: #fff; border: 1px solid #003257; color:#003257;}
.btn--secondary:hover {background: #f5f6f8; border: 1px solid #003257; color:#003257;}

@media (max-width: 799px) {
  .dashboard__general-label {flex: 0 0 30%;}
  .dashboard__general-input {flex: 0 0 68%;}
  .dashboard__information-row {flex-wrap: wrap;}
}
@media (max-width: 560px) {
  .dashboard__general-label {flex: 0 0 100%; justify-content: flex-start;}
  .dashboard__general-input {flex: 0 0 100%;}
  .dashboard__general-row {flex-wrap: wrap;}
  .segment span {min-width: 15px;}
}


/*============================
My Cargo
============================*/
.dashboard__filter {display: inline-flex; align-items: center; gap: 0; border-radius: 50px; border: 1px solid #D0D2D9; padding: 2px; font-size: 13px; margin-bottom: 30px;}
.dashboard__filter-item {cursor: pointer; padding: 5px 20px;}
.dashboard__filter-item.active {color:#fff; background:#2385CD; border-radius: 50px; cursor: default;}

.dashboard__cargo-item, .dashboard__transport-item {background: #fff; padding: 10px 5px 5px 5px; border-radius: 20px; font-size: 13px; margin-bottom: 20px;}
.dashboard__cargo-inner {background: #F5F5F5; padding: 20px; border-radius: 20px;flex: 1; display: flex; align-items: flex-end;}
.dashboard__cargo-await {background: #F5F5F5; padding: 20px; border-radius: 20px;flex: 1; display: flex; align-items: flex-end; flex-wrap: wrap;}
.dashboard__cargoitem-type {display: flex; align-items: center; justify-content: flex-start;}
.dashboard__cargoitem-type img {margin-right: 10px;}
.dashboard__cargoitem-span label {display: block; color: #003257; font-weight: 500;}
.dashboard__cargo-number {color: #003257; font-size: 24px; font-weight: 500; margin-bottom: 5px; display: block;}
.dashboard__cargo-line {background:#D3CECE; width: 1px; display: block; height: 40px; margin: 0 25px;}
.dashboard__cargo-block .cargo-route-top {display:flex; justify-content: space-between; color: #7B7B7B; font-weight: 400; flex-wrap: wrap;}
.dashboard__cargo-block .cargo-route-bottom {display: flex; justify-content: space-between; color: #003257; font-weight: 500;}
.dashboard__cargo-center {flex:0 0 50%;}
.dashboard__cargo-block .cargo-status, .dashboard__cargo-block .vehicle-status {display: inline-block; margin-bottom: 15px;}
.dashboard__cargo-await .cargo-progress-bar {width: 0; height: 100%; border-radius: inherit; background: #2385CD;}

.dashboard__transport-item .dashboard__cargo-block .cargo-status, .dashboard__transport-item .dashboard__cargo-block .vehicle-status {margin:0 0 0 15px;}

@media (max-width: 1680px) {
  .dashboard__cargo-center {flex:0 0 35%;}
}  
@media (max-width: 1500px) {
  .dashboard__cargo-center {flex:0 0 25%;}
} 
@media (max-width: 1380px) {
  .dashboard__cargo-center {flex:0 0 100%; margin: 0; display: block !important;}
  .dashboard__cargo-block {display: flex; gap: 20px;align-items: center;}
  .dashboard__cargo-line {display: none;}
  .dashboard__cargo-await {gap:30px;}
  .dashboard__cargo-number {margin-bottom: 0;}
  .dashboard__cargo-block .cargo-status, .dashboard__cargo-block .vehicle-status {margin-bottom: 0;}
} 
@media (max-width: 660px) {
  .dashboard__filter {flex-wrap: wrap; border: none; padding: 0;}
  .dashboard__filter-item {flex:0 0 100%; margin-bottom: 5px; border: 1px solid #D0D2D9;border-radius: 10px;}
  .dashboard__filter-item.active {color:#fff; background:#2385CD; border-radius: 10px; cursor: default; border: 1px solid #2385CD;}
} 

.status-popover {position: absolute; right: 0; top: 100%; margin-top: 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 4px 0;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12); z-index: 20; min-width: 180px;}
.status-popover__item {display: block; width: 100%; padding: 6px 10px; text-align: left; font-size: 13px; line-height: 1.4; border: none; background: transparent;
  cursor: pointer;}
.status-popover__item:hover {background-color: #f1f5f9;}
.status-popover__item--active {font-weight: 500; background-color: #e0f2fe;}
/* новые варианты */
.vehicle-status-gray {background-color: #e5e7eb; color: #374151;}
.vehicle-status-dark {background-color: #111827; color: #f9fafb;}


#region-block {position: relative;}
.region-popover {position: absolute; right: 0; top: 100%; margin-top: 8px; padding: 10px 12px; min-width: 220px; background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 8px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15); z-index: 20; display: none;}
.region-popover.is-open {display: block;}
.region-popover-title {font-size: 13px; font-weight: 500; margin-bottom: 6px;}
.region-popover-item {display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 4px; cursor: pointer;}
.region-popover-item input[type="checkbox"] {cursor: pointer;}
.region-popover-apply {margin-top: 8px; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid #0f766e; background: #0f766e;
  color: #fff; cursor: pointer;}

/*============================
Distance Calculator
============================*/
.distanse__inline {display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;}
.distance__map img {border-radius: 20px; width: 100%; height: auto;}
.distanse__inline-left {flex:0 0 40%; background: #fff; padding: 10px 5px 5px 5px; border-radius: 20px;;}
.distanse__inline-right {flex:0 0 58%;}
.distanse__inline-inner {background: #F5F5F5; padding: 20px; border-radius: 20px; margin-bottom: 10px;}
.distanse__row {display: flex; align-items: center; gap: 30px;}
.distanse__row .mf-label {width: 145px; margin-left: 5px; color: #787878; font-weight: 400; font-size: 13px;}
.distanse__row input[type="number"].mf-num {width: 70px !important; text-align: center;}
.distanse__inline .btn {padding: 0 30px;}
.distanse__inline .dashboard__darkblue {margin-bottom: 20px;}
.distanse__result .mf-line {margin-bottom: 10px;}
.distanse__result .mf-label {width: 160px;}
.distanse__result .mf-label-value {color: #2385CD;}

@media (max-width: 1600px) {
  .distanse__inline {flex-wrap: wrap;}
  .distanse__inline-left {flex:0 0 100%;}
  .distanse__inline-right {flex:0 0 100%;}
}  
@media (max-width: 768px) {
  .distanse__row {gap: 0; flex-wrap: wrap;}
  .distanse__row .mf-line {flex: 0 0 100%;}
  .distanse__row .mf-label {flex:0 0 145px;}
}  


/*============================
Trackers
============================*/
.trackers__inline {display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;}
.trackers__inline-left {flex:0 0 35%;;}
.trackers__inline-right {flex:0 0 63%;}
.trackers__map img {border-radius: 20px; width: 100%; height: 250px; object-fit: cover;}

.ff-timeline {margin-top: 10px; background: #fff; border-radius: 20px; padding: 20px 30px;}
.ff-tl-item {display: grid; grid-template-columns: 48px 1fr; column-gap: 8px; align-items: flex-start;}
.ff-tl-left {display: flex; flex-direction: column;  align-items: center;}
.ff-tl-dot {width: 35px; height: 35px; border-radius: 50%; background: #EAEAEA; display: flex; align-items: center; justify-content: center; z-index: 2;}
.ff-tl-dot img {width: 18px; height: 18px;}

.ff-tl-dot--active {background: #2385CD; border-color: #2385CD;}
.ff-tl-inner-dot {width: 8px; height: 8px; border-radius: 50%; background: #b9c2ce;}
.ff-tl-vline {width: 7px; flex-grow: 1; height: 27px;}
.ff-tl-vline--active {background: #2385CD;}
.ff-tl-vline--inactive {background: #EAEAEA;}
.ff-tl-content {padding-top: 2px;}
.ff-tl-title-row {display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 8px;}
.ff-tl-title {font-size: 13px; font-weight: 500; color: #375165;}
.ff-tl-hline {height: 1px; background: #dde3ec; margin-top: 1px;}
.ff-tl-time {font-size: 13px; color: #2c3e50; white-space: nowrap;}
.ff-tl-date {font-size: 11px;}


@media (max-width: 768px) {
  .trackers__inline {
    display: block;       /* вместо flex */
  }

  .trackers__inline > * {
    width: 100%;
    margin-bottom: 16px;
  }
}