/* Perevizka – base styles for new pages (login, account, notices).
   Built only from tokens.css; load tokens.css first. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fw-regular) var(--fs-base)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-navy); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

.app-container { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }

/* Header */
.app-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.app-header .app-container { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.app-header-actions { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.app-logo { display: inline-flex; padding: var(--sp-2) 0; }
.app-logo img { width: 164px; }

/* Main */
.app-main { flex: 1; padding-block: var(--section-y); }

/* Notice card (e.g. "coming soon") */
.notice-card {
  max-width: 640px;
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-navy);
}
.notice-card h1 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
}
.notice-card p:not(.eyebrow) { margin: 0 0 var(--sp-6); color: var(--c-muted); }

/* Card (forms: login, onboarding, account) */
.card {
  max-width: 480px;
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.card h1 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
}
.lead { margin: 0 0 var(--sp-6); color: var(--c-muted); }
.lead strong { color: var(--c-text); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.page-loading { margin: 0; color: var(--c-muted); text-align: center; }

/* Form fields */
.field { display: grid; align-content: start; gap: var(--sp-2); margin-bottom: var(--sp-5); } /* side by side (.field-grid): never stretch the input when the neighbour has a hint */
.field label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text); }
.input {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--c-surface);
  color: var(--c-text);
  font: var(--fw-regular) var(--input-fs)/1.4 var(--font);
}
/* date/time: same height as the other fields; iOS Safari's native control must not grow wider than the field */
.input[type="date"], .input[type="time"] {
  display: block; height: var(--control-h); min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; line-height: var(--control-h);
}
.input[type="date"]::-webkit-date-and-time-value, .input[type="time"]::-webkit-date-and-time-value { text-align: left; }
/* select: same height and look on every browser (iOS draws a small native control otherwise), own chevron */
select.input {
  height: var(--control-h); padding-right: calc(var(--sp-4) + 24px); -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230F2438' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--sp-3) center / 20px 20px;
}
/* Empty date field: iOS shows no hint at all, other browsers "dd.mm.yyyy" or a faded date. ".date-field" hides the
   native text while no date is set and shows its own placeholder instead (the field is still tapped as usual). */
