/* Local-taxi directory — public pages (index + per-settlement directory).
   Dark theme consistent with the rest of the app (#060606 + gold accent). */

/* The page now uses the shared site-header (centred logo + profile button)
   and the shared site-footer, so this block only styles the content area
   between them. The old bespoke .lt-header is gone. */
.lt-page {
  /* Одна колонка контента на всю страницу. Ширина задаётся ЗДЕСЬ, через
     --lt-col, а max-width включает тот же padding — поэтому внутренняя
     колонка равна ровно --lt-col на любом вьюпорте.

     Раньше страница была 900px, а hero/шаги/CTA внутри — по 760px каждый;
     блоки без своего max-width (заголовок «Где уже есть водители», сетка
     посёлков, сетка визиток в справочнике, сетка карточек продвижения)
     растягивались на все ~828px и выпирали с обеих сторон. Ставить каждому
     блоку max-width: 760px — та же мина на будущее: любой новый блок снова
     разъедется. Колонку определяет контейнер, вложенные блоки её только
     наследуют. */
  --lt-col: 760px;
  max-width: calc(var(--lt-col) + 2 * clamp(20px, 4vw, 36px));
  margin: 0 auto;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  padding: 28px clamp(20px, 4vw, 36px) 80px;
  /* Safety clip for decorative boxes (hero glow): clip, not hidden —
     hidden would make the page a scroll container and could cut the
     autocomplete dropdown. */
  overflow-x: clip;
}

/* Справочник посёлка (--wide): в 760px сетка визиток математически никогда
   не набирала третью колонку (3×280 + 2×18 = 876px) и на 1920/2560 плавала
   в пустых полях (контент — 40/30% экрана). 1160px = ширина лент поездок
   (my_rides, route-landing). Hero и CTA держим на прежней мере чтения.
   Ниже ~832px вьюпорта max-width не связывает — телефоны не затронуты. */
.lt-page--wide { --lt-col: 1160px; }

.lt-page--wide .lt-hero,
.lt-page--wide .lt-cta {
  max-width: 760px;
}

/* Хаб продвижения (--promote): те же promote-карточки, что и у поездок
   (orders/promote.css, .promote = константные 940px контента) —
   выравниваем ширину колонки, чтобы «оплата ощущалась одинаково» была
   правдой и по геометрии. */
.lt-page--promote { --lt-col: 940px; }

.lt-hero {
  position: relative;
  max-width: var(--lt-col);
  margin: 16px auto 36px;
  text-align: center;
}
/* Soft gold glow behind the hero — atmosphere without changing the #060606
   base. Painted by the pseudo-element before the hero's own content, so the
   text naturally renders on top; pointer-events off keeps links clickable. */
.lt-hero::before {
  content: "";
  position: absolute;
  /* Stays within the hero box: wider offsets caused horizontal scroll on
     phones (no ancestor clipped the overflow before .lt-page got clip —
     and `clip` itself is ignored by older iOS Safari). */
  left: 0;
  right: 0;
  top: -48px;
  height: 220px;
  background: radial-gradient(ellipse at 50% 0%, rgba(245, 194, 5, 0.08), transparent 70%);
  pointer-events: none;
}
.lt-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-from);
  margin-bottom: 14px;
}
/* On the directory page the eyebrow doubles as the way back to the picker. */
.lt-hero__eyebrow--link {
  text-decoration: none;
  transition: filter .15s ease;
}
.lt-hero__eyebrow--link:hover { filter: brightness(1.2); text-decoration: underline; }
.lt-hero__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.05;
  margin: 0 0 14px;
}
.lt-hero__subtitle {
  font-size: clamp(15px, 2vw, 18px);
  color: #c9c9c9;
  margin: 0;
}
/* Meta pills under the directory title: district/oblast + drivers-online
   count. Facts as chips, not a flat sentence. */
