/* ============================================================
   BEDEEL UI_03 R2
   HOME PUBLICO PREMIUM
   ============================================================ */

:root{
    --bd-r2-coral:#e66556;
    --bd-r2-coral-hover:#f07566;
    --bd-r2-coral-soft:rgba(230,101,86,.11);

    --bd-r2-bg:#080808;
    --bd-r2-panel:#101011;
    --bd-r2-panel-2:#151516;
    --bd-r2-panel-3:#1a191b;

    --bd-r2-border:#272629;
    --bd-r2-border-soft:#1d1c1f;

    --bd-r2-text:#f6f4f1;
    --bd-r2-muted:#96928e;

    --bd-r2-radius:18px;
}

/* ============================================================
   PAGE
   ============================================================ */

body.np4-public{
    min-height:100vh;

    color:var(--bd-r2-text);

    background:
        radial-gradient(
            circle at 50% -220px,
            rgba(230,101,86,.10),
            transparent 420px
        ),
        #080808 !important;
}

/* ============================================================
   HEADER
   ============================================================ */

.np4-header{
    height:72px !important;

    border-bottom:1px solid rgba(255,255,255,.055) !important;

    background:
        rgba(8,8,8,.86) !important;

    backdrop-filter:
        blur(24px)
        saturate(125%) !important;
}

.np4-header-inner{
    max-width:1540px !important;

    padding:0 24px !important;

    grid-template-columns:
        220px
        minmax(360px,720px)
        minmax(300px,1fr) !important;

    gap:28px !important;
}

/* BRAND */

.np4-brand{
    gap:12px !important;
}

.np4-brand-icon{
    width:40px !important;
    height:40px !important;

    flex-basis:40px !important;

    border-radius:12px !important;

    background:
        #151515
        url("/assets/bedeel/public/Logo%201.png")
        center / cover
        no-repeat !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35) !important;
}

.np4-brand strong::after{
    font-size:17px !important;
    letter-spacing:-.55px !important;
}

.np4-brand small{
    margin-top:4px !important;

    color:#85817d !important;

    font-size:9px !important;
    letter-spacing:.015em;
}

/* SEARCH */

.np4-search{
    height:42px !important;

    padding:0 14px !important;

    border:1px solid #29282a !important;
    border-radius:13px !important;

    background:#121214 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.np4-search span{
    color:#77736f !important;

    font-size:17px !important;
}

.np4-search input{
    font-size:11px !important;
}

.np4-search input::placeholder{
    color:#77736f !important;
}

/* ACTIONS */

.np4-header-actions{
    gap:9px !important;
}

