/* Client-only visual identity. Admin continues to use styles.css. */
.app-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #000;
  color: #fff;
}
.app-splash img {
  width: min(65vw, 340px);
  height: 180px;
  object-fit: contain;
}
.app-splash p {
  color: #a9abb0;
  font-size: 14px;
}
.app-splash small {
  position: absolute;
  bottom: calc(32px + env(safe-area-inset-bottom));
  color: #a9abb0;
  font-size: 14px;
}
.loading-ring {
  width: 32px;
  height: 32px;
  border: 2px solid #292b2e;
  border-top-color: #8c1d18;
  border-radius: 50%;
  animation: loading 1s linear infinite;
  margin-top: 28px;
}
@keyframes loading {
  to {
    transform: rotate(360deg);
  }
}
.client-navigation {
  display: none;
}
.client-app {
  --ink: #f5f5f6;
  --muted: #b1b4b8;
  --line: #313438;
  --radius: 18px;
  background: #0f1113;
  color: #f5f5f6;
  padding-bottom: 100px;
  color-scheme: dark;
}
.client-app .demo-bar {
  background: #000;
  color: #aaa;
  font-size: 12px;
  letter-spacing: 0.6px;
  border-bottom: 1px solid #202225;
}
.client-app .demo-bar span {
  color: #96989c;
}
.client-app .header {
  position: relative;
  justify-content: center;
  height: 112px;
  border-color: #202225;
  padding: 12px 28px;
}
.client-app .brand {
  width: 176px;
  height: 84px;
}
.client-app .header nav {
  position: absolute;
  right: max(24px, calc((100vw - 1100px) / 2));
  top: 34px;
}
.client-app .profile-button {
  display: grid;
  place-items: center;
  border: 1px solid #3b3e42;
  border-radius: 50%;
  width: 46px;
  height: 46px !important;
  padding: 10px !important;
  color: white;
}
.client-app svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.client-app .profile-button:hover {
  border-color: #8c1d18;
}
.client-app main {
  max-width: 1200px;
  padding: 36px 40px 55px;
  min-height: calc(100dvh - 240px);
}
.client-app .page-heading {
  margin-bottom: 28px;
}
.client-app .page-heading .eyebrow {
  display: none;
}
.client-app h1 {
  font-size: clamp(1.85rem, 3.5vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 12px;
}
.client-app h2 {
  font-weight: 500;
  letter-spacing: -0.4px;
}
.client-app .page-heading p {
  font-size: 16px;
}
.client-app .panel {
  background: #17191c;
  border: 1px solid #33363b;
  border-radius: 18px;
  padding: 28px;
}
.client-app .booking-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr);
  gap: 24px;
}
.client-app .journey {
  border: 1px solid #303338;
  border-radius: 18px;
  background: #000;
  padding: 28px;
  top: 20px;
}
.client-app .journey h2 {
  font-size: 1.65rem;
}
.client-app .journey .eyebrow {
  color: #c8c8ca;
  font-size: 12px;
}
.client-app .brand-art {
  margin: 20px 0;
  aspect-ratio: 2.4;
}
.client-app .price {
  font-size: 3rem;
}
.client-app .price-label {
  color: #dadbdd;
}
.client-app .journey .small {
  font-size: 14px;
  color: #b7b9bd;
}
.client-app .steps {
  font-size: 14px;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  color: #a3a6aa;
}
.client-app .steps .active {
  color: #fff;
}
.client-app .steps .active:after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: #8c1d18;
  margin-top: 10px;
}
.client-app .steps .complete {
  color: #c5c7ca;
}
.client-app .segmented {
  background: #090a0b;
  border: 1px solid #303338;
  padding: 5px;
  border-radius: 12px;
}
.client-app .segmented button {
  color: #b9bbc0;
  font-size: 14px;
}
.client-app .segmented .selected {
  background: #8c1d18;
  color: #fff;
  box-shadow: none;
}
.client-app input,
.client-app select,
.client-app textarea {
  background: #f7f7f8;
  border: 1px solid #e3e4e7;
  color: #141619;
  border-radius: 12px;
  min-height: 50px;
  color-scheme: light;
}
.client-app input::placeholder,
.client-app textarea::placeholder {
  color: #666b70;
}
.client-app label {
  font-size: 14px;
  color: #e3e4e6;
}
.client-app .primary {
  background: #8c1d18;
  border-radius: 12px;
  font-size: 16px;
  padding: 17px 20px;
  min-height: 54px;
}
.client-app .primary:hover {
  background: #a0251f;
}
.client-app .primary:disabled {
  opacity: 0.5;
}
.client-app .secondary {
  background: transparent;
  border: 1px solid #55595e;
  color: #f3f3f5;
  border-radius: 10px;
  font-size: 14px;
}
.client-app .secondary:hover:not(:disabled) {
  background: #26292d;
}
.client-app .text-button {
  color: #f0b7b2;
  font-size: 14px;
}
.client-app .note,
.client-app .small {
  font-size: 14px;
}
.client-app .notice {
  background: #2b1718;
  color: #f2d8d5;
  font-size: 14px;
}
.client-app .error {
  background: #f9e8e5;
  color: #781b16;
}
.client-app .badge {
  background: #292226;
  color: #efd4d2;
  font-size: 13px;
  border-radius: 6px;
}
.client-app .save-status {
  color: #e2e4e8;
}
.client-app .calendar-arrow {
  background: #2d3035;
  color: #fff;
}
.client-app .calendar-day {
  color: #eceef0;
  font-size: 14px;
}
.client-app .calendar-day.closed {
  background: #25272b;
  color: #b0b1b5;
}
.client-app .calendar-day.today {
  border-color: #74777c;
}
.client-app .calendar-day.selected {
  background: #8c1d18;
}
.client-app .calendar-day:hover:not(:disabled) {
  background: #52221f;
}
.client-app .periods button {
  background: #24272b;
  color: #ddd;
  border-color: #46494e;
  font-size: 14px;
}
.client-app .periods button[aria-pressed='true'] {
  background: #8c1d18;
  color: white;
  border-color: #8c1d18;
}
.client-app .time-slot {
  background: #f7f7f8;
  color: #191b1e;
  border-color: #ddd;
  font-size: 14px;
  border-radius: 8px;
}
.client-app .time-slot.selected {
  background: #8c1d18;
  color: white;
  border-color: #8c1d18;
}
.client-app .time-slot:disabled {
  background: #27292e;
  border-color: #36383c;
  color: #878a8e;
}
.client-app .slot-status.available {
  background: #23262b;
  color: #f0f0f2;
  border-left: 3px solid #8c1d18;
}
.client-app .slot-status.unavailable {
  background: #351b1c;
  color: #f5d7d3;
}
.client-app .availability-box {
  border-color: #3b3e44;
  border-radius: 14px;
  padding: 18px;
}
.client-app .address-suggestions button {
  color: #111;
  background: #fafafa;
}
.client-app .address-suggestions button:hover,
.client-app .address-suggestions button:focus {
  background: #eee0de;
}
.client-app .address-suggestions {
  top: 88px;
}
.client-app .footer {
  display: none;
}
.client-app .client-navigation {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: fixed;
  z-index: 20;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 760px);
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  background: #08090af5;
  border: 1px solid #303237;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  backdrop-filter: blur(18px);
}
.client-navigation a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 50px;
  color: #b5b8bd;
  position: relative;
  font-size: 13px;
}
.client-navigation a[aria-current='page'] {
  color: #ef9b94;
}
.client-navigation a[aria-current='page']:after {
  content: '';
  position: absolute;
  bottom: -6px;
  height: 2px;
  width: 25px;
  background: #8c1d18;
}
.client-app .admin-tabs {
  border: 0;
  margin: 24px 0;
  padding-bottom: 10px;
}
.client-app .admin-tabs button {
  border: 1px solid #34373b;
  background: #17191c;
  color: #b9bbc1;
  border-radius: 30px;
  padding: 12px 18px;
  font-size: 14px;
}
.client-app .admin-tabs button[aria-selected='true'] {
  background: #8c1d18;
  border-color: #8c1d18;
  color: white;
}
.client-app dialog {
  background: #17191c;
  border-color: #44474b;
  color: #fff;
}
.client-app dialog::backdrop {
  background: #000b;
}
.client-app .auth-landing {
  max-width: 700px;
}
.client-app .auth-choice .primary {
  justify-content: center;
  flex: 1;
}
.client-app .auth-choice .secondary {
  flex: 1;
}
.client-app .portal-heading {
  gap: 12px;
}
.client-app .wallet-amount {
  font-size: 2.4rem;
}
.client-app .summary-line {
  font-size: 15px;
}
.client-app .summary-line strong {
  color: inherit;
}
.client-app .light-card {
  background: #f7f7f8;
  color: #141619;
  border-color: #ddd;
}
.client-app .light-card p,
.client-app .light-card span {
  color: #62656b;
}
.ride-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.ride-tile {
  display: block;
  background: #191b1e;
  border: 1px solid #383b3f;
  padding: 24px;
  border-radius: 18px;
  transition: border-color 0.2s;
}
.ride-tile:hover {
  border-color: #a34841;
}
.ride-current {
  background: #8c1d18 !important;
  color: #fff !important;
  border-color: #b3453d !important;
}
.ride-tile-top {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
}
.ride-tile-top svg:last-child {
  margin-left: auto;
  width: 20px;
}
.ride-date {
  font-size: 14px;
  color: #bbbfc4;
  line-height: 1.6;
}
.ride-current .ride-date {
  color: #f3dcd9;
}
.route-stops {
  position: relative;
  padding-left: 25px;
  display: grid;
  gap: 22px;
  margin: 24px 0;
  overflow-wrap: anywhere;
}
.route-stops:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  border-left: 1px solid #a5a7ab;
}
.route-stops strong:before,
.route-stops span:before {
  content: '';
  width: 9px;
  height: 9px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 1px;
  margin-top: 6px;
}
.route-stops span:before {
  background: #8c1d18;
}
.route-stops strong,
.route-stops span {
  font-size: 16px;
  font-weight: 500;
}
.ride-tile-bottom {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid #ffffff20;
  padding-top: 16px;
  font-size: 13px;
}
.ride-tile-bottom strong {
  font-size: 18px;
  font-weight: 500;
}
.ride-grid .empty {
  grid-column: 1/-1;
}
.empty > svg {
  width: 40px;
  height: 40px;
  color: #efb1aa;
  margin-bottom: 20px;
}
.ride-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.ride-detail > section > .panel {
  margin-top: 18px;
}
.ride-state {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #202327;
  border: 1px solid #46494e;
  padding: 22px;
  border-radius: 16px;
}
.ride-state > svg {
  width: 34px;
  height: 34px;
}
.ride-state h2 {
  margin: 0 0 6px;
}
.ride-state p {
  margin: 0;
  color: inherit;
  font-size: 14px;
}
.detail-line {
  display: flex;
  gap: 18px;
  margin: 12px 0 26px;
}
.detail-line:last-child {
  margin-bottom: 8px;
}
.detail-line > svg {
  color: #8c1d18;
}
.detail-line span,
.detail-line strong {
  display: block;
  line-height: 1.6;
  font-size: 15px;
}
.detail-line strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.tracking-panel {
  align-self: start;
}
.tracking-status {
  display: flex;
  gap: 12px;
  margin: 24px 0;
}
.tracking-status strong {
  font-size: 15px;
}
.tracking-status p {
  font-size: 14px;
  color: #b0b3b8;
  margin: 8px 0;
}
.route-graphic {
  margin: 16px 0;
  background: #0b0d0f;
  border: 1px solid #313438;
  border-radius: 14px;
  padding: 12px;
}
.client-app .route-graphic svg {
  width: 100%;
  height: auto;
  display: block;
}
.route-graphic figcaption {
  font-size: 12px;
  color: #a9adb4;
  line-height: 1.5;
  padding: 6px;
}
.loyalty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.loyalty-card {
  border: 1px solid #44474c;
  border-radius: 18px;
  background: #16181a;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 260px;
}
.client-app .loyalty-card > svg {
  width: 42px;
  height: 42px;
  color: #bd4e44;
}
.client-app .loyalty-card.light-card > svg {
  color: #8c1d18;
}
.loyalty-card h2 {
  margin: 0 0 12px;
}
.loyalty-card p {
  margin: 6px 0 18px;
  font-size: 15px;
  color: #bfc1c6;
}
.loyalty-value {
  font-size: 2rem;
  font-weight: 500;
}
.progress-track {
  height: 4px;
  border-radius: 4px;
  background: #ddd;
  margin-top: 28px;
}
.coming-soon {
  margin-top: 0;
}
.more-list {
  max-width: 720px;
  border: 1px solid #383b3f;
  border-radius: 16px;
  overflow: hidden;
}
.more-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: #191b1e;
  border-bottom: 1px solid #33363a;
  font-size: 16px;
}
.more-list a:last-child {
  border-bottom: 0;
}
.more-list a:hover {
  background: #24272b;
}
.app-version {
  color: #9ca0a6;
  font-size: 14px;
  margin: 32px 0 16px;
}
.prototype-admin {
  font-size: 13px !important;
}
.feature-icon svg {
  width: 36px;
  height: 36px;
  color: #dc8c83;
  margin-bottom: 20px;
}
.favorite-list article {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #383b40;
  padding: 18px 0;
}
.favorite-list article svg {
  color: #dc8c83;
  vertical-align: middle;
  margin-right: 10px;
}
.favorite-list p {
  font-size: 14px;
  color: #bec1c6;
  margin: 10px 0;
}
.favorite-options {
  display: grid;
  gap: 4px;
}
.favorite-options button {
  background: #f7f7f8;
  color: #151719;
  text-align: left;
  padding: 16px;
  border-radius: 6px;
  line-height: 1.5;
}
.favorite-picker {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px !important;
  color: #ddd !important;
  margin-top: 4px !important;
}
.favorite-picker svg {
  width: 17px;
  height: 17px;
}
.favorite-picker select {
  margin: 0;
  flex-basis: 100%;
  min-height: 42px;
  font-size: 14px;
}
.referral-code {
  padding: 18px;
  background: #08090a;
  border: 1px dashed #8c1d18;
  border-radius: 12px;
  margin: 18px 0;
  overflow-wrap: anywhere;
  font-family: monospace;
  font-size: 16px;
  color: #fff;
}
.client-app .service-card {
  border-color: #393b40;
  border-top-color: #8c1d18;
}
.client-app :focus-visible {
  outline: 2px solid #e6b6b0;
  outline-offset: 4px;
}
.client-app .check input {
  min-height: 19px;
}
.client-app .success-icon {
  background: #8c1d18;
  color: white;
}
@media (max-width: 800px) {
  .client-app main {
    padding: 26px 20px 36px;
  }
  .client-app .booking-layout,
  .ride-detail {
    grid-template-columns: 1fr;
  }
  .client-app .journey {
    position: static;
  }
  .loyalty-grid {
    grid-template-columns: 1fr;
  }
  .loyalty-card {
    flex-direction: row;
    min-height: 0;
    padding: 24px;
    gap: 22px;
  }
  .ride-grid {
    grid-template-columns: 1fr;
  }
  .client-app .profile-grid {
    grid-template-columns: 1fr;
  }
  .client-app .panel {
    padding: 24px;
  }
  .client-app .journey .brand-art {
    display: none;
  }
  .client-app .journey h2 {
    font-size: 1.4rem;
  }
  .client-app .booking-layout {
    gap: 20px;
  }
  .client-app .header {
    height: 90px;
  }
  .client-app .brand {
    width: 142px;
    height: 70px;
  }
  .client-app .header nav {
    top: 23px;
    right: 20px;
  }
  .client-app .profile-button {
    width: 42px;
    height: 42px !important;
  }
  .client-app .client-navigation {
    border-radius: 0;
    padding-inline: 4px;
  }
  .client-navigation a {
    font-size: 12px;
    gap: 8px;
  }
  .client-app .demo-bar span {
    display: none;
  }
  .client-app .availability-box {
    padding: 14px;
  }
  .client-app .steps {
    font-size: 13px;
  }
  .client-app .time-slots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .client-app .summary-line {
    gap: 12px;
  }
  .client-app .summary-line span {
    flex-shrink: 1;
  }
  .client-app .panel.empty {
    padding: 32px 22px;
  }
  .client-app .page-heading p {
    font-size: 15px;
  }
  .client-app .portal-heading {
    align-items: start;
  }
  .client-app dialog {
    padding: 24px;
  }
  .client-app .journey-footer {
    font-size: 11px;
  }
  .client-app .service-notice {
    width: calc(100% - 40px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-ring {
    animation: none;
  }
  .client-app * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
.client-app .light-card .badge {
  background: #eadbd8;
  color: #74221d;
}

.client-app .contact-options .primary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 360px;
}
.client-app .contact-options .primary svg {
  width: 24px;
  height: 24px;
  flex: none;
}
/* Page navigation and permission controls */
.client-app #main:focus,
.client-app .page-heading h1:focus {
  outline: none;
}
.page-back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  min-height: 44px;
  text-decoration: none;
}
.auth-dialog > .text-button {
  display: block;
  width: 100%;
  padding: 13px 16px;
  margin-top: 10px;
  text-align: center;
  border: 1px solid #65312e;
  border-radius: 10px;
  white-space: normal;
}
.permissions-panel {
  max-width: 720px;
  margin: auto;
}
.permissions-panel .summary-line {
  gap: 20px;
}
.permissions-panel .primary {
  margin-top: 24px;
}
[data-state='granted'] {
  color: #fff;
}
[data-state='denied'] {
  color: #f1aaa6;
}
.location-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.location-button svg {
  width: 20px;
  height: 20px;
}
.client-app .estimate-meta .special-ride {
  background: #8c1d18;
  color: white;
  border: 1px solid #8c1d18;
  border-radius: 8px;
  padding: 8px 12px;
}
.permission-dialog {
  background: #0f1113;
  color: white;
  border: 1px solid #8c1d18;
}
.permission-dialog h2 {
  color: white;
}
/* Keep the layout inside mobile Safari's viewport without disabling user zoom. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-width: 0;
}
main,
.panel,
form,
.row,
.portal-heading {
  min-width: 0;
}
img,
svg {
  max-width: 100%;
}
dialog {
  box-sizing: border-box;
  inset: 0;
  margin: auto;
  width: min(660px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
}
dialog form,
dialog label {
  min-width: 0;
}
.client-app .profile-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 !important;
  line-height: 1;
  flex-shrink: 0;
}
.client-app .profile-button svg {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
}
.client-app .portal-tabs {
  max-width: 100%;
  flex-wrap: wrap;
}
.client-app .panel {
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  input,
  select,
  textarea,
  .client-app input,
  .client-app select,
  .client-app textarea {
    font-size: 16px !important;
  }
  dialog,
  .client-app dialog {
    padding: 22px;
    max-height: calc(100dvh - 24px);
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
  .client-app main {
    width: 100%;
    box-sizing: border-box;
  }
  .client-app .row {
    grid-template-columns: minmax(0, 1fr);
  }
  .client-app .profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.preference-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #34373b;
}
.preference-row input {
  appearance: none;
  width: 48px !important;
  min-width: 48px;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 30px !important;
  background: #555 !important;
  padding: 3px !important;
  margin: 0 !important;
  cursor: pointer;
}
.preference-row input:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s;
}
.preference-row input:checked {
  background: #8c1d18 !important;
}
.preference-row input:checked:before {
  transform: translateX(18px);
}
.preference-row input:disabled {
  opacity: 0.6;
}
.settings-links {
  display: grid;
  gap: 12px;
}
.settings-links a {
  display: block;
  padding: 18px;
  border: 1px solid #34373b;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.settings-links a:hover {
  border-color: #8c1d18;
}
.settings-status {
  min-height: 24px;
}
.security-code {
  overflow-wrap: anywhere;
  user-select: all;
}
@media (max-width: 767px) {
  .client-app .admin-tabs {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 8px;
  }
  .client-app .admin-tabs button {
    white-space: normal;
    min-width: 0;
  }
  .client-app .auth-dialog h2:focus {
    outline: none;
  }
}
.auth-dialog > [data-passkey] {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  white-space: normal;
}

/* Compact spacing while retaining distinct touch targets. */
.client-app #trip-form > h2 {
  margin-bottom: 14px;
}
.client-app #trip-form > .segmented {
  margin-bottom: 12px;
}
.client-app #trip-form > .segmented + .address-control .address-heading label,
.client-app
  #trip-form
  > .segmented
  + .address-control
  .address-heading
  .location-button {
  margin-top: 8px;
}
.client-app #trip-form .bag-total p {
  margin-bottom: 6px;
}
.client-app #trip-form .bag-sizes label {
  margin-top: 6px;
}
.client-app .more-list a {
  padding: 17px 20px;
}
.client-app .copyright {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.client-app .header {
  justify-content: flex-start;
}
.client-app .header nav {
  left: auto;
  right: max(24px, calc((100vw - 1100px) / 2));
}
@media (max-width: 800px) {
  .client-app .header nav {
    left: auto;
    right: 20px;
  }
}
#loyalty-offers p,
#loyalty-benefits p,
#loyalty-benefits .benefit-rules,
#loyalty-point-history p,
#loyalty-point-history .points-history article div {
  text-align: justify;
  hyphens: auto;
}
.loyalty-tabs .birthday-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 12px;
  flex: none;
}
.loyalty-tabs .birthday-button svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 700px) {
  .loyalty-tabs .birthday-button {
    width: 46px;
    height: 46px;
  }
}

