/**
 * Baseline layout for older Android WebViews (e.g. MIUI on Redmi)
 * when the main Tailwind bundle fails to parse or load.
 * Served as a separate file so it is not merged into the app CSS chunk.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100%;
  background: #f7f5f2;
  color: #1a2332;
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  max-width: 100%;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: #1e4538;
}

header[data-site-header] a,
header[data-site-header] button {
  text-decoration: none;
}

main a {
  text-decoration: none;
}

main a.site-text-link-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

main,
#main-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.page-shell {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 76rem;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

header[data-site-header] {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #e6e2db;
  background: #fff;
  max-width: 100%;
  overflow-x: hidden;
}

header[data-site-header] > .page-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

header[data-site-header] nav[data-header-nav="desktop"] {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

header[data-site-header] [data-header-toolbar-mobile] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

@media (min-width: 1024px) {
  header[data-site-header] nav[data-header-nav="desktop"] {
    display: flex;
  }

  header[data-site-header] [data-header-toolbar-mobile] {
    display: none;
  }
}

header[data-site-header] svg.header-icon,
header[data-site-header] button svg {
  width: 1.25rem;
  height: 1.25rem;
  max-width: 1.25rem;
  max-height: 1.25rem;
  flex-shrink: 0;
}

header[data-site-header] a img {
  max-height: 2.75rem;
  width: auto;
}

#hero-heading {
  margin: 0.75rem 0 0;
  font-size: clamp(1.65rem, 5vw, 2.5rem);
  line-height: 1.12;
  font-weight: 700;
}

#hero-heading span {
  display: block;
  margin-top: 0.2rem;
  color: #1e4538;
}

#book-transfer form[data-transfer-form],
#book-transfer form {
  display: block;
}

#book-transfer label {
  display: block;
  margin-bottom: 0.85rem;
}

#book-transfer input,
#book-transfer select,
#book-transfer textarea,
#book-transfer button {
  font: inherit;
}

#book-transfer input,
#book-transfer select,
#book-transfer textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.85rem;
  font-size: 16px;
  border: 1px solid #e6e2db;
  border-radius: 0.75rem;
  background: #fff;
}

#book-transfer article {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #e6e2db;
  border-radius: 1rem;
  background: #fff;
}

#book-transfer button[type="submit"] {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #1e4538;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
}

main section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

main section ul > li {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Transfer route cards: photo strip must stay visible when global img { height: auto } applies */
[data-transfer-card-photo] {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e6e2db;
}

[data-transfer-card-photo] img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
}

[data-transfer-route-card] {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e2db;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: #1a2332;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #0f1319;
    color: #e8ecf2;
    color-scheme: dark;
  }

  header[data-site-header] {
    background: #171e2a;
    border-bottom-color: #2c3545;
  }

  a {
    color: #a8d4bc;
  }

  [data-header-cart] {
    background: #e0a96a;
    color: #1a2332;
  }

  [data-transfer-route-card] {
    background: #171e2a;
    border-color: #2c3545;
    color: #e8ecf2;
  }
}