/* CODSHIPX R118-R8-R9-R4 PREMIUM ADD-ONS */

/* WhatsApp remains in Connections */
.r7-addons-page .cx-addon-whatsapp{
    display:none !important;
}

/* two premium products */
.r7-addons-page .cx-addon-grid{
    width:min(100%,1080px) !important;
    margin:22px auto 34px !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:24px !important;
    align-items:stretch !important;
}

.r7-addons-page .cx-addon-grid > div{
    display:none !important;
}

/* shared card */
.r7-addons-page .cx-addon-codi,
.r7-addons-page .cx-addon-voice{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    box-sizing:border-box !important;

    width:100% !important;
    min-width:0 !important;

    min-height:595px !important;
    height:100% !important;

    display:flex !important;
    flex-direction:column !important;

    padding:29px 28px 25px !important;

    border-radius:29px !important;

    color:#fff !important;

    animation:
        cxAddOnEnter .68s
        cubic-bezier(.2,.82,.22,1)
        both !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}

.r7-addons-page .cx-addon-voice{
    animation-delay:.09s !important;
}

.r7-addons-page .cx-addon-codi:hover,
.r7-addons-page .cx-addon-voice:hover{
    transform:
        translateY(-6px)
        scale(1.006) !important;
}

/* Codi */
.r7-addons-page .cx-addon-codi{
    background:#05090c !important;

    border:
        1px solid rgba(160,239,91,.82) !important;

    box-shadow:
        0 27px 60px rgba(3,17,8,.27),
        0 0 0 2px rgba(154,238,81,.12),
        0 0 34px rgba(128,230,66,.16) !important;
}

/* Voice */
.r7-addons-page .cx-addon-voice{
    background:#0747bd !important;

    border:
        1px solid rgba(103,200,255,.96) !important;

    box-shadow:
        0 27px 60px rgba(0,42,137,.29),
        0 0 0 2px rgba(58,169,255,.18),
        0 0 35px rgba(41,154,255,.21) !important;
}

/* animated solid ambient forms */
.r7-addons-page .cx-addon-codi::before,
.r7-addons-page .cx-addon-voice::before{
    content:"" !important;

    position:absolute !important;

    width:345px !important;
    height:250px !important;

    top:-145px !important;
    right:-110px !important;

    border-radius:50% !important;

    background:
        rgba(255,255,255,.065) !important;

    z-index:0 !important;
    pointer-events:none !important;

    animation:
        cxAddOnAmbient
        6.4s ease-in-out infinite !important;
}

.r7-addons-page .cx-addon-codi::after,
.r7-addons-page .cx-addon-voice::after{
    content:"" !important;

    position:absolute !important;

    width:68px !important;
    height:820px !important;

    top:-120px !important;
    left:-180px !important;

    transform:rotate(28deg) !important;

    background:
        rgba(255,255,255,.045) !important;

    z-index:1 !important;
    pointer-events:none !important;

    animation:
        cxAddOnSweep
        8.5s ease-in-out infinite !important;
}

.r7-addons-page .cx-addon-codi > *,
.r7-addons-page .cx-addon-voice > *{
    position:relative !important;
    z-index:2 !important;
}

/* product badges */
.r7-addons-page .cx-addon-card .section-kicker{
    position:absolute !important;

    top:35px !important;
    right:28px !important;

    width:auto !important;

    display:inline-flex !important;
    align-items:center !important;

    padding:10px 18px !important;

    border-radius:999px !important;

    color:#fff !important;

    font-size:10px !important;
    font-weight:900 !important;
    line-height:1 !important;

    letter-spacing:.075em !important;

    white-space:nowrap !important;
}

.r7-addons-page .cx-addon-codi .section-kicker{
    background:#285623 !important;

    border:
        1px solid rgba(188,255,124,.94) !important;

    box-shadow:
        0 0 19px rgba(158,242,84,.29) !important;
}

.r7-addons-page .cx-addon-voice .section-kicker{
    background:#105bd2 !important;

    border:
        1px solid rgba(164,225,255,.98) !important;

    box-shadow:
        0 0 19px rgba(72,181,255,.33) !important;
}

/* main icons */
.r7-addons-page .commerce-icon{
    width:76px !important;
    height:76px !important;
    min-width:76px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:21px !important;

    animation:
        cxAddOnIcon
        4.7s ease-in-out infinite !important;
}

