/* ==========================================================================
   Dashboard — orders main hub (после регистрации в TG)
   Reference: Figma frame 43:2 «Макет после регистрации в тг»
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */
.dashboard-hero {
  position: relative;
  isolation: isolate;
  min-height: 580px;
  padding: 0 var(--container-padding-x) 64px;
  overflow: hidden;
  background: var(--color-bg);
}

/* Night-highway hero ported from the create-ride page: long-exposure
   light-trail photo + animated moving lights + darkening vignette. */
.dashboard-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dashboard-hero__fade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(6, 6, 6, 0.26) 0%, rgba(6, 6, 6, 0.62) 60%, var(--color-bg) 100%),
    linear-gradient(180deg, rgba(6, 6, 6, 0.44) 0%, rgba(6, 6, 6, 0.0) 25%, var(--color-bg) 100%);
  pointer-events: none;
}

/* Moving lights — perspective traffic (SVG <animateMotion>). */
.dashboard-hero__lights {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(0.4px);
}

.dashboard-hero__lights circle {
  filter: drop-shadow(0 0 6px rgba(255, 200, 120, 0.55));
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-hero__lights { display: none; }
}

.dashboard-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 39px;
}

.dashboard-header__profile {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.dashboard-header__profile-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: 999px;
  transition: background .15s ease;
}

.dashboard-header__profile-link:hover {
  background: rgba(245, 194, 5, 0.1);
}

/* Anonymous visitors get a compact "Войти" pill in place of the profile
   chip — login is offered, never forced, while browsing the feed. */
.dashboard-header__login {
  display: inline-flex;
  align-items: center;
  height: 43px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--grad-accent);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(245, 194, 5, 0.45);
  transition: filter .15s ease;
}

.dashboard-header__login:hover {
  filter: brightness(1.07);
}

.dashboard-header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  box-shadow: 0 0 10px rgba(245, 194, 5, 0.45);
  flex-shrink: 0;
}

.dashboard-header__name {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-hero__logo-link {
  display: block;
  margin: 8px auto 0;
  max-width: 580px;
  width: 100%;
}

.dashboard-hero__logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(12, 12, 12, 0.4));
}

/* Emblem (the spiral mark) tumbles around its own Y-axis like the
   featured-ride medallion star, while the "EASY TAXI" wordmark stays put.
   transform-box: fill-box anchors the spin to the emblem's own centre. */
.dashboard-hero__logo-mark {
  transform-box: fill-box;
  transform-origin: center;
  /* One single turn on load, decelerating into a stop. */
  animation: dashboard-logo-spin 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes dashboard-logo-spin {
  from { transform: perspective(220px) rotateY(0deg); }
  to   { transform: perspective(220px) rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-hero__logo-mark { animation: none; }
}

/* Stats panel ------------------------------------------------------------ */
.dashboard-stats {
  position: relative;
  margin: 32px auto 0;
  max-width: 598px;
  padding: 28px 50px 32px;
  background: var(--grad-secondary);
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.dashboard-stats__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-bg);
}

.rides-counter {
  display: flex;
  margin: 16px auto 0;
  width: clamp(220px, 60%, 272px);
  height: clamp(52px, 12vw, 63px);
  gap: 0;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

.rides-counter__cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, #524102 0%, #0A0A0A 100%);
  border: 1px dashed rgba(245, 194, 5, 0.45);
  border-radius: 2px;
}

.rides-counter__digit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 4.5vw, 30px);
  line-height: 1;
  color: #F9F9F9;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.9),
    0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Action buttons (Создать поездку / Мои поездки) ------------------------- */
.dashboard-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 29px;
  max-width: 1165px;
  margin: -32px auto 0;
  padding: 0 var(--container-padding-x);
  position: relative;
  z-index: 2;
}

.dashboard-actions__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  border-radius: var(--radius-button);
  background: var(--grad-accent);
  color: var(--color-text-on-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 30px);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-button), 0 8px 24px rgba(245, 194, 5, 0.18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.dashboard-actions__btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: var(--shadow-button), 0 12px 32px rgba(245, 194, 5, 0.32);
}

.dashboard-actions__btn--secondary {
  background: var(--grad-secondary);
  box-shadow: var(--shadow-button), 0 8px 24px rgba(252, 252, 252, 0.12);
}

