/* =========================================================
   Nabu Portal — stylesheet.css
   نسخة مرتبة ومنظفة
========================================================= */

/* -------------------------
   متغيرات التصميم
------------------------- */
:root{
    --navy:#071d46;
    --blue:#0d4da2;
    --gold:#d9a441;
    --orange:#f3a11b;
    --text:#10264a;
    --muted:#64748b;
    --bg:#f6f9fd;
    --white:#ffffff;
    --radius:22px;
    --shadow:0 18px 50px rgba(7,29,70,.13);
}

/* -------------------------
   الإعدادات العامة
------------------------- */
*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Tahoma,Arial,sans-serif;
    line-height:1.8;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    height:auto;
}

.container{
    width:min(1180px,calc(100% - 32px));
    margin-inline:auto;
}

/* -------------------------
   الشريط العلوي والهيدر
------------------------- */
.topbar{
    padding:8px 16px;
    background:var(--navy);
    color:#f4c15d;
    text-align:center;
    font-size:14px;
}

.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:#fff;
    box-shadow:0 8px 30px rgba(7,29,70,.08);
}

.header-grid{
    min-height:104px;
    display:grid;
    grid-template-columns:minmax(250px,1.2fr) auto auto;
    align-items:center;
    gap:28px;
}

.brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:14px;
}

.brand-logo{
    width:78px !important;
    height:78px !important;
    max-width:78px !important;
    flex:0 0 78px;
    object-fit:contain;
    border-radius:18px;
}

.brand-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.35;
}

.brand-copy strong{
    color:var(--navy);
    font-size:23px;
}

.brand-copy small{
    color:var(--gold);
    font-size:14px;
    font-weight:700;
}

.brand-copy em{
    max-width:340px;
    overflow:hidden;
    color:var(--muted);
    font-size:12px;
    font-style:normal;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.main-nav ul{
    display:flex;
    align-items:center;
    gap:24px;
    margin:0;
    padding:0;
    list-style:none;
}

.main-nav a{
    color:var(--navy);
    font-size:15px;
    font-weight:700;
}

.main-nav a:hover{
    color:var(--orange);
}

.header-actions{
    display:flex;
    gap:10px;
}

.menu-toggle{
    display:none;
    border:0;
    background:transparent;
    color:var(--navy);
    font-size:28px;
}

/* -------------------------
   الأزرار
------------------------- */
.btn{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border-radius:13px;
    font-weight:700;
    transition:.25s ease;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-gold{
    background:linear-gradient(135deg,#f6b436,#e58b07);
    color:#fff;
    box-shadow:0 10px 25px rgba(229,139,7,.25);
}

.btn-outline{
    border:1px solid #c8d8ee;
    color:var(--blue);
}

.btn-glass{
    border:1px solid rgba(255,255,255,.55);
    background:rgba(255,255,255,.08);
    color:#fff;
    backdrop-filter:blur(8px);
}

/* -------------------------
   واجهة البداية Hero
------------------------- */
.hero{
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 20% 20%,#174f99 0,#0c3268 42%,#061a3d 100%);
    color:#fff;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(
        135deg,
        transparent 0 47%,
        rgba(255,255,255,.035) 48% 51%,
        transparent 52%
    );
    background-size:150px 150px;
}

.hero-grid{
    position:relative;
    min-height:620px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:36px;
}

.hero-copy{
    padding:70px 0;
}

.eyebrow{
    display:inline-block;
    margin-bottom:12px;
    color:#f4c15d;
    font-weight:700;
}

.hero h1{
    margin:0 0 18px;
    font-size:clamp(40px,5vw,72px);
    line-height:1.15;
}

.hero p{
    max-width:620px;
    color:#dce8fb;
    font-size:18px;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:28px;
}

.hero-media{
    align-self:stretch;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
}

.hero-media img{
    width:100%;
    height:100%;
    max-height:620px;
    object-fit:cover;
    object-position:center;
    border-radius:0 0 0 70px;
}

/* -------------------------
   السلايدر الإعلاني
------------------------- */
.ad-slider{
    position:relative;
    z-index:5;
    min-height:142px;
    margin-top:-38px;
    overflow:hidden;
    border:1px solid rgba(217,164,65,.55);
    border-radius:24px;
    background:linear-gradient(135deg,#0b3f84,#071d46);
    box-shadow:var(--shadow);
}

.ad-slide{
    display:none;
    grid-template-columns:150px 1fr auto;
    align-items:center;
    gap:24px;
    padding:20px 28px;
    color:#fff;
}

.ad-slide.active{
    display:grid;
}

.ad-slide img,
.ad-placeholder{
    width:140px;
    height:98px;
    border-radius:15px;
}

.ad-slide img{
    object-fit:cover;
}

.ad-placeholder{
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.08);
    color:#f4c15d;
    font-size:40px;
}

.ad-slide span{
    display:flex;
    flex-direction:column;
}

.ad-slide b{
    font-size:23px;
}

.ad-slide small{
    color:#dbe8fa;
}

.ad-slide em{
    padding:10px 18px;
    border-radius:12px;
    background:var(--orange);
    font-style:normal;
}

.slider-dots{
    position:absolute;
    bottom:10px;
    left:50%;
    display:flex;
    gap:6px;
    transform:translateX(-50%);
}

.slider-dots button{
    width:9px;
    height:9px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#9bb6d8;
}

.slider-dots button.active{
    width:24px;
    border-radius:12px;
    background:var(--gold);
}

/* -------------------------
   الأقسام العامة
------------------------- */
.section{
    padding:86px 0;
}

.section-head{
    max-width:700px;
    margin:0 auto 36px;
    text-align:center;
}

.section-head span{
    color:var(--orange);
    font-weight:700;
}

.section-head h2{
    margin:4px 0 8px;
    color:var(--navy);
    font-size:38px;
}

.section-head p{
    color:var(--muted);
}

/* -------------------------
   بطاقات أقسام المنصة
------------------------- */
#sections.main-sections{
    margin-top:0;
    padding-top:30px;
    padding-bottom:20px;
}

#sections .section-head{
    margin-bottom:24px;
}