/* Codi branded icon */
.r7-addons-page .cx-addon-codi .commerce-icon{
    background:#14281b !important;

    border:
        1px solid rgba(158,241,89,.56) !important;

    box-shadow:
        0 0 20px rgba(142,232,74,.16) !important;
}

.r7-addons-page
.cx-addon-codi .commerce-icon > *{
    display:none !important;
}

.r7-addons-page
.cx-addon-codi .commerce-icon::before{
    content:"" !important;

    width:55px !important;
    height:55px !important;

    border-radius:16px !important;

    background:
        url("/brand/codshipx-ai-icon.jpeg")
        center/cover no-repeat !important;
}

/* Voice microphone */
.r7-addons-page .cx-addon-voice .commerce-icon{
    position:relative !important;

    background:#1262d8 !important;

    border:
        1px solid rgba(145,219,255,.82) !important;

    box-shadow:
        0 0 22px rgba(67,182,255,.25) !important;
}

.r7-addons-page
.cx-addon-voice .commerce-icon > *{
    display:none !important;
}

.r7-addons-page
.cx-addon-voice .commerce-icon::before{
    content:"" !important;

    width:18px !important;
    height:31px !important;

    border:3px solid #fff !important;
    border-radius:13px !important;

    box-sizing:border-box !important;
}

.r7-addons-page
.cx-addon-voice .commerce-icon::after{
    content:"" !important;

    position:absolute !important;

    left:21px !important;
    top:28px !important;

    width:31px !important;
    height:26px !important;

    border-left:3px solid #fff !important;
    border-right:3px solid #fff !important;
    border-bottom:3px solid #fff !important;

    border-radius:0 0 17px 17px !important;
}

/* card heading */
.r7-addons-page
.cx-addon-card > .commerce-icon + div{
    padding-right:150px !important;
}

.r7-addons-page .cx-addon-card h2{
    margin:19px 0 8px !important;

    color:#fff !important;

    font-size:40px !important;
    line-height:.98 !important;

    font-weight:950 !important;
    letter-spacing:-.055em !important;

    white-space:nowrap !important;
}

.r7-addons-page .cx-addon-card p{
    width:min(100%,390px) !important;

    min-height:47px !important;

    margin:0 !important;

    color:
        rgba(255,255,255,.80) !important;

    font-size:14px !important;
    line-height:1.42 !important;
}

/* premium 2x2 features */
.r7-addons-page .cx-addon-feature-list{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:10px !important;

    margin:22px 0 0 !important;
}

.r7-addons-page
.cx-addon-feature-list > span{
    min-width:0 !important;
    min-height:82px !important;

    display:grid !important;

    grid-template-columns:
        42px minmax(0,1fr) !important;

    grid-template-rows:
        auto auto !important;

    column-gap:10px !important;

    align-items:center !important;
    align-content:center !important;

    padding:12px !important;

    border-radius:15px !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    background:
        rgba(255,255,255,.075) !important;

    color:#fff !important;

    font-size:11px !important;
    line-height:1.15 !important;

    font-weight:850 !important;

    white-space:normal !important;

    transition:
        transform .2s ease,
        background .2s ease !important;
}

.r7-addons-page
.cx-addon-feature-list > span:hover{
    transform:
        translateY(-3px) !important;

    background:
        rgba(255,255,255,.115) !important;
}

