/* components.css — cards, tools, categories, sidebar */
/* ---------- Sections / cards ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.sec-head h2{font-size:1.05rem;font-weight:700;margin:0;display:flex;gap:.5rem;align-items:center}
.sec-head a{font-size:.8rem;color:var(--accent)}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem .5rem;text-align:center;font-size:.8rem;display:block;height:100%;transition:border-color .2s,transform .2s}
.cat i{font-size:1.5rem;display:block;margin-bottom:.4rem;color:var(--muted)}
.cat:hover{border-color:var(--accent);transform:translateY(-3px)}
.p-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;display:flex;flex-direction:column}
.p-img{aspect-ratio:4/3;position:relative;display:flex;align-items:flex-end;padding:.7rem;background-size:cover;background-position:center}
.p-img::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(8,10,20,.85))}
.p-img h3{position:relative;font-size:.85rem;font-weight:700;margin:0;color:#fff}
.p-img .bm{position:absolute;top:.6rem;inset-inline-start:.6rem;width:30px;height:30px;border-radius:8px;border:0;background:rgba(10,12,24,.55);color:#fff;backdrop-filter:blur(4px)}
.p-img .bm.on{color:var(--gold)}
.p-body{padding:.7rem}
.tag-pill{display:inline-block;background:var(--surface-2);border-radius:6px;padding:.1rem .5rem;font-size:.7rem;color:var(--muted);margin-inline-end:.3rem}
.p-meta{display:flex;gap:1rem;font-size:.75rem;color:var(--muted);margin-top:.6rem}
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem .5rem;text-align:center;height:100%;transition:border-color .2s}
.tool:hover{border-color:var(--accent)}
.tool .logo{width:40px;height:40px;border-radius:10px;margin:0 auto .5rem;display:grid;place-items:center;font-size:1.3rem;color:#fff}
.tool b{display:block;font-size:.85rem}.tool small{color:var(--muted);font-size:.7rem}
.pop{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;padding:.8rem;background-size:cover;border:1px solid var(--line)}
.pop::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(8,10,20,.9))}
.pop div{position:relative;color:#fff;font-size:.85rem;font-weight:700}.pop small{display:block;font-weight:400;opacity:.7;font-size:.7rem}
/* ---------- Sidebar ---------- */
.side-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem}
.side-item{display:flex;gap:.8rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line)}
.side-item:last-child{border:0}
.side-ic{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:1.1rem}
.side-box .form-control{background:var(--surface-2);border-color:var(--line);color:var(--text);font-size:.85rem}

.p-card{position:relative;transition:border-color .2s,transform .2s}
.p-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.p-img .bm{z-index:2}
.p-img .bm:hover{color:var(--gold)}

/* ---- shared listing UI (breadcrumb, pills, toolbar, empty state, pagination) ---- */
.breadcrumb{--bs-breadcrumb-divider-color:var(--muted);font-size:.85rem;margin-bottom:1.25rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb-item.active{color:var(--text)}


/* Category pills (horizontal scroll on small screens) */
.cat-pills{display:flex;gap:.5rem;overflow-x:auto;padding:1.2rem 0 .3rem;scrollbar-width:thin}
.pill{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:.35rem .95rem;font-size:.82rem;white-space:nowrap;transition:border-color .2s,color .2s}
.pill:hover{border-color:var(--accent);color:var(--text)}
.pill.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

/* Toolbar */
.toolbar .search-box{max-width:none;padding-block:.15rem}
.toolbar .form-select{background-color:var(--surface);border-color:var(--line);color:var(--text);border-radius:10px;min-width:150px;font-size:.88rem;padding-block:.6rem}
.toolbar .form-select:focus{border-color:var(--accent);box-shadow:none}

/* Empty state */
.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.empty i{font-size:2.4rem;display:block;margin-bottom:.6rem}

/* Pagination */
.pagination{--bs-pagination-bg:var(--surface);--bs-pagination-border-color:var(--line);--bs-pagination-color:var(--text);--bs-pagination-hover-bg:var(--surface-2);--bs-pagination-hover-color:var(--text);--bs-pagination-hover-border-color:var(--accent);--bs-pagination-active-bg:var(--accent);--bs-pagination-active-border-color:var(--accent);--bs-pagination-disabled-bg:var(--surface);--bs-pagination-disabled-color:var(--muted);--bs-pagination-disabled-border-color:var(--line);--bs-pagination-focus-box-shadow:none;--bs-pagination-focus-bg:var(--surface-2);--bs-pagination-focus-color:var(--text);gap:.35rem}
.pagination .page-link{border-radius:10px!important;min-width:40px;text-align:center;font-size:.88rem}
.pagination .page-item.dots .page-link{border:0;background:transparent;pointer-events:none}


/* ---- images rendered as <img> (uploaded files) with a gradient placeholder when missing ---- */
.p-img,.detail-img,.blog-img,.cover,.pop{background-color:var(--surface-2);background-image:linear-gradient(135deg,rgba(108,124,255,.28),rgba(167,139,250,.14))}
.p-img img,.detail-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-img img,.cover img{display:block;width:100%;height:100%;object-fit:cover}
.p-img::before{content:none}
.p-img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(8,10,20,.85))}
.p-img h3{position:relative;z-index:1}
.pop{background-size:cover;background-position:center}
.alert{border-radius:var(--radius)}

a.chip{color:var(--text)}

/* prompt of the day */
.potd{display:flex;gap:1.2rem;align-items:center;background:linear-gradient(135deg,rgba(108,124,255,.16),rgba(167,139,250,.08));border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.potd img{width:160px;aspect-ratio:4/3;object-fit:contain;background:var(--surface-2);border-radius:12px;flex:none}
@media(max-width:575.98px){.potd{flex-direction:column;align-items:stretch}.potd img{width:100%}}

/* prompts without a picture (text prompts): icon placeholder */
.p-img .ph,.detail-img .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:2.8rem;color:rgba(255,255,255,.4)}

/* ---- show the WHOLE picture, whatever its proportions ----------------------------------------------
   The boxes keep exactly the same size as before. The image is fitted inside (object-fit: contain, nothing is cut)
   and a blurred, darkened copy of the same picture fills the spare space (the container gets --img from the template). */
.p-img,.detail-img,.blog-img,.cover,.pop{--img:none;position:relative;overflow:hidden;isolation:isolate}
.p-img::before,.detail-img::before,.blog-img::before,.cover::before,.pop::before{content:"";position:absolute;inset:-14%;z-index:-1;background:var(--img) center/cover no-repeat;filter:blur(14px) brightness(.62) saturate(1.1)}
.p-img img,.detail-img img{object-fit:contain}
.blog-img img,.cover img{object-fit:contain;position:relative}
.pop::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(8,10,20,.9)),var(--img) center/contain no-repeat}
.pop div{z-index:1}

/* premium prompt badge on cards */
.p-img .lock-badge{position:absolute;top:.6rem;inset-inline-end:.6rem;z-index:2;display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .5rem;border-radius:999px;font-size:.7rem;font-weight:700;color:#1b1400;background:var(--gold,#f5c451)}