/* V3 mobile-specific layout and component adjustments */

@media (max-width: 991.98px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .app-section-heading.mb-0 .app-section-heading__eyebrow,
  .app-section-heading.mb-0 .app-section-heading__title {
    margin-bottom: 0;
  }
}

@media (max-width: 767.98px) and (orientation: portrait) {
  .app-flow {
        gap: var(--app-space-8);    
    }
  .app-home-step-flow .app-flow__item:not(:last-child)::after {
    height: calc(var(--app-space-8) - var(--app-space-4)) !important;
  }
}

/* Shared mobile app layout components */
.app-mobile-page {
  display: none;
}

.app-mobile-stack {
  display: grid;
  gap: var(--app-space-3);
}

.app-mobile-panel {
  display: grid;
  gap: var(--app-space-3);
}

.app-mobile-search {
  width: 100%;
  max-width: none;
  margin: 0;
}

.app-mobile-panel--card {
  padding: var(--app-space-4);
  color: var(--app-color-text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--app-color-primary) 5%, transparent), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--app-color-surface) 96%, var(--app-color-surface-alt)), var(--app-color-surface));
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-1);
}

.app-mobile-panel--card .app-member-menu {
  margin-right: calc(var(--app-space-4) * -1);
  margin-left: calc(var(--app-space-4) * -1);
}

.app-mobile-panel--card .app-member-menu__link {
  padding-right: var(--app-space-4);
  padding-left: var(--app-space-4);
}

.app-mobile-panel--card .app-list--divided {
  margin-right: calc(var(--app-space-4) * -1);
  margin-left: calc(var(--app-space-4) * -1);
}

.app-mobile-panel--card .app-list--divided .app-list__item {
  padding-right: var(--app-space-4);
  padding-left: var(--app-space-4);
}

.app-mobile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--app-space-3);
}

.app-mobile-section-title {
  margin: 0;
  color: var(--app-color-text);
  font-size: var(--app-font-size-400);
  font-weight: 800;
  line-height: var(--app-line-height-tight);
}

.app-mobile-panel .app-section-heading__eyebrow {
  margin-bottom: 0;
}

.app-mobile-section-action {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--app-color-primary);
  background-color: var(--app-color-surface-alt);
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-lg);
  font-size: var(--app-font-size-400);
  line-height: 1;
  text-decoration: none;
}

.app-mobile-section-action > i {
  display: block;
  line-height: 1;
}

.app-mobile-section-action:hover,
.app-mobile-section-action:focus-visible {
  color: var(--app-color-primary);
  background-color: var(--app-color-surface);
  border-color: var(--app-color-primary);
  box-shadow: var(--app-focus-ring), var(--app-shadow-1);
}

.app-mobile-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--app-space-2);
}

.app-mobile-status-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: var(--app-space-1);
  padding: var(--app-space-3) var(--app-space-1);
  color: var(--app-color-text);
  background-color: var(--app-color-surface-alt);
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-lg);
  text-align: center;
  text-decoration: none;
}

.app-mobile-status-item:hover,
.app-mobile-status-item:focus-visible {
  color: var(--app-color-primary);
  border-color: var(--app-color-primary);
  box-shadow: var(--app-focus-ring), var(--app-shadow-1);
}

.app-mobile-status-count {
  color: var(--app-color-primary);
  font-size: var(--app-font-size-500);
  font-weight: 800;
  line-height: var(--app-line-height-tight);
}

.app-mobile-status-item--danger .app-mobile-status-count {
  color: var(--app-color-danger);
}

.app-mobile-status-label {
  color: inherit;
  font-size: var(--app-font-size-100);
  font-weight: 700;
  line-height: var(--app-line-height-tight);
}

/* Shared mobile member summary */
.app-member-summary--mobile {
  color: var(--app-color-neutral-0);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--app-color-primary-300) 28%, transparent), transparent 14rem),
    linear-gradient(135deg, var(--app-color-primary-500), var(--app-color-primary-700));
  border-color: color-mix(in srgb, var(--app-color-primary-300) 32%, transparent);
}

.app-member-summary--mobile .app-section-heading__eyebrow,
.app-member-summary--mobile .app-member-name,
.app-member-summary--mobile .app-member-meta {
  color: inherit;
}

.app-member-summary--mobile .app-member-avatar {
  color: var(--app-color-neutral-0);
  background-color: color-mix(in srgb, var(--app-color-neutral-0) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-color-neutral-0) 28%, transparent);
}

