/* Shared, restrained depth for the demo's interactive surfaces. */
.phone {
  --control-shadow:
    0 2px 2px #183e481a, 0 6px 12px #183e481c, inset 0 1px 0 #ffffff80;
  --control-pressed: 0 1px 2px #183e4820, inset 0 2px 4px #183e4824;
}

/* 276px to 220.8px: retain full-size labels and touch targets. */
.screen > .top {
  height: 220.8px;
  min-height: 220.8px;
  padding: 18px 20px;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: space-between;
  border-radius: 0 0 36px 36px;
  box-shadow:
    inset 0 1px 0 #ffffff66,
    0 3px 0 #173f4a12,
    0 8px 16px -7px #173f4a4d;
}
.screen > .top::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    155deg,
    #ffffff24 0%,
    #ffffff00 52%,
    #143f4a0d 100%
  );
  z-index: -1;
  pointer-events: none;
}
.screen > .top .toprow,
.screen > .top .hello {
  margin-top: 0;
}
.top .search {
  box-shadow:
    inset 0 1px 0 #ffffff73,
    0 2px 1px #123f4617,
    0 5px 9px #123f461a;
  min-height: 44px;
}
.top .search-icon {
  width: 25px;
  height: 25px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.top .headtitle {
  text-shadow: 0 1px 2px #123f4626;
  border-radius: 10px;
  min-height: 44px;
}
.top .idlink {
  filter: drop-shadow(0 2px 2px #123f462b);
}

.phone
  :is(
    .btn,
    .payment-provider-choice,
    .verify-methods button,
    .partner-search-result,
    .partner-search-suggestions button,
    .wallet-history-back,
    .country-button,
    .category-button,
    .journey-arrow,
    .receive-change,
    .language-switch button
  ) {
  box-shadow: var(--control-shadow);
}
.phone
  :is(
    .btn,
    .payment-provider-choice,
    .verify-methods button,
    .partner-search-result,
    .partner-search-suggestions button,
    .wallet-history-back,
    .country-button,
    .category-button,
    .journey-arrow,
    .receive-change,
    .language-switch button,
    .search,
    .avatar,
    .idlink,
    .app-center-label,
    .service,
    .partner-app-widget,
    .wallet-action,
    .orange-command,
    .partner-template-actions button,
    .maxit-shortcut-card,
    .maxit-offer-slide,
    .zencey-service,
    .zencey-start,
    .favorites-tile,
    .tab-button,
    .pay-settings,
    .profile-avatar,
    .favorites-profile-link,
    .login-bio-button
  ) {
  transition:
    box-shadow 160ms ease,
    filter 160ms ease,
    translate 160ms ease;
  touch-action: manipulation;
}

/* Follow each image's silhouette; keep transparent widget edges intact. */
.phone
  :is(.app-center-label, .service.service-label, .partner-app-widget)
  > img,
.phone
  :is(
    .orange-command-picture,
    .partner-template-actions button img,
    .wallet-action img,
    .maxit-shortcut-card > img,
    .maxit-offer-slide > img,
    .zencey-service > img,
    .favorites-icon,
    .tab-icon,
    .pay-settings img,
    .receiver-contact-icon
  ) {
  filter: drop-shadow(0 2px 1px #183e4820) drop-shadow(0 4px 5px #183e481a);
}
.phone :is(.avatar, .profile-avatar, .favorites-profile-link) {
  box-shadow:
    0 2px 2px #183e4826,
    0 6px 14px #183e4829,
    inset 0 1px 0 #ffffff99;
}
.phone :is(.profile-overview img, .partner-account-photo) {
  box-shadow:
    0 2px 2px #183e4820,
    0 5px 12px #183e4824;
}
.phone .profile-avatar > img {
  box-shadow: none;
}
.phone .partner-template-wallet {
  filter: drop-shadow(0 4px 6px #183e4814);
}
.phone .zencey-start {
  box-shadow:
    inset 0 1px 0 #ffffff88,
    0 2px 4px #183e481a;
}
.phone .active-favorites-icon {
  display: block;
  color: #cecece;
}
.phone .tab-button.active .active-favorites-icon {
  color: #2db7ad;
}
.phone .me-pay-wallet-asset {
  mask-image: url("wallet-outline-v271.svg");
  -webkit-mask-image: url("wallet-outline-v271.svg");
}
.phone :is(#sendProviderButton, .transaction-category-button, .partner-toggle) {
  box-shadow: var(--control-shadow);
  transition:
    box-shadow 160ms ease,
    translate 160ms ease;
}
.phone
  :is(#sendProviderButton, .transaction-category-button, .partner-toggle):not(
    :disabled
  ):active {
  box-shadow: var(--control-pressed);
}
.phone .receiver-contact-button {
  transition: translate 160ms ease;
}
.phone .receiver-contact-button:not(:disabled):active {
  translate: 0 1px;
}

#tabs {
  box-shadow:
    inset 0 1px 0 #ffffffd9,
    0 -2px 2px #183e480a,
    0 -9px 22px -7px #173f4a4d;
}
#tabs::before {
  box-shadow:
    inset 0 1px 0 #fffffff2,
    0 -6px 13px -6px #173f4a45;
}
.onboarding-footer {
  box-shadow:
    inset 0 1px 0 #ffffffcc,
    0 -5px 15px #183e480d;
}
.phone :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  box-shadow: inset 0 1px 3px #183e480a;
}

@media (hover: hover) and (pointer: fine) {
  .phone
    :is(
      .btn,
      .payment-provider-choice,
      .verify-methods button,
      .partner-search-result,
      .wallet-history-back,
      .country-button,
      .category-button,
      .journey-arrow,
      .receive-change,
      .language-switch button,
      .search,
      .avatar,
      .idlink,
      .app-center-label,
      .service,
      .partner-app-widget,
      .wallet-action,
      .orange-command,
      .partner-template-actions button,
      .maxit-shortcut-card,
      .maxit-offer-slide,
      .zencey-service,
      .zencey-start,
      .favorites-tile,
      .tab-button,
      .pay-settings,
      .profile-avatar,
      .favorites-profile-link,
      .login-bio-button
    ):not(:disabled):not([aria-disabled="true"]):not(.partner-watermarked):not(
      .muted-tile
    ):hover {
    translate: 0 -1px;
  }
  .phone
    :is(
      .btn,
      .payment-provider-choice,
      .partner-search-result,
      .wallet-history-back,
      .search
    ):not(:disabled):not([aria-disabled="true"]):hover {
    box-shadow:
      0 3px 2px #183e481a,
      0 8px 16px #183e4824,
      inset 0 1px 0 #ffffff99;
  }
}
.phone
  :is(
    .btn,
    .payment-provider-choice,
    .verify-methods button,
    .partner-search-result,
    .wallet-history-back,
    .country-button,
    .category-button,
    .journey-arrow,
    .receive-change,
    .language-switch button,
    .search,
    .avatar,
    .idlink,
    .app-center-label,
    .service,
    .partner-app-widget,
    .wallet-action,
    .orange-command,
    .partner-template-actions button,
    .maxit-shortcut-card,
    .maxit-offer-slide,
    .zencey-service,
    .zencey-start,
    .favorites-tile,
    .tab-button,
    .pay-settings,
    .profile-avatar,
    .favorites-profile-link,
    .login-bio-button
  ):not(:disabled):not([aria-disabled="true"]):not(.partner-watermarked):not(
    .muted-tile
  ):active {
  translate: 0 1px;
  transition-duration: 70ms;
}
.phone
  :is(
    .btn,
    .payment-provider-choice,
    .verify-methods button,
    .wallet-history-back,
    .country-button,
    .category-button,
    .journey-arrow,
    .search
  ):not(:disabled):not([aria-disabled="true"]):active {
  box-shadow: var(--control-pressed);
}
.receive-widget-actions {
  display: flex;
}
.favorites-icon .favorites-settings-icon { filter: brightness(0) invert(1); }
.send-again { margin: 20px 0 24px; }
.send-authentication .send-auth-title { font-size: clamp(18px, 5.2vw, 22px); line-height: 1.35; }
.send-auth-title, .send-auth-title > span { text-transform: none; }
.send-auth-title > span { white-space: nowrap; }
.send-authentication .send-auth-recipient { margin: 16px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
.send-authentication .send-auth-amount {
  margin: 28px 0 36px; font: 600 23px/1.4 Montserrat,Arial,sans-serif; overflow-wrap: anywhere;
}
.send-again h3 { margin: 0 0 12px; }
.send-again-list { display: flex; gap: 12px; overflow-x: auto; padding: 4px 3px 10px; }
.send-again-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex: 0 0 120px; min-width: 0; padding: 8px 4px; border: 0; border-radius: 16px;
  background: transparent; color: #25414a; font: 500 12px Montserrat,Arial,sans-serif; cursor: pointer;
}
.send-again-avatar {
  display: grid; place-items: center; width: 64px; height: 64px; flex: none;
  margin-bottom: 3px; border-radius: 50%; overflow: hidden; background: #e0f5f1;
  color: #167e78; font-size: 22px; font-weight: 600;
}
.send-again-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.send-again-name { display: block; width: 100%; min-height: 2.8em; line-height: 1.4; font-weight: 600; }
.send-again-name > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.receive-again {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #dce5e8;
}
.receive-again h3 { margin: 0 0 8px; }
.receive-again-list { display: grid; gap: 10px; max-height: 300px; overflow-y: auto; padding: 3px; }
.receive-again-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 76px;
  padding: 12px; text-align: left; border: 1px solid #dce5e8; border-radius: 16px;
  background: #fff; color: #25414a; font: 500 13px Montserrat, Arial, sans-serif; cursor: pointer;
}
.receive-again-item > img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.receive-again-details { display: grid; gap: 4px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.receive-again-details strong { font-size: 15px; }
.receive-again-details small { font-size: 11px; font-weight: 400; }
.receive-again-action { flex: none; color: #167e78; font-size: 11px; font-weight: 600; }
.receive-widget-actions > .receive-change {
  flex: 1;
  min-width: 0;
  width: 50%;
  padding: 12px 8px;
  font-size: 14px;
}
.receive-widget-actions > .receive-change + .receive-change {
  border-left: 1px solid #dce5e8;
}
.phone button:focus-visible {
  outline: 2px solid var(--partner-accent, #167e78);
  outline-offset: 3px;
}
.phone :is(.top, .favorites-panel) button:focus-visible {
  outline-color: #fff;
}
/* Keep popup autofocus, without spontaneous rings during touch/mouse use. */
.pointer-navigation button:focus,
.pointer-navigation a:focus,
.pointer-navigation [role="button"]:focus {
  outline: none !important;
}
/* Include body-level dialogs and older WebViews without :focus-visible. */
.keyboard-navigation button:focus,
.keyboard-navigation a:focus,
.keyboard-navigation [role="button"]:focus {
  outline: 2px solid var(--partner-accent, #167e78);
  outline-offset: 3px;
}
.keyboard-navigation .top button:focus,
.keyboard-navigation .favorites-panel button:focus {
  outline-color: #fff;
}
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
.phone button:is(:disabled, [aria-disabled="true"], .partner-watermarked) {
  translate: none;
  box-shadow: none;
}
.phone :is(.btn, .payment-provider-choice):disabled {
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .phone button {
    transition: none !important;
    translate: none !important;
  }
}

/* Reusable QR requests: two upright cards per swipe page, up to five cards. */
.receive-again-list { display:flex; gap:0; max-height:none; overflow-x:auto; overflow-y:hidden; padding:0; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.receive-again-list::-webkit-scrollbar { display:none; }
.receive-again-page { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; flex:0 0 100%; min-width:0; box-sizing:border-box; padding:3px; scroll-snap-align:start; scroll-snap-stop:always; }
.receive-again-item { flex-direction:column; justify-content:flex-start; gap:12px; min-height:196px; padding:16px 10px 12px; text-align:center; }
.receive-again-item > img { width:48px; height:48px; }
.receive-again-details { width:100%; flex:1; gap:6px; align-content:start; font-size:12px; }
.receive-again-details strong { font-size:13px; line-height:1.4; }
.receive-again-details small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.receive-again-navigation { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:12px; }
.receive-again-arrow { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #acdcd8; border-radius:13px; background:#fff; color:#167e78; font:500 28px/1 Montserrat,Arial,sans-serif; cursor:pointer; }
.receive-again-arrow:disabled { opacity:.35; cursor:default; }
.receive-again-dots { display:flex; gap:2px; }
.receive-again-dot { display:grid; place-items:center; width:28px; height:40px; border:0; padding:0; background:transparent; cursor:pointer; }
.receive-again-dot span { width:8px; height:8px; border-radius:50%; background:#ccd9d8; }
.receive-again-dot[aria-current="page"] span { background:#2db7ad; }
.receive-again-item:focus-visible,.receive-again-arrow:focus-visible,.receive-again-dot:focus-visible,.receive-again-list:focus-visible { outline:2px solid #167e78; outline-offset:-2px; }

.phone .favorites-icon :is(.favorites-notifications-icon,.favorites-logout-icon){width:52px;height:52px;max-width:none;object-fit:contain}
/* SmartCard artwork is 623:1139 and centered; Logout has a 5% transparent
   left margin. Equal image heights plus this offset align their visible edges. */
.phone .favorites-icon .favorites-logout-icon{
  width:100%;height:100%;object-fit:contain;transform:translateX(17.651449%);
}
/* Linked identity documents: two cards per page, extended by country policy. */
.profile-document-carousel{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;max-width:100%;min-width:0}
.profile-document-carousel::-webkit-scrollbar{display:none}
.profile-document-page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;flex:0 0 100%;min-width:0;box-sizing:border-box;padding:3px;scroll-snap-align:start;scroll-snap-stop:always}
.phone .profile-document-card{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%;padding:16px 10px 12px;appearance:none;border:1px solid #ccd9d8;border-radius:22px;background:#fff;color:#25414a;text-align:center;font:400 12px/1.4 Montserrat,Arial,sans-serif;cursor:pointer;box-shadow:0 3px 8px #25414a0a}
.document-card-art{display:flex;flex-direction:column;align-items:center;width:100%;gap:14px;margin-bottom:14px}
.document-card-lock{font-size:28px;line-height:1.2}
.document-card-vault{display:grid;place-items:center;min-height:44px;width:100%;box-sizing:border-box;border-radius:14px;padding:6px;background:#e2f0da;color:#587155;font-size:11px;line-height:1.4}
.phone .profile-document-card img{display:block;width:66px;height:72px;object-fit:contain;filter:none;box-shadow:none;border-radius:0}
.phone .profile-document-card strong{font-size:12px;line-height:1.4;min-height:34px;display:grid;place-items:center;overflow-wrap:anywhere}
.document-card-status{font-size:10px;margin-top:4px;color:#168077}
.profile-document-card.is-watermarked .document-card-art{opacity:.24;filter:grayscale(1)}
.profile-document-card.is-watermarked .document-card-status{color:#819092}
.phone .profile-document-card.is-active{border-color:#65b8ac;box-shadow:0 3px 8px #167e7812}
.profile-document-card:focus-visible{outline:2px solid #167e78;outline-offset:-3px}
.profile-document-details>.small{margin:14px 0;font-size:10px;line-height:1.5}
.phone .profile-document-dialog-icon{display:block;width:66px;height:72px;object-fit:contain;margin:18px auto}
.phone .profile-document-view .profile-grid{text-align:left;grid-template-columns:1fr;gap:10px}
.profile-document-view .profile-field{min-width:0;overflow-wrap:anywhere}
.profile-document-choices .btn{display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left}
.profile-document-choices img{width:30px;height:32px;object-fit:contain}
@media(max-width:350px){.profile-document-page{gap:8px}.phone .profile-document-card{padding:12px 7px}.phone .profile-document-card strong{font-size:11px}.document-card-vault{font-size:10px}}

.send-again-list {align-items:flex-start;}
.send-to-myself .send-again-name {white-space:normal;line-height:1.4;overflow-wrap:anywhere;}