/* ===== Pack Detail Page ===== */

/* Hero */
.pack-hero{background:var(--hero-gradient);padding:32px 0 60px}
@media(min-width:768px){.pack-hero{padding:32px 0 80px}}
.pack-hero-grid{display:grid;gap:40px;align-items:center}
@media(min-width:1024px){.pack-hero-grid{grid-template-columns:1.2fr 1fr;gap:60px}}
.pack-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600}
.badge-green{background:var(--accent-light);color:var(--accent-dark)}
.badge-outline{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary)}
.pack-hero-content h1{font-size:32px;font-weight:800;margin-bottom:16px;line-height:1.2}
@media(min-width:768px){.pack-hero-content h1{font-size:42px}}
.pack-description{font-size:16px;color:var(--text-secondary);line-height:1.7;margin-bottom:12px}
@media(min-width:768px){.pack-description{font-size:18px}}
.pack-long-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:20px}
.pack-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:8px}
.pack-download-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;word-break:break-all;margin-bottom:12px}
.pack-download-label i{font-size:14px;color:var(--accent);flex-shrink:0}
.pack-meta{display:flex;flex-wrap:wrap;gap:20px;margin-top:8px}
.pack-meta span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);font-weight:500}
.pack-meta i{font-size:16px}


/* ── Hero Showcase: 3 large featured icons ── */
.pack-hero-preview{display:flex;flex-direction:column;align-items:center;gap:16px}

.hero-showcase{display:flex;justify-content:center;align-items:flex-end;gap:20px;padding:20px}
@media(min-width:768px){.hero-showcase{gap:28px;padding:28px}}

.hero-icon-tile{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;box-shadow:var(--shadow-lg);transition:all .4s}

/* Center icon larger */
.hero-icon-0{width:100px;height:120px;transform:translateY(6px)}
.hero-icon-1{width:130px;height:150px;z-index:2;box-shadow:var(--shadow-xl)}
.hero-icon-2{width:100px;height:120px;transform:translateY(6px)}
@media(min-width:768px){
  .hero-icon-0{width:120px;height:140px}
  .hero-icon-1{width:160px;height:180px}
  .hero-icon-2{width:120px;height:140px}
}

.hero-icon-tile img{width:56px;height:56px;object-fit:contain}
.hero-icon-1 img{width:80px;height:80px}
@media(min-width:768px){
  .hero-icon-tile img{width:64px;height:64px}
  .hero-icon-1 img{width:96px;height:96px}
}
[data-theme="dark"] .hero-icon-tile img{filter:invert(1) brightness(2)}

.hero-icon-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--accent)}
.hero-icon-1:hover{transform:translateY(-6px)}

.hero-icon-label{font-size:10px;color:var(--text-muted);font-weight:500;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.hero-icon-1 .hero-icon-label{font-size:11px}

.hero-placeholder{justify-content:center;min-height:180px}

.hero-showcase-meta{font-size:13px;color:var(--text-muted);font-weight:500}


/* ── Details ── */
.pack-details{padding:60px 0}
@media(min-width:768px){.pack-details{padding:80px 0}}
.details-grid{display:grid;gap:24px}
@media(min-width:768px){.details-grid{grid-template-columns:repeat(3,1fr);gap:28px}}
.detail-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:28px}
.detail-card h3{font-size:16px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.detail-card h3 i{color:var(--accent);font-size:20px}
.detail-card p{font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:12px}
.format-chips{display:flex;flex-wrap:wrap;gap:8px}
.format-chip{padding:8px 16px;background:var(--accent-light);color:var(--accent-dark);border-radius:10px;font-size:13px;font-weight:600;font-family:'JetBrains Mono',monospace}
.detail-rows{display:flex;flex-direction:column;gap:0}
.detail-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-color);font-size:14px}
.detail-row:last-child{border-bottom:none}
.detail-row span{color:var(--text-muted)}
.detail-row strong{color:var(--text-primary)}
.detail-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:14px;font-weight:600;transition:gap .2s}
.detail-link:hover{gap:10px}


/* ── Full Icon Browser ── */
.pack-icons-section{padding:0 0 80px}

.pack-icons-header{display:flex;flex-direction:column;gap:16px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}
@media(min-width:768px){.pack-icons-header{flex-direction:row;align-items:center;justify-content:space-between}}

.pack-icons-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pack-icons-title h2{font-size:24px;font-weight:700}
@media(min-width:768px){.pack-icons-title h2{font-size:28px}}
.pack-icons-count{padding:4px 14px;background:var(--accent-light);color:var(--accent-dark);border-radius:20px;font-size:13px;font-weight:600}

.pack-icons-search{position:relative;width:100%;max-width:320px}
.pack-icons-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--text-muted);pointer-events:none}
.pack-icons-search input{width:100%;padding:10px 16px 10px 42px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius);font-size:14px;color:var(--text-primary);font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.pack-icons-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)}
.pack-icons-search input::placeholder{color:var(--text-muted)}


