/**
 * Mobile Bottom Navigation
 * Modeled after Airbnb's mobile tab bar
 * Displays on mobile viewports for my-account and taxonomy pages
 */

.lifelist-mobile-nav {
    box-sizing: border-box;
    display: none !important; /* Hidden by default, shown on mobile */
    align-items: center !important;
    border-top: 1px solid #EBEBEB !important;
    position: fixed !important;
    bottom: 0 !important;
    height: 65px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    contain: paint !important;
    background: #ffffff !important;
    transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), visibility 0.2s !important;
    z-index: 999999 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.08);
}

/* Show on mobile only */
@media (max-width: 768px) {
    .lifelist-mobile-nav {
        display: flex !important;
    }
}

.lifelist-mobile-nav__container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    padding: 0 4px;
}

.lifelist-mobile-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px 4px;
    position: relative;
    background: none;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Icon container */
.lifelist-mobile-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

.lifelist-mobile-nav__icon i {
    font-size: 24px;
    transition: all 0.2s ease;
}

/* Label text */
.lifelist-mobile-nav__label {
    font-size: 0.625rem; /* 10px */
    line-height: 0.75rem; /* 12px */
    letter-spacing: normal;
    font-weight: 400;
    text-align: center;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Default state - Grey colors */
.lifelist-mobile-nav__item:not(.active) .lifelist-mobile-nav__icon i {
    color: #6A6A6A; /* Airbnb foggy grey */
}

.lifelist-mobile-nav__item:not(.active) .lifelist-mobile-nav__label {
    color: #6A6A6A; /* Airbnb foggy grey */
}

/* Active state - Purple gradient (from SMS auth plugin) */
.lifelist-mobile-nav__item.active .lifelist-mobile-nav__icon i {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.lifelist-mobile-nav__item.active .lifelist-mobile-nav__label {
    color: #222222; /* Airbnb dark text */
    font-weight: 600;
}

/* Hover state for non-active items */
.lifelist-mobile-nav__item:not(.active):hover .lifelist-mobile-nav__icon i {
    color: #222222;
}

.lifelist-mobile-nav__item:not(.active):hover .lifelist-mobile-nav__label {
    color: #222222;
}

/* Streak icon specific styling */
.lifelist-mobile-nav__streak-icon {
    width: 28px;
    height: 28px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236A6A6A"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H10.9v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.04c.1 1.7 1.36 2.66 2.86 2.97V19h2.34v-1.67c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.66-3.42z"/></svg>') no-repeat center;
    background-size: contain;
}

.lifelist-mobile-nav__item.active .lifelist-mobile-nav__streak-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b5cf6"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H10.9v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.04c.1 1.7 1.36 2.66 2.86 2.97V19h2.34v-1.67c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.66-3.42z"/></svg>');
}

/* Add bottom padding to page content to prevent overlap */
body.has-mobile-nav {
    padding-bottom: 80px !important;
}

/* Ensure content doesn't hide under nav */
@media (max-width: 768px) {
    .elementor-section,
    .site-content,
    #main {
        margin-bottom: 80px;
    }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .lifelist-mobile-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(65px + env(safe-area-inset-bottom)) !important;
    }
    
    body.has-mobile-nav {
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
}

/* Fix for button elements - remove all default button styles */
button.lifelist-mobile-nav__item {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Prevent click delay on mobile */
.lifelist-mobile-nav__item * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

/* Active press state - only scale, no opacity change */
.lifelist-mobile-nav__item:active {
    transform: scale(0.95);
}

/* Remove any focus/active background colors from buttons - CRITICAL */
button.lifelist-mobile-nav__item,
button.lifelist-mobile-nav__item:hover,
button.lifelist-mobile-nav__item:focus,
button.lifelist-mobile-nav__item:active,
button.lifelist-mobile-nav__item:focus-visible,
button.lifelist-mobile-nav__item:focus-within {
    background: none !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Remove mobile browser default button highlight */
button.lifelist-mobile-nav__item::before,
button.lifelist-mobile-nav__item::after {
    display: none !important;
}

/* Logged-out layout: Distribute 3 items evenly instead of 5 */
.lifelist-mobile-nav--logged-out .lifelist-mobile-nav__container {
    justify-content: space-evenly;
    gap: 16px;
}

.lifelist-mobile-nav--logged-out .lifelist-mobile-nav__item {
    flex: 0 1 auto;
    max-width: 80px;
}