/* ==========================================================
   VIDEURO DIRECT POST FINAL
   ========================================================== */


/* -------------------------
   SUBMIT — POSTING AS
   ------------------------- */

.vdp-submit-owner{
    margin:20px 0 18px !important;
    padding:15px !important;

    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:15px !important;

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

.vdp-submit-owner-label{
    margin-bottom:10px !important;

    font-size:9px !important;
    font-weight:800 !important;
    letter-spacing:.13em !important;

    opacity:.55 !important;
}

.vdp-submit-owner-person{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
}

.vdp-submit-owner-avatar{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;

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

    overflow:hidden !important;

    border-radius:50% !important;

    background:linear-gradient(
        135deg,
        #766cff,
        #ee7096
    ) !important;

    color:#fff !important;

    font-weight:800 !important;
}

.vdp-submit-owner-avatar img{
    display:block !important;

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

    object-fit:cover !important;
}

.vdp-submit-owner-copy{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
}

.vdp-submit-owner-copy strong{
    font-size:14px !important;
    line-height:1.2 !important;
}

.vdp-submit-owner-copy > span{
    font-size:11px !important;

    color:#88d8c4 !important;
}

.vdp-submit-owner-copy small{
    margin-top:3px !important;

    font-size:10px !important;

    opacity:.55 !important;
}


/* -------------------------
   COUNTRY POST OWNER
   ------------------------- */

.vdp-post-owner{
    position:relative !important;

    z-index:50 !important;

    width:max-content !important;
    max-width:100% !important;

    margin:14px 0 10px !important;
}

.vdp-post-owner-main{
    display:flex !important;
    align-items:center !important;

    width:max-content !important;
    max-width:100% !important;

    gap:9px !important;

    color:inherit !important;

    text-decoration:none !important;

    cursor:pointer !important;
}

.vdp-post-owner-avatar{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;

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

    overflow:hidden !important;

    border-radius:50% !important;

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

    background:linear-gradient(
        135deg,
        #776dff,
        #ef7096
    ) !important;

    color:#fff !important;

    font-size:11px !important;
    font-weight:800 !important;
}

.vdp-post-owner-avatar img{
    display:block !important;

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

    object-fit:cover !important;
}

.vdp-post-owner-text{
    display:grid !important;

    grid-template-columns:auto auto !important;

    align-items:center !important;

    column-gap:6px !important;
}

.vdp-post-owner-text small{
    grid-column:1 / -1 !important;

    margin:0 0 2px !important;

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

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

    text-transform:uppercase !important;
    letter-spacing:.09em !important;
}

.vdp-post-owner-text strong{
    color:#fff !important;

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

    font-weight:700 !important;
}

.vdp-post-owner-text em{
    color:#7fd4be !important;

    font-size:10px !important;
    line-height:1.25 !important;

    font-style:normal !important;
}


/* -------------------------
   OWNER HOVER CARD
   ------------------------- */

.vdp-owner-hover{
    position:absolute !important;

    left:0 !important;
    bottom:calc(100% + 10px) !important;

    z-index:99999 !important;

    width:285px !important;

    padding:15px !important;

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

    background:#111a22 !important;

    box-shadow:
        0 20px 50px rgba(0,0,0,.48) !important;

    opacity:0 !important;
    visibility:hidden !important;

    transform:translateY(7px) !important;

    pointer-events:none !important;

    transition:
        opacity .15s ease,
        visibility .15s ease,
        transform .15s ease !important;
}

.vdp-post-owner:hover .vdp-owner-hover,
.vdp-post-owner:focus-within .vdp-owner-hover{
    opacity:1 !important;
    visibility:visible !important;

    transform:translateY(0) !important;

    pointer-events:auto !important;
}

.vdp-owner-hover-top{
    display:flex !important;
    align-items:center !important;

    gap:10px !important;
}

.vdp-owner-hover-avatar{
    width:43px !important;
    height:43px !important;
    min-width:43px !important;

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

    overflow:hidden !important;

    border-radius:50% !important;

    background:linear-gradient(
        135deg,
        #776dff,
        #ef7096
    ) !important;

    color:#fff !important;

    font-weight:800 !important;
}

.vdp-owner-hover-avatar img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}

.vdp-owner-hover strong{
    display:block !important;

    color:#fff !important;

    font-size:14px !important;
}

.vdp-owner-hover small{
    display:block !important;

    margin-top:2px !important;

    color:#7fd4be !important;

    font-size:10px !important;
}

.vdp-owner-hover-location{
    margin-top:10px !important;

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

    font-size:10px !important;
}

.vdp-owner-hover p{
    margin:9px 0 0 !important;

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

    font-size:10px !important;
    line-height:1.55 !important;
}

.vdp-owner-hover > a{
    display:inline-flex !important;

    margin-top:12px !important;

    color:#8addc7 !important;

    font-size:10px !important;
    font-weight:700 !important;

    text-decoration:none !important;
}


/* Let the profile hover escape the card */
#crx-stories article{
    overflow:visible !important;
}


/* -------------------------
   LIGHT MODE
   ------------------------- */

html[data-theme="light"]
.vdp-submit-owner{
    background:#f7f9f8 !important;

    border-color:rgba(10,25,20,.13) !important;
}

html[data-theme="light"]
.vdp-post-owner-text small{
    color:#68756f !important;
}

html[data-theme="light"]
.vdp-post-owner-text strong{
    color:#101b17 !important;
}

html[data-theme="light"]
.vdp-post-owner-text em{
    color:#17735d !important;
}


/* -------------------------
   PUBLIC TRAVELLER
   ------------------------- */

.vdp-public-profile{
    max-width:1000px !important;

    padding-top:70px !important;
    padding-bottom:90px !important;
}

.vdp-public-profile-hero{
    display:flex !important;
    align-items:center !important;

    gap:20px !important;
}

.vdp-public-profile-avatar{
    width:92px !important;
    height:92px !important;
    min-width:92px !important;

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

    overflow:hidden !important;

    border-radius:50% !important;

    background:linear-gradient(
        135deg,
        #776dff,
        #ef7096
    ) !important;

    color:#fff !important;

    font-size:25px !important;
    font-weight:800 !important;
}

.vdp-public-profile-avatar img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}

.vdp-public-profile h1{
    margin:5px 0 2px !important;
}

.vdp-public-profile-username{
    opacity:.62 !important;
}

.vdp-public-profile-bio{
    margin-top:35px !important;

    padding:25px !important;

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

    border-radius:18px !important;
}


@media(max-width:700px){

    .vdp-owner-hover{
        width:min(
            280px,
            calc(100vw - 36px)
        ) !important;
    }
}