/* V40: guest-story consistency, stable toolbar, and clear refill selections. */

.pack.is-annual.is-selected {
  color: #173228 !important;
  background: #f4e7ad !important;
  box-shadow: inset 0 0 0 2px #d4ad39 !important;
}

.pack.is-annual.is-selected strong,
.pack.is-annual.is-selected span,
.pack.is-annual.is-selected small {
  color: inherit !important;
}

.pack.is-annual.is-selected em {
  color: #f8faf6;
  background: #2d6b50;
}

.wechat-manual-panel {
  margin-top: 14px;
}

.coupon-panel {
  margin-top: 10px;
}

.wechat-manual-panel button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  text-align: center;
}

.wechat-manual-panel button span,
.wechat-manual-panel button b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
}

@media (min-width: 721px) {
  body:not(.needs-entry) .topbar {
    grid-template-columns: minmax(250px, 1fr) auto minmax(640px, auto);
    padding-inline: 20px;
  }

  body:not(.needs-entry) .brand {
    min-width: 250px;
  }

  body:not(.needs-entry) .topbar-tools {
    grid-template-columns: auto auto auto minmax(250px, 290px);
  }
}

@media (min-width: 721px) and (max-width: 1180px) {
  body:not(.needs-entry) .topbar {
    grid-template-columns: 48px auto minmax(0, 1fr);
    padding-inline: 10px;
  }

  body:not(.needs-entry) .brand {
    min-width: 48px;
  }

  body:not(.needs-entry) .topbar-tools {
    grid-template-columns: auto auto auto minmax(205px, 1fr);
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  body:not(.needs-entry) .topbar {
    display: grid;
    grid-template-columns: 34px 80px 43px 43px minmax(0, 1fr) !important;
    grid-template-rows: 48px !important;
    align-items: center;
    gap: 3px !important;
    min-height: 58px;
    padding: 5px 6px;
  }

  body:not(.needs-entry) .brand {
    grid-column: 1;
    grid-row: 1;
  }

  body:not(.needs-entry) .track-switch {
    grid-column: 2;
    grid-row: 1;
    width: 80px;
    min-width: 80px;
  }

  body:not(.needs-entry) .topbar-tools {
    display: contents !important;
  }

  body:not(.needs-entry) .hungry-notes-link {
    grid-column: 3;
    grid-row: 1;
  }

  body:not(.needs-entry) .canopy-inbox-button {
    grid-column: 4;
    grid-row: 1;
  }

  body:not(.needs-entry) .wallet {
    grid-column: 5;
    grid-row: 1;
    min-width: 0 !important;
  }

  body:not(.needs-entry) .hungry-notes-link,
  body:not(.needs-entry) .canopy-inbox-button {
    width: 43px !important;
    min-width: 43px !important;
    max-width: 43px !important;
  }

  body:not(.needs-entry) #hungryNotesTopLabel,
  body:not(.needs-entry) .canopy-inbox-button span {
    width: 41px !important;
    max-width: 41px !important;
    font-size: .43rem !important;
  }

  body:not(.needs-entry) .wallet.has-annual-pass {
    grid-template-columns: 11px minmax(0, 1fr) 36px;
  }

  body:not(.needs-entry) .wallet.has-annual-pass #leafCount {
    font-size: .55rem;
  }

  body.refill-open .wechat-manual-panel,
  body.refill-open .coupon-panel {
    border: 0;
    box-shadow: none;
  }
}

@media (max-width: 349px) and (orientation: portrait) {
  body:not(.needs-entry) .topbar {
    grid-template-columns: 31px 72px 38px 38px minmax(0, 1fr) !important;
    gap: 2px !important;
    padding-inline: 4px;
  }

  body:not(.needs-entry) .track-switch {
    width: 72px;
    min-width: 72px;
  }

  body:not(.needs-entry) .hungry-notes-link,
  body:not(.needs-entry) .canopy-inbox-button {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }

  body:not(.needs-entry) #hungryNotesTopLabel,
  body:not(.needs-entry) .canopy-inbox-button span {
    display: none !important;
  }
}