.dashboard-actions__btn--secondary:hover {
  box-shadow: var(--shadow-button), 0 12px 32px rgba(252, 252, 252, 0.22);
}

/* Tablets: the clamp's 2vw term drops below its 18px floor here, so the
   labels were stuck at the minimum and read small against the 70px
   buttons. Bump them up for the tablet range (mobile ≤640 has its own
   size; desktop scales via the clamp). */
@media (min-width: 641px) and (max-width: 1024px) {
  .dashboard-actions__btn {
    font-size: 22px;
  }
}

/* Rides filter ----------------------------------------------------------- */
.rides-filter {
  max-width: 1340px;
  margin: 56px auto 0;
  padding: 0 var(--container-padding-x);
}

.rides-filter__form {
  display: grid;
  grid-template-columns: minmax(140px, 1.3fr) minmax(140px, 1.3fr) minmax(130px, 1fr) minmax(90px, 0.7fr) minmax(170px, 1.1fr) auto;
  align-items: end;
  gap: 16px;
  padding: 24px 26px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(46, 46, 46, 0.96) 0%, rgba(28, 28, 28, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.rides-filter__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rides-filter__label {
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.rides-filter__input {
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  width: 100%;
  box-sizing: border-box;
}

.rides-filter__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.rides-filter__input:hover {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.13);
}

.rides-filter__input:focus {
  border-color: var(--color-accent-from);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 3px rgba(245, 194, 5, 0.18);
}

.rides-filter__input[type="date"] {
  color-scheme: dark;
  /* iOS Safari sizes empty <input type="date"> to its intrinsic
     -webkit-min-content (the "дд.мм.гггг" placeholder), ignoring
     width: 100%. The intrinsic width varies across iPhone models, so
     the field looks narrow on one device and full-width on another.
     Strip the native chrome with appearance:none and force min-width:0
     so our width:100% wins. The native date wheel still opens on tap. */
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}

.rides-filter__input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.2em;
}

/* Strip the native up/down spinner on the "Мест от" number input — it's
   visual noise on a 1-12 range that users prefer to type. */
.rides-filter__input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.rides-filter__input[type="number"]::-webkit-outer-spin-button,
.rides-filter__input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rides-filter__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F5C205' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10));
  background-repeat: no-repeat, no-repeat;
  background-position: right 14px center, 0 0;
  background-size: 12px 8px, auto;
  cursor: pointer;
}

.rides-filter__input--select option {
  background: #1c1c1c;
  color: var(--color-text);
}

.rides-filter__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.rides-filter__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: var(--radius-button);
  background: var(--grad-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: transform .15s ease, filter .15s ease;
}

.rides-filter__submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.rides-filter__reset {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}

.rides-filter__reset:hover {
  color: var(--color-text);
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1180px) {
  .rides-filter__form {
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* 6 form items in a 3-col grid: row 1 = откуда/куда/дата,
     row 2 = мест от/сортировка/actions. Let the actions cell take its
     natural 3rd slot in row 2 instead of spanning a detached full-width
     row, and let the button fill the cell so it reads as a sibling of
     the fields, not a stray control floating off to the side. */
  .rides-filter__actions {
    justify-content: stretch;
  }
  .rides-filter__submit {
    flex: 1;
  }
}

@media (max-width: 720px) {
  .rides-filter__form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .rides-filter { margin-top: 32px; }
  .rides-filter__form {
    grid-template-columns: 1fr;
    padding: 18px 18px;
  }
  .rides-filter__actions { justify-content: stretch; }
  .rides-filter__submit { flex: 1; }
}

/* Rides list ------------------------------------------------------------- */
.rides {
  max-width: 1340px;
  margin: 40px auto 96px;
  padding: 0 var(--container-padding-x);
}

.rides__header {
  margin: 0 0 32px;
  text-align: center;
}

.rides__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.rides__hint {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.rides__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Ride card ------------------------------------------------------------- */
.ride-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(195px, 1.2fr) minmax(240px, 1.9fr) minmax(145px, 0.7fr) minmax(165px, 0.55fr) minmax(85px, 0.4fr) auto 120px;
  align-items: center;
  gap: 18px;
  padding: 22px 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.92) 0%, rgba(12, 12, 12, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* Stretched link — invisible overlay that makes the whole card a click
   target for the ride's detail page. CTA buttons sit above via z-index so
   they keep their own hover affordance and remain independently focusable.
   tabindex="-1" on the link itself (set in templates) avoids a duplicate
   tab stop for keyboard users. */
.ride-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
}

.ride-card__parcels {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  line-height: 1;
}

/* Override the global "svg { display:block; max-width:100% }" reset so
   the icons stay at their attribute size instead of stretching to fill
   the inline-flex parent (which made them stack vertically on mobile). */
.ride-card__parcels > svg {
  width: 13px;
  height: 13px;
  max-width: none;
  flex-shrink: 0;
}

.ride-card__parcels-mark > svg {
  width: 9px;
  height: 9px;
  max-width: none;
  flex-shrink: 0;
}

.ride-card__parcels--yes {
  background: rgba(245, 194, 5, 0.14);
  border: 1px solid rgba(245, 194, 5, 0.45);
  color: var(--color-accent-from);
}

.ride-card__parcels--no {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.4);
}