.client-app {
  padding-bottom: 0;
}
.client-app main {
  padding-bottom: calc(103px + env(safe-area-inset-bottom));
}

/* A shared 24px breathing space above the bottom navigation. */
.client-app .summary-line {
  gap: 16px;
}
.client-app .summary-line > span {
  flex: 0 0 auto;
  overflow-wrap: normal;
  word-break: normal;
}
.client-app .summary-line > strong {
  min-width: 0;
}
.client-app .profile-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.client-app .profile-greeting h1 {
  margin: 0;
  min-width: 0;
}
.client-app .profile-greeting .member-badge {
  flex-shrink: 0;
}
.client-app .profile-heading > p {
  margin-top: 12px;
}
.client-app .portal-tabs {
  position: relative;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 16px;
  scrollbar-width: auto;
  scrollbar-color: #8c1d18 #24272b;
}
.client-app .portal-tabs button {
  flex: 0 0 auto;
  white-space: nowrap;
}
.client-app .portal-tabs::-webkit-scrollbar {
  height: 7px;
}
.client-app .portal-tabs::-webkit-scrollbar-track {
  background: #24272b;
  border-radius: 8px;
}
.client-app .portal-tabs::-webkit-scrollbar-thumb {
  background: repeating-linear-gradient(135deg, #8c1d18 0 4px, #a52c25 4px 6px);
  border-radius: 8px;
}
.client-app [data-client-panel='payments'] p,
.client-app [data-client-panel='referral'] p,
.client-app [data-client-panel='settings'] p:not(.badge):not(.save-status),
#loyalty-progression p,
#loyalty-birthday p {
  text-align: justify;
  hyphens: auto;
}
.birthday-dialog input[type='date'] {
  box-sizing: border-box;
  display: block;
  min-width: 0;
  min-inline-size: 0;
  width: 100%;
  max-width: 100%;
  inline-size: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.birthday-dialog input::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
}