/* ── Icon Grid ── */
.pack-icons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
@media(min-width:640px){.pack-icons-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}}
@media(min-width:1024px){.pack-icons-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}}


/* ── Icon Card ── */
.pack-icon-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius);padding:16px 12px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all .25s;animation:packIconIn .35s ease forwards;opacity:0;animation-delay:calc(var(--index,0) * 15ms);position:relative;cursor:default}
.pack-icon-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)}

/* File format badge - visible by default, hidden on hover */
.pack-icon-format{position:absolute;top:8px;right:8px;padding:2px 7px;border-radius:5px;font-size:9px;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:.3px;transition:opacity .2s}
.pack-icon-card:hover .pack-icon-format{opacity:0}

/* Badge colors by file type */
.badge-svg{background:var(--accent-light);color:var(--accent-dark)}
.badge-png{background:rgba(59,130,246,.12);color:#3b82f6}
.badge-ico{background:rgba(139,92,246,.12);color:#8b5cf6}
.badge-jpg{background:rgba(245,158,11,.12);color:#d97706}
.badge-gif{background:rgba(244,63,94,.12);color:#e11d48}
.badge-webp{background:rgba(6,182,212,.12);color:#0891b2}

/* 96px icon preview */
.pack-icon-preview{width:96px;height:96px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;transition:transform .2s}
.pack-icon-card:hover .pack-icon-preview{transform:scale(1.06)}
.pack-icon-preview img{width:100%;height:100%;object-fit:contain}
[data-theme="dark"] .pack-icon-preview img{filter:invert(1) brightness(2)}

.pack-icon-name{font-size:11px;color:var(--text-muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;line-height:1.4;margin-bottom:8px}

.pack-icon-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s}
.pack-icon-card:hover .pack-icon-actions{opacity:1}

.icon-action-btn{width:28px;height:28px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-secondary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;text-decoration:none}
.icon-action-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

@keyframes packIconIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}


/* ── Filter Empty State ── */
.pack-icons-empty{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;gap:12px}
.pack-icons-empty i{font-size:48px;color:var(--text-muted)}
.pack-icons-empty h3{font-size:18px;font-weight:600}
.pack-icons-empty p{font-size:14px;color:var(--text-muted)}


/* ── Pagination ── */
.pack-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:40px;flex-wrap:wrap}
.page-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;color:var(--text-secondary);font-size:14px;font-weight:500;transition:all .2s;text-decoration:none}
.page-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-numbers{display:flex;gap:6px}
.page-num{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;color:var(--text-secondary);font-size:14px;font-weight:500;text-decoration:none;transition:all .2s}
.page-num:hover{border-color:var(--accent);color:var(--accent)}
.page-num.active{background:var(--accent);border-color:var(--accent);color:#fff;pointer-events:none}
.page-ellipsis{display:flex;align-items:center;justify-content:center;width:38px;color:var(--text-muted)}
.pack-page-info{text-align:center;margin-top:12px;font-size:13px;color:var(--text-muted)}


/* ── Related Section ── */
.related-section{padding:60px 0;background:var(--bg-secondary)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(min-width:768px){.related-grid{grid-template-columns:repeat(4,1fr)}}
.related-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:28px;text-align:center;transition:all .3s}
.related-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:var(--accent)}
.related-icon{font-size:36px;margin-bottom:12px;color:var(--accent)}
.related-card h4{font-size:15px;font-weight:600;margin-bottom:6px}
.related-count{font-size:13px;color:var(--accent);font-weight:600}


/* ── Copy Toast ── */
.copy-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--text-primary);color:var(--bg-primary);padding:12px 24px;border-radius:12px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;z-index:9999;transition:transform .3s ease,opacity .3s ease;opacity:0;pointer-events:none;box-shadow:var(--shadow-xl)}
.copy-toast.visible{transform:translateX(-50%) translateY(0);opacity:1}
.copy-toast i{color:var(--accent);font-size:18px}


/* ── Responsive ── */
@media(max-width:640px){
  .pack-icons-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
  .pack-icon-card{padding:12px 8px 10px}
  .pack-icon-preview{width:72px;height:72px}
  .pack-icon-actions{opacity:1}
  .pack-icon-format{opacity:1}
  .pack-icon-card:hover .pack-icon-format{opacity:1}
  .pack-download-label{font-size:11px}
  .hero-showcase{gap:14px;padding:16px}
  .hero-icon-0,.hero-icon-2{width:88px;height:108px}
  .hero-icon-1{width:110px;height:130px}
  .hero-icon-tile img{width:44px;height:44px}
  .hero-icon-1 img{width:60px;height:60px}
}