/* ============================================================
   ebook.php — page styles
   Moved out of the page on 14 Aug 2026. Values come from
   css/tokens.css: edit a token there and it changes here too.
   ============================================================ */


        * { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif; }
        body { background:var(--gx-bg-alt); }
        .navbar { background:white; padding:1rem 5%; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 10px rgba(0,0,0,0.05); position:sticky; top:0; z-index:1000; }
        .logo { font-size:var(--gx-fs-2xl); font-weight:700; color:var(--gx-brand); }
        .logo span { color:var(--gx-accent); }
        .nav-menu { display:flex; list-style:none; gap:2rem; align-items:center; }
        .nav-item { position:relative; }
        .nav-link { color:var(--gx-brand); text-decoration:none; font-weight:500; padding:0.5rem 1rem; border-radius:var(--gx-r-sm); transition:all 0.3s; display:flex; align-items:center; gap:8px; }
        .nav-link:hover { background:#f0f4fe; color:var(--gx-accent); }
        .dropdown-menu { position:absolute; top:100%; left:0; background:white; border-radius:15px; box-shadow:0 20px 40px rgba(0,0,0,0.15); width:260px; padding:0.8rem 0; list-style:none; opacity:0; visibility:hidden; transform:translateY(20px); transition:all 0.3s; z-index:100; border:1px solid var(--gx-surface-cool); }
        .nav-item:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(10px); }
        .dropdown-item { padding:0.7rem 1.5rem; text-decoration:none; color:var(--gx-brand); display:flex; align-items:center; gap:12px; font-size:0.95rem; transition:all 0.3s; }
        .dropdown-item i { width:1.8rem; font-size:var(--gx-fs-xl); color:var(--gx-accent); }
        .dropdown-item:hover { background:#f0f4fe; color:var(--gx-accent); transform:translateX(5px); }
        .nav-right { display:flex; align-items:center; gap:1.5rem; }
        .cart-icon { position:relative; cursor:pointer; }
        .cart-icon i { font-size:1.3rem; color:var(--gx-brand); }
        .cart-badge { position:absolute; top:-8px; right:-8px; background:var(--gx-accent); color:var(--gx-brand); border-radius:var(--gx-r-circle); width:20px; height:20px; font-size:var(--gx-fs-xxs); display:flex; align-items:center; justify-content:center; font-weight:700; }
       .page-header {
    background: linear-gradient(135deg, rgba(15,23,42,0.85) 0%, rgba(30,41,59,0.9) 100%),
                url('https://images.unsplash.com/photo-1532012197267-da84d127e765?w=1600&h=400&fit=crop') center/cover no-repeat;
    color: white;
    padding: 3rem 5%;
    text-align: center;
    position: relative;
}
        .page-header h1 { font-size:var(--gx-fs-5xl); margin-bottom:1rem; }
        .page-header p { font-size:var(--gx-fs-lg); opacity:0.95; max-width:700px; margin:0 auto; }
        .filter-section { max-width:1300px; margin:2rem auto 1rem; padding:0 20px; }
        .filter-tabs { display:flex; flex-wrap:wrap; gap:12px; border-bottom:2px solid var(--gx-surface-cool); padding-bottom:1rem; }
        .filter-tab { padding:0.6rem 1.8rem; border-radius:var(--gx-r-pill); background:#f0f4fe; color:var(--gx-brand); font-weight:500; cursor:pointer; transition:var(--gx-transition-fast); border:1px solid transparent; }
        .filter-tab:hover { background:var(--gx-accent); color:white; }
        .filter-tab.active { background:var(--gx-brand); color:white; border-color:var(--gx-accent); }
        .content-section { max-width:1300px; margin:2rem auto; padding:0 20px; }
        .explore-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
        .explore-heading h2 { font-size:var(--gx-fs-3xl); color:var(--gx-brand); font-weight:700; }
        .explore-heading i { color:var(--gx-accent); margin-right:10px; }
        .items-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; margin-bottom:2rem; }
        .item-card { background:white; border-radius:var(--gx-r-lg); overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.05); transition:var(--gx-transition); border:1px solid var(--gx-surface-cool); display:flex; flex-direction:column; cursor:pointer; position:relative; }
        .item-card:hover { transform:translateY(-5px); box-shadow:0 20px 35px rgba(30,42,90,0.1); border-color:var(--gx-accent); }
        .card-image { width:100%; height:200px; object-fit:cover; border-top-left-radius:19px; border-top-right-radius:19px; }
        .card-header { padding:1.5rem 1.5rem 0.5rem 1.5rem; display:flex; flex-direction:column; position:relative; }
        .ebook-badge { position:absolute; top:-190px; right:1rem; background:var(--gx-accent); color:var(--gx-brand); padding:0.3rem 0.8rem; border-radius:var(--gx-r-xl); font-size:var(--gx-fs-xxs); font-weight:700; display:flex; align-items:center; gap:5px; z-index:2; }
        .free-badge { position:absolute; top:-190px; left:1rem; background:var(--gx-success); color:white; padding:0.3rem 0.8rem; border-radius:var(--gx-r-xl); font-size:var(--gx-fs-xxs); font-weight:700; display:flex; align-items:center; gap:5px; z-index:2; }
        .card-header h3 { color:var(--gx-brand); font-size:var(--gx-fs-2xl); font-weight:700; margin-bottom:0.5rem; }
        .card-badge { background:var(--gx-accent); color:var(--gx-brand); padding:0.3rem 1rem; border-radius:var(--gx-r-xl); font-size:var(--gx-fs-xs); font-weight:700; display:inline-block; width:fit-content; }
        .card-content { padding:0 1.5rem 1.5rem 1.5rem; flex:1; display:flex; flex-direction:column; }
        .card-content p { color:#2d3a5e; font-size:var(--gx-fs-md); line-height:1.6; margin-bottom:1.2rem; flex:1; }
        .card-meta { display:flex; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
        .meta-item { background:#f0f4fe; padding:0.3rem 1rem; border-radius:var(--gx-r-xl); font-size:0.8rem; font-weight:500; color:var(--gx-brand); display:flex; align-items:center; gap:5px; }
        .meta-item i { color:var(--gx-accent); font-size:var(--gx-fs-xxs); }
        .format-badge { display:inline-block; background:#e8edf9; color:var(--gx-brand); font-weight:600; font-size:var(--gx-fs-sm); padding:0.4rem 1.2rem; border-radius:var(--gx-r-xl); border:1px solid #d5deef; margin-bottom:0.5rem; align-self:flex-start; }
        .price-tag { font-size:var(--gx-fs-xl); font-weight:700; margin-bottom:0.8rem; }
        .price-paid { color:var(--gx-brand); }
        .price-free { color:var(--gx-success); }
        /* `border:none` used to sit at the front of this rule as well as the
           1px rule below it. The later one wins, so the reset was dead code and
           the button has always drawn the translucent border - the duplicate is
           removed rather than the border, so nothing changes on screen. */
        .buy-now-btn { background:linear-gradient(135deg,var(--gx-accent),#ff6b6b); color:var(--gx-brand); padding:0.8rem 1.5rem; border-radius:var(--gx-r-pill); font-weight:700; font-size:0.95rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.3s; margin-top:1rem; width:100%; border:1px solid rgba(255,255,255,0.3); box-shadow:0 4px 12px rgba(255,140,66,0.3); text-decoration:none; }
        .free-download-btn { background:linear-gradient(135deg,var(--gx-success),var(--gx-success-dark)); color:white; }
        .buy-now-btn:hover { background:linear-gradient(135deg,#ff7a2a,#ff5252); transform:scale(1.02); box-shadow:0 6px 16px rgba(255,140,66,0.4); }
        .detail-panel { background:white; border-radius:24px; margin:30px 0 20px; border:1px solid var(--gx-surface-cool); box-shadow:0 20px 40px rgba(0,0,0,0.05); overflow:hidden; display:none; }
        .detail-panel.show { display:block; }
        .detail-header { background:linear-gradient(135deg,#f8faff,white); padding:2.5rem; border-bottom:1px solid var(--gx-surface-cool); display:flex; gap:2rem; flex-wrap:wrap; }
        .detail-cover { flex:0 0 200px; }
        .detail-cover img { width:100%; border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,0.1); }
        .detail-info { flex:1; }
        .detail-title-row { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; margin-bottom:1rem; }
        .detail-title-row h2 { font-size:var(--gx-fs-4xl); color:var(--gx-brand); font-weight:700; }
        .detail-badge { background:var(--gx-accent); color:var(--gx-brand); padding:0.4rem 1.5rem; border-radius:var(--gx-r-pill); font-weight:600; }
        .detail-free-badge { background:var(--gx-success); color:white; padding:0.4rem 1.5rem; border-radius:var(--gx-r-pill); font-weight:600; }
        .detail-stats { display:flex; gap:2rem; margin:1.5rem 0; flex-wrap:wrap; }
        .stat { display:flex; align-items:center; gap:8px; color:#4a5b82; }
        .stat i { color:var(--gx-accent); }
        .detail-desc { color:#2d3a5e; line-height:1.8; max-width:900px; font-size:var(--gx-fs-base); margin-bottom:1.5rem; }
        .action-buttons { display:flex; gap:1rem; margin:1.5rem 0; flex-wrap:wrap; }
        .btn-pdf, .btn-cover { background:var(--gx-brand); color:white; padding:0.8rem 1.5rem; border-radius:var(--gx-r-pill); text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-weight:600; transition:0.3s; border:none; cursor:pointer; }
        .btn-pdf:hover, .btn-cover:hover { background:var(--gx-accent); color:var(--gx-brand); }
        .price-row { display:flex; align-items:center; gap:2rem; margin:1.5rem 0 1rem; }
        .price { font-size:var(--gx-fs-4xl); font-weight:700; color:var(--gx-brand); }
        .format-info { background:#f5f8ff; padding:1rem 1.5rem; border-radius:var(--gx-r); margin:1rem 0; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
        .format-info span { display:flex; align-items:center; gap:8px; color:var(--gx-brand); font-weight:500; }
        .format-info i { color:var(--gx-accent); }
        .enroll-btn { background:var(--gx-brand); color:white; border:none; padding:1rem 2.5rem; border-radius:var(--gx-r-pill); font-weight:600; font-size:var(--gx-fs-lg); cursor:pointer; display:inline-flex; align-items:center; gap:10px; margin-top:1rem; transition:background 0.2s; text-decoration:none; }
        .enroll-btn:hover { background:var(--gx-accent); }
        @media (max-width:1000px) { .items-grid { grid-template-columns:repeat(2,1fr); } .nav-menu { display:none; } }
        @media (max-width:600px) { .items-grid { grid-template-columns:1fr; } .detail-header { flex-direction:column; } .detail-cover { flex:0 0 auto; max-width:200px; margin:0 auto; } }