#sections .cards-grid{
    margin-top:0;
}

.cards-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.portal-card{
    position:relative;
    min-height:315px;
    overflow:hidden;
    padding:28px;
    border-radius:24px;
    color:#fff;
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(25px);
    transition:.5s ease;
}

.portal-card.visible,
.guide-card.visible,
.reveal.visible{
    opacity:1;
    transform:none;
}

.portal-card::before{
    content:"";
    position:absolute;
    right:-30%;
    bottom:-45%;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}

.portal-card:hover{
    transform:translateY(-10px) rotateX(2deg);
}

.portal-card .number{
    display:none !important;
}

.portal-card .icon{
    margin:26px 0 12px;
}

/* أيقونات زجاجية داخل بطاقات الأقسام */
.portal-card .glass-icon{
    min-height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.portal-card .glass-icon img{
    width:90px;
    height:90px;
    max-width:90px;
    max-height:90px;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 10px 20px rgba(255,255,255,.20));
    transition:.35s ease;
}

.portal-card:hover .glass-icon img{
    transform:scale(1.08) rotate(-3deg);
}

.portal-card h3{
    margin:0 0 8px;
    font-size:22px;
}

.portal-card p{
    color:#eaf2ff;
}

.portal-card b{
    display:block;
    margin-top:20px;
}