.ride-card__parcels-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.ride-card__parcels--yes .ride-card__parcels-mark {
  background: var(--color-accent-from);
  color: var(--color-bg);
}

.ride-card__parcels--no .ride-card__parcels-mark {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}

.ride-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
}

.ride-card--mine {
  border-color: rgba(245, 194, 5, 0.45);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.4),
    inset 4px 0 0 var(--color-accent-from);
}

.ride-card--mine:hover {
  border-color: rgba(245, 194, 5, 0.75);
}

/* Driver column ----- */
.ride-card__driver {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ride-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--grad-secondary);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.ride-card--mine .ride-card__avatar {
  background: var(--grad-accent);
  color: var(--color-text);
}

.ride-card__driver-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ride-card__driver-name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.25;
  overflow-wrap: anywhere;
  /* Hard-cap at two lines WITHOUT an ellipsis: in the narrow driver column a
     long name like «Артем Викторович» otherwise spilled into a third line.
     max-height = 2 × line-height clips anything past two lines; никакого «…»
     не добавляется. */
  max-height: 2.5em;
  overflow: hidden;
}

/* Row that holds the parcels pill + "Ваша" badge side-by-side under the
   driver name. flex-wrap lets the badge drop below the pill on narrow
   columns instead of overflowing. On mobile the badge is repositioned to
   the card's top-right via @media override and removed from this flow. */
