.vfp-wrapper { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(30px); z-index: 995 !important; pointer-events: none; font-family: 'Montserrat', sans-serif !important; opacity: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; justify-content: center; width: max-content; max-width: 95vw; }
        .vfp-wrapper.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
        .vfp-wrapper.vfp-force-hide { opacity: 0 !important; transform: translateX(-50%) translateY(30px) !important; pointer-events: none !important; }
        .vfp-desktop { display: flex; flex-direction: row; gap: 20px; pointer-events: auto; }
        .vfp-pill { background: rgba(255, 255, 255, 0.98); padding: 14px 22px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.06); width: max-content; min-width: 340px; position: relative; }
        
        .vfp-hotsale, .mc-hotsale, .vfp-hotsale-capsule { display: none !important; }
        .has-hotsale .vfp-hotsale, .has-hotsale .mc-hotsale { display: block !important; }
        .has-hotsale .vfp-hotsale-capsule { display: flex !important; }

        .vfp-pill-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 15px; }
        .vfp-envio .vfp-pill-title { color: #b91c1c; } .vfp-cuotas .vfp-pill-title { color: #12324b; } .vfp-hotsale .vfp-pill-title { color: #ea580c; }
        .vfp-pill-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
        .vfp-pill-amount { font-size: 13px; color: #666; white-space: nowrap; }
        .vfp-envio .vfp-pill-amount b { color: #b91c1c; } .vfp-cuotas .vfp-pill-amount b { color: #12324b; } .vfp-hotsale .vfp-pill-amount b { color: #ea580c; }
        .vfp-track { width: 100%; height: 8px; background: #f6f3ee; border-radius: 10px; overflow: hidden; position: relative; box-shadow: inset 0 1px 3px rgba(0,0,0,0.04); }
        .vfp-fill { height: 100%; border-radius: 10px; width: 0%; transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease; } 
        .vfp-envio .vfp-fill { background: linear-gradient(90deg, #f59e0b, #ef4444); } 
        .vfp-cuotas .vfp-fill { background: linear-gradient(90deg, #3273a8, #12324b); } 
        .vfp-hotsale .vfp-fill { background: linear-gradient(90deg, #f97316, #dc2626); } 
        .vfp-pill.is-complete .vfp-fill, .vfp-pill.is-stage-reached .vfp-fill, .mc-envio.is-complete .vfp-fill, .mc-cuotas.is-complete .vfp-fill, .mc-cuotas.is-stage-reached .vfp-fill, .mc-hotsale.is-complete .vfp-fill { background: linear-gradient(90deg, #059669, #10b981) !important; } 
        .vfp-pill.is-complete .vfp-pill-title, .vfp-pill.is-complete .vfp-pill-amount b, .vfp-pill.is-stage-reached .vfp-pill-title { color: #059669 !important; }

        .vfp-installments-unlocked {
            display: none;
            position: absolute;
            top: -10px;
            right: 14px;
            z-index: 6;
            align-items: center;
            justify-content: center;
            background: #f4f7fb;
            color: #40557d;
            border: 1px solid rgba(64, 85, 125, 0.18);
            border-radius: 999px;
            padding: 3px 8px;
            font-size: 9px;
            line-height: 1.2;
            font-weight: 800;
            letter-spacing: 0.15px;
            white-space: nowrap;
            box-shadow: 0 3px 10px rgba(18, 50, 75, 0.10);
            animation: vfpInstallmentsBadgeIn 0.28s ease both;
        }
        .vfp-installments-unlocked.is-visible { display: flex; }
        .vfp-cuotas-capsule.has-installments-unlocked { overflow: visible; }
        .vfp-cuotas-capsule .vfp-installments-unlocked { top: -8px; right: 4px; }
        .mc-cuotas .vfp-installments-unlocked { top: -8px; right: 8px; }
        @keyframes vfpInstallmentsBadgeIn {
            from {
                opacity: 0;
                transform: translateY(3px) scale(0.97);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        .vfp-gift-unlocked { display: none; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(234, 88, 12, 0.3); animation: v13FadeIn 0.4s ease; }
        .mc-hotsale.is-complete .vfp-gift-unlocked { display: flex; }
        .mc-hotsale.is-complete .vfp-track { display: none; }
        .vfp-gift-unlocked img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
        .vfp-gift-text { display: flex; flex-direction: column; }
        .vfp-gift-text strong { font-size: 13px; color: #ea580c; line-height: 1.2; }
        .vfp-gift-text span { font-size: 10px; color: #666; margin-top: 3px; font-weight: 600; }
        @keyframes v13FadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

        .vfp-mobile { display: none; flex-direction: column; gap: 14px; pointer-events: auto; }
        .vfp-capsule { display: flex; align-items: center; background: #ffffff; border-radius: 50px; padding: 4px; padding-right: 25px; box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.1) !important; border: 1px solid #f6f3ee; height: 52px; overflow: hidden; max-width: 340px; width: max-content; position: relative; white-space: nowrap; }
        .vfp-circ-icon-box { width: 44px; height: 44px; position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
        .vfp-circ-icon-box svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); }
        .vfp-bg { fill: none; stroke: #f6f3ee; stroke-width: 3.5; }
        .vfp-progress { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease; }
        .vfp-envio-capsule .vfp-progress { stroke: #ef4444; } .vfp-cuotas-capsule .vfp-progress { stroke: #12324b; } .vfp-hotsale-capsule .vfp-progress { stroke: #dc2626; }
        .vfp-circ-icon { position: relative; z-index: 2; font-size: 22px; line-height: 1; }
        .vfp-mobile-text-wrap { display: flex; flex-direction: column; justify-content: center; margin-left: 10px; opacity: 1; }
        .vfp-mobile-title { font-size: 13px; font-weight: 800; margin-bottom: 2px; }
        .vfp-envio-capsule .vfp-mobile-title { color: #e11d48; } .vfp-cuotas-capsule .vfp-mobile-title { color: #12324b; } .vfp-hotsale-capsule .vfp-mobile-title { color: #ea580c; }
        .vfp-mobile-status { position: relative; height: 16px; overflow: hidden; display: flex; align-items: center; width: 100%; min-width: 135px; }
        .vfp-mobile-total { position: absolute; left: 0; color: #666; font-weight: 600; font-size: 12px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; transform: translateY(0); opacity: 1; display: flex; align-items: center; gap: 4px; }
        .vfp-added-badge { position: absolute; left: 0; font-weight: 800; font-size: 12px; padding: 0; background: transparent !important; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; transform: translateY(100%); opacity: 0; display: flex; align-items: center; gap: 4px; }
        .vfp-added-envio { color: #e11d48; } .vfp-added-cuotas { color: #12324b; } .vfp-added-hotsale { color: #ea580c; }
        .vfp-status-animating .vfp-mobile-total { transform: translateY(-100%); opacity: 0; }
        .vfp-status-animating .vfp-added-badge { transform: translateY(0); opacity: 1; }
        .vfp-capsule.is-complete .vfp-progress, .vfp-capsule.is-stage-reached .vfp-progress { stroke: #059669; }
        .vfp-capsule.is-complete, .vfp-capsule.is-stage-reached { background: #f0fdf4; border-color: #bbf7d0; }
        .vfp-capsule.is-complete .vfp-mobile-title, .vfp-capsule.is-stage-reached .vfp-mobile-title { color: #059669; }
        .vfp-pop-effect { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
        .is-complete .vfp-pop-effect { animation: elegantGreenGlow 1.2s ease-out forwards; }
        @keyframes elegantGreenGlow { 0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.8); border: 2px solid rgba(5, 150, 105, 1); transform: scale(1); opacity: 1; } 50% { box-shadow: 0 0 25px 10px rgba(5, 150, 105, 0.4); border: 2px solid rgba(5, 150, 105, 0.5); } 100% { box-shadow: 0 0 0 20px rgba(5, 150, 105, 0); border: 2px solid rgba(5, 150, 105, 0); transform: scale(1.08); opacity: 0; } }

        @media (max-width: 768px) {
            .vfp-desktop { display: none; } .vfp-mobile { display: flex; }
            .vfp-wrapper { left: 20px; bottom: 20px; transform: translateX(0) translateY(30px); align-items: flex-start; justify-content: flex-start; }
            .vfp-wrapper.is-visible { transform: translateX(0) translateY(0); }
            .vfp-wrapper.vfp-force-hide { transform: translateX(0) translateY(30px) !important; }
            .vfp-mobile .vfp-capsule {
                padding-right: 25px;
                transition: padding-right 0.4s ease;
            }
            .vfp-mobile .vfp-capsule .vfp-mobile-text-wrap {
                transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
                max-width: 200px;
                opacity: 1;
                overflow: hidden;
                white-space: nowrap;
                margin-left: 10px;
                padding-right: 5px;
            }
            .vfp-mobile .vfp-capsule .vfp-mobile-text-wrap.vfp-text-hidden {
                max-width: 0 !important;
                opacity: 0 !important;
                margin-left: 0 !important;
                padding-right: 0 !important;
                pointer-events: none;
            }
            .vfp-mobile .vfp-capsule .vfp-mobile-text-wrap.vfp-text-hidden ~ .vfp-circ-icon-box {
                margin-right: 0;
            }
            .vfp-mobile .vfp-capsule {
                padding-right: 3px;
            }
        }