/* GetTransport — additional site-level styles (Hono rebuild)
   Extends app.css design-reference styles with rules needed for our
   server-rendered markup where <a> is used instead of <button>. */

.dd-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  text-align: left;
  color: var(--ink);
  text-decoration: none;
}
.dd-menu a:hover { background: var(--sand); }
.dd-menu a.active { background: var(--teal-soft); color: var(--ocean); font-weight: 600; }
.dd-menu .flag { font-size: 16px; width: 20px; text-align: center; display: inline-block; }

/* Sprint 4 (Задача 4): sign-out is a <form method="post"> inside the
   dropdown now (see src/components/Header.tsx), not an <a>, so its
   submit <button> needs the same visual treatment .dd-menu a already
   gets — otherwise it'd render as a native, unstyled <button>. */
.header-signout-form { margin: 0; padding: 0; }
.header-signout-form button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  text-align: left;
  color: var(--ink);
  font-family: inherit;
}
.header-signout-form button:hover { background: var(--sand); }

.header-pill { text-decoration: none; }
.header-pill-cta { text-decoration: none; }
a.link { cursor: pointer; }

/* Filter chip links behave like buttons */
.filter-chip { text-decoration: none; }

/* Sort dropdown menu items are anchors too */
.dd-menu a.sort-opt { justify-content: flex-start; }

/* Mobile nav toggle (simple, not in original desktop-first design but
   required so the header doesn't overflow on narrow screens) */
@media (max-width: 900px) {
  .header { padding: 14px 16px; flex-wrap: wrap; }
  .header-actions { gap: 8px; }
  .header-actions .header-pill span.pill-label { display: none; }
}

/* City list items rendered as <a> */
.city-item { text-decoration: none; display: flex; }

/* Quick pick / type-photo-card / dest-card as <a> */
.quick-pick, .type-photo-card, .dest-card, .bike-card, .blog-card, .veh-switch-card {
  text-decoration: none;
  color: inherit;
}

/* FAQ accordion (native <details>) polish already covered by app.css */

/* Simple fade-in for auth modal handled purely by CSS class toggle */
.auth-modal-backdrop[hidden], .city-modal-backdrop[hidden] { display: none; }

/* BUG FIX: .modal-backdrop (category-picker) and .addbike-backdrop
   (add-vehicle wizard) are declared with `display: flex` in style.css as
   a normal author rule, which — by CSS cascade origin rules — beats the
   browser's built-in `[hidden] { display: none }` UA rule regardless of
   selector specificity. Without this explicit override, both modals stay
   visually visible even though the `hidden` attribute is present in the
   server-rendered HTML, making them appear to "pop up automatically" on
   page load. This mirrors the override already applied above for
   .auth-modal-backdrop / .city-modal-backdrop. */
.modal-backdrop[hidden], .addbike-backdrop[hidden] { display: none; }

/* SearchBar — restored to the original 5-segment structure
   (start/end/type/brand/model), so the original 10-column .sb grid from
   style.css is used as-is, with no override needed. */

/* FiltersBar rendered as <details>/<summary> for the popover chips */
.filter-chip-details { position: relative; display: inline-block; }
.filter-chip-details > summary { list-style: none; }
.filter-chip-details > summary::-webkit-details-marker { display: none; }
.filter-chip-details .filter-pop { display: none; }
.filter-chip-details[open] .filter-pop { display: block; }

.filter-pop select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: var(--f-body);
  color: var(--ink);
  background: white;
}
.filter-pop-item { text-decoration: none; }

/* Sort dropdown as details/summary */
.sort-dd summary {
  list-style: none;
  cursor: pointer;
}
.sort-dd summary::-webkit-details-marker { display: none; }
.sort-dd[open] summary { }
.sort-dd .dd-menu { display: block; }

/* details/summary based dropdowns (currency, sort, city) reuse .dd-menu but need position */
details.dd { position: relative; }
details.dd > summary { list-style: none; }
details.dd > summary::-webkit-details-marker { display: none; }

/* Header search-less spacing fix for mobile brand */
.brand { text-decoration: none; }

/* review stars string */
.review-stars { color: var(--star); letter-spacing: 2px; }

@media (max-width: 900px) { .trust-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .trust-row { grid-template-columns: 1fr; } .catalog-grid { grid-template-columns: 1fr 1fr; } }

/* ============ Auth pages (sign in / sign up / reset password) ============ */
/* .auth grid is 2 columns in the design reference; collapse the poster on
   narrower screens since our pages are real full-width routes, not a fixed
   browser-frame demo like the design prototype. */
@media (max-width: 980px) {
  .auth { grid-template-columns: 1fr; }
  .auth-poster { display: none; }
}
@media (max-width: 640px) {
  .auth-form-col { padding: 90px 24px 40px; }
}

.auth-form-error {
  background: rgba(230, 57, 70, 0.08);
  border: 1px solid rgba(230, 57, 70, 0.25);
  color: var(--danger);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 18px;
}