.app-member-summary--mobile .app-badge {
  min-height: 1.625rem;
  padding: var(--app-space-1) var(--app-space-2);
  color: var(--app-color-neutral-0);
  background-color: color-mix(in srgb, var(--app-color-neutral-0) 14%, transparent);
  border-color: color-mix(in srgb, var(--app-color-neutral-0) 24%, transparent);
  font-size: var(--app-font-size-100);
}

.app-member-summary--mobile .app-member-stat {
  color: inherit;
  background-color: color-mix(in srgb, var(--app-color-neutral-0) 14%, transparent);
  border-color: color-mix(in srgb, var(--app-color-neutral-0) 24%, transparent);
  text-decoration: none;
}

.app-member-summary--mobile .app-member-stat__value {
  color: var(--app-color-neutral-0);
}

.app-member-summary--mobile .app-member-stat--danger {
  background-color: color-mix(in srgb, var(--app-color-danger) 86%, transparent);
  border-color: color-mix(in srgb, var(--app-color-danger) 72%, var(--app-color-neutral-0));
}

.app-member-summary--mobile .app-member-stat__label {
  color: color-mix(in srgb, var(--app-color-neutral-0) 78%, transparent);
}

/* Shared mobile settings components */
.app-setting-list {
  display: grid;
  gap: var(--app-space-3);
}

.app-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--app-space-3);
}

.app-setting-row__content {
  flex: 1 1 auto;
  min-width: 0;
}

.app-setting-row__title {
  margin: 0;
  color: var(--app-color-text);
  font-size: var(--app-font-size-300);
  font-weight: 800;
  line-height: var(--app-line-height-tight);
}

.app-setting-row__text {
  margin: var(--app-space-1) 0 0;
  color: var(--app-color-text-muted);
  font-size: var(--app-font-size-200);
  line-height: var(--app-line-height-normal);
}

.app-segmented-control {
  height: 2.375rem;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--app-space-1);
  padding: 2px;
  background-color: var(--app-color-surface-alt);
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-lg);
}

.app-segmented-control__item {
  position: relative;
  min-width: 0;
  display: block;
  cursor: pointer;
}

.app-segmented-control__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app-segmented-control__item span {
  height: 100%;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 0.875rem;
  color: var(--app-color-text-muted);
  border-radius: var(--app-radius-md);
  font-size: var(--app-font-size-200);
  font-weight: 700;
  line-height: 1.25;
  transition: background-color var(--app-motion-normal) var(--app-ease-standard),
              color var(--app-motion-normal) var(--app-ease-standard),
              box-shadow var(--app-motion-normal) var(--app-ease-standard);
}

.app-segmented-control__item input:checked + span {
  color: var(--app-color-primary);
  background-color: var(--app-color-surface);
  box-shadow: var(--app-shadow-1);
}

.app-segmented-control__item input:focus-visible + span {
  box-shadow: var(--app-focus-ring), var(--app-shadow-1);
}

/* Shared status summary components */
.app-status-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 2fr) auto;
  align-items: center;
  gap: var(--app-space-5);
}

.app-status-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--app-space-3);
}

.app-status-summary__item {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: var(--app-space-1);
  padding: var(--app-space-3);
  color: var(--app-color-text);
  background-color: var(--app-color-surface-alt);
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-lg);
  text-align: center;
  text-decoration: none;
}

.app-status-summary__item:hover,
.app-status-summary__item:focus-visible {
  color: var(--app-color-primary);
  border-color: var(--app-color-primary);
  box-shadow: var(--app-focus-ring), var(--app-shadow-1);
}

.app-status-summary__count {
  color: var(--app-color-primary);
  font-size: var(--app-font-size-500);
  font-weight: 800;
  line-height: var(--app-line-height-tight);
}

.app-status-summary__item--danger .app-status-summary__count {
  color: var(--app-color-danger);
}

.app-status-summary__label {
  color: inherit;
  font-size: var(--app-font-size-200);
  font-weight: 700;
  line-height: var(--app-line-height-tight);
}