.client-app .portal-tab-slider {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 7px;
  min-height: 7px;
  padding: 0;
  margin: 0 0 24px;
  border: 0;
  border-radius: 8px;
  background: #292b2e;
  cursor: pointer;
}
.client-app .portal-tab-slider[hidden] {
  display: none;
}
.client-app .portal-tab-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 64px;
  height: 9px;
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, #8c1d18 0 4px, #a52c25 4px 6px);
}
.client-app .portal-tab-slider::-moz-range-thumb {
  width: 64px;
  height: 9px;
  border: 0;
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, #8c1d18 0 4px, #a52c25 4px 6px);
}

/* Profile greeting and subtitle occupy separate rows. */
.client-app .profile-heading {
  display: block;
}
.client-app .profile-greeting {
  width: 100%;
  align-items: center;
}
.client-app .portal-tabs {
  border-bottom: 0;
  scrollbar-width: none;
  margin-bottom: 8px;
  padding-bottom: 8px;
}
.client-app .portal-tabs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.client-app #loyalty-points p {
  text-align: justify;
  hyphens: auto;
}
.client-app #change-password + hr {
  margin-top: 28px;
}

/* Hide the prototype banner on the main customer pages. */
body:is(
    [data-page='accueil'],
    [data-page='reservations'],
    [data-page='trajets'],
    [data-page='compte'],
    [data-page='fidelite'],
    [data-page='plus']
  )
  .demo-bar {
  display: none !important;
}

