/* ==========================================================================
   AI Narratives
   Components
   Version: 1.0

   Developed by
   Zytrix Core Systems Enterprise
   ========================================================================== */

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.navbar{

    background:#ffffff;

    box-shadow:0 2px 12px rgba(0,0,0,.06);

    position:sticky;

    top:0;

    z-index:999;

}

.navbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:76px;

}

.logo{

    font-size:24px;

    font-weight:700;

    color:#111827;

}

.nav-menu{

    display:flex;

    gap:28px;

    list-style:none;

}

.nav-menu a{

    color:#374151;

    font-weight:500;

}

.nav-menu a:hover{

    color:#2563EB;

}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 24px;

    border-radius:10px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.btn-primary{

    background:#111827;

    color:#fff;

}

.btn-primary:hover{

    background:#1F2937;

}

.btn-secondary{

    background:#2563EB;

    color:#fff;

}

.btn-outline{

    border:1px solid #D1D5DB;

    background:#fff;

    color:#111827;

}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card{

    background:#fff;

    border-radius:14px;

    padding:30px;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    transition:.3s;

}

.card:hover{

    transform:translateY(-5px);

}

/* ==========================================================================
   ARTICLE CARD
   ========================================================================== */

.article-card img{

    width:100%;

    border-radius:12px;

    margin-bottom:20px;

}

.article-card h3{

    margin-bottom:12px;

}

.article-card p{

    color:#6B7280;

}

/* ==========================================================================
   PAPER CARD
   ========================================================================== */

.paper-card{

    border-left:5px solid #2563EB;

}

/* ==========================================================================
   VIDEO CARD
   ========================================================================== */

.video-card iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

    border-radius:12px;

}

/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */

.product-card{

    text-align:center;

}

.product-price{

    font-size:30px;

    font-weight:700;

    margin:20px 0;

}

.product-status{

    display:inline-block;

    padding:6px 14px;

    border-radius:999px;

    background:#DCFCE7;

    color:#15803D;

    font-size:13px;

}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    background:#E5E7EB;

    font-size:12px;

    font-weight:600;

}

.badge-primary{

    background:#DBEAFE;

    color:#1D4ED8;

}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert{

    padding:18px;

    border-radius:10px;

    margin-bottom:20px;

}

.alert-success{

    background:#DCFCE7;

    color:#166534;

}

.alert-warning{

    background:#FEF3C7;

    color:#92400E;

}

.alert-danger{

    background:#FEE2E2;

    color:#991B1B;

}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-group{

    margin-bottom:20px;

}

.form-label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.form-control{

    width:100%;

    padding:14px;

    border:1px solid #D1D5DB;

    border-radius:10px;

}

/* ==========================================================================
   SEARCH BAR
   ========================================================================== */

.search-box{

    display:flex;

    gap:10px;

}

.search-box input{

    flex:1;

}

.search-box button{

    min-width:120px;

}

/* ==========================================================================
   TABLE
   ========================================================================== */

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    background:#F3F4F6;

    padding:14px;

}

.table td{

    padding:14px;

    border-bottom:1px solid #E5E7EB;

}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:50px;

}

.pagination a{

    padding:10px 16px;

    border-radius:8px;

    background:#F3F4F6;

}

.pagination a.active{

    background:#111827;

    color:#fff;

}

/* ==========================================================================
   AUTHOR BOX
   ========================================================================== */

.author-box{

    display:flex;

    gap:20px;

    align-items:center;

    padding:25px;

    background:#F9FAFB;

    border-radius:12px;

}

.author-avatar{

    width:80px;

    height:80px;

    border-radius:50%;

}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.newsletter{

    background:#111827;

    color:#fff;

    padding:60px;

    border-radius:16px;

    text-align:center;

}

.newsletter input{

    margin-top:20px;

}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer{

    background:#111827;

    color:#D1D5DB;

    padding:70px 0;

}

.footer-grid{

    display:grid;

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

    gap:40px;

}

.footer a{

    color:#D1D5DB;

}

.footer-bottom{

    margin-top:40px;

    padding-top:25px;

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

    text-align:center;

}

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

@media(max-width:768px){

.nav-menu{

display:none;

}

.footer-grid{

grid-template-columns:1fr;

}

.newsletter{

padding:35px 20px;

}

.author-box{

flex-direction:column;

text-align:center;

}

}

/* ==========================================================================
   END
   ========================================================================== */