.r7-addons-page
.cx-addon-feature-list > span i{
    grid-column:1 !important;
    grid-row:1 / 3 !important;

    width:39px !important;
    height:39px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:12px !important;

    font-size:0 !important;
    font-style:normal !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span i{
    background:#214926 !important;
    color:#d6ffae !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span i{
    background:#1764d3 !important;
    color:#fff !important;
}

.r7-addons-page
.cx-addon-feature-list > span i::before{
    font-size:19px !important;
    line-height:1 !important;

    font-weight:900 !important;
}

/* Codi symbols */
.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(1) i::before{
    content:"✦" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(2) i::before{
    content:"▦" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(3) i::before{
    content:"▥" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(4) i::before{
    content:"◆" !important;
}

/* Voice symbols */
.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(1) i::before{
    content:"●" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(2) i::before{
    content:"⌁" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(3) i::before{
    content:"⚡" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(4) i::before{
    content:"≋" !important;
}

/* secondary descriptions */
.r7-addons-page
.cx-addon-feature-list > span::after{
    grid-column:2 !important;
    grid-row:2 !important;

    margin-top:5px !important;

    color:
        rgba(255,255,255,.63) !important;

    font-size:9.4px !important;
    line-height:1.16 !important;

    font-weight:500 !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(1)::after{
    content:"One AI for your entire business" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(2)::after{
    content:"Insights from your workspace data" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(3)::after{
    content:"Turn data into decisions" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(4)::after{
    content:"All Codi capabilities included" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(1)::after{
    content:"Talk to your business naturally" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(2)::after{
    content:"Update, search and create by voice" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(3)::after{
    content:"Get things done faster" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(4)::after{
    content:"All voice features included" !important;
}

/* price panel */
.r7-addons-page .v1b4-addon-price{
    width:100% !important;

    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;

    visibility:visible !important;
    opacity:1 !important;

    min-height:88px !important;

    margin:21px 0 0 !important;
    padding:17px 19px 14px !important;

    border-radius:
        18px 18px 0 0 !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    border-bottom:0 !important;

    background:
        rgba(255,255,255,.085) !important;
}

.r7-addons-page
.v1b4-addon-price strong{
    color:#fff !important;

    font-size:30px !important;
    line-height:1 !important;

    font-weight:950 !important;
    letter-spacing:-.04em !important;

    white-space:nowrap !important;
}

.r7-addons-page
.v1b4-addon-price small{
    margin-top:9px !important;

    color:
        rgba(255,255,255,.69) !important;

    font-size:11px !important;
}

/* status panel */
.r7-addons-page .v1b1-addon-status{
    position:relative !important;

    width:100% !important;

    box-sizing:border-box !important;

    min-height:84px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    margin:0 0 18px !important;

    padding:
        15px 84px 15px 62px !important;

    border-radius:
        0 0 18px 18px !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    border-top:
        1px solid rgba(255,255,255,.07) !important;

    background:
        rgba(255,255,255,.058) !important;
}

.r7-addons-page
.v1b1-addon-status > span{
    color:#fff !important;

    font-size:15px !important;
    font-weight:900 !important;
}

.r7-addons-page
.v1b1-addon-status > small{
    margin-top:7px !important;

    color:
        rgba(255,255,255,.67) !important;

    font-size:10px !important;
}

/* active indicator */
.r7-addons-page
.v1b1-addon-status > span::before{
    content:"" !important;

    position:absolute !important;

    left:24px !important;
    top:50% !important;

    width:18px !important;
    height:18px !important;

    transform:
        translateY(-50%) !important;

    border-radius:50% !important;
}

.r7-addons-page
.cx-addon-codi
.v1b1-addon-status > span.active::before{
    background:#baff5b !important;

    box-shadow:
        0 0 0 8px rgba(158,239,79,.11),
        0 0 19px rgba(178,255,91,.62) !important;

    animation:
        cxGreenState
        2.7s ease-in-out infinite !important;
}

.r7-addons-page
.cx-addon-voice
.v1b1-addon-status > span.active::before{
    background:#79ddff !important;

    box-shadow:
        0 0 0 8px rgba(82,190,255,.12),
        0 0 19px rgba(79,195,255,.67) !important;

    animation:
        cxBlueState
        2.7s ease-in-out infinite !important;
}

.r7-addons-page
.v1b1-addon-status > span.inactive::before{
    background:#9ba7b8 !important;
}

/* Codi included badge */
.r7-addons-page
.cx-addon-codi
.v1b1-addon-status:has(> span.active)::after{
    content:"Included" !important;

    position:absolute !important;

    right:17px !important;
    top:50% !important;

    transform:
        translateY(-50%) !important;

    padding:
        9px 17px !important;

    border-radius:999px !important;

    background:#c7fa83 !important;
    color:#123b15 !important;

    font-size:10px !important;
    font-weight:900 !important;
}

/* CTA */
.r7-addons-page
.cx-addon-card .button{
    width:100% !important;

    min-height:59px !important;

    margin-top:auto !important;

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

    gap:17px !important;

    border-radius:17px !important;

    font-size:13px !important;
    font-weight:950 !important;

    transition:
        transform .2s ease,
        filter .2s ease !important;
}

.r7-addons-page
.cx-addon-card .button.primary::after{
    content:"→" !important;

    font-size:21px !important;

    transition:
        transform .2s ease !important;
}

.r7-addons-page
.cx-addon-card .button.primary:hover::after{
    transform:
        translateX(5px) !important;
}

.r7-addons-page
.cx-addon-codi .button.primary{
    background:#a6ee20 !important;
    color:#051106 !important;

    border:
        1px solid #d9ff9e !important;

    box-shadow:
        0 0 24px rgba(155,237,43,.30) !important;
}

.r7-addons-page
.cx-addon-voice .button.primary{
    background:#fff !important;
    color:#0742ad !important;

    border:
        1px solid #fff !important;

    box-shadow:
        0 0 23px rgba(255,255,255,.17) !important;
}

.r7-addons-page
.cx-addon-card .button.primary:hover{
    transform:
        translateY(-2px) !important;

    filter:
        brightness(1.04) !important;
}

/* inactive purchase states */
.r7-addons-page
.cx-addon-codi .button.soft,
.r7-addons-page
.cx-addon-codi .button:disabled{
    background:#17261a !important;

    color:
        rgba(255,255,255,.80) !important;

    border:
        1px solid rgba(160,240,87,.28) !important;

    opacity:1 !important;
}

.r7-addons-page
.cx-addon-voice .button.soft,
.r7-addons-page
.cx-addon-voice .button:disabled{
    background:#1653bc !important;

    color:
        rgba(255,255,255,.84) !important;

    border:
        1px solid rgba(255,255,255,.22) !important;

    opacity:1 !important;
}

/* animation */
@keyframes cxAddOnEnter{
    from{
        opacity:0;
        transform:
            translateY(24px)
            scale(.977);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes cxAddOnAmbient{
    0%,100%{
        transform:
            rotate(-14deg)
            translate3d(0,0,0);

        opacity:.70;
    }

    50%{
        transform:
            rotate(-9deg)
            translate3d(-14px,12px,0);

        opacity:1;
    }
}

@keyframes cxAddOnSweep{
    0%,58%{
        transform:
            translateX(0)
            rotate(28deg);

        opacity:0;
    }

    66%{
        opacity:1;
    }

    82%,100%{
        transform:
            translateX(1450px)
            rotate(28deg);

        opacity:0;
    }
}

@keyframes cxAddOnIcon{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-5px);
    }
}

@keyframes cxGreenState{
    0%,100%{
        box-shadow:
            0 0 0 8px rgba(158,239,79,.10),
            0 0 16px rgba(178,255,91,.50);
    }

    50%{
        box-shadow:
            0 0 0 11px rgba(158,239,79,.16),
            0 0 27px rgba(178,255,91,.80);
    }
}

@keyframes cxBlueState{
    0%,100%{
        box-shadow:
            0 0 0 8px rgba(82,190,255,.10),
            0 0 16px rgba(79,195,255,.52);
    }

    50%{
        box-shadow:
            0 0 0 11px rgba(82,190,255,.16),
            0 0 27px rgba(79,195,255,.82);
    }
}

/* responsive */
@media(max-width:1000px){

    .r7-addons-page .cx-addon-grid{
        width:min(100%,920px) !important;
        gap:18px !important;
    }

    .r7-addons-page
    .cx-addon-codi,
    .r7-addons-page
    .cx-addon-voice{
        padding:24px 22px 22px !important;
    }

    .r7-addons-page
    .cx-addon-card h2{
        font-size:34px !important;
    }

    .r7-addons-page
    .cx-addon-card .section-kicker{
        right:22px !important;

        padding:
            9px 13px !important;

        font-size:9px !important;
    }

    .r7-addons-page
    .cx-addon-card > .commerce-icon + div{
        padding-right:120px !important;
    }
}

/* stack only on narrow screens */
@media(max-width:720px){

    .r7-addons-page .cx-addon-grid{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        gap:18px !important;
    }

    .r7-addons-page
    .cx-addon-codi,
    .r7-addons-page
    .cx-addon-voice{
        min-height:0 !important;
        height:auto !important;
    }
}

@media(max-width:520px){

    .r7-addons-page
    .cx-addon-codi,
    .r7-addons-page
    .cx-addon-voice{
        padding:21px !important;
        border-radius:24px !important;
    }

    .r7-addons-page
    .cx-addon-feature-list{
        grid-template-columns:
            1fr !important;
    }

    .r7-addons-page
    .cx-addon-card > .commerce-icon + div{
        padding-right:0 !important;
    }
}

@media(prefers-reduced-motion:reduce){

    .r7-addons-page *,
    .r7-addons-page *::before,
    .r7-addons-page *::after{
        animation:none !important;
        transition:none !important;
    }
}