/* Website only: the native app loads native-layout.css. */
html:not(:has(link[href='native-layout.css'])) .loyalty-tabs .birthday-button {
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  padding: 10px;
}
html:not(:has(link[href='native-layout.css']))
  .loyalty-tabs
  .birthday-button
  svg {
  display: block;
  width: 32px;
  height: 32px;
  max-width: none;
  flex: none;
}

/* Keep the complete web viewport dark on short reservation/history pages. */
html:not(:has(link[href='native-layout.css'])):has(
    body.client-app:is(
        [data-page='reservations'],
        [data-page='trajets'],
        [data-page='compte']
      )
  ) {
  background: #0f1113;
}
html:not(:has(link[href='native-layout.css']))
  body.client-app:is(
    [data-page='reservations'],
    [data-page='trajets'],
    [data-page='compte']
  ) {
  min-height: 100vh;
  min-height: 100dvh;
  background: #0f1113;
}

/* Web reservation detail: align the first cards across both columns. */
html:not(:has(link[href='native-layout.css'])) .ride-detail {
  align-items: start;
}
html:not(:has(link[href='native-layout.css']))
  .ride-detail
  > section
  > .panel:first-child {
  margin-top: 0;
}
.web-map-recenter {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px;
  padding: 10px 12px;
  border: 1px solid #8c1d18;
  border-radius: 12px;
  background: #17191b;
  color: #f5f5f6;
  font:
    600 14px Manrope,
    sans-serif;
  min-height: 44px;
  box-shadow: 0 2px 6px #0005;
}
.client-app .web-map-recenter svg,
.web-map-recenter svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html:not(:has(link[href='native-layout.css'])) .ride-map-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
html:not(:has(link[href='native-layout.css']))
  .ride-detail
  > .ride-map-column
  > .panel {
  margin: 0;
}

