/* ============================================================
   PAKO.AL — FAQET E BRENDSHME (2026)
   ------------------------------------------------------------
   Kryefaqja u ridizajnua, po njoftimi/profili/shitësi mbetën me
   stilin e vjetër: kuti të forta, hije të ngurta, tipografi tjetër.
   Kjo fletë i sjell në të njëjtën gjuhë vizuale duke RISTILIZUAR
   klasat ekzistuese (.sidebar-card, .form-card…), pa rishkruar PHP.

   Ngarkohet pas pako-shell.css, në çdo faqe. Tokenat --h-* vijnë
   nga shell-i, pra dark mode punon vetvetiu.
   ============================================================ */

/* ── Sfondi i faqes ── */
.dc-page:not(.dc-home) { background: var(--h-bg); }

/* ── Kartat: qoshe të buta, hije e lehtë, kufi hairline ── */
.dc-page .sidebar-card,
.dc-page .form-card,
.dc-page .want-card,
.dc-page .review-card,
.dc-page .seller-hero {
    background: var(--h-card);
    border: 1px solid var(--h-line);
    border-radius: var(--h-r);
    box-shadow: var(--h-sh-sm);
    color: var(--h-ink);
}
.dc-page .sidebar-card { padding: 20px; }
.dc-page .form-card    { padding: clamp(20px, 3vw, 30px); }
.dc-page .seller-hero  { padding: clamp(20px, 3vw, 28px); }
.dc-page .want-card    { padding: 18px; transition: transform .2s, box-shadow .2s; }
.dc-page .want-card:hover { transform: translateY(-3px); box-shadow: var(--h-sh); border-color: transparent; }
.dc-page .review-card  { padding: 16px; }

/* ── Tipografia ── */
.dc-page:not(.dc-home) h1,
.dc-page:not(.dc-home) h2,
.dc-page:not(.dc-home) h3,
.dc-page:not(.dc-home) h4,
.dc-page:not(.dc-home) h5,
.dc-page:not(.dc-home) h6 { color: var(--h-ink); letter-spacing: -.02em; }
.dc-page .listing-description { color: var(--h-ink-2); }
.dc-page .seller-name { letter-spacing: -.03em; }

/* ── Butonat: pill, si te kryefaqja ── */
.dc-page .btn { border-radius: var(--h-pill); font-weight: 600; }
/* style.css e vendos `background: var(--primary)` DIREKT te .btn-primary,
   jo përmes variablave të Bootstrap-it — prandaj duhet edhe background,
   përndryshe butoni mbetej blu-ja e vjetër pavarësisht tokenave. */
.dc-page .btn-primary {
    --bs-btn-bg: var(--h-blue); --bs-btn-border-color: var(--h-blue);
    --bs-btn-hover-bg: var(--h-blue-600); --bs-btn-hover-border-color: var(--h-blue-600);
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
    background: var(--h-blue);
    border-color: var(--h-blue);
    color: #fff;
}
.dc-page .btn-primary:hover,
.dc-page .btn-primary:focus {
    background: var(--h-blue-600);
    border-color: var(--h-blue-600);
    color: #fff;
}
.dc-page .btn-outline-primary {
    --bs-btn-color: var(--h-blue); --bs-btn-border-color: var(--h-blue-100);
    --bs-btn-hover-bg: var(--h-blue); --bs-btn-hover-border-color: var(--h-blue);
}
.dc-page .btn-outline-secondary {
    --bs-btn-color: var(--h-ink-2); --bs-btn-border-color: var(--h-line);
    --bs-btn-hover-bg: var(--h-blue-50); --bs-btn-hover-color: var(--h-blue);
    --bs-btn-hover-border-color: var(--h-blue-100);
}

/* ── Fushat ── */
.dc-page .form-control,
.dc-page .form-select {
    border-radius: var(--h-r-sm);
    border-color: var(--h-line);
    background: var(--h-card);
    color: var(--h-ink);
}
.dc-page .form-control:focus,
.dc-page .form-select:focus {
    border-color: var(--h-blue-100);
    box-shadow: 0 0 0 3px rgba(14,118,188,.12);
}
.dc-page .form-control::placeholder { color: var(--h-muted); }
.dc-page .input-group-text {
    background: var(--h-bg); border-color: var(--h-line); color: var(--h-muted);
    border-radius: var(--h-r-sm);
}
.dc-page .form-label { font-weight: 600; color: var(--h-ink-2); }
.dc-page .form-text  { color: var(--h-muted); }

/* ── Gjendjet boshe ── */
.dc-page .empty-state {
    background: var(--h-card);
    border: 1px dashed var(--h-line);
    border-radius: var(--h-r);
    color: var(--h-muted);
    padding: 34px 20px;
    text-align: center;
}

/* ── Tabelat ── */
.dc-page .table { color: var(--h-ink); --bs-table-bg: transparent; }
.dc-page .table > :not(caption) > * > * { border-color: var(--h-line); }
.dc-page .table-hover > tbody > tr:hover > * { background: var(--h-blue-50); }

/* ── Nav / tabs / list-group ── */
.dc-page .list-group-item {
    background: var(--h-card); border-color: var(--h-line); color: var(--h-ink-2);
}
.dc-page .list-group-item.active {
    background: var(--h-blue); border-color: var(--h-blue); color: #fff;
}
.dc-page .list-group-item-action:hover { background: var(--h-blue-50); color: var(--h-blue); }

/* ── Badge-t ── */
.dc-page .badge.bg-primary { background: var(--h-blue) !important; }
.dc-page .badge.bg-secondary { background: var(--h-muted) !important; }

/* ── Alerts ── */
.dc-page .alert { border-radius: var(--h-r-sm); border-width: 1px; }

/* ── Ndarësit ── */
.dc-page:not(.dc-home) hr { border-color: var(--h-line); opacity: 1; }

/* ── Avatari i shitësit ── */
.dc-page .seller-avatar-img,
.dc-page .seller-avatar-placeholder {
    border-radius: 50%; object-fit: cover;
    border: 3px solid var(--h-card);
    box-shadow: var(--h-sh-sm);
}
.dc-page .seller-avatar-placeholder {
    background: var(--h-blue); color: #fff;
    display: grid; place-items: center; font-weight: 800;
}

/* ── Galeria/foto te njoftimi ── */
.dc-page .listing-description img { max-width: 100%; height: auto; border-radius: var(--h-r-sm); }

/* ── Modalet ── */
.dc-page .modal-content {
    border-radius: var(--h-r); border: 1px solid var(--h-line);
    background: var(--h-card); color: var(--h-ink);
}
.dc-page .modal-header, .dc-page .modal-footer { border-color: var(--h-line); }

@media (max-width: 640px) {
    .dc-page .sidebar-card { padding: 16px; }
    .dc-page .form-card    { padding: 18px; }
}