/* ================================================================
   PORTADOR MARKET — GLOBAL RESPONSIVE OVERRIDE
   Loaded LAST — overrides all component-level styles.
   Mobile-first: <768px = single column, no overflow.
   ================================================================ */

/* ===== 00. FONT SCALE FIX — prevent Android system font scaling ===== */
/* When user sets "Large Text" in Android Accessibility settings,         */
/* the browser inflates all rem/em fonts. This locks them to 100%.         */
html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    /* Ensure base font is locked to 16px regardless of system settings */
    font-size: 16px !important;
}

/* ===== 0. CRITICAL: Disable reveal animations on mobile — prevents blank screens ===== */
/* On mobile, the IntersectionObserver may NOT fire for dynamically-injected content.    */
/* This override makes ALL content immediately visible on phones and tablets.             */
@media (max-width: 1024px) {

    .reveal-up,
    .reveal-up.delay-100,
    .reveal-up.delay-200,
    .reveal-up.delay-300,
    .reveal-up.delay-400 {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}

/* ===== 0b. CRITICAL GPU FIX: Kill heavy visual effects on mobile ===== */
/* backdrop-filter:blur(20px) × 6 cards + mix-blend-mode + infinite animations  */
/* exhausts GPU VRAM on budget Android phones, crashing/freezing the browser tab. */
@media (max-width: 1024px) {

    /* Kill ALL backdrop-filter blurs site-wide — the #1 GPU crash cause */
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Kill mix-blend-mode GPU compositing layers */
    .tc-glow-bg {
        display: none !important;
    }

    /* Kill the infinite gradient animation on the services hero title */
    .animated-gradient-text {
        animation: none !important;
        background: none !important;
        color: white !important;
        -webkit-text-fill-color: white !important;
    }

    /* Simplify transformation cards — flat dark card instead of glass blur */
    .transformation-card {
        background: rgba(15, 23, 42, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        transition: none !important;
        will-change: auto !important;
        box-shadow: none !important;
    }

    .transformation-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Kill GPU-compositing box-shadows on premium cards */
    .hover-glow-card,
    .glow-card,
    [class*="premium-card"] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        filter: none !important;
    }
}

/* ===== 1. GLOBAL BASE — prevent horizontal overflow everywhere ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

/* ===== 1b. PROFILE HERO HEADER — mobile responsive fixes ===== */
@media (max-width: 768px) {

    /* Hide the decorative logo image on mobile to save space */
    .profile-logo-img {
        display: none !important;
    }

    /* Badge row takes full width since the logo is gone */
    .profile-badge-row {
        width: 100% !important;
    }

    /* Profile hero: reduce vertical padding on mobile */
    .profile-auth-hero {
        padding: 1.5rem 1rem !important;
    }
}

/* ===== 2. APP SHELL — layout rail & sidebar ===== */
@media (max-width: 1024px) {

    /* Hide desktop sidebar, show mobile nav */
    .layout-sidebar,
    .sidebar-rail,
    .app-sidebar,
    #sidebar,
    .right-sidebar,
    .sidebar-right,
    .layout-rail,
    aside.layout-rail {
        display: none !important;
    }

    .app-layout,
    .main-layout,
    .app-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .main-content,
    .content-area,
    .view-content,
    .layout-main {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
}

/* ===== 3. MISSION CONSOLE (Services Side Panel) ===== */

/* Desktop: Left column content */
.mc-left-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow-y: auto;
}

/* Desktop: Right column plans */
.mc-right-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}

@media (max-width: 768px) {
    .mission-console-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        max-width: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        transform: translateY(100%) !important;
        overflow-y: auto;
    }

    .mission-console-panel.active {
        transform: translateY(0) !important;
    }

    /* Body: stack columns */
    .mc-body,
    .mc-body-grid {
        display: flex !important;
        flex-direction: column !important;
        padding: 1rem !important;
        gap: 1rem !important;
        overflow-y: visible !important;
        height: auto !important;
    }

    /* Stats grid inside console */
    .mc-stats-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .mc-plans-title {
        margin-top: 0.5rem;
    }

    .mc-header {
        padding: 1rem !important;
    }

    .mc-header h2 {
        font-size: 1.3rem !important;
    }
}

/* ===== 4. SERVICES — transformation cards grid ===== */

/* Desktop: auto-fit multi-column grid (legacy — carousel uses .carousel-track) */
.goal-grid,
.transformation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