/* Match Google's fullscreen and camera controls to the Trajet button. */
html:not(:has(link[href='native-layout.css']))
  .google-map
  .gm-style
  button.gm-control-active {
  background: #17191b !important;
  border: 1px solid #8c1d18 !important;
  border-radius: 12px !important;
  color: #f5f5f6 !important;
  box-shadow: 0 2px 6px #0005 !important;
  overflow: hidden;
}
html:not(:has(link[href='native-layout.css']))
  .google-map
  .gm-style
  button.gm-control-active
  img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
html:not(:has(link[href='native-layout.css']))
  .google-map
  .gm-style
  button.gm-control-active
  svg {
  color: #f5f5f6 !important;
}
html:not(:has(link[href='native-layout.css']))
  .google-map
  .gm-style
  button.gm-control-active:hover {
  background: #26292d !important;
  border-color: #b83c34 !important;
}

/* Reservation detail pages share the client pages without a prototype banner. */
body[data-page='course'] .demo-bar {
  display: none !important;
}

/* Use one web height for all loyalty shortcuts, including the gift icon. */
html:not(:has(link[href='native-layout.css'])) .loyalty-tabs {
  align-items: center;
}
html:not(:has(link[href='native-layout.css'])) .loyalty-tabs > a,
html:not(:has(link[href='native-layout.css'])) .loyalty-tabs .birthday-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-height: 50px;
  padding-top: 8px;
  padding-bottom: 8px;
}
html:not(:has(link[href='native-layout.css'])) .loyalty-tabs .birthday-button {
  width: 50px;
  padding-inline: 8px;
}

