.badcp-stories{
    margin:0 0 24px;
}

.badcp-stories-rail{
    display:flex;
    align-items:flex-start;
    gap:14px;
    overflow-x:auto;
    padding:6px 2px 16px;
    scrollbar-width:thin;
}

.badcp-story-circle{
    appearance:none;
    border:0;
    background:none;
    color:#fff;
    flex:0 0 76px;
    width:76px;
    padding:0;
    cursor:pointer;
    text-align:center;
}

.badcp-story-avatar{
    width:70px;
    height:70px;
    padding:3px;
    margin:0 auto 7px;
    display:block;
    position:relative;
    border-radius:50%;
    background:linear-gradient(135deg,#f1cf59,#ac8400,#fff);
}

.badcp-story-circle.is-seen .badcp-story-avatar{
    background:#4f5661;
}

.badcp-story-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:50%;
    border:3px solid #0b0e13;
}

.badcp-story-circle strong{
    display:block;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:11px;
    font-weight:800;
}

.badcp-story-add .badcp-story-avatar{
    background:#272d36;
}

.badcp-story-add .badcp-story-avatar i{
    position:absolute;
    right:-1px;
    bottom:-1px;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e0b62e;
    color:#080a0d;
    border:3px solid #080a0d;
    font-style:normal;
    font-size:18px;
    font-weight:900;
}

.badcp-stories-empty{
    color:#9ea6b3;
    font-size:13px;
    padding:20px 0;
}


/* Viewer */

.badcp-story-viewer{
    position:fixed;
    inset:0;
    z-index:999999;
    background:rgba(0,0,0,.94);
    display:grid;
    place-items:center;
}

.badcp-story-viewer[hidden]{
    display:none;
}

.badcp-story-stage{
    width:min(430px,calc(100vw - 26px));
    height:min(760px,calc(100vh - 70px));
    border-radius:18px;
    overflow:hidden;
    position:relative;
    background:#090b0f;
    box-shadow:0 30px 90px rgba(0,0,0,.65);
}

.badcp-story-slide{
    height:100%;
    position:relative;
    background:#090b0f;
    color:#fff;
}

.badcp-story-slide-head{
    position:absolute;
    z-index:5;
    left:0;
    top:0;
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:22px 18px 16px;
    background:linear-gradient(to bottom,rgba(0,0,0,.72),transparent);
}

.badcp-story-slide-head img{
    width:38px;
    height:38px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #e0b62e;
}

.badcp-story-slide-head strong,
.badcp-story-slide-head span{
    display:block;
}

.badcp-story-slide-head strong{
    color:#fff;
    font-size:14px;
}

.badcp-story-slide-head span{
    color:#d0d3d7;
    font-size:11px;
    margin-top:2px;
}

.badcp-story-slide-body{
    width:100%;
    height:100%;
}

.badcp-story-media{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000;
}

.badcp-story-text{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    padding:90px 36px 50px;
    text-align:center;
    background:
        radial-gradient(circle at 20% 10%,rgba(224,182,46,.30),transparent 38%),
        linear-gradient(145deg,#1a1f29,#080a0d);
    color:#fff;
    font-size:clamp(22px,5vw,36px);
    font-weight:900;
    line-height:1.25;
}

.badcp-story-shared{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:100px 28px 42px;
    background:linear-gradient(160deg,#171c24,#080a0d);
}

.badcp-story-shared>img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.47;
}

.badcp-story-shared:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.92));
}

.badcp-story-shared>*:not(img){
    position:relative;
    z-index:2;
}

.badcp-story-shared span{
    color:#e0b62e;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11px;
    font-weight:900;
}

.badcp-story-shared h2{
    color:#fff;
    margin:8px 0 18px;
    font-size:28px;
    line-height:1.1;
}

.badcp-story-shared a{
    align-self:flex-start;
    display:inline-flex;
    min-height:42px;
    align-items:center;
    padding:0 18px;
    border-radius:999px;
    background:#e0b62e;
    color:#080a0d;
    text-decoration:none;
    font-weight:900;
}

