/* ============================================
   Blog Styles — Naijasportsbettingtips
   Light theme, tight premium layout
   ============================================ */

/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#e8eaed;color:#1a1a2e;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;width:100%;max-width:100vw}

/* ===== HEADER OVERRIDES ===== */
.logo-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
@media(max-width:480px){.logo-text{max-width:100px;font-size:0.75rem}}
@media(max-width:360px){.logo-text{max-width:80px;font-size:0.7rem}}
.logo-tagline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
@media(max-width:480px){.logo-tagline{display:none}}
.header-actions{gap:6px}
@media(max-width:480px){
    .header-actions .btn{padding:4px 10px;font-size:0.6rem}
    .header-actions .live-pill{font-size:0.5rem;padding:2px 8px}
    .header-action-icons .header-icon-btn{width:28px;height:28px}
    .header-action-icons .header-icon-btn svg{width:16px;height:16px}
}

/* ===== MAIN WRAPPER ===== */
.main-wrapper{padding:16px 0 80px}
@media(max-width:768px){.main-wrapper{padding:12px 0 80px}}
@media(max-width:480px){.main-wrapper{padding:8px 0 80px}}

/* ===== CONTAINERS ===== */
.outer-container{max-width:1000px;margin:0 auto;padding:0;width:100%;box-sizing:border-box}
.inner-card{background:transparent;border-radius:0;padding:0;box-shadow:none;width:100%;box-sizing:border-box}
.content-wrapper{max-width:100%;margin:0 auto;width:100%}