.birthday-wheels {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 10px;
  margin: 18px 0 22px;
  max-width: 100%;
}
.birthday-wheel-column {
  min-width: 0;
  text-align: center;
}
.birthday-wheel-column > span {
  display: block;
  color: #b1b4b8;
  font-size: 13px;
  margin-bottom: 8px;
}
.birthday-wheel {
  height: 220px;
  padding: 88px 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  border: 1px solid #383b40;
  border-radius: 14px;
  background: linear-gradient(
    to bottom,
    #17191b 0 40%,
    #8c1d1833 40% 60%,
    #17191b 60%
  );
  overscroll-behavior: contain;
}
.birthday-wheel::-webkit-scrollbar {
  display: none;
}
.birthday-wheel button {
  display: block;
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 4px;
  background: transparent;
  color: #a8abb0;
  font-size: 15px;
  scroll-snap-align: center;
}
.birthday-wheel button[aria-selected='true'] {
  color: #fff;
  font-weight: 700;
}
.birthday-dialog {
  max-width: min(540px, calc(100vw - 32px));
}
.birthday-dialog .panel {
  min-width: 0;
}
.birthday-wheel.controlled-wheel {
  position: relative;
  overflow: hidden;
  padding: 0;
  touch-action: pan-x;
}
.birthday-wheel-track {
  position: absolute;
  top: 87px;
  left: 0;
  right: 0;
  transition: transform 0.15s ease;
}
.birthday-wheel.controlled-wheel button {
  scroll-snap-align: none;
}