.badcp-story-close{
    position:fixed;
    z-index:1000002;
    right:20px;
    top:14px;
    border:0;
    background:none;
    color:#fff;
    font-size:38px;
    cursor:pointer;
}

.badcp-story-prev,
.badcp-story-next{
    position:fixed;
    z-index:1000001;
    top:70px;
    bottom:0;
    width:50%;
    border:0;
    background:transparent;
    cursor:pointer;
}

.badcp-story-prev{
    left:0;
}

.badcp-story-next{
    right:0;
}

.badcp-story-progress{
    position:fixed;
    z-index:1000003;
    top:12px;
    left:50%;
    width:min(420px,calc(100vw - 36px));
    transform:translateX(-50%);
    display:flex;
    gap:4px;
}

.badcp-story-progress span{
    flex:1;
    height:3px;
    border-radius:10px;
    background:rgba(255,255,255,.28);
    overflow:hidden;
}

.badcp-story-progress span:after{
    content:"";
    display:block;
    width:0;
    height:100%;
    background:#fff;
}

.badcp-story-progress span.is-complete:after{
    width:100%;
}

.badcp-story-progress span.is-active:after{
    animation:badcpStoryProgress 6s linear forwards;
}

@keyframes badcpStoryProgress{
    from{width:0}
    to{width:100%}
}


/* Creator Story form */

.badcp-story-create-modal{
    position:fixed;
    inset:0;
    z-index:999999;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(0,0,0,.88);
}

.badcp-story-create-modal[hidden]{
    display:none;
}

.badcp-story-create-card{
    position:relative;
    width:min(520px,100%);
    max-height:90vh;
    overflow:auto;
    padding:30px;
    border-radius:20px;
    background:#10141b;
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
}

.badcp-story-create-card>span{
    color:#e0b62e;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11px;
    font-weight:900;
}

.badcp-story-create-card h2{
    margin:5px 0 4px;
    color:#fff;
}

.badcp-story-create-card>p{
    margin:0 0 22px;
    color:#9ea6b3;
}

