.mobile-bottom-nav {

    position: fixed;

    left: 0;
    bottom: 0;

    width: 100%;

    height: 55px;

    background: #fff;

    display: none;

    align-items: center;
    justify-content: space-around;

    z-index: 99999;

    box-shadow: 0 -4px 15px rgba(0,0,0,.2);

    overflow: visible;
}

/*
|--------------------------------------------------------------------------
| CURVE SHAPE
|--------------------------------------------------------------------------
*/

.mobile-bottom-nav::before {

    content: '';

    position: absolute;

    left: 50%;
    top: -28px;

    transform: translateX(-50%);

    width: 110px;
    height: 110px;

    background: transparent;

    border-radius: 50%;

    box-shadow: 0 55px 0 18px #fff;

    z-index: 1;
}

/*
|--------------------------------------------------------------------------
| ITEMS
|--------------------------------------------------------------------------
*/

.mbn-item {

    position: relative;

    z-index: 2;

    flex: 1;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-decoration: none;

    color: #333;

    gap: 4px;

    font-size: 11px;

    height: 100%;
}

.mbn-item i {

    font-size: 16px;
}


/*
|--------------------------------------------------------------------------
| CENTER BUTTON
|--------------------------------------------------------------------------
*/

.mbn-center-btn {

    position: relative;

    z-index: 3;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #ffb100,
        #ff7a00
    );

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: -32px;

    border: 5px solid #F5E2C7;

    text-decoration: none;

    flex-shrink: 0;

    box-shadow:
        0 10px 25px rgba(255,122,0,.35);
}

.mbn-center-btn i {

    color: #fff;

    font-size: 30px;
}

/*
|--------------------------------------------------------------------------
| MOBILE ONLY
|--------------------------------------------------------------------------
*/

@media(max-width:500px){

    .mobile-bottom-nav {

        display: flex;
    }


}

.mbn-cart-count {

    position: absolute;

    top: -2px;
    right: -2px;

    min-width: 24px;
    height: 24px;

    border-radius: 999px;

    background: #ff2d55;

    color: #fff;

    font-size: 11px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 6px;

    border: 2px solid #fff;
}

/*
|--------------------------------------------------------------------------
| CART SHAKE
|--------------------------------------------------------------------------
*/

.mbn-center-btn.cart-added {

    animation: cartShake .5s ease;
}

@keyframes cartShake {

    0% { transform: rotate(0); }

    20% { transform: rotate(-10deg); }

    40% { transform: rotate(10deg); }

    60% { transform: rotate(-6deg); }

    80% { transform: rotate(6deg); }

    100% { transform: rotate(0); }
}

/*
|--------------------------------------------------------------------------
| CUSTOM CART DRAWER
|--------------------------------------------------------------------------
*/

.mobile-cart-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.45);

    opacity: 0;
    visibility: hidden;

    transition: .25s ease;

    z-index: 999998;

    backdrop-filter: blur(3px);
}

.mobile-cart-overlay.active {

    opacity: 1;
    visibility: visible;
}

/*
|--------------------------------------------------------------------------
| DRAWER
|--------------------------------------------------------------------------
*/

.mobile-cart-drawer {

    position: fixed;

    top: 0;
    right: 0;

    width: 92%;
    max-width: 420px;

    height: 100vh;

    background: #fff;

    z-index: 999999;

    transform: translateX(100%);

    transition: transform .28s cubic-bezier(.4,0,.2,1);

    display: flex;
    flex-direction: column;

    box-shadow:
        -10px 0 40px rgba(0,0,0,.12);
}

.mobile-cart-drawer.active {

    transform: translateX(0);
}

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.mobile-cart-header {

    height: 50px;

    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #f1f1f1;

    flex-shrink: 0;
}

.mobile-cart-header h3 {

    margin: 0;

    font-size: 16px;
    font-weight: 600;

    color: #111;
}

.mobile-cart-close {

    width: 25px;
    height: 25px;

    border-radius: 50%;

    border: none;

    background: #ff4d4f;

    color: #fff;

    font-size: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: .2s;
}

.mobile-cart-close:hover {

    background: #e53935;

    transform: rotate(90deg);
}

/*
|--------------------------------------------------------------------------
| ITEMS
|--------------------------------------------------------------------------
*/

.mobile-cart-items {

    flex: 1;

    overflow-y: auto;

    padding: 4px;
}

.mobile-cart-item {

    display: flex;

    gap: 4px;

    padding: 8px;

    border-bottom: 1px solid #b7b7b7;

    position: relative;
}

.mobile-cart-item img {

    width: 52px;
    height: 52px;

    border-radius: 4px;

    object-fit: cover;

    flex-shrink: 0;

    background: #f8f8f8;
}

.mobile-cart-content {

    flex: 1;

    min-width: 0;
}