/* MOBILE: Adaptive smart grid — adjusts to screen width automatically */
@media (max-width: 768px) {

    /* Full-width wrapper — no side padding constraints */
    .services-authentic-wrapper,
    .mission-layout {
        padding: 1rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hero text — scale down for mobile */
    .mission-title {
        font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 0.75rem !important;
    }

    .mission-hero {
        margin-bottom: 1.25rem !important;
    }

    /* Process steps block — full width, compact */
    .mission-process {
        max-width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
        padding: 0.875rem !important;
        font-size: 0.9rem !important;
    }

    /* ADAPTIVE GRID (legacy fallback — carousel doesn't use these) */
    .goal-grid,
    .transformation-grid,
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 0.625rem !important;
        width: 100% !important;
    }

    /* CAROUSEL: mobile overrides */
    .carousel-track .transformation-card {
        flex: 0 0 70vw !important;
        min-width: 200px !important;
        max-width: 280px !important;
        min-height: 0 !important;
        padding: 1.25rem !important;
    }

    .carousel-nav {
        display: none !important;
        /* Swipe on mobile, no arrows */
    }

    /* Each card: readable compact tile */
    .transformation-card {
        min-height: 0 !important;
        aspect-ratio: unset !important;
        width: 100% !important;
        padding: 1rem !important;
        border-radius: 16px !important;
        justify-content: flex-start !important;
    }

    /* Icon wrap: smaller on mobile */
    .tc-icon-wrap {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: 0.75rem !important;
    }

    /* Title: prevent text overflow — key fix for narrow devices */
    .tc-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        line-height: 1.3 !important;
        /* Clamp to 3 lines max — keeps card compact */
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Subtitle: compact on mobile */
    .tc-desc {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }

    /* Footer: always visible, tight */
    .tc-footer {
        margin-top: 0.75rem !important;
        padding-top: 0.5rem !important;
        font-size: 0.75rem !important;
        opacity: 1 !important;
    }
}

/* ===== 5. PLAN DETAIL — 3-column bento ===== */
@media (max-width: 1024px) {
    .plan-detail-grid {
        grid-template-columns: 1fr !important;
        overflow-y: visible !important;
    }

    .plan-detail-wrap {
        height: auto !important;
        min-height: auto !important;
        overflow-y: visible !important;
    }
}

@media (max-width: 768px) {

    /* Remove the calc(100vh - 80px) fixed height that locks the detail view */
    .plan-detail-wrap,
    .services-authentic-wrapper[style*="height"] {
        height: auto !important;
        min-height: auto !important;
        overflow-y: visible !important;
    }

    /* Stack the 2-column plan name / price header */
    .plan-detail-wrap>div>div:first-child {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: flex-start !important;
    }

    /* Plan name: scale down from the hardcoded 2rem */
    [style*="font-size: 2rem"][style*="font-weight: 800"] {
        font-size: 1.4rem !important;
        white-space: normal !important;
    }

    /* Price display: left-align, smaller */
    [style*="text-align: right"] {
        text-align: left !important;
    }

    /* Plan detail 3-column bento → single column */
    .plan-detail-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        overflow-y: visible !important;
    }

    /* Each bento column: remove inner overflow and fixed height */
    .plan-detail-grid>div {
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
        padding-right: 0 !important;
    }

    /* Inside plan detail: before/after 1fr 1fr grids → stack vertically */
    [style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* CTA card: remove fixed height, clean bottom */
    .plan-detail-grid>div:last-child>div {
        height: auto !important;
        position: static !important;
    }

    /* Sticky payment sidebar becomes normal block */
    .plan-sidebar-sticky {
        position: static !important;
    }
}

/* Plan detail inner 2-col includes grid */
[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
}

/* Plan detail service includes grid */
.plan-includes-grid,
.plan-detail-includes,
.pd-includes-grid {
    grid-template-columns: 1fr !important;
}

/* ===== 6. CHECKOUT / BRIEF FLOW ===== */
@media (max-width: 1024px) {

    .chk-grid,
    .checkout-grid,
    .brief-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .chk-summary-card,
    .checkout-summary {
        position: static !important;
        width: 100% !important;
    }
}

