/*
 * CODSHIPX_AI_R83_R14_R2_CODI_BRAND_STATUS_POLISH
 *
 * Scope:
 * Mandatory Codi first-use setup only.
 *
 * Uses the existing original Codi artwork:
 * /ai-center/brand-r71/codi-icon.jpeg
 */


/* ----------------------------------------------------------
   TOP LEFT CODI BRAND MARK
   ---------------------------------------------------------- */

.codi-mandatory-gate
.r7-r31-codi-brand-icon {
    position: relative !important;

    display: block !important;

    width: 50px !important;
    height: 50px !important;

    min-width: 50px !important;
    flex: 0 0 50px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 16px !important;

    overflow: hidden !important;

    background:
        #090d19
        url("/ai-center/brand-r71/codi-icon.jpeg")
        center center / cover
        no-repeat !important;

    border:
        1px solid
        rgba(157, 227, 31, .30) !important;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.025) inset,
        0 8px 24px rgba(0,0,0,.30),
        0 0 24px rgba(157,227,31,.10) !important;
}


/*
 * Hide old compact mark rendered inside this slot.
 */
.codi-mandatory-gate
.r7-r31-codi-brand-icon
> * {
    opacity: 0 !important;
    visibility: hidden !important;
}


/* ----------------------------------------------------------
   MAIN CODI REACTOR LOGO
   ---------------------------------------------------------- */

.codi-mandatory-gate
.codi-mandatory-logo {
    overflow: hidden !important;

    background:
        #090d19
        url("/ai-center/brand-r71/codi-icon.jpeg")
        center center / cover
        no-repeat !important;

    border-radius: inherit;
}


.codi-mandatory-gate
.codi-mandatory-logo
> img {
    opacity: 0 !important;
    visibility: hidden !important;
}


/* ----------------------------------------------------------
   STATUS ROW
   ---------------------------------------------------------- */

.codi-mandatory-gate
.codi-mandatory-signals {
    display: flex !important;

    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 9px !important;

    margin-top: 24px !important;
}


/* individual status pill */

.codi-mandatory-gate
.codi-mandatory-signals
> span {
    display: inline-flex !important;

    align-items: center !important;

    gap: 10px !important;

    min-height: 36px !important;

    padding:
        8px
        14px
        8px
        12px !important;

    border-radius: 999px !important;

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

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.052),
            rgba(255,255,255,.021)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 8px 24px rgba(0,0,0,.16) !important;

    color:
        rgba(240,244,247,.82) !important;

    font-size: 11px !important;

    font-weight: 650 !important;

    line-height: 1 !important;

    letter-spacing: .018em !important;

    white-space: nowrap !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ----------------------------------------------------------
   REPLACE AWKWARD CHECK WITH CLEAN LIVE DOT
   ---------------------------------------------------------- */

.codi-mandatory-gate
.codi-mandatory-signals
> span
> i {
    position: relative !important;

    display: inline-block !important;

    width: 8px !important;
    height: 8px !important;

    min-width: 8px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    border-radius: 999px !important;

    background: #9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.07),
        0 0 12px rgba(157,227,31,.30) !important;

    transform: none !important;
}


/*
 * Kill any inherited tick/check pseudo artwork.
 */

.codi-mandatory-gate
.codi-mandatory-signals
> span
> i::before,

.codi-mandatory-gate
.codi-mandatory-signals
> span
> i::after {
    content: none !important;

    display: none !important;

    border: 0 !important;

    transform: none !important;
}


/* second signal */

.codi-mandatory-gate
.codi-mandatory-signals
> span:nth-child(2)
> i {
    background: #b5e95c !important;

    box-shadow:
        0 0 0 4px rgba(181,233,92,.06),
        0 0 11px rgba(181,233,92,.23) !important;
}


/* third signal */

.codi-mandatory-gate
.codi-mandatory-signals
> span:nth-child(3)
> i {
    background: #d2f19a !important;

    box-shadow:
        0 0 0 4px rgba(210,241,154,.05),
        0 0 11px rgba(210,241,154,.19) !important;
}


/* ----------------------------------------------------------
   MICRO POLISH FOR IDENTITY COPY
   ---------------------------------------------------------- */

.codi-mandatory-gate
.codi-mandatory-identity
> h1 {
    margin-bottom: 12px !important;
}


.codi-mandatory-gate
.codi-mandatory-identity
> p {
    max-width: 470px !important;

    line-height: 1.65 !important;

    color:
        rgba(214,220,226,.70) !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 720px) {

    .codi-mandatory-gate
    .r7-r31-codi-brand-icon {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        flex-basis: 44px !important;

        border-radius: 14px !important;
    }


    .codi-mandatory-gate
    .codi-mandatory-signals {
        gap: 7px !important;

        margin-top: 19px !important;
    }


    .codi-mandatory-gate
    .codi-mandatory-signals
    > span {
        min-height: 33px !important;

        padding:
            7px
            11px !important;

        font-size: 10px !important;
    }

}