.date-field { position: relative; min-width: 0; }
.date-placeholder { display: none; }
.date-field[data-empty] .input:not(:focus) { color: transparent; }
.date-field[data-empty] .input:not(:focus) + .date-placeholder {
  display: block; position: absolute; left: calc(var(--sp-4) + 1px); right: 44px; top: 50%; transform: translateY(-50%);
  overflow: hidden; color: var(--c-muted); font-size: var(--input-fs); white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
}
.input:focus { outline: none; border-color: var(--c-navy); box-shadow: var(--focus-ring); }
.input[aria-invalid="true"] { border-color: var(--c-danger); }
.input-code {
  font-size: var(--fs-2xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: .4em;
  text-align: center;
  padding-left: calc(var(--sp-4) + .4em);
}
.field-error { margin: 0; font-size: var(--fs-sm); color: var(--c-danger); }

.field-hint { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
/* After "Надіслати код ще раз": the hint about the latest e-mail stands out. */
.field-hint.is-emphasized { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--c-info-soft); color: var(--c-navy); font-weight: var(--fw-semibold); }
.field-hint strong { color: var(--c-text); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.field-success { margin: 0; font-size: var(--fs-sm); color: var(--c-success); }
.optional { font-weight: var(--fw-regular); color: var(--c-muted); }
.hint { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* Password field with show / hide */
.password-input { position: relative; }
.password-input .input { padding-right: 112px; }
.password-toggle {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  min-width: 96px;
  padding: 0 var(--sp-3);
  border: 0;
  border-left: 1px solid var(--c-border);
  border-radius: 0 calc(var(--input-radius) - 2px) calc(var(--input-radius) - 2px) 0;
  background: var(--c-surface);
  color: var(--c-navy);
  font: var(--fw-semibold) var(--fs-sm)/1 var(--font);
  cursor: pointer;
}
.password-toggle:focus-visible { box-shadow: var(--focus-ring); }
.reauth { display: grid; gap: 0; }
.reauth .info { margin-bottom: var(--sp-4); }
.reauth .link-button { justify-self: start; margin-top: var(--sp-2); }
.switch-line { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--c-muted); }
.switch-line .link-button { font-size: var(--fs-sm); }

/* Choice cards (onboarding) */
.choice-list { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.choice {
  display: grid;
  gap: var(--sp-1);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.choice:hover { border-color: var(--c-navy); }
.choice:disabled { opacity: .6; cursor: default; }
.choice-title { font-weight: var(--fw-semibold); color: var(--c-navy); }
.choice-text { font-size: var(--fs-sm); color: var(--c-muted); }

/* Status messages */
.alert, .notice, .info {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.alert { background: var(--c-danger-soft); color: var(--c-danger); }
.notice { background: var(--c-success-soft); color: var(--c-success); }
.info { background: var(--c-info-soft); color: var(--c-navy); }

.form-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); }
.link-button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-navy);
  font: var(--fw-semibold) var(--fs-sm)/1.4 var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:disabled { color: var(--c-muted); text-decoration: none; cursor: default; }

/* Account page */
.page { max-width: 720px; margin-inline: auto; display: grid; gap: var(--sp-5); }
.stack { display: grid; gap: var(--sp-5); }
.page-head h1 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
}
.page-sub { margin: 0; color: var(--c-muted); overflow-wrap: anywhere; }
.page-sub strong { color: var(--c-text); font-weight: var(--fw-semibold); }
.panel {
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.panel h2, .panel-subtitle {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
}
.panel-subtitle { margin-top: var(--sp-6); font-size: var(--fs-lg); }
.panel-text { margin: 0 0 var(--sp-4); color: var(--c-muted); }
.facts { display: grid; gap: var(--sp-3); margin: 0; }
.facts div { display: grid; gap: var(--sp-1); }
.facts dt { font-size: var(--fs-sm); color: var(--c-muted); }
.facts dd { margin: 0; font-weight: var(--fw-semibold); color: var(--c-text); overflow-wrap: anywhere; }
.card-link { margin-top: var(--sp-4); }
.facts dd a { display: inline-flex; align-items: center; min-height: 44px; } /* e.g. the public profile link: easy to tap */
.badge-soon {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--c-info-soft);
  color: var(--c-navy);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  vertical-align: middle;
}
.textarea { min-height: 128px; padding-block: var(--sp-3); resize: vertical; line-height: var(--lh-body); }
.field-row { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: baseline; }
.counter { margin: 0; flex: none; font-size: var(--fs-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.counter-over { color: var(--c-danger); font-weight: var(--fw-semibold); }

/* Contacts */
.field-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text); }
.stack-sm { display: grid; gap: var(--sp-2); }
.phone-input { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--sp-2); }
.phone-country { padding-inline: var(--sp-3); }
.prefix-input { position: relative; }
.prefix-input span { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.prefix-input .input { padding-left: calc(var(--sp-4) + 1.1em); }
.check { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; font-size: var(--fs-sm); color: var(--c-text); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--c-navy); }

/* Vehicle */
.segmented { border: 0; padding: 0; margin: 0 0 var(--sp-5); min-width: 0; }
.segmented legend { padding: 0; margin-bottom: var(--sp-2); }
.segmented-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.segmented-options label { position: relative; }
.segmented-options input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented-options span {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--control-h);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  cursor: pointer;
}
.segmented-options input:checked + span { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-surface); }
.segmented-options input:focus-visible + span { box-shadow: var(--focus-ring); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.photos { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--c-border); }
.photos-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.photos-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-navy); }
.empty { margin: 0 0 var(--sp-4); padding: var(--sp-5); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); color: var(--c-muted); text-align: center; }
.photo-grid { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.photo-tile { position: relative; display: grid; gap: var(--sp-2); min-width: 0; }
.photo-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--c-bg); border: 1px solid var(--c-border); }
.photo-main {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  padding: 2px var(--sp-2); border-radius: var(--r-full);
  background: var(--c-navy); color: var(--c-surface);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); }
.photo-button {
  min-width: 0; min-height: 44px; padding: 0 var(--sp-2);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-navy);
  font: var(--fw-semibold) var(--fs-sm)/1 var(--font);
  cursor: pointer;
}
.photo-button:disabled { opacity: .4; cursor: default; }
.photo-button-text { grid-column: 1 / -1; }
.photo-button-danger { border-color: var(--c-danger); color: var(--c-danger); background: var(--c-danger-soft); }