.ride-card__driver-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ride-card__own-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(245, 194, 5, 0.16);
  border: 1px solid rgba(245, 194, 5, 0.5);
  color: var(--color-accent-from);
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Route column ----- */
.ride-card__route {
  /* Grid (not flex) for the route — `1fr auto 1fr` guarantees both legs
     get exactly the same width regardless of intrinsic content size,
     so the arrow always sits in the middle even when one side has a
     wrapped two-line context. */
  display: grid;
  /* `minmax(0, 1fr)` is critical — bare `1fr` has implicit min:auto, which
     means a column with nowrap text (long НП name) won't shrink below its
     intrinsic width. That pushes the arrow off-centre toward the shorter
     side. Explicit min:0 forces both legs to shrink equally and keeps the
     arrow perfectly centered. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
  min-width: 0;
}

/* Each end of the route stacks the place name and its район/область
 * context vertically, so users can orient where a small village is
 * without leaving the card. */
.ride-card__leg {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 0;
}

/* The two legs sit either side of the arrow. The route is a
   `minmax(0, 1fr) auto minmax(0, 1fr)` grid, so the legs are
   geometrically equal — but left-aligned text in both columns leaves
   a big gap on the right side of the FROM leg and zero gap on the
   left side of the TO leg, which reads as «стрелка уехала вправо».
   Right-align the FROM leg so both texts hug the arrow. */
.ride-card__route > .ride-card__leg:first-child {
  align-items: flex-end;
  text-align: right;
}

.ride-card__context {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-muted, #888);
  /* `pre-line` honours the view-side "
" between «район,» and «область»
     as a logical line break. No line-clamp: on narrow mobile columns even
     two-part contexts can naturally need 3-4 visual lines (e.g.
     «Карабалыкский / район, / Костанайская / область»). At 12px font the
     extra height is ~15px per line — well within card budget — and full
     context is more useful than mid-word ellipsis. */
  white-space: pre-line;
  line-height: 1.25;
  margin-top: 2px;
}

.ride-card__from,
.ride-card__to {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ride-card__arrow {
  flex-shrink: 0;
  width: 24px;
  height: 12px;
  color: var(--color-accent-from);
  margin-top: 6px;
}

.ride-card__arrow svg { width: 100%; height: 100%; }

/* Большие мониторы: даём колонке маршрута больше ширины и переключаем
   контекст НП (район/область) с pre-line на pre — перенос между «район,»
   и «область» (вид-сайд "\n") сохраняется, но КАЖДАЯ строка контекста
   больше не ломается внутри себя («Костанайская\nобласть»). На узких
   экранах остаётся pre-line, где внутристрочный перенос ещё нужен. */
@media (min-width: 1280px) {
  /* On wide layout viewports (which a 50% browser zoom produces) the rides
     container caps at its 1340px max-width while --container-padding-x maxes
     at 140px/side, leaving only ~1000px inside the card. The old grid's
     min-track widths (large mins + a fixed 120px dead gutter) summed to
     ~1268px, so the grid overflowed the card and the CTA spilled past the
     right border. Trim the mins and make the right gutter collapsible
     (0–80px) so the row always fits, yet keeps the CTA's inset on roomy
     desktops. */
  .ride-card {
    grid-template-columns:
      minmax(175px, 1.1fr) minmax(220px, 2.4fr)
      minmax(145px, 0.7fr) minmax(120px, 0.55fr) minmax(80px, 0.4fr)
      auto;
  }

  .ride-card__context {
    white-space: pre;
  }
}

/* Nudge just the seats count a touch further left on the desktop row
   layout, without moving date/price. The CTA is intentionally left out —
   it stays anchored to the right edge of the row. Scoped to >=1181px so the
   stacked tablet/phone layouts (<=1180px) are untouched. */
@media (min-width: 1181px) {
  .ride-card__seats {
    margin-left: -20px;
  }
}

/* When column ----- */
.ride-card__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-body);
}

.ride-card__date {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
}

.ride-card__time {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

/* Price column ----- */
.ride-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-body);
  color: var(--color-text);
  white-space: nowrap;
  /* min-width:0 lets the grid item shrink to its track size; the track
     itself has a 170px min in .ride-card so the worst-case "1 000 000 ₸"
     always fits with the MAX_RIDE_PRICE cap. Don't add overflow:hidden
     here — it clips legitimate values if the track ever ends up smaller
     than content (we'd rather see the bug than silently truncate). */
  min-width: 0;
}

.ride-card__price strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

.ride-card__price-note {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Seats column ----- */
/* Mirrors the price column rhythm (big display number + 12px caption) so
   the two read as a pair, balanced visually against the CTA. Hidden on the
   tablet/mobile responsive layout below — the grid-template-areas there
   doesn't have room for it. */
.ride-card__seats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-body);
  color: var(--color-text);
  white-space: nowrap;
  min-width: 0;
}

.ride-card__seats-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text);
}

.ride-card__seats-sep {
  font-weight: 400;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}

.ride-card__seats-note {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Full ride: gray out the count to signal "nothing free here". */
.ride-card__seats--full .ride-card__seats-value strong,
.ride-card__seats--full .ride-card__seats-sep {
  color: rgba(255, 255, 255, 0.4);
}

/* CTA ----- */
.ride-card__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 200px;
  padding: 0 22px;
  border-radius: var(--radius-button);
  background: var(--grad-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-button);
  transition: transform .15s ease, filter .15s ease;
}

.ride-card__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.ride-card__cta--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
}

.ride-card__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--color-text);
  filter: none;
}

/* Pagination ------------------------------------------------------------- */
.rides-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 32px auto 0;
  padding: 0 var(--container-padding-x);
}

.rides-pager__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.rides-pager__status {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.rides-pager__link,
.rides-pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.rides-pager__link:hover,
.rides-pager__num:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--color-text);
}

.rides-pager__num--current {
  background: var(--grad-accent);
  border-color: transparent;
  color: var(--color-text);
  cursor: default;
}