.badcp-story-create-close{
    position:absolute;
    top:12px;
    right:15px;
    border:0;
    background:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

.badcp-story-create-form{
    display:grid;
    gap:17px;
}

.badcp-story-create-form label{
    display:grid;
    gap:7px;
    color:#d6dae0;
    font-size:13px;
    font-weight:800;
}

.badcp-story-create-form select,
.badcp-story-create-form textarea,
.badcp-story-create-form input[type=file]{
    width:100%;
    color:#fff;
    background:#080b10;
    border:1px solid rgba(255,255,255,.16);
    border-radius:10px;
    padding:11px;
}

.badcp-story-create-form textarea{
    resize:vertical;
}

.badcp-story-create-form>button{
    min-height:46px;
    border:0;
    border-radius:999px;
    background:#e0b62e;
    color:#080a0d;
    font-weight:900;
    cursor:pointer;
}

.badcp-story-create-form>button:disabled{
    opacity:.55;
    cursor:wait;
}

.badcp-story-form-status{
    min-height:18px;
    color:#e0b62e;
    font-size:12px;
    text-align:center;
}

@media(max-width:600px){
    .badcp-story-circle{
        flex-basis:68px;
        width:68px;
    }

    .badcp-story-avatar{
        width:62px;
        height:62px;
    }

    .badcp-story-stage{
        width:100vw;
        height:100vh;
        border-radius:0;
    }
}

/* Center the + inside the Your Story badge */
.badcp-story-add .badcp-story-avatar i{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    line-height:1;
    font-family:Arial,Helvetica,sans-serif;
    font-size:18px;
    text-align:center;
}

/* BAD Stories - neutralize theme button styling on viewer navigation */
.badcp-story-viewer .badcp-story-prev,
.badcp-story-viewer .badcp-story-next{
    appearance:none !important;
    -webkit-appearance:none !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:none !important;
    padding:0 !important;
    margin:0 !important;
    color:transparent !important;
    font-size:0 !important;
    opacity:1 !important;
}

.badcp-story-viewer .badcp-story-prev:hover,
.badcp-story-viewer .badcp-story-prev:focus,
.badcp-story-viewer .badcp-story-prev:active,
.badcp-story-viewer .badcp-story-next:hover,
.badcp-story-viewer .badcp-story-next:focus,
.badcp-story-viewer .badcp-story-next:active{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    outline:none !important;
}


/* =========================================================
   BAD Stories - Portrait Preview Rail
   ========================================================= */

.badcp-stories-rail{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:14px !important;

    width:100%;
    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:5px 3px 16px !important;

    scroll-snap-type:x proximity;
    scrollbar-width:thin;
}


/* ---------------------------------------------------------
   Portrait Story card
   --------------------------------------------------------- */

.badcp-stories-rail .badcp-story-circle{
    appearance:none !important;
    -webkit-appearance:none !important;

    position:relative !important;

    display:block !important;
    flex:0 0 132px !important;

    width:132px !important;
    min-width:132px !important;
    max-width:132px !important;

    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;

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

    overflow:hidden !important;

    border:2px solid #e0b62e !important;
    border-radius:16px !important;

    background:#11161e !important;
    background-image:none !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.28);

    cursor:pointer;

    text-align:left !important;

    scroll-snap-align:start;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.badcp-stories-rail .badcp-story-circle:hover{
    transform:translateY(-3px);

    border-color:#f0cb49 !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.38),
        0 0 0 1px rgba(224,182,46,.18);
}


/* Support current/future seen-state naming. */

.badcp-stories-rail .badcp-story-circle.is-seen,
.badcp-stories-rail .badcp-story-circle.seen,
.badcp-stories-rail .badcp-story-circle[data-seen="1"]{
    border-color:rgba(255,255,255,.20) !important;
}


/* ---------------------------------------------------------
   Hide the old circular avatar on normal Story cards.
   A smaller avatar is added over the portrait preview.
   --------------------------------------------------------- */

.badcp-stories-rail
.badcp-story-circle:not(.badcp-story-add)
.badcp-story-avatar{
    display:none !important;
}


/* ---------------------------------------------------------
   Preview media
   --------------------------------------------------------- */

.badcp-story-card-preview{
    position:absolute;
    inset:0;
    z-index:1;

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

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #191f28,
            #07090c
        );
}


.badcp-story-card-preview::after{
    content:'';

    position:absolute;
    inset:0;
    z-index:2;

    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            rgba(5,7,10,.05) 34%,
            rgba(5,7,10,.20) 55%,
            rgba(5,7,10,.92) 100%
        );
}


.badcp-story-card-media{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    margin:0 !important;

    object-fit:cover !important;
    object-position:center !important;

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


/* ---------------------------------------------------------
   Creator name
   --------------------------------------------------------- */

.badcp-stories-rail
.badcp-story-circle
.badcp-story-card-name{
    position:absolute !important;

    left:10px !important;
    right:9px !important;
    bottom:10px !important;

    z-index:5;

    display:block !important;

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

    color:#fff !important;

    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.2 !important;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    text-align:left !important;

    text-shadow:
        0 1px 5px rgba(0,0,0,.9);
}


/* ---------------------------------------------------------
   Small creator avatar overlay
   --------------------------------------------------------- */

.badcp-story-card-avatar{
    position:absolute;

    top:9px;
    left:9px;

    z-index:5;

    display:block;

    width:34px;
    height:34px;

    padding:2px;

    border-radius:50%;

    background:#080a0d;
    border:2px solid #e0b62e;

    box-shadow:
        0 2px 8px rgba(0,0,0,.45);
}


.badcp-story-card-avatar img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    border-radius:50% !important;

    object-fit:cover !important;
}


/* ---------------------------------------------------------
   Story count
   --------------------------------------------------------- */

.badcp-story-card-count{
    position:absolute;

    top:10px;
    right:9px;

    z-index:5;

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

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

    padding:0 6px;

    border-radius:999px;

    background:rgba(5,7,10,.78);

    border:
        1px solid rgba(255,255,255,.20);

    color:#fff;

    font-size:10px;
    font-weight:800;

    line-height:1;
}


