/* TUDAO V88 — supplied footer PNG rendered as a real <img>.
   The source image is NOT edited. CSS crops only the large black bands
   above/below the artwork so the footer does not appear all black. */

:root {
    --ng-footer-height: clamp(66px, 18vw, 86px) !important;
    --ng-footer-safe-bottom: env(safe-area-inset-bottom, 0px);
}

body {
    padding-bottom: calc(var(--ng-footer-height) + var(--ng-footer-safe-bottom)) !important;
}

.ng-bottom-nav {
    height: calc(var(--ng-footer-height) + var(--ng-footer-safe-bottom)) !important;
    padding: 0 0 var(--ng-footer-safe-bottom) !important;
    background: #050403 !important;
    border: 0 !important;
    box-shadow: 0 -5px 18px rgba(0,0,0,.34) !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
}

.ng-bottom-nav::before,
.ng-bottom-nav::after {
    content: none !important;
    display: none !important;
}

.ng-bottom-nav__inner {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    height: var(--ng-footer-height) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #050403 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/*
 Source PNG = 1536x512.
 Visible artwork lives at approximately y=143..391 (249 px tall).
 We vertically stretch the full PNG so that this 249px artwork band maps
 exactly to the footer height, then move y=143 above the clipping window.
 This keeps the original file untouched and removes the black bands in CSS.
*/
.ng-bottom-nav__art {
    position: absolute !important;
    z-index: 0 !important;
    left: 0 !important;
    top: calc(var(--ng-footer-height) * -0.574297) !important; /* -143 / 249 */
    width: 100% !important;
    height: calc(var(--ng-footer-height) * 2.056225) !important; /* 512 / 249 */
    max-width: none !important;
    object-fit: fill !important;
    object-position: center center !important;
    display: block !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

.ng-bottom-nav__item,
.td-home-page .ng-bottom-nav__item {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    text-decoration: none !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* The supplied art already contains every icon and label. HTML remains only
   for accessibility and the five click targets. */
.ng-bottom-nav__bubble,
.ng-bottom-nav__label,
.td-home-page .ng-bottom-nav__bubble,
.td-home-page .ng-bottom-nav__label,
.ng-bottom-nav__item.is-active .ng-bottom-nav__bubble,
.ng-bottom-nav__item.is-active .ng-bottom-nav__label,
.ng-bottom-nav__item.is-brand-active .ng-bottom-nav__bubble,
.ng-bottom-nav__item.is-brand-active .ng-bottom-nav__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ng-bottom-nav__item::before,
.ng-bottom-nav__item::after,
.ng-bottom-nav__bubble::before,
.ng-bottom-nav__bubble::after {
    content: none !important;
    display: none !important;
}

.ng-bottom-nav__item:focus-visible {
    outline: 2px solid rgba(239,194,94,.88) !important;
    outline-offset: -2px !important;
}

.ng-bottom-nav__item:active {
    background: rgba(255,210,105,.055) !important;
}