/* ==========================================================================
   Datasky Redesign: mobile bottom menu (all pages, 768px and narrower)
   ========================================================================== */

.ds-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: #FFFFFF; border-radius: 24px 24px 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08); padding-bottom: env(safe-area-inset-bottom, 0px); font-family: 'Plus Jakarta Sans', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif; -webkit-tap-highlight-color: transparent; }
.ds-bottom-nav__row { display: flex; align-items: flex-end; max-width: 600px; margin: 0 auto; padding: 8px 6px; }
.ds-bottom-nav__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none !important; color: #64748B; font-size: 11px; font-weight: 600; line-height: 1.2; transition: color 0.2s ease; }
.ds-bottom-nav__item:hover, .ds-bottom-nav__item:focus { color: #0A6FE8; }
.ds-bottom-nav__pill { display: flex; align-items: center; justify-content: center; padding: 5px 16px; border-radius: 20px; background: transparent; transition: background-color 0.22s ease-out, transform 0.15s ease; }
.ds-bottom-nav__item svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.ds-bottom-nav__label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Active tab: blue icon + label, light blue pill behind the icon */
.ds-bottom-nav__item.is-active { color: #0A6FE8; font-weight: 800; }
.ds-bottom-nav__item.is-active .ds-bottom-nav__pill { background: rgba(10, 123, 252, 0.1); }

/* Middle eSIM tab: raised gradient circle */
.ds-bottom-nav__item--esim { gap: 3px; }
.ds-bottom-nav__esim { width: 52px; height: 52px; margin-top: -22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: linear-gradient(135deg, #0A7BFC 0%, #303CE2 55%, #443195 100%); border: 3px solid #FFFFFF; box-shadow: 0 8px 20px rgba(48, 60, 226, 0.4); box-sizing: content-box; transition: transform 0.15s ease; }
.ds-bottom-nav__esim svg { width: 26px; height: 26px; }

/* Press feedback like the app */
.ds-bottom-nav__item:active .ds-bottom-nav__pill, .ds-bottom-nav__item:active .ds-bottom-nav__esim { transform: scale(0.92); }
.ds-bottom-nav__item:focus-visible { outline: none; }
.ds-bottom-nav__item:focus-visible .ds-bottom-nav__pill, .ds-bottom-nav__item:focus-visible .ds-bottom-nav__esim { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A6FE8; }

@media (max-width: 768px) {
    .ds-bottom-nav { display: block; }
    body { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }

    /* Push the floating cart and translate widgets above the menu */
    html body div.xoo-wsc-basket,
    html body .xoo-wsc-basket,
    html body div#gt_float_wrapper,
    html body .gtranslate_wrapper,
    html body div.xoo-wsc-basket[style],
    html body div#gt_float_wrapper[style] {
        bottom: 95px !important;
        bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
        margin-bottom: 0 !important;
        z-index: 99998 !important;
    }
}