.rides-pager__num--current:hover {
  background: var(--grad-accent);
  border-color: transparent;
}

.rides-pager__link--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.rides-pager__link--disabled:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
}

.rides-pager__pages {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 640px) {
  .rides-pager { gap: 10px; margin-top: 24px; }
  .rides-pager__controls { gap: 8px; }
  .rides-pager__link,
  .rides-pager__num {
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    font-size: 14px;
  }
}

/* Empty state ------------------------------------------------------------ */
.dashboard-empty {
  max-width: 760px;
  margin: 96px auto 96px;
  padding: 56px var(--container-padding-x);
  text-align: center;
  color: var(--color-text);
}

.dashboard-empty__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dashboard-empty__text {
  margin: 18px auto 32px;
  max-width: 520px;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.dashboard-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 36px;
  border-radius: var(--radius-button);
  background: var(--grad-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-button);
  transition: transform .15s ease, filter .15s ease;
}

.dashboard-empty__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* Responsive ------------------------------------------------------------- */
/* Sub-desktop layouts (≤1279px). The 7-column desktop grid needs ~1270px
   of min-track width, so below that we re-flow. Shared piece: the grid-area
   assignments + alignment, so both sub-layouts below (and the mobile block)
   inherit them and only swap the template. */
@media (max-width: 1279px) {
  .ride-card { align-items: center; }
  .ride-card__driver { grid-area: driver; }
  .ride-card__route  { grid-area: route; }
  .ride-card__when   { grid-area: when; align-self: center; }
  .ride-card__price  { grid-area: price; align-items: flex-start; text-align: left; }
  .ride-card__seats  { grid-area: seats; align-items: flex-start; text-align: left; }
  .ride-card__cta    { grid-area: cta; justify-self: stretch; width: 100%; }
}

/* Wide tablet / narrow desktop (1100–1279px): keep the desktop's single
   inline row — driver · route · date · price · seats · CTA — just without
   the fixed min-track widths that make the 7-col grid overflow below
   1280px. The CTA stays inline (not full-width) so the row reads as one
   balanced strip. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ride-card {
    /* Fixed proportional (fr) columns, NOT auto + space-between. auto tracks
       sized each card to its own content (short «Иван» vs wrapped «Артем
       Викторович»), so the driver column width — and with it points А/Б —
       jumped from card to card. fr tracks resolve to the same width on every
       card (same container width), so the columns line up vertically down the
       feed; the fr ratios still distribute spare width proportionally instead
       of dumping it into one void. Mins are trimmed to fit at the 1024px floor. */
    /* Mins kept small + gap tight: at 1024px the card's inner width is only
       ~894px (--container-padding-x is 4vw≈41px/side there), so the column
       minimums + gaps + the ~200px CTA must stay under that or the grid
       overflows — CTA spills past the card edge and the route truncates. */
    /* fr distribution tuned for this range: driver/route get SMALL fr so they
       stay compact and sit further left as the card widens; when/price/seats
       get LARGER fr so the spare width inflates those columns, opening up the
       gaps between the time, price and seats blocks. Mins stay small so the
       row still fits at the 1024px floor (~894px inner). */
    grid-template-columns:
      minmax(140px, 0.6fr) minmax(225px, 0.7fr)
      minmax(95px, 1.3fr) minmax(85px, 1.2fr) minmax(70px, 1.1fr) auto;
    grid-template-areas: "driver route when price seats cta";
    column-gap: 12px;
    padding: 20px 24px;
  }
  .ride-card__cta {
    justify-self: end;
    width: auto;
    /* Match the desktop CTA width (200px) so «Продвинуть» and «Забронировать»
       come out identical — the old 140px let each button size to its own
       label, so the shorter «Продвинуть» looked smaller than «Забронировать». */
    min-width: 200px;
  }
  /* Cap the name width so a long name («Артем Викторович») wraps to a second
     line just like the ≥1280 layout, instead of stretching the driver column. */
  .ride-card__driver-name {
    max-width: 130px;
    overflow-wrap: anywhere;
  }
  /* Place names were truncating to «…»: trim the route font a notch (17→16)
     so «Федоровка»/«Костанай» fit their leg, and shrink the date/time block —
     date stays the bold anchor, time goes small+regular (same rhythm as
     mobile). A narrower when column hands the freed width to the route. */
  .ride-card__route { font-size: 15px; }
  .ride-card__date { font-size: 13px; font-weight: 700; }
  .ride-card__time {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.78);
  }
  /* Keep «… район,» and «… область» each on one line, as on desktop. The
     tightened gutters + CTA min-width above leave the route column enough
     room for the longer «область» line without intra-line wrapping. */
  .ride-card__context {
    white-space: pre;
    font-size: 11px;
  }
}