.np4-login{
    padding:10px 13px !important;

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

.np4-register{
    padding:11px 17px !important;

    border-radius:11px !important;

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

    box-shadow:
        0 10px 28px rgba(230,101,86,.22) !important;
}

.bd-lang-button{
    width:36px !important;
    height:36px !important;

    background:#111113 !important;
}

/* ============================================================
   MAIN SOCIAL GRID
   ============================================================ */

.np4-shell{
    width:100%;
    max-width:1540px !important;

    margin:0 auto;

    padding:
        22px
        24px
        80px !important;

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

    gap:20px !important;
}

/* ============================================================
   LEFT RAIL
   ============================================================ */

.np4-left{
    top:94px !important;

    gap:18px !important;
}

.np4-left-nav{
    gap:5px !important;

    padding:0 !important;
}

.np4-left-nav>a{
    min-height:58px !important;

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

    gap:11px !important;

    padding:8px 10px !important;

    border:1px solid transparent;
    border-radius:14px !important;
}

.np4-left-nav>a:hover{
    border-color:#29282a !important;

    background:#121214 !important;
}

.np4-left-nav>a.is-active{
    border-color:rgba(230,101,86,.17) !important;

    background:
        linear-gradient(
            90deg,
            rgba(230,101,86,.115),
            rgba(230,101,86,.02)
        ) !important;

    box-shadow:
        inset 3px 0 0 var(--bd-r2-coral) !important;
}

.np4-left-nav i{
    width:40px !important;
    height:40px !important;

    border:1px solid #2b292c !important;
    border-radius:12px !important;

    color:#aaa6a2 !important;

    background:#151517 !important;

    font-size:14px !important;
}

.np4-left-nav>a.is-active i{
    color:#fff !important;

    border-color:rgba(230,101,86,.30) !important;

    background:
        rgba(230,101,86,.13) !important;
}

.np4-left-nav strong{
    font-size:11px !important;
}

.np4-left-nav small{
    margin-top:3px !important;

    color:#77736f !important;

    font-size:8px !important;
    line-height:1.25 !important;
}

/* SECTORS */

.np4-sectors{
    padding:
        17px
        10px
        4px !important;

    border-top:1px solid #242326;
}

.np4-section-label{
    margin-bottom:10px !important;

    color:#625f5c !important;

    font-size:7px !important;
    font-weight:900 !important;
    letter-spacing:.16em !important;
}

.np4-sectors a{
    min-height:32px !important;

    padding:5px 4px !important;

    border-radius:9px;

    font-size:9px !important;
}

.np4-sectors a span{
    background:var(--bd-r2-coral) !important;

    box-shadow:
        0 0 0 4px rgba(230,101,86,.07);
}

/* LEFT CTA */

.np4-left-cta{
    padding:14px !important;

    border:1px solid #29282a !important;
    border-radius:18px !important;

    background:
        linear-gradient(
            145deg,
            #151415,
            #0e0e0f
        ) !important;

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);
}

.np4-left-cta-art{
    height:100px !important;

    margin:
        -14px
        -14px
        14px !important;

    background:
        linear-gradient(
            180deg,
            rgba(8,8,8,.10),
            rgba(8,8,8,.56)
        ),
        url("/assets/bedeel/ChatGPT%20Image%2017%20sept%202026,%2003_09_48%20p.m..png")
        center / cover
        no-repeat !important;
}

.np4-left-cta-art::before,
.np4-left-cta-art::after{
    display:none !important;
}

.np4-left-cta-art>span,
.np4-left-cta-art>i,
.np4-left-cta-art>b{
    display:none !important;
}

.np4-left-cta strong{
    font-size:11px !important;
    line-height:1.35 !important;
}

.np4-left-cta p{
    margin:
        7px
        0
        13px !important;

    color:#85817d !important;

    font-size:8px !important;
    line-height:1.5 !important;
}

.np4-left-cta>a{
    min-height:36px;

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

    border-radius:10px !important;

    font-size:9px !important;
    font-weight:850 !important;

    box-shadow:
        0 10px 25px rgba(230,101,86,.18);
}

/* ============================================================
   MAIN
   ============================================================ */

.np4-main{
    gap:22px !important;
}

/* ============================================================
   HERO
   ============================================================ */

.np4-hero{
    border:1px solid #29282a !important;
    border-radius:24px !important;

    background:#101011 !important;

    box-shadow:
        0 25px 80px rgba(0,0,0,.28) !important;
}

.np4-hero-media{
    height:390px !important;
    min-height:390px !important;
}

.np4-hero-media>img{
    object-position:center 46%;

    filter:
        saturate(.58)
        contrast(1.10)
        brightness(.64) !important;

    transform:scale(1.01);
}

.np4-hero-overlay{
    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.96) 0%,
            rgba(6,6,6,.82) 36%,
            rgba(7,7,7,.36) 70%,
            rgba(7,7,7,.15) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7,7,7,.62),
            transparent 52%
        ) !important;
}

.np4-hero-copy{
    max-width:620px !important;

    left:42px !important;
}

.np4-hero-copy>span{
    color:var(--bd-r2-coral) !important;

    font-size:9px !important;
    font-weight:900 !important;

    letter-spacing:.16em !important;
}

.np4-hero-copy h1{
    max-width:570px !important;

    margin:
        13px
        0
        14px !important;

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

    letter-spacing:-.055em !important;
}

