/**
 * Системные формы (feedback, callme, mobile-info).
 * Контент в модалке EOKit (.eokit-modal-body) или на /system/forms/.
 */

/* -------------------------------------------------------------------------
   Mobile info (Контакты) — минималистично, в стиле auth-modal
   ------------------------------------------------------------------------- */

   .eokit-modal-body .mobile-info,
   .eokit-modal-body .mobile-info * {
     box-sizing: border-box;
   }
   
   .eokit-modal-body .mobile-info {
     /* Палитра как в auth (login_form.html) */
     --mobile-fg: #26262c;
     --mobile-fg-muted: #333;
     --mobile-fg-subtle: rgba(24, 24, 28, 0.58);
     --mobile-border: oklch(0.75 0 0 / 0.15);
     --mobile-border-subtle: rgba(24, 24, 28, 0.14);
     --mobile-bg: #fff;
     --mobile-bg-input: rgba(20, 20, 22, 0.025);
     --mobile-accent: var(--site-color, #26262c);
     --mobile-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.07);
     --mobile-radius-s: 0.75rem;
   
     font-family: 'Inter', sans-serif, system-ui !important;
     font-optical-sizing: auto;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     font-size: 1rem;
     line-height: 1.4;
     color: var(--mobile-fg);
     background: var(--mobile-bg);
   
     margin: 0 auto;
     padding: 1rem 1.75rem 2rem;
     min-width: 0;
     max-width: 100%;
     text-align: center;
   }
   
   /* Шапка — как в auth-modal */
   .eokit-modal-body .mobile-info .mobile-info-head {
     margin: 0 0 1rem;
     text-align: center;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-title {
     color: var(--mobile-fg);
     font-size: 1.25rem;
     font-weight: 500;
     line-height: 1rem;
     margin: 0 0 0.75rem;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-description {
     font-weight: 400;
     margin: 0 0 1rem;
     font-size: 0.8125rem;
     line-height: 1.25;
     color: var(--mobile-fg-subtle);
   }
   
   .eokit-modal-body .mobile-info .mobile-info-body {
     padding: 0;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-stack {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
   }
   
   /* Секции — без карточек, только отступы */
   .eokit-modal-body .mobile-info .mobile-info-section {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.375rem;
     text-align: center;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-label {
     font-size: 0.8125rem;
     font-weight: 400;
     color: var(--mobile-fg-subtle);
     line-height: 1.25;
     margin: 0;
   }
   
   /* Город — одна строка: иконка + ссылка */
   .eokit-modal-body .mobile-info .mobile-info-section-city {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     gap: 0.375rem 0.5rem;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-section-city .mobile-info-label {
     width: 100%;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-city {
     display: inline-flex;
     align-items: center;
     gap: 0.375rem;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-city .eokit-icon {
     color: var(--mobile-fg-subtle);
     flex-shrink: 0;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-city a.eo-modal-beta {
     color: var(--mobile-fg-muted);
     font-weight: 400;
     transition: color 0.2s ease;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-city a.eo-modal-beta:hover {
     color: var(--mobile-fg);
     text-decoration: underline;
   }
   
   /* Телефоны — список без бокса */
   .eokit-modal-body .mobile-info .mobile-info-section-phones .mobile-info-label {
     display: block;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-phones {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-phone {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     min-height: 44px;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-phone .eokit-icon {
     color: var(--mobile-fg-subtle);
     flex-shrink: 0;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-phone .show_phone {
     display: inline-flex;
     margin-top: 0.25rem;
     font-size: 0.75rem;
     line-height: 1.2;
     color: var(--mobile-fg-subtle);
   }
   
   .eokit-modal-body .mobile-info a {
     text-decoration: none !important;
     transition: color 0.2s ease;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-phone-link {
     color: var(--mobile-fg-muted);
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.35;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-phone-link:hover {
     color: var(--mobile-fg) !important;
     text-decoration: underline;
   }
   
   /* Кнопки — primary как «Войти» в auth */
   .eokit-modal-body .mobile-info .mobile-info-actions {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     margin-top: 0.25rem;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-action-link {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     min-height: 44px;
     padding: 0 1rem;
     box-sizing: border-box;
     border-radius: var(--mobile-radius-s);
     font-size: 0.875rem;
     font-weight: 500;
     line-height: 1.25;
     text-align: center;
     transition: filter 0.2s ease, transform 0.05s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-action-primary .mobile-info-action-link {
     border: none;
     background: var(--mobile-accent);
     color: #fff !important;
     box-shadow: var(--mobile-shadow);
   }
   
   .eokit-modal-body .mobile-info .mobile-info-action-primary .mobile-info-action-link:hover {
     filter: brightness(1.08);
   }
   
   /* Secondary — как auth-social-more: рамка, светлый фон */
   .eokit-modal-body .mobile-info .mobile-info-action-secondary .mobile-info-action-link {
     border: 1px solid var(--mobile-border-subtle);
     background: var(--mobile-bg);
     color: var(--mobile-fg-muted) !important;
     box-shadow: var(--mobile-shadow);
   }
   
   .eokit-modal-body .mobile-info .mobile-info-action-secondary .mobile-info-action-link:hover {
     border-color: var(--mobile-border);
     color: var(--mobile-fg) !important;
     box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
   }
   
   /* Третичная «Все контакты» — как auth-modal-register */
   .eokit-modal-body .mobile-info .mobile-info-action-contacts .mobile-info-action-link {
     min-height: auto;
     padding: 0.5rem 0;
     border: none;
     background: transparent;
     box-shadow: none;
     color: var(--mobile-fg-subtle) !important;
     font-size: 0.8125rem;
     font-weight: 400;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-action-contacts .mobile-info-action-link:hover {
     color: var(--mobile-fg) !important;
     text-decoration: underline;
   }
   
   .eokit-modal-body .mobile-info .mobile-info-action-link:active {
     transform: scale(0.99);
   }
   
   .eokit-modal-body .mobile-info .seo {
     display: none !important;
   }
   
   @media (max-width: 380px) {
     .eokit-modal-body .mobile-info {
       padding: 1rem 1rem 1.5rem;
     }
   }
   
   /* -------------------------------------------------------------------------
      City choose (модалка выбора города)
      Ровные колонки (grid), явная прокрутка, визуально выделенная область списка.
      ------------------------------------------------------------------------- */
   
   /* Контейнер формы: жёстко ограничить ширину и обрезать overflow, чтобы колонки не уходили вправо */
   .eokit-modal-body .eo-container:has(.city-choose-container),
   .eokit-modal-body .eo-container:has(.city-choose-container-small) {
     min-width: 0;
     max-width: 100%;
     overflow-x: hidden;
   }
   
   .eokit-modal-body .eo-container .city-choose-container,
   .eokit-modal-body .eo-container .city-choose-container-small,
   .eokit-modal-body .eo-container .city-choose-container *,
   .eokit-modal-body .eo-container .city-choose-container-small * {
     box-sizing: border-box;
     font-family: 'Inter', sans-serif, system-ui !important;
     font-optical-sizing: auto;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
   
   .eokit-modal-body .eo-container .city-choose-container,
   .eokit-modal-body .eo-container .city-choose-container-small {
     --city-fg: #26262c;
     --city-fg-muted: #333;
     --city-fg-subtle: rgba(24, 24, 28, 0.58);
     --city-border: oklch(0.75 0 0 / 0.15);
     --city-border-subtle: rgba(24, 24, 28, 0.14);
     --city-bg: #fff;
     --city-bg-input: rgba(20, 20, 22, 0.025);
     --city-bg-list: rgba(20, 20, 22, 0.03);
     --city-bg-track: rgba(24, 24, 28, 0.07);
     --city-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.07);
     --city-radius: 1rem;
     --city-radius-s: 0.75rem;
   
     width: 100%;
     max-width: 100%;
     min-width: 0;
     margin: 0 auto;
     padding: 0rem 1.75rem 1.5rem;
     overflow-x: hidden;
     color: var(--city-fg);
     background: var(--city-bg);
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.25rem;
     text-align: center;
   }
   
   .eokit-modal-body .eo-container .city-choose-container-small .city-search-container {
     display: none;
   }
   
   /* Шапка */
   .eokit-modal-body .eo-container .city-choose-head {
     margin: 0 0 1rem;
     text-align: center;
   }
   
   .eokit-modal-body .eo-container .city-list-scroll-hint,
   .eokit-modal-body .eo-container .city-choose-title,
   .eokit-modal-body .eo-container .city-choose-description {
     user-select: none;
     -webkit-user-select: none;
   }
   
   .eokit-modal-body .eo-container .city-choose-title {
     color: var(--city-fg);
     font-size: 1.25rem;
     font-weight: 500;
     line-height: 1rem;
     margin: 0 0 0.75rem;
   }
   
   .eokit-modal-body .eo-container .city-list-scroll-hint,
   .eokit-modal-body .eo-container .city-choose-description {
     margin: 0;
     color: var(--city-fg-subtle);
     font-size: 0.8125rem;
     font-weight: 400;
     line-height: 1.25;
   }
   
   /* Поиск — выделенная область */
   .eokit-modal-body .eo-container .city-search-container {
     position: relative;
     margin: 0 0 0.875rem;
     text-align: left;
   }
   
   .eokit-modal-body .eo-container #city-search-input {
     width: 100%;
     height: 40px;
     padding: 0 1rem 0 2.75rem;
     border: 1px solid var(--city-border);
     border-radius: var(--city-radius-s);
     background: var(--city-bg);
     color: var(--city-fg);
     font-size: 0.9375rem;
     font-weight: 400;
     line-height: 1.25rem;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
   
   .eokit-modal-body .eo-container #city-search-input:focus {
     outline: none;
     border-color: var(--city-fg-subtle);
   }
   
   .eokit-modal-body .eo-container #city-search-input::placeholder {
     color: var(--city-fg-subtle);
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5rem;
   }
   
   .eokit-modal-body .eo-container .city-search-container::before {
     content: '';
     position: absolute;
     left: 0.875rem;
     top: 50%;
     width: 1.25rem;
     height: 1.25rem;
     transform: translateY(-50%);
     background: currentColor;
     color: var(--city-fg-subtle);
     opacity: 0.6;
     pointer-events: none;
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: contain;
   }
   
   /* Популярные города — отдельный блок с фоном */
   .eokit-modal-body .eo-container #popular-cities-section {
     text-align: left;
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
   }
   
   .eokit-modal-body .eo-container #popular-cities-section > div {
     color: var(--city-fg);
     font-size: 0.875rem;
     font-weight: 600;
     line-height: 1rem;
   }
   
   .eokit-modal-body .eo-container .popular-cities-list {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     padding-left: 0.5rem;
     list-style: none;
   }
   
   .eokit-modal-body .eo-container .popular-cities-list li {
     min-width: 0;
     margin: 0;
     padding: 0;
   }
   
   .eokit-modal-body .eo-container .popular-cities-list a {
     display: block;
     padding: 0.25rem 0;
     color: var(--city-fg-muted);
     text-decoration: none;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1rem;
     transition: color 0.2s ease, background 0.2s ease;
   }
   
   .eokit-modal-body .eo-container #city-list-container a:hover,
   .eokit-modal-body .eo-container .city-list-small a:hover {
     color: var(--city-fg);
     text-decoration: none;
   }
   
   .eokit-modal-body .eo-container #city-list-container a:hover,
   .eokit-modal-body .eo-container .popular-cities-list a:hover {
     font-weight: 600;
     color: var(--city-fg);
   }
   
   /* Кнопка «Показать все города» — явная вторичная кнопка */
   .eokit-modal-body .eo-container #city-show-more {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 14px 1.25rem;
     border: 1px solid var(--city-border);
     border-radius: var(--city-radius-s);
     background: var(--city-bg);
     color: var(--city-fg-muted);
     font-size: 0.875rem;
     font-weight: 500;
     line-height: 14px;
     cursor: pointer;
     transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
   }
   
   .eokit-modal-body .eo-container #city-show-more:hover {
     color: var(--city-fg);
     border-color: var(--city-fg-subtle);
     background: var(--city-bg-list);
   }
   
   /* Обёртка только для плавного раскрытия/сворачивания — не меняет стили списка внутри */
   .eokit-modal-body .eo-container .city-list-reveal {
     min-width: 0;
     max-width: 100%;
     overflow: hidden;
     max-height: 0;
     transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
   }
   
   .eokit-modal-body .eo-container .city-list-reveal.is-expanded {
     max-height: 75vh;
   }
   
   /* Полный список: максимум 3 колонки по алфавиту (не выходить за пределы модалки) */
   .eokit-modal-body .eo-container #city-list-container {
     width: 100%;
     max-width: 100%;
     min-width: 0;
     box-sizing: border-box;
     column-count: 3;
     column-gap: 1.25rem;
     /* column-fill: auto; */
     overscroll-behavior: contain;
     overflow-x: clip;
   }
   
   /* Подсказка о прокрутке (если в разметке есть .city-list-scroll-hint) */
   .eokit-modal-body .eo-container .city-list-scroll-hint {
     display: block;
     padding: 0.75rem 1rem;
     color: var(--city-fg-subtle);
     text-align: center;
   }
   
   .eokit-modal-body .eo-container #city-list-container::-webkit-scrollbar {
     width: 8px;
   }
   
   .eokit-modal-body .eo-container #city-list-container::-webkit-scrollbar-track {
     background: transparent;
   }
   
   .eokit-modal-body .eo-container #city-list-container::-webkit-scrollbar-thumb {
     background: var(--city-fg-subtle);
     border-radius: 4px;
   }
   
   .eokit-modal-body .eo-container #city-list-container::-webkit-scrollbar-thumb:hover {
     background: var(--city-fg-muted);
   }
   
   .eokit-modal-body .eo-container #city-list-container[style*="display:none"],
   .eokit-modal-body .eo-container #city-list-container[style*="display: none"] {
     display: none !important;
   }
   
   /* Блок по букве не разрывать между колонками, не вылезать за колонку */
   .eokit-modal-body .eo-container #city-list-container .modal_city_col {
     break-inside: avoid;
     margin-bottom: 0.75rem;
     width: 100%;
     vertical-align: top;
     display: inline-block;
   }
   
   .eokit-modal-body .eo-container #city-list-container .modal_city_col a {
     overflow-wrap: break-word;
     word-break: break-word;
   }
   
   .eokit-modal-body .eo-container #city-list-container .modal_city_col ul {
     display: flex;
     flex-direction: column;
     margin: 0;
     align-items: flex-start;
     padding: 0 0 0 1.5rem;
     position: relative;
   }
   
   .eokit-modal-body .eo-container #city-list-container .modal_city_col ul li {
     height: auto;
     width: 100%;
     text-align: left;
   }
   
   .eokit-modal-body .eo-container #city-list-container .modal_city_col .let {
     color: var(--city-fg);
     font-size: 0.875rem;
     font-weight: 600;
     line-height: 0.75rem;
     position: absolute;
     left: 0;
     top: 0.5rem;
     width: auto;
   }
   
   .eokit-modal-body .eo-container #city-list-container a,
   .eokit-modal-body .eo-container .city-list-small a {
     color: var(--city-fg-muted);
     text-decoration: none;
     font-size: 0.875rem;
     line-height: 1rem;
     font-weight: 400;
     display: block;
     width: 100%;
     padding: 0.5rem 0;
     border-radius: 4px;
     transition: color 0.2s ease, background 0.2s ease;
   }
   
   .eokit-modal-body .eo-container #city-list-container a:hover,
   .eokit-modal-body .eo-container .city-list-small a:hover {
     text-decoration: none;
   }
   
   /* Компактный список (мало городов) */
   .eokit-modal-body .eo-container .city-list-small {
     display: flex;
     flex-direction: column;
     margin: 0;
     padding: 0;
     text-align: left;
   }
   
   .eokit-modal-body .eo-container .city-list-small > li {
     margin: 0;
     padding: 0.5rem 0;
     list-style: none;
   }
   
   .eokit-modal-body .eo-container .city-list-small > li.dotted {
     border-bottom: 1px solid var(--city-border);
     text-align: center;
   }
   
   .eokit-modal-body .eo-container .city-list-small > li.dotted:last-child {
     border-bottom: none;
   }
   
   .eokit-modal-body .eo-container .city-list-small > li.dotted a {
     display: block;
     padding: 0.25rem 0;
   }
   
   @media (max-width: 600px) {
     .eokit-modal-body .eo-container .city-list-reveal {
       min-width: 0;
       max-width: 100%;
       overflow: hidden;
     }
   
     .eokit-modal-body .eo-container #popular-cities-section > div {
       font-size: 0.9375rem;
     }
   
     .eokit-modal-body .eo-container .popular-cities-list {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 0.5rem 1rem;
     }
   
     .eokit-modal-body .eo-container .popular-cities-list a {
       padding: 0.75rem 0.5rem;
       font-size: 1rem;
       line-height: 1.25;
     }
   
     .eokit-modal-body .eo-container #city-show-more {
       min-height: 2.75rem;
     }
   
     .eokit-modal-body .eo-container .city-list-scroll-hint {
       padding: 0.5rem 0.75rem;
       font-size: 0.75rem;
     }
   
     .eokit-modal-body .eo-container #city-list-container {
       column-count: 2;
       column-gap: 1rem;
       padding: 1rem;
       min-width: 0;
       max-width: 100%;
       overflow-x: clip;
     }
   
     .eokit-modal-body .eo-container #city-list-container .modal_city_col {
       min-width: 0;
       max-width: 100%;
       margin-bottom: 1rem;
     }
   
     .eokit-modal-body .eo-container #city-list-container .modal_city_col .let {
       top: 0.875rem;
       font-size: 1rem;
       line-height: 1;
     }
   
     .eokit-modal-body .eo-container #city-list-container a,
     .eokit-modal-body .eo-container .city-list-small a {
       padding: 0.75rem 0.25rem;
       font-size: 1rem;
       line-height: 1.35;
       min-height: 2.75rem;
       display: flex;
       align-items: center;
     }
   }
   
   @media (max-width: 380px) {
     .eokit-modal-body .eo-container .city-choose-container,
     .eokit-modal-body .eo-container .city-choose-container-small {
       padding: 1rem 1.25rem 1.25rem;
       min-width: 0;
       max-width: 100%;
       overflow-x: hidden;
     }
   
     .eokit-modal-body .eo-container .city-list-reveal {
       min-width: 0;
       max-width: 100%;
       overflow: hidden;
     }
   
     .eokit-modal-body .eo-container #popular-cities-section {
       padding: 0.75rem;
     }
   
     .eokit-modal-body .eo-container .popular-cities-list {
       grid-template-columns: 1fr;
       gap: 0.5rem 0;
     }
   
     .eokit-modal-body .eo-container .popular-cities-list a {
       padding: 0.75rem 0.5rem;
       font-size: 1rem;
       line-height: 1.25;
     }
   
     .eokit-modal-body .eo-container #city-list-container {
       column-count: 1;
       padding: 1rem;
       min-width: 0;
       max-width: 100%;
       overflow-x: clip;
     }
   
     .eokit-modal-body .eo-container #city-list-container .modal_city_col {
       min-width: 0;
       max-width: 100%;
       margin-bottom: 1.25rem;
     }
   
     .eokit-modal-body .eo-container #city-list-container .modal_city_col .let {
       top: 0.875rem;
       font-size: 1rem;
       line-height: 1;
     }
   
     .eokit-modal-body .eo-container #city-list-container a,
     .eokit-modal-body .eo-container .city-list-small a {
       padding: 0.75rem 0rem;
       font-size: 1rem;
       line-height: 1.35;
       min-height: 2.75rem;
       display: flex;
       align-items: center;
     }
   }