/* ===== 7. PROJECT WORKSPACE ===== */
@media (max-width: 768px) {
    .workspace-layout {
        padding: 0.75rem !important;
    }

    .ws-header {
        padding: 1rem !important;
    }

    .ws-header-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .ws-title-block {
        min-width: 0 !important;
        width: 100% !important;
    }

    .ws-progress-bar {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        padding: 0.75rem !important;
    }

    .ws-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
    }

    .ws-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 0.75rem 0.9rem !important;
        font-size: 0.8rem !important;
    }

    .ws-files-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Workspace content: extra bottom padding for mobile nav clearance */
    .workspace-layout,
    .ws-hub-box,
    .ws-tab-content {
        padding-bottom: 80px !important;
    }

    /* Lock overlay: must be above mobile nav on mobile */
    .ws-lock-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 10000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(5, 5, 15, 0.95) !important;
        backdrop-filter: blur(8px) !important;
    }

    .ws-lock-overlay.hidden {
        display: none !important;
    }
}

/* ===== 8. USER PROFILE DASHBOARD ===== */

/* Desktop layout: 2-column master panel */
.profile-master-panel {
    display: flex;
    flex-wrap: wrap;
}

.profile-main-col {
    flex: 2;
    min-width: 60%;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-side-col {
    flex: 1;
    min-width: 30%;
    padding: 2.5rem;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.profile-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
}

@media (max-width: 1024px) {
    .profile-stats {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 768px) {

    /* Stack the 2-column master panel into single column */
    .profile-master-panel {
        flex-direction: column !important;
    }

    .profile-main-col {
        flex: none !important;
        min-width: 100% !important;
        width: 100% !important;
        padding: 1.25rem !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .profile-side-col {
        flex: none !important;
        min-width: 100% !important;
        width: 100% !important;
        padding: 1.25rem !important;
        gap: 1.5rem !important;
    }

    /* Shortcut cards: 2×3 grid on mobile */
    .profile-shortcuts-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    .profile-container {
        padding: 0.75rem !important;
    }

    .profile-header {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.25rem !important;
    }

    .profile-badges {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .profile-stats {
        grid-template-columns: 1fr !important;
    }

    .profile-cards-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
}

/* ===== 9. MARKETPLACE / HOME ===== */
@media (max-width: 1024px) {
    .mp-hero-container {
        grid-template-columns: 1fr !important;
        padding: 1.5rem !important;
        gap: 1.5rem !important;
    }

    .hero-title {
        font-size: 2rem !important;
    }

    .market-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    }
}

@media (max-width: 640px) {

    .market-grid,
    .product-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-title {
        font-size: 1.6rem !important;
    }

    .hero-actions {
        flex-direction: column !important;
    }
}

/* ===== 10. ORDERS / LIBRARY ===== */
@media (max-width: 768px) {

    .orders-grid,
    .order-list,
    .library-grid {
        grid-template-columns: 1fr !important;
    }

    /* Order detail 2-col */
    .order-detail-grid,
    .od-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== 11. PLANS PAGE ===== */
@media (max-width: 1024px) {
    .plans-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    .plans-grid {
        grid-template-columns: 1fr !important;
    }

    .context-grid {
        grid-template-columns: 1fr !important;
    }

    .plans-context {
        padding: 1rem !important;
    }
}

/* ===== 12. SUPPORT PAGE ===== */
@media (max-width: 768px) {

    .support-grid,
    .support-container {
        grid-template-columns: 1fr !important;
    }
}

/* ===== 13. MOBILE NAV (bottom navigation) ===== */
@media (max-width: 768px) {

    /* The bottom nav should stay above fixed panels */
    .mobile-nav,
    .bottom-nav {
        z-index: 100 !important;
    }

    /* Ensure content doesn't hide behind bottom mobile nav */
    .main-scroll-area,
    #main-content,
    .view-section {
        padding-bottom: 80px !important;
    }
}

/* ===== 14. TYPOGRAPHY — scale down on mobile ===== */
@media (max-width: 768px) {

    .mission-title,
    .services-hero-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    h1 {
        font-size: clamp(1.4rem, 5vw, 2.5rem) !important;
    }

    h2 {
        font-size: clamp(1.2rem, 4vw, 2rem) !important;
    }
}

/* ===== 15. MODALS & OVERLAYS — full screen on mobile ===== */
@media (max-width: 768px) {

    .modal-card,
    .auth-modal-card,
    [id$="-modal"]>div {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px 12px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-bottom: 90px !important;
        max-height: 95vh !important;
        overflow-y: auto !important;
    }

    /* Wizard modal */
    .wizard-modal,
    .wizard-overlay {
        padding: 0.5rem !important;
        align-items: flex-end !important;
    }
}

/* ===== 16. UTILITY — hide desktop-only decorative elements ===== */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    /* Terminal feed HUD is decorative, hide on mobile */
    #terminal-feed,
    .terminal-feed-bar,
    .terminal-ticker,
    .market-terminal,
    .ticker-bar,
    #stories-rail-wrapper {
        display: none !important;
    }
}

/* ===== 17. INLINE STYLE OVERRIDES via attribute selector ===== */
/* These catch any JS-injected inline styles that we can't easily rewrite */
@media (max-width: 768px) {

    /* Any element with a hardcoded multi-column grid inline */
    [style*="grid-template-columns"]:not(.mc-body-grid):not(.mc-stats-grid) {
        grid-template-columns: 1fr !important;
    }

    /* Any element with a fixed min-width that causes overflow */
    /* ===== 18. UTILITY CLASSES FOR MOBILE CONSISTENCY ===== */
    .mobile-max-width {
        max-width: 100% !important;
        width: 100% !important;
    }

    .card-title-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .transformation-card {
        max-width: 280px !important;
        width: 100% !important;
    }

    /* Adjust grid for ultra‑small screens */
    @media (max-width: 360px) {

        .goal-grid,
        .transformation-grid,
        .services-grid {
            grid-template-columns: 1fr !important;
        }
    }

    /* Reduce gap on small devices */
    @media (max-width: 480px) {

        .goal-grid,
        .transformation-grid,
        .services-grid {
            gap: 0.5rem !important;
        }
    }

    /* Ensure cards fill container without overflow */
    .transformation-card {
        box-sizing: border-box;
    }

    /* Preserve existing line */
    [style*="min-width: 300px"],
    [style*="min-width: 350px"],
    [style*="min-width: 400px"] {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* =========================================
   19. MOBILE NUCLEAR v14 (Samsung/Xiaomi bypass)
   ========================================= */

/* Prevent Android Font Inflation at document root */
:root {
    --app-base-font-size: 16px;
}

@media (max-width: 768px) {
    :root {
        /* Escala interna automática para todo el sitio en celulares (equivale a un zoom-out de ~80%) */
        --app-base-font-size: 13px;
    }
}

html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    font-size: var(--app-base-font-size) !important;
    zoom: 1 !important;
}

@media (max-width: 768px) {

    /* Prevent horizontal overflow WITHOUT width: 100vw global */
    html,
    body {
        overflow-x: hidden !important;
        position: relative !important;
        zoom: 1 !important;
        touch-action: manipulation !important;
        /* Prevents double-tap to zoom */
    }

    /* Force layouts to stay inside bounds and use padding */
    .app-container,
    .layout-main,
    .main-layout,
    .profile-container {
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .app-container {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* AIRES LATERALES - Constant side padding */
    .layout-main,
    .main-content,
    .profile-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Plan Detail 3-column bento collapse */
    .plan-detail-wrap {
        padding: 1rem !important;
        height: auto !important;
        min-height: auto !important;
        overflow-y: visible !important;
    }

    .plan-detail-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 1.5rem !important;
        height: auto !important;
    }

    .plan-detail-grid>div {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    .plan-detail-grid>div>div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .goal-grid,
    .transformation-grid,
    .services-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 0.75rem !important;
        width: 100% !important;
        justify-content: start !important;
        padding: 0 0.5rem !important;
    }

    .tc-before-after {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .transformation-card {
        max-width: 100% !important;
        width: 100% !important;
        min-height: 160px !important;
        margin: 0 !important;
        padding: 1rem !important;
        aspect-ratio: unset !important;
        box-sizing: border-box !important;
    }

    img,
    svg {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ANTI-INFLATION FOR TITLES */
    .tc-title {
        font-size: min(1rem, 4.5vw) !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-size-adjust: 100% !important;
        -webkit-text-size-adjust: 100% !important;
    }

    /* MOBILE DOCK - NUCLEAR LOCK */
    .mobile-bottom-nav {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;

        /* Strict height lock */
        height: 65px !important;
        min-height: 65px !important;
        max-height: 65px !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;

        background: rgba(10, 15, 30, 0.97) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        z-index: 9999 !important;
        box-sizing: content-box !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    /* ANTI-INFLATION FOR DOCK TEXT */
    .mobile-bottom-nav,
    .mobile-bottom-nav * {
        text-size-adjust: 100% !important;
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
    }

    .mb-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        height: 65px !important;
        flex: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .mb-icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        margin: 0 auto 3px auto !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    .mobile-bottom-nav img,
    .mobile-bottom-nav svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    .mb-label {
        font-size: min(0.65rem, 3vw) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}