/* Profile photo (account) */
.avatar-block { display: flex; gap: var(--sp-4); align-items: flex-start; margin-bottom: var(--sp-4); }
.avatar-preview { flex: none; width: 96px; height: 96px; }
.avatar-image, .avatar-initials { width: 96px; height: 96px; border-radius: var(--r-full); }
.avatar-image { object-fit: cover; background: var(--c-bg); border: 1px solid var(--c-border); }
.avatar-initials {
  display: grid; place-items: center;
  background: var(--c-navy); color: var(--c-surface);
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
}
.avatar-body { display: grid; gap: var(--sp-2); min-width: 0; }
.avatar-body p { margin: 0; }
.avatar-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Trips (account) */
/* Trips as rows with dividers inside the section box – no card in a card. */
.trip-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; }
.trip-item { display: grid; gap: var(--sp-3); padding-block: var(--sp-4); }
.trip-item + .trip-item { border-top: 1px solid var(--c-border); }
.trip-item:first-child { padding-top: var(--sp-1); }
.trip-item-main { min-width: 0; }
.trip-item-date { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.trip-item-route { margin: var(--sp-1) 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-navy); overflow-wrap: anywhere; }
.trip-item-meta { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); overflow-wrap: anywhere; }
.trip-item-cancelled .trip-item-route { color: var(--c-muted); text-decoration: line-through; }
.trip-item-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.trip-item-actions .share-menu { flex-basis: 100%; }
/* Warning action ("Скасувати поїздку", "Видалити"): red text link, not a button like the others. */
.link-danger { color: var(--c-danger); padding-inline: var(--sp-2); }
.link-danger:hover { color: var(--c-danger); }
.link-danger[data-confirm="1"] { font-weight: var(--fw-semibold); }
/* In a trip / request row: always on its own line below the buttons (the ::after breaks the line), flush with them,
   a small ✕ instead of the underline – clearly apart from the everyday actions. Icon: Lucide "circle-x" (ISC). */
.trip-item-actions:has(.trip-item-danger)::after { content: ""; flex-basis: 100%; order: 98; }
.trip-item-actions .trip-item-danger {
  order: 99;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-inline: 0;
  text-decoration: none;
}
.trip-item-actions .trip-item-danger::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.trip-item-actions .trip-item-danger:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.badge-active {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--c-success-soft);
  color: var(--c-success);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* Tabs Майбутні / Минулі / Скасовані */
/* scrolls sideways on very narrow phones only – never a vertical scrollbar, no visible bar */
/* The base line is drawn inside the bar (inset shadow), so the tabs' 2 px marker sits on it without sticking out –
   nothing overflows, no scrollbar. */
.trip-tabs { display: flex; gap: var(--sp-1); min-width: 0; margin-bottom: var(--sp-4); box-shadow: inset 0 -1px 0 var(--c-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.trip-tabs::-webkit-scrollbar { display: none; }
.trip-tabs [role="tab"] {
  flex: none; min-height: 44px; padding: 0 var(--sp-3); border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--c-muted); font: inherit; font-weight: var(--fw-semibold); cursor: pointer;
}
.trip-tabs [role="tab"][aria-selected="true"] { color: var(--c-navy); border-bottom-color: var(--c-navy); }
.trip-tabs [role="tab"]:hover { color: var(--c-navy); }
@media (max-width: 400px) {
  .trip-tabs { gap: 0; }
  .trip-tabs [role="tab"] { flex: 1 1 0; min-width: 0; padding-inline: var(--sp-1); font-size: var(--fs-sm); }
}
.trip-tabs [role="tab"]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm) var(--r-sm) 0 0; }
/* "Місць немає": a full trip stays public, clearly marked (profile, search, account). */
.badge-full {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--c-navy);
  color: var(--c-surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.badge-status {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--c-danger-soft);
  color: var(--c-danger);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  vertical-align: middle;
}
.trip-form { margin-top: 0; }
.trip-form h3 { margin: 0 0 var(--sp-5); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-navy); }
.trip-form h3:focus { outline: none; }
.trip-offer { border: 0; padding: 0; min-width: 0; }
.trip-offer legend { padding: 0; margin-bottom: var(--sp-2); }
.trip-offer .field { margin-bottom: var(--sp-2); }
.trip-cargo-kg { margin-top: var(--sp-2); }
.input-short { max-width: 180px; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: 0 var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font: var(--btn-fw) var(--fs-base)/1 var(--font);
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--c-navy); color: var(--c-surface); }
.btn-primary:hover { background: var(--c-slate); }
.btn-secondary { background: var(--c-surface); color: var(--c-navy); border-color: var(--c-border-strong); }
.btn-secondary:hover { border-color: var(--c-navy); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .6; cursor: default; }
.btn-primary:disabled:hover { background: var(--c-navy); }
.btn-small { padding-inline: var(--sp-4); font-size: var(--fs-sm); }
.btn-danger { border-color: var(--c-danger); color: var(--c-danger); background: var(--c-danger-soft); }