.lt-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: -2px 0 14px;
}
.lt-hero__pill {
  display: inline-block;
  /* Длинный регион («Мендыкаринский р-н, Костанайская обл.») на узких
     экранах не переносим в двухстрочный «блоб» с radius 999px — режем
     многоточием. Пилюля — flex-итем .lt-hero__meta, max-width: 100%
     ограничивает и автоматический min-size. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.3;
  color: #d9d9d9;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.lt-hero__pill--accent {
  color: var(--color-accent-from);
  background: rgba(245, 194, 5, 0.1);
  border-color: rgba(245, 194, 5, 0.35);
}

/* --- settlement search (index) --- */
/* Input and button share one explicit height + border-box, so they line up
   exactly. (Previously the input's height came from padding while the button
   had none — they never matched.) */
.lt-search {
  --lt-search-h: 58px;
  max-width: 600px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}
/* Grid (не flex): автокомплит оборачивает инпут в <div class="places-ac">,
   и flex не делил ряд предсказуемо. Колонка `auto` сайзит кнопку по её
   контенту (wrapper просто заполняет 1fr-трек; скрытый settlement_code —
   display:none, ячейку не занимает). Было 1fr 1fr — кнопка «Найти»
   растягивалась в золотую плиту 294px под 6-буквенный лейбл.
   min-width:0 lets long text shrink instead of stretching its column. */
.lt-search > * {
  min-width: 0;
}
.lt-search__input {
  width: 100%;
  height: var(--lt-search-h);
  box-sizing: border-box;
  /* appearance:none so iOS Safari honours the exact height (native inputs
     otherwise render taller, leaving the button visibly shorter). */
  -webkit-appearance: none;
  appearance: none;
  padding: 0 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  text-overflow: ellipsis;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.lt-search__input::placeholder { color: rgba(255, 255, 255, 0.4); }
.lt-search__input:focus {
  outline: none;
  border-color: rgba(245, 194, 5, 0.6);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(245, 194, 5, 0.15);
}
.lt-search__btn {
  height: var(--lt-search-h);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 34px;
  border: none;
  border-radius: 16px;
  background: var(--grad-accent);
  color: #1a1200;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(245, 194, 5, 0.18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.lt-search__btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(245, 194, 5, 0.3);
}
.lt-search__btn:active { transform: translateY(0); }

/* --- how it works (index) --- */
/* Three numbered steps in one quiet row: the page explains itself without a
   paragraph of prose. Hairline on top separates it from the search block. */
.lt-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--lt-col);
  margin: 0 auto 44px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.lt-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.lt-step__num {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  flex-shrink: 0;
  /* Fixed number column so every step's title/text starts at the same x —
     "01" is narrower than "02"/"03" (thin "1"), which otherwise pulls the
     first step's text left. 34px clears the widest number (~30px). */
  min-width: 34px;
  padding-top: 2px;
}
.lt-step__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lt-step__title { font-size: 15px; font-weight: 700; }
.lt-step__text { font-size: 13px; color: #9d9d9d; }

/* --- populated settlements (index) --- */
.lt-section-title {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 32px 0 16px;
}
/* Settlement rows: name + district context + labelled driver count. Replaces
   the old bare chips whose numbers didn't say what they counted. */
.lt-places {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.lt-place {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid #3d3d3d;
  border-radius: 16px;
  padding: 14px 16px;
  transition: border-color .15s ease, transform .15s ease;
}
.lt-place:hover { border-color: var(--color-accent-from); transform: translateY(-1px); }
.lt-place__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lt-place__name {
  font-size: 16px;
  font-weight: 700;
  /* Длинное однословное имя НП («Новоишимское») на 320px не должно
     вылезать из колонки под пилюлю счётчика — тот же гард, что у
     .lt-place__region ниже. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-place__region {
  font-size: 12.5px;
  color: #9d9d9d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-place__count {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-accent-from);
  background: rgba(245, 194, 5, 0.1);
  border-radius: 999px;
  padding: 5px 11px;
}
.lt-place__arrow { width: 16px; height: 16px; flex-shrink: 0; max-width: none; color: #777; }
.lt-place:hover .lt-place__arrow { color: var(--color-accent-from); }

/* --- driver cards (directory) --- */
.lt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.lt-card {
  /* relative: anchors the paid-promotion pill in the top corner. */
  position: relative;
  background: var(--color-surface);
  border: 1px solid #3d3d3d;
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* --- paid promotion (billing): bump floats the card up the list,
   highlight gilds it — the same effects rides get on the dashboard. --- */
.lt-card--featured {
  border-color: rgba(245, 194, 5, 0.55);
  box-shadow: 0 12px 32px rgba(245, 194, 5, 0.12);
}
/* «Продвигается» tag sits on the card's top edge — labels why a bumped
   card is above the rest (paid position, honestly marked). */
.lt-card__promo-pill {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-from);
  background: #141414;
  border: 1px solid rgba(245, 194, 5, 0.4);
}
/* Owner's manage row under the call button: "Ваша визитка · Изменить /
   Продвинуть". The edit link shows always; promote only under paid mode. */
.lt-card__manage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 13.5px;
}
.lt-card__manage-label { color: #9d9d9d; }
.lt-card__manage-links { display: flex; gap: 14px; flex-shrink: 0; }
.lt-card__manage-links a {
  color: var(--color-accent-from);
  text-decoration: none;
}
.lt-card__manage-links a:hover { text-decoration: underline; }
.lt-card__head { display: flex; align-items: center; gap: 14px; }
.lt-card__avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #1a1200;
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lt-card__name { font-size: 17px; font-weight: 700; }
.lt-card__car {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #bdbdbd;
}
/* Colour swatch dot: instant visual anchor for "which car do I look for".
   The inner ring keeps dark colours (чёрный) visible on the dark card. */
.lt-card__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.lt-card__note {
  font-size: 14px;
  color: #e3e3e3;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid rgba(245, 194, 5, 0.45);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0;
}
/* The call button carries the visible phone number — the number IS the
   product (public by design), so it's readable before you tap. */
.lt-card__call {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  background: var(--grad-accent);
  color: #1a1200;
  font-family: var(--font-meta);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 13px 16px;
  border-radius: 14px;
}
.lt-card__call svg { width: 18px; height: 18px; flex-shrink: 0; max-width: none; }

/* --- empty state + driver CTA --- */
.lt-empty {
  max-width: 560px;
  margin: 12px auto 0;
  text-align: center;
  border: 1px dashed #4a4a4a;
  border-radius: 20px;
  padding: 36px 24px;
}
.lt-empty__icon {
  width: 40px;
  height: 40px;
  max-width: none;
  color: var(--color-accent-from);
  opacity: 0.85;
  /* app.css reset makes svg display:block — auto margins centre it where
     the parent's text-align:center can't. */
  margin: 0 auto 12px;
}
.lt-empty__title {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 6px;
}
.lt-empty__text { font-size: 14px; color: #9d9d9d; margin: 0; }
/* The empty state carries its own publish button — the .lt-cta banner is
   hidden on empty pages so the two blocks don't repeat each other. */
.lt-empty__btn { margin-top: 18px; }

/* Driver CTA: the revenue block (paid listings), so it's the page's gold
   focal point — a tinted, gold-bordered banner sitting high (right under the
   search on the index, right under the hero on a directory). Icon · text ·
   button. The gold treatment makes it stand out on the flat #060606 without
   inverting any section background. */
.lt-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--lt-col);
  margin: 0 auto 36px;
  background: linear-gradient(135deg, rgba(245, 194, 5, 0.14), rgba(218, 130, 45, 0.05));
  border: 1px solid rgba(245, 194, 5, 0.45);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 14px 36px rgba(245, 194, 5, 0.1);
}
.lt-cta__icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  /* Dark badge holding the EASY TAXI brand mark — the colour logo reads
     cleanly on it (a gold chip would be gold-on-gold), and it matches how
     the mark sits on the dark header. */
  background: rgba(6, 6, 6, 0.34);
  border: 1px solid rgba(245, 194, 5, 0.3);
}
/* app.css resets img to max-width:100%; override so the mark keeps its size
   in the flex row (+ flex-shrink:0 so it never squeezes). */
.lt-cta__icon img {
  width: 34px;
  height: 34px;
  max-width: none;
  flex-shrink: 0;
  display: block;
}
.lt-cta__body { flex: 1; min-width: 0; }
.lt-cta__title { font-family: var(--font-display); font-size: 20px; margin: 0 0 5px; }
.lt-cta__text { color: #dcdcdc; margin: 0; font-size: 14.5px; }
.lt-cta__btn {
  flex-shrink: 0;
  display: inline-block;
  text-decoration: none;
  background: var(--grad-accent);
  color: #1a1200;
  font-weight: 700;
  border-radius: 14px;
  padding: 12px 24px;
  white-space: nowrap;
  transition: transform .15s ease, filter .15s ease;
}
.lt-cta__btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

.lt-messages { max-width: 680px; margin: 0 auto 20px; }
.lt-message {
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  font-size: 15px;
}
.lt-message--error { background: #3a1c1c; color: #ffb4b4; }
.lt-message--success { background: #1c3a24; color: #b4ffce; }

@media (max-width: 700px) {
  /* Steps stack into a tidy left-aligned column. */
  .lt-steps {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 420px;
  }
}

@media (max-width: 560px) {
  /* On phones: stack the button UNDER the field — one grid column, so both
     go full-width, input on top, button below. */
  .lt-search {
    --lt-search-h: 54px;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lt-search__input { font-size: 15px; padding: 0 16px; }
  .lt-search__btn { font-size: 14px; }
  /* CTA banner on phones: icon + title share the top row (icon level with the
     heading), the description drops to its own full-width line starting at the
     icon's left edge, button below. Grid + `display:contents` on __body lets
     the title and text place independently without touching the markup. */
  .lt-cta {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    row-gap: 8px;
    align-items: center;
  }
  .lt-cta__icon { grid-column: 1; grid-row: 1; }
  .lt-cta__body { display: contents; }
  .lt-cta__title { grid-column: 2; grid-row: 1; min-width: 0; }
  .lt-cta__text { grid-column: 1 / -1; grid-row: 2; }
  .lt-cta__btn { grid-column: 1 / -1; grid-row: 3; text-align: center; }
  /* Tighter vertical rhythm on phones. */
  .lt-page { padding-top: 20px; padding-bottom: 56px; }
  .lt-hero { margin-top: 8px; }
}

/* --- publish form aux controls (manage existing listing) --- */
.account-form__aux {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #444;
  align-items: flex-start;
}
.account-form__aux form { margin: 0; }
.account-form__link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent-from);
  font-size: 15px;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
}
.account-form__link-btn:hover { text-decoration: underline; }
.account-form__link-btn--danger { color: #ff8080; }

/* Placement-package pills on the publish form (week/month). The pills
   themselves come from promote.css (.tier); here only the fieldset reset
   so it sits like a normal form field. */
.account-form__periods {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
}
.account-form__periods legend {
  display: block;
  margin-bottom: 10px;
}