/* ===== SEARCH BAR ===== */
.search-wrap{margin:0 0 16px;background:white;border-radius:12px;padding:0 16px;display:flex;align-items:center;gap:10px;border:1.5px solid #e8eaed;transition:all .25s;box-shadow:0 1px 4px rgba(0,0,0,.04);width:100%;box-sizing:border-box}
.search-wrap:focus-within{border-color:#1a1a2e;box-shadow:0 0 0 4px rgba(26,26,46,.06)}
.search-wrap i{color:#8e8e9a;font-size:.9rem;flex-shrink:0}
.search-wrap input{flex:1;border:none;outline:none;font-size:.85rem;font-family:'Inter',sans-serif;padding:10px 0;background:transparent;color:#1a1a2e;min-width:0}
.search-wrap input::placeholder{color:#b0b0be}
.search-wrap .go-btn{padding:6px 18px;border-radius:20px;background:#1a1a2e;color:white;border:none;font-weight:600;font-size:.65rem;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;white-space:nowrap;flex-shrink:0}
.search-wrap .go-btn:hover{background:#2a2a4a}

/* ===== QUICK INFO CAROUSEL ===== */
.quick-carousel-wrap{position:relative;overflow:hidden;touch-action:pan-y;margin:0 0 18px;width:100%}
.quick-carousel-track{display:flex;gap:12px;transition:transform .5s cubic-bezier(.25,.46,.45,.94);will-change:transform;padding:4px 0}
.quick-card{flex-shrink:0;width:220px;background:white;border-radius:14px;padding:12px 16px;border:1px solid #f0f1f4;display:flex;align-items:center;gap:14px;transition:all .25s;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.quick-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.qc-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.qc-icon.blue{background:#dbeafe;color:#2563eb}
.qc-icon.amber{background:#fef3c7;color:#f59e0b}
.qc-icon.green{background:#d1fae5;color:#10b981}
.qc-icon.purple{background:#ede9fe;color:#7c3aed}
.qc-body{flex:1;min-width:0}
.qc-label{font-size:.45rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#8e8e9a}
.qc-value{font-size:.75rem;font-weight:800;color:#1a1a2e;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qc-sub{font-size:.5rem;color:#8e8e9a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== HERO SLIDER ===== */
.hero-wrap{margin:0 0 20px;border-radius:18px;overflow:hidden;position:relative;background:#0f1a2e;box-shadow:0 6px 24px rgba(0,0,0,.08);width:100%}
.hero-track{display:flex;transition:transform .6s cubic-bezier(.25,.46,.45,.94);will-change:transform}
.hero-slide{min-width:100%;position:relative;height:340px;overflow:hidden}
.hero-slide img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
.hero-slide .slide-content{position:absolute;bottom:0;left:0;right:0;padding:24px 22px 20px;background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 55%,transparent 100%)}
.hero-slide .slide-content .tag{display:inline-flex;align-items:center;gap:5px;font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#facc15;margin-bottom:4px}
.hero-slide .slide-content h2{font-size:1.3rem;font-weight:800;color:white;line-height:1.2;margin-bottom:4px;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.hero-slide .slide-content .meta{display:flex;align-items:center;gap:12px;font-size:.55rem;color:rgba(255,255,255,.7)}
.hero-slide .slide-counter{position:absolute;top:12px;right:14px;background:rgba(0,0,0,.55);color:white;padding:2px 10px;border-radius:16px;font-size:.5rem;font-weight:600;backdrop-filter:blur(4px)}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 10px;z-index:5;pointer-events:none}
.hero-nav button{pointer-events:auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:white;font-size:.8rem;cursor:pointer;transition:all .2s;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.hero-nav button:hover{background:rgba(255,255,255,.22)}
.hero-dots{position:absolute;bottom:12px;right:18px;display:flex;gap:5px;z-index:5}
.hero-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s}
.hero-dots span.active{background:#facc15;width:20px;border-radius:3px}

/* ===== SECTION TITLES ===== */
.section-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px}
.section-head h3{font-size:1.1rem;font-weight:800;color:#1a1a2e;display:flex;align-items:center;gap:8px;letter-spacing:-0.3px}
.section-head h3 i{font-size:.9rem}
.section-head .more-link{font-size:.65rem;color:#6b6b7a;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:4px;transition:color .2s;white-space:nowrap}
.section-head .more-link:hover{color:#1a1a2e}
.section-head .more-link i{font-size:.5rem}

/* ===== ODD BUBBLES CAROUSEL ===== */
.bubbles-carousel-wrap{position:relative;overflow:hidden;touch-action:pan-y;margin:0 0 18px;width:100%}
.bubbles-track{display:flex;gap:12px;transition:transform .5s cubic-bezier(.25,.46,.45,.94);will-change:transform;padding:4px 0}
.bubble-card{flex-shrink:0;width:260px;background:white;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid #f0f1f4;cursor:pointer;transition:all .25s}
.bubble-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.bubble-card .bub-img{height:130px;background:linear-gradient(135deg,#1a2d4a,#0b1a33);position:relative;overflow:hidden}
.bubble-card .bub-img img{width:100%;height:100%;object-fit:cover}
.bubble-card .bub-img .bub-badge{position:absolute;top:8px;left:8px;background:#facc15;color:#1a1a2e;padding:2px 8px;border-radius:8px;font-size:.4rem;font-weight:800;text-transform:uppercase}
.bubble-card .bub-body{padding:10px 12px 12px}
.bubble-card .bub-body .bub-cat{font-size:.45rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#f59e0b}
.bubble-card .bub-body h4{font-size:.75rem;font-weight:700;line-height:1.3;color:#1a1a2e;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0}
.bubble-card .bub-body .bub-meta{display:flex;align-items:center;gap:8px;font-size:.5rem;color:#8e8e9a;padding-top:6px;border-top:1px solid #f0f1f4}

/* ===== FOR YOU FEED ===== */
.feed-wrap{margin:0 0 16px;width:100%}
.feed-item{background:white;border-radius:16px;padding:16px 18px;display:flex;gap:18px;border:1px solid #f0f1f4;cursor:pointer;transition:all .25s;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.03);width:100%;box-sizing:border-box}
.feed-item:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
.feed-item .thumb{width:180px;min-height:120px;border-radius:12px;background:linear-gradient(135deg,#1a2d4a,#0b1a33);flex-shrink:0;overflow:hidden;position:relative}
.feed-item .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.feed-item:hover .thumb img{transform:scale(1.05)}
.feed-item .info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.feed-item .info .cat{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#2563eb;margin-bottom:3px}
.feed-item .info .cat i{margin-right:4px}
.feed-item .info h4{font-size:1.05rem;font-weight:800;line-height:1.3;color:#1a1a2e;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:3px 0;letter-spacing:-0.2px}
.feed-item .info .meta{display:flex;align-items:center;gap:12px;font-size:.55rem;color:#8e8e9a;flex-wrap:wrap}
.feed-item .info .meta i{margin-right:3px}
.feed-item .info .actions{display:flex;gap:4px;margin-top:6px;border-top:1px solid #f0f1f4;padding-top:6px;flex-wrap:wrap}
.feed-item .info .actions .act{background:transparent;border:none;font-size:.55rem;color:#8e8e9a;cursor:pointer;display:flex;align-items:center;gap:3px;padding:2px 10px;border-radius:8px;font-family:'Inter',sans-serif;transition:all .15s}
.feed-item .info .actions .act:hover{background:#f0f1f4;color:#1a1a2e}
.feed-item .info .actions .act .cnt{font-weight:600}
.feed-item .info .actions .act.liked{color:#2563eb}
.feed-item .info .actions .act.bookmarked{color:#facc15}

/* ===== AD BLOCKS ===== */
.ad-block{margin:0 0 12px;background:linear-gradient(135deg,#fafbfc,#f0f1f4);border-radius:12px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;border:1px solid #e8eaed;flex-wrap:wrap;gap:6px;width:100%;box-sizing:border-box}
.ad-block .ad-tag{font-size:.45rem;text-transform:uppercase;letter-spacing:.8px;color:#8e8e9a}
.ad-block .ad-body{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ad-block .ad-body .ad-title{font-weight:600;font-size:.75rem;color:#1a1a2e}
.ad-block .ad-body .ad-cta{padding:4px 16px;border-radius:20px;color:white;border:none;font-weight:700;font-size:.55rem;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s}
.ad-block .ad-body .ad-cta:hover{filter:brightness(0.9)}

/* ===== LOAD MORE ===== */
.load-more{width:100%;padding:14px;background:white;border:1.5px solid #e8eaed;border-radius:12px;font-weight:600;font-size:.75rem;color:#4a4a5a;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;margin-top:4px;box-sizing:border-box}
.load-more:hover{background:#f8f9fa;border-color:#1a1a2e;color:#1a1a2e}
.load-more i{margin-right:6px}

/* ===== TRENDING CAROUSEL ===== */
.trending-wrap{position:relative;overflow:hidden;touch-action:pan-y;margin:0 0 18px;width:100%}
.trending-track{display:flex;gap:12px;transition:transform .5s cubic-bezier(.25,.46,.45,.94);will-change:transform;padding:4px 0}
.trend-card{flex-shrink:0;width:200px;border-radius:14px;overflow:hidden;cursor:pointer;transition:all .25s;position:relative;height:160px;background:#1a2d4a;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.trend-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.trend-card img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;transition:transform .5s}
.trend-card:hover img{transform:scale(1.05)}
.trend-card .overlay{position:absolute;bottom:0;left:0;right:0;padding:16px 14px 14px;background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.4) 60%,transparent 100%);z-index:2;pointer-events:none}
.trend-card .overlay .badge{display:inline-flex;align-items:center;gap:3px;background:#facc15;color:#1a1a2e;padding:2px 8px;border-radius:12px;font-size:.4rem;font-weight:800;text-transform:uppercase;letter-spacing:.3px;box-shadow:0 2px 6px rgba(0,0,0,.25);margin-bottom:4px;pointer-events:auto}
.trend-card .overlay .badge i{font-size:.35rem}
.trend-card .overlay h5{font-size:.7rem;font-weight:800;color:white;line-height:1.2;text-shadow:0 2px 6px rgba(0,0,0,.4);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trend-card .overlay .tmeta{display:flex;align-items:center;gap:6px;font-size:.45rem;color:rgba(255,255,255,.75);margin-top:3px}
.trend-card .overlay .tmeta i{font-size:.35rem;margin-right:1px}

/* ===== FOOTER ===== */
.footer{background:white;border-top:1px solid #e8eaed;padding:16px 20px;text-align:center;width:100%;box-sizing:border-box}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-bottom:8px}
.footer-links a{color:#8e8e9a;font-size:.65rem;text-decoration:none;transition:color .2s}
.footer-links a:hover{color:#1a1a2e}
.footer p{color:#b0b0be;font-size:.6rem}

/* ===== MOBILE BOTTOM NAV ===== */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(0,0,0,.05);padding:4px 0 env(safe-area-inset-bottom,6px);z-index:100;justify-content:space-around;align-items:center}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:1px;text-decoration:none;color:#8e8e9a;font-size:.45rem;font-weight:600;padding:3px 8px;position:relative;transition:color .2s}
.nav-item.active{color:#1a1a2e}
.nav-item .nav-icon{font-size:1.1rem}
.nav-item .nav-badge{position:absolute;top:-1px;right:2px;background:#dc2626;color:white;border-radius:50%;padding:0 5px;font-size:.35rem;font-weight:700}
@media(max-width:768px){.bottom-nav{display:flex}}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1024px){
    .hero-slide{height:300px}
    .hero-slide .slide-content h2{font-size:1.1rem}
    .quick-card{width:200px}
    .content-wrapper{max-width:100%}
}
@media(max-width:768px){
    .hero-slide{height:250px}
    .hero-slide .slide-content h2{font-size:1rem}
    .bubble-card{width:200px}
    .bubble-card .bub-img{height:100px}
    .trend-card{width:160px;height:130px}
    .quick-card{width:180px;padding:10px 12px}
    .feed-item .thumb{width:130px;min-height:90px}
    .feed-item .info h4{font-size:.9rem}
    .section-head h3{font-size:.95rem}

    /* Tighten search bar spacing */
    .standalone-search-bar{margin-bottom:0!important;padding:6px 12px 0 12px!important;background:#e8eaed;border-bottom:none!important}
    .standalone-search-bar+.main-wrapper,.standalone-search-bar+main{margin-top:0!important;padding-top:0!important}
    main.main-wrapper{padding:0 0 80px!important;gap:0!important;background:#e8eaed}
    .content-with-sidebar{padding-top:0!important}
    .main-content{padding-top:0!important}
    .outer-container{padding-top:0!important;margin-top:0!important}
    .inner-card{margin-top:0!important;padding-top:0!important}
    .content-wrapper{padding-top:0!important}
    .quick-carousel-wrap{margin-top:4px!important}
}
@media(max-width:480px){
    .hero-slide{height:200px}
    .hero-slide .slide-content{padding:16px 14px 14px}
    .hero-slide .slide-content h2{font-size:.85rem}
    .search-wrap{margin:10px 0;padding:0 10px}
    .search-wrap input{font-size:.75rem;padding:8px 0}
    .search-wrap .go-btn{padding:4px 12px;font-size:.55rem}
    .section-head{margin:0 0 8px}
    .section-head h3{font-size:.85rem}
    .quick-card{width:160px;padding:8px 10px}
    .qc-value{font-size:.65rem}
    .bubble-card{width:160px}
    .bubble-card .bub-img{height:80px}
    .bubble-card .bub-body{padding:8px 10px 10px}
    .bubble-card .bub-body h4{font-size:.6rem}
    .feed-wrap{margin:0 0 12px}
    .feed-item{padding:10px 8px;gap:8px;margin-bottom:8px}
    .feed-item .thumb{width:90px;min-height:65px}
    .feed-item .info h4{font-size:.8rem}
    .trend-card{width:140px;height:110px}
    .trend-card .overlay{padding:10px 10px 10px}
    .trend-card .overlay h5{font-size:.55rem}
    .footer{padding:12px}
    .footer-links{gap:4px 10px}
    .footer-links a{font-size:.55rem}
}
@media(max-width:360px){
    .hero-slide{height:160px}
    .hero-slide .slide-content h2{font-size:.7rem}
    .hero-nav button{width:26px;height:26px;font-size:.6rem}
    .quick-card{width:140px}
    .bubble-card{width:140px}
    .bubble-card .bub-img{height:70px}
    .trend-card{width:120px;height:95px}
    .feed-item .thumb{width:70px;min-height:50px}
    .feed-item .info h4{font-size:.7rem}
}
               /* FAB as sidebar menu item */
        .sidebar-fab-item {
            margin-top: 8px;
        }
        .sidebar-fab-item .sidebar-nav-icon {
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            padding: 6px;
            color: #fff !important;
            stroke: #fff;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        .sidebar-fab-item:hover .sidebar-nav-icon {
            background: linear-gradient(135deg, #764ba2, #667eea);
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
        }