.admin-booking-heading h2:focus {
  outline: none !important;
  box-shadow: none !important;
}
.client-app button.elixir-button,
.client-app button.green-textured-button {
  color: #fff !important;
  font-weight: 700;
  border: 1px solid #b6473e !important;
  border-radius: 12px;
  padding: 14px 20px;
  text-decoration: none;
  background: repeating-linear-gradient(
    135deg,
    #8c1d18 0 4px,
    #94251f 4px 6px
  ) !important;
}
.client-app button.green-textured-button {
  border-color: #408362 !important;
  background: repeating-linear-gradient(
    135deg,
    #19513b 0 4px,
    #215c43 4px 6px
  ) !important;
}
.cancellation-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
  align-items: stretch;
}
.cancellation-actions form {
  margin: 0;
  display: flex;
}
.cancellation-actions button {
  width: 100%;
  height: 100%;
  min-height: 58px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  line-height: 1.35;
}
.refund-amount {
  color: #398f62;
  background: repeating-linear-gradient(135deg, #409d6d 0 4px, #66b48b 4px 6px);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* Website navigation back to the ELYX showcase. */
.client-app .showcase-bar{padding:16px 24px;max-width:1150px;margin:auto}
.client-app .showcase-return{display:inline-flex;align-items:center;gap:8px;border:1px solid #3b3e42;border-radius:12px;padding:10px 14px;color:inherit;font-size:14px;text-decoration:none;min-height:44px;touch-action:manipulation}
.client-app .showcase-return[hidden],.showcase-bar:has(.showcase-return[hidden]),html:has(link[href='native-layout.css']) .showcase-bar{display:none}
.showcase-return:focus-visible{outline:2px solid #c0786f;outline-offset:3px}
@media(max-width:700px){.client-app .showcase-bar{padding:12px 16px}.client-app .showcase-return{font-size:13px}}

/* Keep short customer web pages dark behind the fixed bottom navigation. */
html:has(body.client-app):not(:has(link[href='native-layout.css'])){background:#0f1113}
html:not(:has(link[href='native-layout.css'])) body.client-app{min-height:100vh;min-height:100dvh}