/* Tablet (641–1023px): everything sits in one inline strip — driver · route ·
   date · price · seats — with the CTA spanning the foot. At the bottom of this
   range (~720px) the strip was overflowing: the route column got squeezed to
   nothing (name truncated to «Ф…») and the `pre` context spilled out onto the
   date/time. Fix is a proportional shrink — kill the 44px route push, halve the
   column gap, trim padding and fonts a notch — so the route's 1fr column keeps
   real width (~256px even at 641px) and everything fits without sliding. */
@media (max-width: 1023px) {
  .ride-card {
    /* Route is minmax(0, auto), NOT 1fr: a 1fr track soaks up every extra px
       as one dead void after the route, leaving date/price/seats clamped at
       the fixed 12px gap. With content-sized tracks + justify-content
       space-between, the spare width is shared as EVEN gaps between every
       block, so they spread apart as the tablet widens (same approach as the
       ≥1800px block). min 0 keeps the route able to shrink/truncate when the
       strip is genuinely cramped at the 641px floor. */
    grid-template-columns: auto minmax(0, auto) auto auto auto;
    justify-content: space-between;
    grid-template-areas:
      "driver route when price seats"
      "cta    cta   cta  cta   cta";
    row-gap: 14px;
    column-gap: 12px;
    padding: 14px 16px;
  }
  .ride-card__avatar { width: 34px; height: 34px; font-size: 15px; }
  .ride-card__driver { gap: 9px; }
  .ride-card__driver-name { font-size: 14px; }
  /* No left nudge here — the old 44px push (plus the wide gap) is exactly what
     starved the route column and caused the truncation/overlap. Let the route
     use its full 1fr; the tighter gaps give both legs + context room. */
  .ride-card__route { font-size: 14px; gap: 6px; padding-left: 0; }
  .ride-card__price strong,
  .ride-card__seats-value { font-size: 16px; }
  .ride-card__seats-sep { font-size: 12px; }
  /* Date is the bold anchor, time is demoted (smaller, regular) — same rhythm
     as the mobile card, and it narrows the when column so the route gets more. */
  .ride-card__date { font-size: 13px; font-weight: 700; }
  .ride-card__time {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.78);
  }
  .ride-card__price-note,
  .ride-card__seats-note { font-size: 11px; margin-top: 2px; }
  /* Stack «Ваша» beneath the parcels pill instead of beside it, narrowing the
     driver column so the freed width goes to the route. */
  .ride-card__driver-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  /* «… р-н,» and «… обл.» each on their own line (pre); 11px keeps each line
     inside its half-leg so it never overflows onto the date/time again. */
  .ride-card__context { white-space: pre; font-size: 11px; }
}

