/* In-page, non-modal notification. Web approximation of Liquid Glass. */
.order-benefit-backdrop {
  position: fixed;
  inset: 0 0 auto;
  z-index: 3000;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 0;
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.order-benefit-backdrop[hidden] { display: none !important; }
.order-benefit-notification {
  display: flex;
  align-items: center;
  position: relative;
  width: min(100%, 430px);
  min-width: 0;
  min-height: 78px;
  padding: 6px 5px 6px 12px;
  overflow: hidden;
  box-sizing: border-box;
  border: .5px solid rgba(255,255,255,.8);
  border-radius: 24px;
  color: #19232e;
  background: rgba(248,251,255,.78);
  box-shadow: 0 10px 32px rgba(23,39,61,.15), 0 2px 6px rgba(23,39,61,.06), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  pointer-events: auto;
  touch-action: pan-x;
  animation: notification-banner-enter 380ms cubic-bezier(.2,.8,.2,1) backwards;
  transition: transform 190ms ease-out, opacity 190ms ease-out;
}
.order-benefit-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  min-height: 64px;
  padding: 4px 0;
  margin: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease-out;
}
.order-benefit-content:active { opacity: .7; background: transparent; transform: none; }
.order-benefit-app-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  border: .5px solid rgba(43,126,212,.12);
  border-radius: 50%;
  background: #e9f4ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.order-benefit-app-icon::before, .order-benefit-app-icon::after { content: none; }
.order-benefit-app-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.order-benefit-copy { display: grid; gap: 4px; min-width: 0; }
.order-benefit-copy > strong { display: block; margin: 0; color: #17212c; font: 650 15px/1.35 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; letter-spacing: 0; overflow-wrap: anywhere; }
.order-benefit-copy > span { display: block; margin: 0; color: #536170; font: 450 11.5px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; white-space: normal; overflow-wrap: anywhere; }
.order-benefit-close {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px !important;
  height: 44px !important;
  min-width: 36px;
  padding: 0 !important;
  margin: 0 0 0 2px;
  border: 0 !important;
  border-radius: 12px !important;
  color: #637181 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 300 23px/1 system-ui;
  cursor: pointer;
}
.order-benefit-close:active { background: rgba(69,92,120,.09) !important; }
.order-benefit-content:focus-visible, .order-benefit-close:focus-visible { outline: 2px solid #277ccc; outline-offset: -2px; }
.order-benefit-notification.is-dragging { animation: none; transition: none; }
.order-benefit-notification.is-leaving { animation: none; transform: translate3d(0,calc(-100% - 24px - env(safe-area-inset-top,0px)),0) !important; opacity: 0 !important; pointer-events: none; transition: transform 190ms ease-in, opacity 150ms ease-in !important; }
.order-benefit-notification .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes notification-banner-enter { from { transform: translate3d(0,calc(-100% - 24px - env(safe-area-inset-top,0px)),0); opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
html[data-theme="dark"] .order-benefit-notification { color: #f5f8fb; border-color: rgba(229,240,255,.22); background: rgba(34,43,55,.85); box-shadow: 0 12px 34px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1); }
html[data-theme="dark"] .order-benefit-copy > strong { color: #f4f8fc; }
html[data-theme="dark"] .order-benefit-copy > span { color: #c4cfdb; }
html[data-theme="dark"] .order-benefit-close { color: #bcc9d6 !important; background: transparent !important; }
html[data-theme="dark"] .order-benefit-content:active { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .order-benefit-notification { animation: none; transition: opacity 120ms ease; }
  .order-benefit-notification.is-leaving { transform: none !important; transition: opacity 120ms ease !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .order-benefit-notification { background: #f5f8fc; border-color: #8897a8; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme="dark"] .order-benefit-notification { background: #25303d; border-color: #91a1b4; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .order-benefit-notification { background: #f5f8fc; }
  html[data-theme="dark"] .order-benefit-notification { background: #25303d; }
}
@media (max-width: 340px) {
  .order-benefit-notification { padding-left: 10px; border-radius: 22px; }
  .order-benefit-content { gap: 8px; padding-left: 0; }
  .order-benefit-app-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .order-benefit-copy > strong { font-size: 14px; }
  .order-benefit-copy > span { font-size: 11px; }
}

/* Keep the follow-up consultation readable on narrow phones. */
#customerModal.has-consultation-guide .sheet-head { align-items: center; gap: 12px; }
#customerModal.has-consultation-guide #customerTitle { min-width: 0; font-size: 19px; line-height: 1.4; }
#customerModal.has-consultation-guide #closeCustomerModal { flex: 0 0 auto; min-width: 56px; white-space: nowrap; }
#customerModal.has-consultation-guide #customerDescription { font-size: 14px; line-height: 1.65; }
#customerModal.has-consultation-guide .manual-assisted-secret { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
#customerModal.has-consultation-guide .manual-assisted-secret strong { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
#customerModal.has-consultation-guide [data-copy-assisted-secret] { width: 100%; min-height: 44px; margin: 0; white-space: nowrap; }