.np4-hero-copy h1 strong{
    color:var(--bd-r2-coral) !important;
}

.np4-hero-copy p{
    max-width:480px !important;

    color:#b8b4b0 !important;

    font-size:12px !important;
    line-height:1.6 !important;
}

.np4-hero-live{
    right:24px !important;
    top:24px !important;

    padding:
        10px
        13px !important;

    border-color:rgba(255,255,255,.10) !important;

    background:rgba(12,12,13,.72) !important;
}

.np4-hero-live strong{
    font-size:9px !important;
}

.np4-hero-live small{
    margin-top:2px;

    font-size:7px !important;
}

/* HERO ACTIONS */

.np4-hero-actions{
    border-top:1px solid #242326 !important;

    background:#101011 !important;
}

.np4-hero-actions>a{
    min-height:76px !important;

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

    gap:11px !important;

    padding:
        12px
        17px !important;

    background:#101011 !important;
}

.np4-hero-actions>a + a{
    border-left:1px solid #222124;
}

.np4-hero-actions>a:hover{
    background:#171719 !important;
}

.np4-hero-actions i{
    width:44px !important;
    height:44px !important;

    border:1px solid #302e31;
    border-radius:13px !important;

    color:var(--bd-r2-coral) !important;

    background:#181719 !important;

    font-size:15px;
}

.np4-hero-actions strong{
    font-size:11px !important;
}

.np4-hero-actions small{
    margin-top:4px !important;

    font-size:8px !important;
}

/* ============================================================
   DISCOVERY STORIES
   ============================================================ */

.np4-stories{
    padding:
        5px
        0
        3px !important;
}

.np4-stories>header{
    margin-bottom:13px !important;
}

.np4-stories header small,
.np4-feed-header small{
    color:var(--bd-r2-coral) !important;

    font-size:7px !important;
    font-weight:900 !important;
    letter-spacing:.15em;
}

.np4-stories h2,
.np4-feed-header h2{
    margin-top:5px !important;

    font-size:20px !important;
    letter-spacing:-.025em;
}

.np4-stories header>a{
    color:#aaa6a2 !important;

    font-size:9px !important;
}

.np4-stories header>a:hover{
    color:var(--bd-r2-coral) !important;
}

.np4-story-row{
    gap:12px !important;
}

.np4-story-image{
    height:132px !important;

    border:1px solid #29282a;
    border-radius:17px !important;

    background:#151517 !important;
}

.np4-story-image>img{
    filter:
        saturate(.70)
        brightness(.78);
}

.np4-story:hover .np4-story-image{
    border-color:
        rgba(230,101,86,.42) !important;
}

.np4-story-image>span{
    background:
        linear-gradient(
            to top,
            rgba(7,7,7,.86),
            rgba(7,7,7,.03) 65%
        ) !important;
}