@media (max-width: 374px) {
  .trip-actions .btn-secondary.btn-secondary { flex-basis: 100%; } /* wins over the 480 px rule below */
}
@media (max-width: 480px) {
  .panel { padding: var(--sp-5); }
  .panel .btn { width: 100%; }
  /* per-trip actions: "Написати перевізнику" full width, share + trip page side by side below */
  .trip-actions .btn-secondary { width: auto; flex: 1 1 calc(50% - var(--sp-2)); min-width: 0; padding-inline: var(--sp-3); white-space: nowrap; }
  .trip-actions .wide-only { display: none; } /* "Поділитися" – the aria-label keeps "Поділитися поїздкою" */
  .trip-item-actions .btn { width: auto; flex: 1 1 calc(50% - var(--sp-2)); }
  .trip-item-actions .link-danger { min-height: 44px; padding-inline: 0; text-align: left; }
  .avatar-block { flex-direction: column; align-items: flex-start; }
  .avatar-actions .btn { width: auto; flex: 1 1 0; }
  .field-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .notice-card, .card { padding: var(--sp-6) var(--sp-5); }
  .notice-card h1, .card h1 { font-size: var(--fs-2xl); }
  .notice-card .btn { width: 100%; }
}

/* Toast ("Посилання скопійовано.") – profile, trip page, search, account */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5);
  z-index: 20;
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  transform: translateX(-50%);
  border-radius: var(--r-md);
  background: var(--c-navy);
  color: var(--c-surface);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
}

/* Share menu next to a "Поділитися" button (share.js) when the device has no share sheet */
.share-menu {
  display: grid; gap: var(--sp-1); margin-top: var(--sp-2); padding: var(--sp-2); width: 100%; max-width: 280px;
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
}
.share-menu a, .share-menu button {
  display: flex; align-items: center; min-height: 44px; padding-inline: var(--sp-3); border: 0; border-radius: var(--r-sm);
  background: none; color: var(--c-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.share-menu a:hover, .share-menu button:hover { background: var(--c-bg); color: var(--c-navy); }
.share-menu a:focus-visible, .share-menu button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Trip route linking to its page; per-trip actions (profile, search) */
/* Tap area ≥ 44 px without moving the layout: vertical padding balanced by a negative margin. */
.trip-link { display: inline-block; padding-block: 11px; margin-block: -11px; color: inherit; text-decoration: none; }
.trip-link:hover { color: var(--c-slate); text-decoration: underline; text-underline-offset: 3px; }
.trip-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
/* "Можна перевезти" (Paket E): multiple choice as calm toggles */
.type-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.type-option { position: relative; }
.type-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.type-option span {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--sp-4); border: 1px solid var(--c-input-border);
  border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); font-weight: var(--fw-semibold); cursor: pointer;
}
.type-option input:checked + span { border-color: var(--c-navy); background: var(--c-navy); color: var(--c-surface); }
.type-option input:checked + span::before { content: "✓"; margin-right: var(--sp-2); }
.type-option input:focus-visible + span { box-shadow: var(--focus-ring); }
.trip-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-start; }
.trip-actions .share-menu { flex-basis: 100%; }

/* Sign-up consent (18+, terms): the box stays at the top of a longer text */
.consent-check { align-items: flex-start; padding-block: var(--sp-2); line-height: var(--lh-snug); }
.consent-check input { margin-top: 1px; }