/* ---------------------------------------------------------
   Video preview play mark
   --------------------------------------------------------- */

.badcp-story-card-play{
    position:absolute;

    top:50%;
    left:50%;

    z-index:5;

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

    width:42px;
    height:42px;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:rgba(5,7,10,.70);
    border:1px solid rgba(255,255,255,.55);

    color:#fff;

    font-size:15px;

    padding-left:2px;

    pointer-events:none;
}


/* ---------------------------------------------------------
   Text Story preview
   --------------------------------------------------------- */

.badcp-story-card-preview--text{
    padding:19px;
    box-sizing:border-box;

    background:
        radial-gradient(
            circle at 25% 15%,
            rgba(224,182,46,.20),
            transparent 35%
        ),
        linear-gradient(
            150deg,
            #171c24,
            #07090c
        );
}


.badcp-story-card-text{
    position:relative;
    z-index:1;

    display:-webkit-box;

    overflow:hidden;

    color:#fff;

    font-size:13px;
    font-weight:700;
    line-height:1.42;

    text-align:center;

    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
}


/* ---------------------------------------------------------
   Shared-content fallback
   --------------------------------------------------------- */

.badcp-story-card-fallback{
    position:relative;
    z-index:1;

    color:#e0b62e;

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

    letter-spacing:.12em;
}


/* =========================================================
   YOUR STORY portrait card
   ========================================================= */

.badcp-stories-rail
.badcp-story-add--portrait
.badcp-story-avatar{
    position:absolute !important;

    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

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

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

    overflow:hidden !important;

    background:
        linear-gradient(
            145deg,
            #151a21,
            #07090c
        ) !important;
}


.badcp-stories-rail
.badcp-story-add--portrait
.badcp-story-avatar::after{
    content:'';

    position:absolute;
    inset:0;

    z-index:2;

    background:
        linear-gradient(
            to bottom,
            rgba(5,7,10,.32),
            rgba(5,7,10,.72)
        );
}


.badcp-stories-rail
.badcp-story-add--portrait
.badcp-story-avatar img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    border-radius:0 !important;

    object-fit:cover !important;

    filter:
        brightness(.62)
        saturate(.82);
}


.badcp-stories-rail
.badcp-story-add--portrait
.badcp-story-avatar i{
    position:absolute !important;

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

    z-index:5 !important;

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

    width:46px !important;
    height:46px !important;

    transform:
        translate(-50%,-58%) !important;

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

    border-radius:50% !important;

    background:#e0b62e !important;
    border:3px solid #080a0d !important;

    color:#080a0d !important;

    font-family:Arial,Helvetica,sans-serif !important;
    font-size:27px !important;
    font-style:normal !important;
    font-weight:700 !important;
    line-height:1 !important;

    box-shadow:
        0 5px 18px rgba(0,0,0,.35);
}


.badcp-stories-rail
.badcp-story-add--portrait
> strong{
    position:absolute !important;

    left:10px !important;
    right:10px !important;
    bottom:10px !important;

    z-index:6;

    margin:0 !important;

    color:#fff !important;

    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.2 !important;

    text-align:left !important;

    text-shadow:
        0 1px 5px rgba(0,0,0,.9);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px){

    .badcp-stories-rail{
        gap:10px !important;
        padding-bottom:12px !important;
    }

    .badcp-stories-rail
    .badcp-story-circle{
        flex-basis:108px !important;

        width:108px !important;
        min-width:108px !important;
        max-width:108px !important;

        height:180px !important;
        min-height:180px !important;
        max-height:180px !important;

        border-radius:14px !important;
    }

    .badcp-story-card-avatar{
        width:30px;
        height:30px;
    }

    .badcp-stories-rail
    .badcp-story-circle
    .badcp-story-card-name,
    .badcp-stories-rail
    .badcp-story-add--portrait
    > strong{
        font-size:11px !important;
    }

}