@media (max-width: 640px) {
  .dashboard-hero { min-height: 0; padding-bottom: 48px; }
  .dashboard-hero__logo-link { margin-top: 48px; }
  .dashboard-stats { margin-top: 64px; padding: 22px 24px 26px; }

  .dashboard-header__name { max-width: 120px; font-size: 14px; }

  .dashboard-actions {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: -24px;
  }
  .dashboard-actions__btn { height: 60px; font-size: 20px; }

  .dashboard-empty { margin: 64px auto; padding: 32px 20px; }

  .rides { margin: 56px auto; }
  .ride-card {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "driver driver"
      "route  route"
      "when   price"
      "seats  seats"
      "cta    cta";
    /* Tighten side padding on mobile — each saved px goes straight to the
       route legs so «Карабалыкский район,» fits one line instead of
       wrapping mid-word. Vertical padding stays comfortable. */
    padding: 18px 14px;
    row-gap: 14px;
    column-gap: 16px;
  }
  .ride-card__seats {
    grid-area: seats;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
  .ride-card__seats-note { margin-top: 0; }
  /* Date/time hugs the LEFT edge (mirroring price hugging the right), so the
     two blocks sit equidistant from the card's side padding instead of the
     date floating centred in its column while the price is flush right. */
  .ride-card__when {
    align-self: end;
    align-items: flex-start;
  }
  .ride-card__date { text-align: left; }
  .ride-card__price {
    align-items: flex-end;
    text-align: right;
    align-self: end;
  }
  /* On mobile only: lift the "Ваша" badge out of .ride-card__driver-text's
     column-flex so it sits across from the name in the top-right corner
     instead of adding a third row that grows the card height. Card is
     position:relative so absolute anchors to its box. z-index:2 keeps it
     above the stretched-link overlay. */
  .ride-card__own-badge {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
  }
  /* Date is the anchor users scan for — keep it the bold focal point. Time
     was oversized (17px/600) and bold, fighting the date for attention and
     hard to focus on. Demote it: smaller and regular weight, so the eye
     lands on the date first, then reads the time as a detail. */
  .ride-card__date {
    font-size: 15px;
    font-weight: 700;
  }
  .ride-card__time {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.78);
  }
  .ride-card__cta { justify-self: stretch; width: 100%; }
  /* Center the WHOLE route block as a unit so the left/right margins to the
     card edge are equal — measured from the widest content on each side,
     names AND the район/обл. context included. auto tracks size each leg to
     its widest line; justify-content centres the откуда→arrow→куда group.
     Names stay hugging the arrow (connected route), the context follows its
     name, and both edges get the same gap. */
  .ride-card__route {
    grid-template-columns: auto auto auto;
    justify-content: center;
    gap: 8px;
    padding-left: 0;
  }
  .ride-card__arrow { width: 18px; }
  /* район / область — strictly two lines (one per logical line), no
     intra-line wrap. At 11px each line fits inside the half-width leg even
     for the longer «… область», so `pre` won't overflow the minmax(0,1fr)
     track. */
  .ride-card__context {
    white-space: pre;
    font-size: 11px;
  }
}

/* Large phones (≥400px): the ≤640px sizes were tuned for the 320px floor and
   leave noticeable empty space on a 425px card. Nudge the place names and the
   район/обл. context up 1px each — still well within the wider card's room. */
@media (min-width: 400px) and (max-width: 640px) {
  .ride-card__route { font-size: 16px; }
  .ride-card__context { font-size: 12px; }
}

/* Promoted strip + featured cards (billing Phase A) ---------------------- */
.rides--promoted {
  margin-bottom: 8px;
}

.rides__title--promoted {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.rides__title-star {
  display: inline-flex;
  color: var(--color-accent-from);
  filter: drop-shadow(0 0 8px rgba(245, 194, 5, 0.5));
}

.rides__title-star svg {
  width: 24px;
  height: 24px;
  max-width: none;
}

/* A featured (highlighted) ride must read unmistakably. Treatment:
   • 2px gold *gradient* border (orange→gold→orange diagonal) via the
     transparent-border + border-box-gradient trick;
   • a saturated warm-gold wash over the dark card body;
   • a generous outer halo so the card pops out of the feed at a glance.
   Composes with --mine, which adds the inset gold bar. */
.ride-card--featured {
  border: 2px solid transparent;
  background:
    /* topmost: gold wash over the card body */
    linear-gradient(180deg, rgba(245, 194, 5, 0.16), rgba(218, 130, 45, 0.05) 65%, rgba(0, 0, 0, 0) 100%) padding-box,
    /* base dark card */
    linear-gradient(180deg, rgba(20, 20, 20, 0.95) 0%, rgba(12, 12, 12, 0.95) 100%) padding-box,
    /* gradient gold border, visible through the transparent border */
    linear-gradient(135deg, #F5C205 0%, #DA822D 50%, #F5C205 100%) border-box;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(245, 194, 5, 0.30);
}

.ride-card--featured:hover {
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.55),
    0 0 52px rgba(245, 194, 5, 0.48);
}

/* Own featured ride: keep the --mine inset gold rail on top. */
.ride-card--mine.ride-card--featured {
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(245, 194, 5, 0.30),
    inset 4px 0 0 var(--color-accent-from);
}

.ride-card--mine.ride-card--featured:hover {
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.55),
    0 0 52px rgba(245, 194, 5, 0.48),
    inset 4px 0 0 var(--color-accent-from);
}