.portal-card.blue{
    background:linear-gradient(145deg,#0b4ea4,#082b60);
}

.portal-card.purple{
    background:linear-gradient(145deg,#6a37a8,#281a59);
}

.portal-card.gold{
    background:linear-gradient(145deg,#b87918,#5d3509);
}

.portal-card.green{
    background:linear-gradient(145deg,#14875c,#083b31);
}

/* -------------------------
   قسم هوية المنصة
------------------------- */
.about-section{
    background:#fff;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:40px;
}

.about-grid h2{
    margin:8px 0;
    color:var(--navy);
    font-size:38px;
}

.eyebrow.dark{
    color:var(--orange);
}

blockquote{
    margin:0;
    padding:42px;
    border-right:6px solid var(--gold);
    border-radius:24px;
    background:linear-gradient(135deg,#0c3f84,#071d46);
    color:#fff;
    font-size:25px;
    box-shadow:var(--shadow);
}

/* -------------------------
   دليل استخدام الموقع
------------------------- */
#guide.guide-section{
    margin:0;
    padding-top:24px;
    padding-bottom:45px;
}

#guide .section-head{
    margin-top:0;
    margin-bottom:28px;
}

.guide-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.guide-card{
    padding:18px;
    border-radius:22px;
    background:#fff;
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(25px);
    transition:.45s ease;
}

.guide-card:hover{
    transform:translateY(-8px);
}

/* إطار الأيقونة */
.guide-image{
    height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    overflow:hidden;
    padding:20px;
    border-radius:18px;
    background:linear-gradient(135deg,#dbeaff,#f8f2e6);
}

/* الأيقونات الزجاجية — حجم مصحح */
.guide-image img,
.guide-custom-icon{
    width:90px !important;
    height:90px !important;
    max-width:90px !important;
    max-height:90px !important;
    display:block;
    margin:auto;
    object-fit:contain !important;
    filter:drop-shadow(0 8px 18px rgba(13,77,162,.18));
    transition:.35s ease;
}

.guide-card:hover .guide-image img,
.guide-card:hover .guide-custom-icon{
    transform:scale(1.08);
}

/* الأيقونات النصية القديمة */
.guide-image span{
    color:var(--blue);
    font-size:50px;
    font-weight:900;
}

.guide-card small{
    color:var(--orange);
    font-size:15px;
    font-weight:700;
}

.guide-card h3{
    margin:6px 0 10px;
    color:var(--navy);
    font-size:21px;
}

.guide-card p{
    color:var(--muted);
    font-size:16px;
    line-height:1.8;
}

.guide-card b{
    color:var(--blue);
}

.guide-button{
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:18px;
    padding:14px 20px;
    border-radius:14px;
    background:#1f66d1;
    color:#fff !important;
    font-size:18px;
    font-weight:700;
    text-decoration:none;
    transition:.3s ease;
}

.guide-button:hover{
    background:#0d4fb0;
    transform:translateY(-2px);
}

/* -------------------------
   الإحصائيات
------------------------- */
.stats{
    padding:32px 0;
    background:var(--navy);
    color:#fff;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.stats-grid div{
    border-left:1px solid rgba(255,255,255,.12);
    text-align:center;
}

.stats-grid div:last-child{
    border:0;
}

.stats b{
    display:block;
    color:#f4c15d;
    font-size:34px;
}

.stats span{
    color:#dce8fb;
}

/* -------------------------
   الفوتر
------------------------- */
.site-footer{
    padding:56px 0 0;
    background:#061934;
    color:#cbd8eb;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:34px;
}

.site-footer h3,
.site-footer h4{
    color:#fff;
}

.site-footer a{
    display:block;
    margin:8px 0;
}

.copyright{
    margin-top:38px;
    padding:18px;
    border-top:1px solid rgba(255,255,255,.1);
    text-align:center;
}

/* -------------------------
   مساعد نابو
------------------------- */
.chat-widget{
    position:fixed;
    left:24px;
    bottom:24px;
    z-index:100;
}

.chat-fab{
    width:72px;
    height:72px;
    overflow:hidden;
    padding:0;
    border:3px solid var(--gold);
    border-radius:50%;
    background:var(--navy);
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    cursor:pointer;
}

.chat-fab img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.chat-panel{
    position:absolute;
    left:0;
    bottom:86px;
    width:350px;
    max-width:calc(100vw - 32px);
    display:none;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
    box-shadow:0 25px 70px rgba(7,29,70,.28);
}

.chat-panel.open{
    display:block;
}

.chat-panel header{
    display:flex;
    justify-content:space-between;
    padding:16px 20px;
    background:var(--blue);
    color:#fff;
}

.chat-close{
    border:0;
    background:none;
    color:#fff;
    font-size:28px;
}

.chat-messages{
    max-height:240px;
    overflow:auto;
    padding:18px;
    background:#f2f7ff;
}

.chat-messages p{
    padding:12px 14px;
    border-radius:14px;
}

.chat-messages .bot{
    border:1px solid #dbe7f7;
    background:#fff;
}

.chat-messages .user{
    background:#0b4da2;
    color:#fff;
}

.quick-questions{
    display:grid;
    gap:9px;
    padding:14px;
}

.quick-questions button{
    padding:12px;
    border:1px solid #cadcf4;
    border-radius:12px;
    background:#fff;
    color:var(--blue);
    text-align:right;
    cursor:pointer;
}

.whatsapp{
    display:block;
    margin:0 14px 14px;
    padding:11px;
    border-radius:12px;
    background:#169b53;
    color:#fff;
    text-align:center;
}

/* تم حذف الشريط السفلي للموبايل */
.mobile-dock{
    display:none !important;
}

/* -------------------------
   الصفحات الداخلية
------------------------- */
.article-shell,
.error-page{
    padding:34px;
    border-radius:24px;
    background:#fff;
    box-shadow:var(--shadow);
}

.post-card{
    margin-bottom:22px;
    padding:18px;
    border-radius:20px;
    background:#fff;
    box-shadow:var(--shadow);
}

/* منع الفراغات الزائدة */
main,
.site-main,
.content-area,
.entry-content{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

/* -------------------------
   الأجهزة اللوحية
------------------------- */
@media(max-width:1050px){
    .header-grid{
        grid-template-columns:1fr auto;
    }

    .main-nav{
        grid-column:1/-1;
        display:none;
    }

    .main-nav.open{
        display:block;
    }

    .main-nav ul{
        justify-content:center;
        padding-bottom:18px;
    }

    .menu-toggle{
        display:block;
    }

    .header-actions{
        display:none;
    }

    .cards-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* -------------------------
   الهواتف
------------------------- */
@media(max-width:760px){
    body{
        padding-bottom:0;
    }

    .container{
        width:min(100% - 22px,1180px);
    }

    .topbar{
        font-size:11px;
    }

    .header-grid{
        min-height:78px;
        grid-template-columns:1fr auto;
        gap:10px;
    }

    .brand-logo{
        width:56px !important;
        height:56px !important;
        max-width:56px !important;
        flex-basis:56px;
        border-radius:14px;
    }

    .brand-copy strong{
        font-size:17px;
    }

    .brand-copy small{
        font-size:11px;
    }

    .brand-copy em{
        display:none;
    }

    .main-nav ul{
        flex-direction:column;
        align-items:stretch;
        padding:10px 0 18px;
    }

    .main-nav a{
        display:block;
        padding:9px 0;
    }

    .hero-grid{
        min-height:auto;
        grid-template-columns:1fr;
    }

    .hero-copy{
        padding:56px 0 26px;
        text-align:center;
    }

    .hero h1{
        font-size:39px;
    }

    .hero p{
        font-size:15px;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-media{
        height:370px;
    }

    .hero-media img{
        border-radius:28px 28px 0 0;
        object-position:center top;
    }

    .ad-slider{
        min-height:160px;
        margin-top:-20px;
    }

    .ad-slide,
    .ad-slide.active{
        grid-template-columns:80px 1fr;
        padding:18px;
    }

    .ad-slide img,
    .ad-placeholder{
        width:80px;
        height:80px;
    }

    .ad-slide em{
        display:none;
    }

    .ad-slide b{
        font-size:17px;
    }

    .section{
        padding:58px 0;
    }

    .section-head h2,
    .about-grid h2{
        font-size:29px;
    }

    .cards-grid,
    .guide-grid,
    .about-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

    #sections.main-sections{
        padding-top:22px;
        padding-bottom:14px;
    }

    #sections .section-head{
        margin-bottom:20px;
    }

    #guide.guide-section{
        padding-top:18px;
    }

    .portal-card{
        min-height:270px;
    }

    .portal-card .glass-icon img{
        width:82px;
        height:82px;
        max-width:82px;
        max-height:82px;
    }

    .guide-image{
        height:150px;
    }

    .guide-image img,
    .guide-custom-icon{
        width:82px !important;
        height:82px !important;
        max-width:82px !important;
        max-height:82px !important;
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

    .stats-grid div{
        border:0;
    }

    .chat-widget{
        left:14px;
        bottom:18px;
    }

    .chat-fab{
        width:62px;
        height:62px;
    }

    .chat-panel{
        bottom:72px;
    }

    .site-footer{
        padding-bottom:30px;
    }
}