/* The SVG surface keeps the center recess smooth at every mobile width. */
.mobile-dock-frame { display:none; }
.mobile-bottom-icon { display:grid;place-items:center;flex:none;width:28px;height:24px; }
html.site-pearl body.public-ui .mobile-bottom-icon>.ui-nav-glyph { display:block;width:20px;height:20px;stroke-width:1.5; }

@media (max-width:760px) {
  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted {
    --dock-top:#fff;
    --dock-bottom:#edf3fc;
    --dock-shadow:#365c9121;
    --dock-ink:#5a6d8c;
    --dock-active:#1b57be;
    --dock-active-ink:#174ca3;
    --dock-active-top:#eaf4ff;
    --dock-active-bottom:#d8eaff;
    --dock-hover-fill:#edf4fc;
    --dock-icon-fill:transparent;
    --dock-active-icon:#c9e2ff;
    --dock-indicator:#328bed;
    --dock-indicator-shadow:0 0 6px #438fe94d;
    --dock-orb:radial-gradient(circle at 38% 18%,#fff7d5 0%,#ffdd86 34%,#e9a743 72%,#c78935 100%);
    --dock-orb-ink:#75471b;
    --dock-orb-shadow:0 4px 10px #c38a3b30;
    --dock-orb-active:linear-gradient(145deg,#438cf4,#255bc9);
    --dock-orb-active-ink:#fff;
    --dock-orb-active-shadow:0 4px 12px #2563eb40;
    box-sizing:border-box;
    width:calc(100% - 24px);
    max-width:440px;
    height:66px;
    padding:6px 8px 8px;
    gap:4px;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--dock-ink);
    overflow:visible;
    align-items:stretch;
  }

  html.site-pearl.site-dark body.public-ui .mobile-bottom-nav--sculpted {
    --dock-top:#11192c;
    --dock-bottom:#080e1b;
    --dock-shadow:#0007;
    --dock-ink:#b4c1d9;
    --dock-active:#a9d7ff;
    --dock-active-ink:#d4eaff;
    --dock-active-top:#1b3357;
    --dock-active-bottom:#173e6d;
    --dock-hover-fill:#1a2942;
    --dock-active-icon:#24558a;
    --dock-indicator:#83c9ff;
    --dock-indicator-shadow:0 0 6px #44aaff40;
    --dock-orb:radial-gradient(circle at 38% 15%,#fff1af 0%,#ffca66 24%,#b76c24 66%,#ee9e38 89%,#fff3c2 100%);
    --dock-orb-ink:#3e270c;
    --dock-orb-shadow:0 4px 12px #ed9d3233;
    --dock-orb-active:linear-gradient(145deg,#85c8ff,#4c95ef);
    --dock-orb-active-ink:#102b50;
    --dock-orb-active-shadow:0 4px 14px #248cff40;
  }

  .mobile-bottom-nav--sculpted::before,
  .mobile-bottom-nav--sculpted::after {
    content:none;
  }

  .mobile-bottom-nav--sculpted .mobile-dock-frame {
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
    filter:drop-shadow(0 7px 10px var(--dock-shadow));
    z-index:-1;
  }

  .mobile-dock-stop-top { stop-color:var(--dock-top); }
  .mobile-dock-stop-bottom { stop-color:var(--dock-bottom); }
  .mobile-dock-stop-active-top { stop-color:var(--dock-active-top); }
  .mobile-dock-stop-active-bottom { stop-color:var(--dock-active-bottom); }
  .mobile-dock-rim,
  .mobile-dock-inlay { display:none; }
  .mobile-dock-surface { fill:url(#mobileDockSurface);stroke:none; }

  /* Paint state colors inside the same SVG silhouette as the dock surface. */
  .mobile-dock-highlight {
    fill:var(--dock-hover-fill);
    opacity:0;
    transition:opacity .2s ease;
  }

  .mobile-bottom-nav--sculpted:has(>a:first-of-type:is(.is-current,[aria-expanded=true])) .mobile-dock-highlight--home,
  .mobile-bottom-nav--sculpted:has(>[data-nav-explorer]:is(.is-current,[aria-expanded=true])) .mobile-dock-highlight--catalog,
  .mobile-bottom-nav--sculpted:has(.mobile-topup-menu>.mobile-bottom-item:is(.is-current,[aria-expanded=true])) .mobile-dock-highlight--topup,
  .mobile-bottom-nav--sculpted:has(>a:last-of-type:is(.is-current,[aria-expanded=true])) .mobile-dock-highlight--account {
    fill:url(#mobileDockActive);
    opacity:1;
  }

  .mobile-bottom-nav--sculpted:has(>a:first-of-type:active) .mobile-dock-highlight--home,
  .mobile-bottom-nav--sculpted:has(>[data-nav-explorer]:active) .mobile-dock-highlight--catalog,
  .mobile-bottom-nav--sculpted:has(.mobile-topup-menu>.mobile-bottom-item:active) .mobile-dock-highlight--topup,
  .mobile-bottom-nav--sculpted:has(>a:last-of-type:active) .mobile-dock-highlight--account { opacity:1; }

  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item {
    box-sizing:border-box;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    min-width:0;
    min-height:50px;
    height:100%;
    gap:2px;
    padding:3px 1px 7px !important;
    border:0 !important;
    border-radius:16px !important;
    background:transparent !important;
    color:var(--dock-ink) !important;
    box-shadow:none !important;
    font:650 10px/1.35 Inter,system-ui,sans-serif !important;
    text-decoration:none !important;
    letter-spacing:0 !important;
    transform:none !important;
    translate:none !important;
    touch-action:manipulation;
    transition:background .2s ease,color .2s ease !important;
  }

  .mobile-bottom-nav--sculpted .mobile-bottom-icon {
    box-sizing:border-box;
    display:grid;
    place-items:center;
    flex:none;
    width:32px;
    height:28px;
    border:0;
    border-radius:11px;
    background:var(--dock-icon-fill);
    transition:scale .18s ease,background .2s ease,color .2s ease;
  }

  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-icon>svg {
    display:block;
    width:20px !important;
    height:20px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.5;
    overflow:visible;
  }

  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-label {
    display:block;
    flex:none;
    max-width:100%;
    overflow:visible;
    white-space:nowrap;
    color:inherit !important;
    line-height:1.35;
  }

  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item:is(.is-current,[aria-expanded=true]) {
    color:var(--dock-active) !important;
  }

  .mobile-bottom-nav--sculpted .mobile-bottom-item:not(.mobile-bottom-item--orders):is(.is-current,[aria-expanded=true]) .mobile-bottom-icon {
    background:var(--dock-active-icon);
    color:var(--dock-active);
  }

  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item:is(.is-current,[aria-expanded=true]) .mobile-bottom-label {
    color:var(--dock-active-ink) !important;
  }

  .mobile-bottom-nav--sculpted .mobile-bottom-item:is(.is-current,[aria-expanded=true])::after {
    content:"";
    position:absolute;
    bottom:2px;
    left:50%;
    width:13px;
    height:3px;
    border-radius:10px;
    background:var(--dock-indicator);
    box-shadow:var(--dock-indicator-shadow);
    transform:translateX(-50%);
  }

  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item--orders:is(a,.is-current) {
    background:transparent !important;
    box-shadow:none !important;
    color:var(--dock-ink) !important;
  }

  .mobile-bottom-nav--sculpted .mobile-bottom-item--orders .mobile-bottom-icon {
    position:absolute;
    top:-16px;
    left:50%;
    width:46px;
    height:46px;
    transform:translateX(-50%);
    border:0;
    border-radius:50%;
    background:var(--dock-orb);
    color:var(--dock-orb-ink);
    box-shadow:var(--dock-orb-shadow);
    transition:scale .18s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
  }

  .mobile-bottom-nav--sculpted .mobile-bottom-item--orders .mobile-bottom-icon::before,
  .mobile-bottom-nav--sculpted .mobile-bottom-item--orders .mobile-bottom-icon::after {
    content:none;
  }

  .mobile-bottom-nav--sculpted .mobile-bottom-item--orders.is-current .mobile-bottom-icon {
    background:var(--dock-orb-active);
    color:var(--dock-orb-active-ink);
    box-shadow:var(--dock-orb-active-shadow);
  }

  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item--orders .mobile-bottom-icon>svg {
    width:22px !important;
    height:22px !important;
    stroke-width:1.5;
  }

  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item--orders .mobile-bottom-label {
    position:absolute;
    top:33px;
    left:50%;
    transform:translateX(-50%);
    color:var(--dock-ink) !important;
  }

  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item--orders.is-current .mobile-bottom-label {
    color:var(--dock-active-ink) !important;
  }

  .mobile-bottom-nav--sculpted .mobile-topup-menu { min-width:0;height:100%; }
  .mobile-bottom-nav--sculpted .mobile-topup-menu>.payment-method-links { bottom:calc(100% + 16px); }

  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item:active .mobile-bottom-icon { scale:.92; }
  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item:focus-visible {
    outline:2px solid var(--dock-indicator) !important;
    outline-offset:3px;
  }

  html.site-pearl body.public-ui { padding-bottom:calc(94px + env(safe-area-inset-bottom,0px)) !important; }
  html.site-pearl body.public-ui .global-contact-float { bottom:calc(103px + env(safe-area-inset-bottom,0px)) !important; }
  html.site-pearl body.public-ui #acTrigger { bottom:calc(98px + env(safe-area-inset-bottom,0px)) !important; }
  html.site-pearl body.public-ui #ambientMusic { bottom:calc(95px + env(safe-area-inset-bottom,0px)) !important; }
  html.site-pearl body.public-ui:has(#acTrigger.ac-pos-right) .global-contact-float,
  html.site-pearl body.public-ui:has(#acTrigger.ac-pos-left) #ambientMusic { bottom:calc(158px + env(safe-area-inset-bottom,0px)) !important; }
}

@media (max-width:760px) and (hover:hover) {
  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item:not(.is-current):not([aria-expanded=true]):hover {
    color:var(--dock-active) !important;
  }

  .mobile-bottom-nav--sculpted:has(>a:first-of-type:hover) .mobile-dock-highlight--home,
  .mobile-bottom-nav--sculpted:has(>[data-nav-explorer]:hover) .mobile-dock-highlight--catalog,
  .mobile-bottom-nav--sculpted:has(.mobile-topup-menu>.mobile-bottom-item:hover) .mobile-dock-highlight--topup,
  .mobile-bottom-nav--sculpted:has(>a:last-of-type:hover) .mobile-dock-highlight--account { opacity:1; }

  .mobile-bottom-nav--sculpted .mobile-bottom-item--orders:hover .mobile-bottom-icon {
    background:var(--dock-orb-active);
    color:var(--dock-orb-active-ink);
    box-shadow:var(--dock-orb-active-shadow);
  }
}

@media (max-width:359px) {
  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted { width:calc(100% - 16px);padding-inline:6px;gap:1px; }
  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item { font-size:9px !important; }
}

@media (prefers-reduced-motion:reduce) {
  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted,
  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted *,
  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted *::before,
  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted *::after { animation:none !important;transition:none !important; }
}

@media (forced-colors:active) {
  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted { background:Canvas !important;border:1px solid ButtonText !important;border-radius:20px !important; }
  .mobile-bottom-nav--sculpted .mobile-dock-frame,
  .mobile-bottom-nav--sculpted::before,
  .mobile-bottom-nav--sculpted::after { display:none; }
  html.site-pearl body.public-ui .mobile-bottom-nav--sculpted .mobile-bottom-item:is(.is-current,[aria-expanded=true]) { outline:2px solid Highlight; }
}