@media (max-width: 991.98px) {
  .app-status-summary {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .app-status-summary .app-btn {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  body.app-bg {
    --app-mobile-ambient-bg:
      radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--app-color-accent) 100%, transparent), transparent 28rem),
      radial-gradient(circle at 86% 12rem, color-mix(in srgb, var(--app-color-primary) 100%, transparent), transparent 29rem);
    background-color: var(--app-color-bg) !important;
    background-image: var(--app-mobile-ambient-bg) !important;
    background-attachment: scroll;
    background-repeat: no-repeat;
  }

  .app-mobile-page {
    display: block;
    padding: calc(58px + var(--app-space-5)) 0 var(--app-space-2);
    background: transparent;
  }

  .app-mobile-page > .container {
    padding-right: 0;
    padding-left: 0;
  }

  .app-mobile-stack > :not(.modal) {
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  }

  .app-mobile-page .app-member-tabbar {
    position: sticky;
    bottom: var(--app-space-2);
    z-index: 20;
  }

  .site-footer {
    padding: var(--app-space-5) 0 var(--app-space-3);
  }

  .site-footer__compact {
    gap: calc(var(--app-space-1) / 2);
    font-size: var(--app-font-size-100);
    line-height: 1.35;
  }

  .site-footer__compact p,
  .site-footer__compact a {
    font-size: inherit;
    line-height: inherit;
  }

  .site-footer__bottom {
    margin-top: var(--app-space-3);
    padding-top: var(--app-space-3);
    font-size: var(--app-font-size-100);
    line-height: 1.35;
  }

  .app-modal .modal-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    margin: 0 !important;
  }

  .app-modal .modal-content {
    min-height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app-modal .modal-header,
  .app-modal .modal-footer {
    flex: 0 0 auto;
  }

  .app-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :root {
    --app-font-size-100: 0.6875rem;
    --app-font-size-200: 0.8125rem;
    --app-font-size-300: 0.9375rem;
    --app-font-size-400: 1rem;
    --app-font-size-500: 1.125rem;
    --app-font-size-600: 1.3125rem;
    --app-font-size-700: 1.625rem;
    --app-line-height-normal: 1.5;
    --app-space-3: 0.625rem;
    --app-space-4: 0.875rem;
    --app-space-5: 1.125rem;
    --app-space-6: 1.5rem;
    --app-space-7: 2rem;
    --app-space-8: 2.5rem;
  }

  body {
    font-size: var(--app-font-size-300);
    font-weight: 400;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .app-section-heading__title,
  .app-card__title,
  .app-transaction-card__number,
  .app-transaction-group__title,
  .app-template-mobile-section-title {
    font-weight: 700;
  }

  .app-section-heading__eyebrow,
  .app-badge,
  .app-panel-title,
  .app-navbar-v3__title,
  .app-navbar-v3__panel-title {
    font-weight: 700;
  }

  .app-section-heading__lead,
  .app-card__meta,
  .app-list__text,
  .app-field__message,
  .site-footer__text,
  .site-footer__link {
    font-size: var(--app-font-size-200);
  }

  .app-btn {
    min-height: 2.375rem;
    padding: 0.45rem 0.875rem;
    font-size: var(--app-font-size-200);
    font-weight: 600;
    line-height: 1.25;
  }

  .app-btn--icon {
    width: 2.375rem;
    height: 2.375rem;
    min-height: 2.375rem;
    padding: 0;
  }

  .app-tabs {
    gap: var(--app-space-1);
  }

  .app-tabs__button {
    min-height: 2.375rem;
    padding: var(--app-space-2) var(--app-space-3);
    font-size: var(--app-font-size-200);
    line-height: 1.25;
  }

  .app-input {
    min-height: 2.375rem;
    padding: 0.45rem 0.875rem;
    font-size: var(--app-font-size-300);
    line-height: 1.25;
  }

  .app-mobile-search .app-search__input {
    min-height: 2.375rem;
    padding: 0.45rem var(--app-space-4) 0.45rem 2.5rem;
    font-size: var(--app-font-size-300);
    line-height: 1.25;
    border-radius: var(--app-radius-lg);
  }

  .app-mobile-search .app-search__icon {
    left: var(--app-space-3);
    width: 1rem;
    height: 1rem;
  }

  .app-mobile-search .app-search__results {
    max-height: min(60vh, 22rem);
  }

  .app-mobile-panel--card .app-link-list {
    gap: 0;
    margin-right: calc(var(--app-space-4) * -1);
    margin-left: calc(var(--app-space-4) * -1);
  }

  .app-mobile-panel--card .app-link-list__item {
    min-height: 2.75rem;
    padding: var(--app-space-3) var(--app-space-4);
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-size: var(--app-font-size-300);
    line-height: var(--app-line-height-tight);
    transform: none;
  }

  .app-mobile-panel--card .app-link-list__item + .app-link-list__item {
    border-top: 1px solid var(--app-color-border);
  }

  .app-mobile-panel--card .app-link-list__item:hover,
  .app-mobile-panel--card .app-link-list__item:focus-visible {
    background-color: var(--app-color-surface-alt);
    transform: none;
  }

  .app-mobile-panel--card .app-link-list__icon {
    width: 1rem;
    height: 1rem;
  }

  .app-mobile-panel--card .app-member-menu {
    margin-right: calc(var(--app-space-4) * -1);
    margin-left: calc(var(--app-space-4) * -1);
  }

  .app-mobile-panel--card .app-member-menu__item + .app-member-menu__item {
    border-top: 1px solid var(--app-color-border);
  }

  .app-mobile-panel--card .app-member-menu__link {
    min-height: 2.75rem;
    padding: var(--app-space-3) var(--app-space-4);
    border-radius: 0;
    transition: background-color var(--app-motion-normal) var(--app-ease-standard),
                color var(--app-motion-normal) var(--app-ease-standard);
  }

  .app-mobile-panel--card .app-member-menu__link:hover,
  .app-mobile-panel--card .app-member-menu__link:focus-visible,
  .app-mobile-panel--card .app-member-menu__link:active {
    color: var(--app-color-primary);
    background-color: var(--app-color-surface-alt);
  }

  .app-mobile-panel--card .app-member-menu__chevron {
    width: 1rem;
    height: 1rem;
  }

  .app-field--floating {
    --app-field-floating-input-height: 2.875rem;
  }

  .app-field--floating .app-input {
    padding: calc(0.8rem - 2px) 0.875rem calc(0.35rem + 2px);
  }

  .app-field--floating .app-select {
    padding: calc(0.8rem - 2px) 2.25rem calc(0.35rem + 2px) 0.875rem;
  }

  .app-field--floating .app-field__label {
    left: 0.875rem;
    font-size: var(--app-font-size-200);
  }

  .app-field--floating .app-input:focus + .app-field__label,
  .app-field--floating .app-input:not(:placeholder-shown) + .app-field__label,
  .app-field--floating .app-input:-webkit-autofill + .app-field__label,
  .app-field--floating .app-select + .app-field__label,
  .app-field--floating .app-select:focus + .app-field__label {
    font-size: var(--app-font-size-200);
  }

  .app-field--floating:has(> .app-field__label + .d-block) > .app-field__label {
    left: 0.875rem;
    font-size: var(--app-font-size-200);
  }

  .app-field--floating > .app-field__label + .d-block {
    padding: calc(0.8rem - 2px) 0.875rem calc(0.35rem + 2px);
  }

  .app-date-range {
    --app-date-range-height: 2.875rem;
  }

  .app-date-range__trigger {
    min-height: var(--app-date-range-height);
    padding: calc(0.8rem - 2px) 2.25rem calc(0.35rem + 2px) 0.875rem;
  }

  .app-date-range__label {
    left: 0.875rem;
    font-size: var(--app-font-size-200);
  }

  .app-date-range--has-value .app-date-range__label {
    font-size: var(--app-font-size-200);
  }

  .app-date-range__value {
    font-size: var(--app-font-size-300);
  }

  .app-date-range__icon {
    right: 0.875rem;
  }

  .app-navbar::before {
    height: 5.25rem;
  }

  .app-navbar .star-gradient-overlay2.app-navbar-v3 {
    top: 8px;
    left: 12px;
    right: 12px;
    margin: -7px;
    height: 58px;
    padding: 0 var(--app-space-3);
    border-radius: var(--app-radius-lg);
  }

  .app-navbar-v3__brand {
    min-width: 0;
  }

  .app-navbar-v3__logo-wrap {
    width: 42px;
    height: 42px;
  }

  .app-navbar-v3__logo {
    width: 38px;
    height: 38px;
  }

  .app-navbar-v3__title {
    max-width: 46vw;
    font-size: var(--app-font-size-300);
  }

  .app-navbar-v3__subtitle,
  .app-navbar-v3__search {
    display: none !important;
  }

  .app-navbar-v3__actions {
    min-width: 0;
    gap: var(--app-space-2);
  }

  .app-navbar-v3__icon-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--app-radius-lg);
  }

  .app-navbar .navbar-cart-dropdown.app-navbar-v3__cart-dropdown {
    position: fixed !important;
    top: -2px !important;
    right: auto !important;
    bottom: auto !important;
    left: -6px !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 2000;
    transform: none;
  }

  body.app-cart-panel-open {
    overflow: hidden;
    touch-action: none;
  }
}