/* Featured ride — corner star medallion. Replaces the old text badge:
   the meta row already carries the parcels pill + «Ваша», a third pill
   crowded it. The medallion overhangs the top-left corner; the star
   turns slowly and the gold halo breathes. The gold wash on
   .ride-card--featured does the rest. */
.ride-card__featured-star {
  position: absolute;
  top: -11px;
  left: -11px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-accent-from);
  /* Outer gold ring (2px) defines the medallion edge against both the
     gold-wash card and the dark page background, since the medallion
     overhangs the card corner. */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 0 0 2px var(--color-accent-from);
  pointer-events: none;
  /* perspective gives the inner star a real 3D depth on its Y-axis flip
     instead of a flat orthographic squash. */
  perspective: 120px;
  animation: featured-star-glow 2.6s ease-in-out infinite;
}

.ride-card__featured-star > svg {
  width: 17px;
  height: 17px;
  max-width: none;
  animation: featured-star-spin 8s linear infinite;
}

@keyframes featured-star-glow {
  0%, 100% {
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.5),
      0 0 0 2px var(--color-accent-from),
      0 0 7px rgba(245, 194, 5, 0.55);
  }
  50% {
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.5),
      0 0 0 2px var(--color-accent-from),
      0 0 20px rgba(245, 194, 5, 1);
  }
}

/* Right-to-left rotation around the Y-axis — the right edge tips back
   and disappears, the star comes back from the left. Reads as "right
   to left" tumble, not the top-over-bottom flip we had before. */
@keyframes featured-star-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Respect users who asked the OS to minimise motion. */
@media (prefers-reduced-motion: reduce) {
  .ride-card__featured-star,
  .ride-card__featured-star > svg {
    animation: none;
  }
}

/* ==========================================================================
   Ultra-wide screens (≥1800px)
   On a 2560px monitor the hub was capped at ~1340px and centred, floating
   as a small island. Goal here is to ENLARGE everything proportionally
   (not just stretch it wide) and keep the spacing even.
   ========================================================================== */
@media (min-width: 1800px) {
  .dashboard-actions {
    max-width: 1360px;
  }
  .dashboard-actions__btn {
    height: 84px;
    font-size: 34px;
  }

  .rides-filter,
  .rides {
    max-width: 1560px;
  }

  .dashboard-stats {
    max-width: 720px;
    padding: 34px 60px 40px;
  }
  .dashboard-stats__label {
    font-size: 34px;
  }
  .rides-counter {
    width: clamp(300px, 60%, 360px);
    height: 76px;
  }
  .rides-counter__digit {
    font-size: 38px;
  }

  .rides__title {
    font-size: 48px;
  }
  .rides__hint {
    font-size: 16px;
  }
  .rides__list {
    gap: 20px;
  }

  /* The desktop grid pours all the extra width into the route column, which
     reads as lopsided gaps. Switch to flex + space-between so the leftover
     space becomes EVEN gaps between every block (driver … route … date …
     price … seats … CTA). gap is the floor; space-between adds the rest
     evenly. Bigger fonts + padding make the card clearly readable. */
  .ride-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 30px 40px;
  }
  .ride-card__avatar {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }
  .ride-card__driver {
    gap: 16px;
  }
  .ride-card__driver-name {
    font-size: 20px;
  }
  .ride-card__route {
    font-size: 21px;
    flex: 0 1 auto;
  }
  .ride-card__context {
    font-size: 14px;
  }
  .ride-card__date {
    font-size: 18px;
  }
  .ride-card__time {
    font-size: 18px;
  }
  .ride-card__price strong,
  .ride-card__seats-value {
    font-size: 28px;
  }
  .ride-card__seats-sep {
    font-size: 20px;
  }
  .ride-card__price-note,
  .ride-card__seats-note {
    font-size: 14px;
  }
  /* Drop the desktop -20px nudge so the seats block keeps the row's even
     spacing under space-between. */
  .ride-card__seats {
    margin-left: 0;
  }
  .ride-card__cta {
    height: 56px;
    min-width: 220px;
    font-size: 17px;
  }
}