.np4-story-avatar{
    width:36px !important;
    height:36px !important;

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

    color:#fff !important;

    background:var(--bd-r2-coral) !important;

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

.np4-story>strong{
    margin-top:8px !important;

    font-size:10px !important;
}

.np4-story>small{
    margin-top:3px !important;

    color:#77736f !important;

    font-size:8px !important;
}

.np4-story-lock{
    color:var(--bd-r2-coral) !important;

    background:#1b1a1c !important;
}

/* ============================================================
   FEED TITLE
   ============================================================ */

.np4-feed-header{
    margin-top:6px !important;
}

.np4-feed-header>span{
    color:#66625f !important;

    font-size:7px !important;
    letter-spacing:.12em !important;
}

/* ============================================================
   FEED
   ============================================================ */

.np4-feed{
    gap:18px !important;
}

.np4-post{
    overflow:hidden;

    border:1px solid #29282a !important;
    border-radius:21px !important;

    background:#101011 !important;

    box-shadow:
        0 22px 65px rgba(0,0,0,.16) !important;
}

.np4-post:hover{
    border-color:#343235 !important;
}

.np4-post-header{
    min-height:72px !important;

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

    gap:11px !important;

    padding:
        13px
        16px !important;
}

.np4-post-avatar{
    width:44px !important;
    height:44px !important;

    border:1px solid rgba(230,101,86,.28);

    color:#fff !important;

    background:
        linear-gradient(
            145deg,
            #e66556,
            #b94c41
        ) !important;

    font-size:13px !important;

    box-shadow:
        0 8px 22px rgba(230,101,86,.12);
}

.np4-post-author strong{
    font-size:11px !important;
}

.np4-post-author span{
    margin-top:4px !important;

    font-size:8px !important;
}

.np4-post-type{
    padding:
        6px
        9px !important;

    border-radius:999px !important;

    font-size:7px !important;
    letter-spacing:.08em;
}

.np4-post-image{
    min-height:330px !important;
}

.np4-post-image>img{
    min-height:330px;

    object-fit:cover;

    filter:
        saturate(.66)
        brightness(.80)
        contrast(1.04);
}

.np4-post-gradient{
    background:
        linear-gradient(
            to top,
            rgba(7,7,7,.92),
            rgba(7,7,7,.05) 64%
        ) !important;
}

.np4-post-image-copy{
    left:18px !important;
    right:18px !important;
    bottom:17px !important;
}

.np4-post-image-copy>span{
    color:var(--bd-r2-coral) !important;

    font-size:8px !important;
    font-weight:900 !important;

    letter-spacing:.13em;
}

.np4-post-image-copy>strong{
    max-width:760px;

    margin-top:6px !important;

    font-size:22px !important;
    line-height:1.12 !important;

    letter-spacing:-.025em;
}

.np4-post-body{
    padding:
        14px
        17px
        13px !important;
}

.np4-post-body p{
    max-width:780px;

    color:#aaa6a2 !important;

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

.np4-post-tags{
    margin-top:11px !important;

    gap:6px !important;
}

.np4-post-tags span{
    padding:
        5px
        8px !important;

    border:1px solid #302e31 !important;
    border-radius:999px !important;

    color:#8f8a86 !important;

    background:#151517 !important;

    font-size:7px !important;
}

.np4-post-actions{
    min-height:52px !important;

    padding:
        7px
        11px !important;

    border-top:1px solid #242326 !important;
}

.np4-post-actions>a{
    padding:
        8px
        9px !important;

    border-radius:9px;

    color:#989490 !important;

    font-size:8px !important;
}

.np4-post-actions>a:hover{
    color:#fff !important;

    background:#19181a !important;
}

.np4-post-actions>a span{
    color:var(--bd-r2-coral) !important;
}

.np4-post-actions .np4-post-open{
    color:var(--bd-r2-coral) !important;

    font-weight:800;
}

/* ============================================================
   LOCKED FEED
   ============================================================ */

.np4-locked-feed{
    padding:18px !important;

    border:1px solid #2c292e !important;
    border-radius:21px !important;

    background:
        radial-gradient(
            circle at 75% 0%,
            rgba(230,101,86,.08),
            transparent 36%
        ),
        #111012 !important;
}

.np4-locked-title>span{
    color:var(--bd-r2-coral) !important;

    background:#1c1a1c !important;
}

.np4-locked-title small{
    color:var(--bd-r2-coral) !important;

    font-size:7px !important;
}

.np4-locked-title strong{
    font-size:12px !important;
}

.np4-locked-feed>a{
    min-height:44px;

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

    margin-top:16px !important;

    border-radius:11px !important;

    color:#fff !important;

    background:
        var(--bd-r2-coral) !important;

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

    box-shadow:
        0 12px 30px rgba(230,101,86,.18);
}

/* ============================================================
   RIGHT RAIL
   ============================================================ */

.np4-right{
    top:94px !important;

    gap:15px !important;
}

.np4-right-discover{
    padding:17px !important;

    border:1px solid #29282a !important;
    border-radius:19px !important;

    background:#101011 !important;

    box-shadow:
        0 18px 48px rgba(0,0,0,.16);
}

.np4-right-discover>header{
    margin-bottom:9px !important;
}

.np4-right-discover header small{
    color:var(--bd-r2-coral) !important;

    font-size:7px !important;
    letter-spacing:.14em;
}

.np4-right-discover h3{
    margin-top:5px !important;

    font-size:16px !important;
    letter-spacing:-.02em;
}

.np4-right-discover>a:not(.np4-see-more){
    min-height:63px !important;

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

    gap:10px !important;

    border-color:#242326 !important;
}

.np4-right-avatar{
    width:42px !important;
    height:42px !important;

    color:#fff !important;

    background:
        linear-gradient(
            145deg,
            #e66556,
            #b94c41
        ) !important;

    font-size:11px !important;
}

.np4-right-discover a strong{
    font-size:9px !important;
}

.np4-right-discover a small{
    margin-top:3px !important;

    font-size:7px !important;
}

.np4-right-discover a b{
    color:var(--bd-r2-coral) !important;

    font-size:16px !important;
}

.np4-see-more{
    min-height:37px;

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

    margin-top:8px !important;

    border:1px solid #2d2b2e;
    border-radius:10px;

    color:#aaa6a2 !important;

    background:#151517;

    font-size:8px !important;
}

.np4-see-more:hover{
    color:#fff !important;

    border-color:rgba(230,101,86,.30);

    background:
        rgba(230,101,86,.08);
}

/* RIGHT PHOTO */

.np4-right-photo{
    height:280px !important;

    border:1px solid #29282a;
    border-radius:20px !important;

    background:#151517 !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.16);
}

.np4-right-photo>img{
    filter:
        saturate(.62)
        brightness(.75);
}

.np4-right-photo-overlay{
    background:
        linear-gradient(
            to top,
            rgba(7,7,7,.96),
            rgba(7,7,7,.14) 72%
        ) !important;
}

.np4-right-photo>div{
    left:17px !important;
    right:17px !important;
    bottom:17px !important;
}

.np4-right-photo small{
    color:var(--bd-r2-coral) !important;

    font-size:7px !important;
    letter-spacing:.10em;
}

.np4-right-photo strong{
    margin-top:7px !important;

    font-size:15px !important;
    line-height:1.25 !important;
}

.np4-right-photo a{
    margin-top:12px !important;

    color:#fff !important;

    font-size:8px !important;
}

/* RIGHT LOCKED */

.np4-right-locked{
    padding:15px !important;

    border:1px solid #29282a !important;
    border-radius:17px !important;

    background:#101011 !important;
}

.np4-right-locked>span{
    color:var(--bd-r2-coral) !important;

    background:#19181a !important;
}

.np4-right-locked strong{
    font-size:10px !important;
}

.np4-right-locked p{
    margin-top:5px !important;

    color:#77736f !important;

    font-size:8px !important;
    line-height:1.45 !important;
}

/* ============================================================
   REMOVE LAST BLUE / PURPLE VISUAL RESIDUES
   ============================================================ */

.np4-post-type,
.np4-story-lock,
.np4-search-mask span{
    border-color:#302e31 !important;
}

.np4-post-type.is-buy{
    color:#f0b06a !important;
    background:rgba(240,176,106,.10) !important;
}

.np4-post-type.is-sell{
    color:#75c99d !important;
    background:rgba(117,201,157,.09) !important;
}

.np4-post-type.is-partner{
    color:#d19be8 !important;
    background:rgba(209,155,232,.09) !important;
}

/* ============================================================
   THEME CONTROL
   ============================================================ */

.np4-theme-control{
    right:24px !important;
    bottom:24px !important;
}

.np4-theme-control .np-theme-toggle{
    width:44px !important;
    height:44px !important;

    border:1px solid #302e31 !important;

    background:#131315 !important;

    box-shadow:
        0 15px 38px rgba(0,0,0,.28) !important;
}

/* ============================================================
   LIGHT MODE TEMPORAL
   ============================================================ */

:root[data-theme="light"] body.np4-public{
    background:#f4f2ef !important;
}

:root[data-theme="light"] .np4-header{
    background:rgba(255,255,255,.91) !important;
}

:root[data-theme="light"] .np4-search,
:root[data-theme="light"] .np4-post,
:root[data-theme="light"] .np4-right-discover,
:root[data-theme="light"] .np4-right-locked,
:root[data-theme="light"] .np4-left-cta{
    border-color:#ded9d5 !important;

    background:#fff !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1320px){

    .np4-shell{
        grid-template-columns:
            200px
            minmax(0,1fr)
            270px !important;

        gap:15px !important;
    }

    .np4-hero-copy h1{
        font-size:40px !important;
    }
}

@media(max-width:1100px){

    .np4-shell{
        grid-template-columns:
            190px
            minmax(0,1fr) !important;
    }

    .np4-right{
        display:none !important;
    }
}

@media(max-width:820px){

    .np4-header{
        height:64px !important;
    }

    .np4-header-inner{
        grid-template-columns:
            auto
            minmax(0,1fr)
            auto !important;

        gap:10px !important;

        padding:
            0
            14px !important;
    }

    .np4-brand small{
        display:none;
    }

    .np4-shell{
        display:block !important;

        padding:
            14px
            14px
            70px !important;
    }

    .np4-left{
        position:static !important;

        margin-bottom:14px;
    }

    .np4-sectors,
    .np4-left-cta{
        display:none !important;
    }

    .np4-left-nav{
        display:grid !important;

        grid-template-columns:
            repeat(4,minmax(0,1fr));

        gap:6px !important;
    }

    .np4-left-nav>a{
        min-height:50px !important;

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

        padding:5px !important;
    }

    .np4-left-nav i{
        width:36px !important;
        height:36px !important;
    }

    .np4-left-nav>a span{
        display:none !important;
    }

    .np4-hero-media{
        height:360px !important;
        min-height:360px !important;
    }

    .np4-hero-copy{
        left:24px !important;
        right:24px;
    }

    .np4-hero-copy h1{
        font-size:37px !important;
    }
}

@media(max-width:620px){

    .np4-search{
        display:none !important;
    }

    .np4-header-inner{
        grid-template-columns:
            1fr
            auto !important;
    }

    .np4-header-actions{
        grid-column:2;
    }

    .np4-brand-icon{
        width:36px !important;
        height:36px !important;
        flex-basis:36px !important;
    }

    .np4-brand strong::after{
        font-size:15px !important;
    }

    .np4-login{
        display:none;
    }

    .np4-register{
        padding:
            9px
            12px !important;
    }

    .np4-hero{
        border-radius:18px !important;
    }

    .np4-hero-media{
        height:340px !important;
        min-height:340px !important;
    }

    .np4-hero-copy{
        left:20px !important;
        right:20px;
        top:auto !important;
        bottom:28px;

        transform:none !important;
    }

    .np4-hero-copy h1{
        font-size:32px !important;
    }

    .np4-hero-live{
        right:14px !important;
        top:14px !important;
    }

    .np4-hero-actions>a{
        min-height:65px !important;

        grid-template-columns:1fr !important;

        text-align:center;
    }

    .np4-hero-actions i{
        display:none !important;
    }

    .np4-story-row{
        display:flex !important;

        overflow-x:auto;

        gap:10px !important;

        padding-bottom:5px;
    }

    .np4-story{
        width:150px;
        flex:0 0 150px;
    }

    .np4-post-image{
        min-height:250px !important;
    }

    .np4-post-image>img{
        min-height:250px;
    }

    .np4-post-actions{
        overflow-x:auto;
    }

    .np4-post-actions>a{
        white-space:nowrap;
    }
}

/* ============================================================
   SIGNATURE
   ============================================================ */

html::after{
    content:"BEDEEL_UI03_R2_PUBLIC";

    display:none;
}