.mobile-cart-content h4 {

    margin: 0 0 8px;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 500;

    color: #111;

    display: -webkit-box;

    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.mobile-cart-price {

    color: #ff4d2d;

    font-size: 14px;
    font-weight: 600;
}

.mobile-cart-qty {

    margin-top: 6px;

    font-size: 13px;

    color: #777;
}

.mobile-remove-cart {

    position: absolute;

    top: 50%;
    right: 0;

    transform: translateY(-50%);

    width: 25px;
    height: 25px;

    border-radius: 50%;

    border: none;

    background: #ff4d4f;

    color: #fff;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;

    transition: .2s;
}

.mobile-remove-cart:hover {

    background: #e53935;

    transform:
        translateY(-50%)
        scale(1.05);
}

/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.mobile-cart-footer {

    padding: 10px;

    border-top: 1px solid #f1f1f1;

    background: #fff;

    flex-shrink: 0;
}

.mobile-cart-subtotal {

    font-size: 16px;
    font-weight: 600;

    color: #111;

    margin-bottom: 16px;
}

.mobile-cart-actions {

    display: flex;

    gap: 10px;
}

.mobile-cart-btn {

    flex: 1;

    height: 48px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: .2s;
}

.mobile-cart-btn.primary {

    background: linear-gradient(
        135deg,
        #ffb100,
        #ff7a00
    );

    color: #fff;
}

.mobile-cart-btn.secondary {

    border: 1.5px solid #111;

    color: #111;
}

/*
|--------------------------------------------------------------------------
| SCROLLBAR
|--------------------------------------------------------------------------
*/

.mobile-cart-items::-webkit-scrollbar {

    width: 4px;
}

.mobile-cart-items::-webkit-scrollbar-thumb {

    background: rgba(0,0,0,.15);

    border-radius: 999px;
}

/*
|--------------------------------------------------------------------------
| PERFORMANCE
|--------------------------------------------------------------------------
*/

.mobile-cart-drawer,
.mobile-cart-overlay,
.mobile-cart-item {

    will-change: transform;
}

/*
|--------------------------------------------------------------------------
| PROGRESS
|--------------------------------------------------------------------------
*/

.mobile-cart-progress {

    padding: 4px 18px;

    border-bottom: 1px solid #f3f3f3;
}

.mobile-cart-progress-text {

    font-size: 12px;

    color: #444;

    margin-bottom: 10px;
}

.mobile-progress-bar {

    height: 8px;

    border-radius: 999px;

    background: #F5E2C7;

    overflow: hidden;
}

.mobile-progress-bar span {

    display: block;

    height: 100%;

    width: 0;

    background: linear-gradient(
        90deg,
        #ffb100,
        #ff7a00
    );

    transition: width .25s ease;
}

/*
|--------------------------------------------------------------------------
| QTY
|--------------------------------------------------------------------------
*/

.mobile-cart-qty-wrap {

    margin-top: 10px;

    display: flex;
    align-items: center;

    gap: 10px;
}

.mobile-cart-qty-btn {

    width: 32px;
    height: 32px;

    border-radius: 10px;

    border: none;

    background: #f3f3f3;

    cursor: pointer;

    font-size: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .2s;
}

.mobile-cart-qty-btn:hover {

    background: #ffb100;

    color: #fff;
}

.mobile-cart-item.loading {

    opacity: .6;

    pointer-events: none;
}

.mobile-cart-qty-number {

    min-width: 20px;

    text-align: center;

    font-size: 14px;
    font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| EMPTY
|--------------------------------------------------------------------------
*/

.mobile-cart-empty {

    flex: 1;

    display: none;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;
}

.mobile-cart-empty i {

    font-size: 54px;

    color: #ff7a00;

    margin-bottom: 16px;
}

.mobile-cart-empty h4 {

    margin: 0 0 10px;

    font-size: 20px;
}

.mobile-cart-empty p {

    margin: 0;

    color: #777;
}

/*
|--------------------------------------------------------------------------
| SKELETON
|--------------------------------------------------------------------------
*/

.mobile-cart-skeleton {

    padding: 16px;
}

.mobile-cart-skeleton-item {

    height: 90px;

    border-radius: 18px;

    background:
        linear-gradient(
            90deg,
            #f3f3f3 25%,
            #ececec 37%,
            #f3f3f3 63%
        );

    background-size: 400% 100%;

    animation:
        mobileCartSkeleton 1s infinite linear;

    margin-bottom: 14px;
}

@keyframes mobileCartSkeleton {

    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.mobile-contact-popup{

    position:fixed;

    right:15px;

    bottom:85px;

    background:#fff;

    border-radius:16px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.15);

    min-width:180px;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.25s;

    z-index:9999;

}

.mobile-contact-popup.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.mcp-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 16px;

    text-decoration:none;

    color:#222;

}

.mcp-item:hover{

    background:#f5f5f5;

}

.mobile-qr-modal{

    position:fixed;
    inset:0;

    display:none;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    z-index:99999;

}

.mobile-qr-modal.active{

    display:flex;

}

.mobile-qr-box{

    position:relative;

    width:320px;
    max-width:90vw;

    background:#fff;

    border-radius:20px;

    padding:24px;

    text-align:center;

    box-shadow:
    0 20px 60px rgba(0,0,0,.18);

    animation:qrPopup .25s ease;

}

@keyframes qrPopup{

    from{

        opacity:0;
        transform:translateY(15px) scale(.96);

    }

    to{

        opacity:1;
        transform:translateY(0) scale(1);

    }

}

.mobile-qr-close{

    position:absolute;

    right:12px;
    top:12px;

    width:34px;
    height:34px;

    border:none;

    border-radius:50%;

    background:red;
    color:white;

    cursor:pointer;

    font-size:20px;

}

.mobile-qr-box h4{

    margin:0 0 15px;

    font-size:18px;
    font-weight:700;

}

.mobile-qr-box img{

    width:220px;
    height:220px;

    max-width:100%;

    display:block;

    margin:0 auto 20px;

    border-radius:12px;

    border:1px solid #eee;

    padding:10px;

    background:#fff;

}

.mobile-qr-actions{

    display:flex;

    gap:10px;

}

.mobile-qr-actions button{

    flex:1;

    height:46px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:14px;
    font-weight:600;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    transition:.25s;

}

#nativeShareBtn{

    background:#16a34a;
    color:#fff;

}

#nativeShareBtn:hover{

    transform:translateY(-2px);

}

#copyPageLink{

    background:#f3f4f6;
    color:#111827;

}

#copyPageLink:hover{

    background:#e5e7eb;

}