/* ============================================================
   components.css — reusable UI parts
   tables, status pills, alerts, toasts, pagination, filters,
   cart, checkout, steps, price tables, reviews
   ============================================================ */

/* ---------- Cards ---------- */
.pv-card { background: var(--pv-surface); border: 1px solid var(--pv-border); border-radius: var(--pv-radius); box-shadow: var(--pv-shadow-sm); }
.pv-card-head { padding: 18px 26px; border-bottom: 1px solid var(--pv-border); display: flex; align-items: center; justify-content: space-between; }
.pv-card-head h5 { margin: 0; font-size: 16px; }
.pv-card-body { padding: 28px; }
@media (max-width: 575.98px){ .pv-card-body { padding: 20px; } .pv-card-head { padding: 16px 20px; } }

/* ---------- Tables ---------- */
.pv-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pv-table thead th { background: var(--pv-bg); color: var(--pv-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--pv-border); text-align: left; }
.pv-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--pv-border); vertical-align: middle; font-size: 14px; }
.pv-table tbody tr:hover { background: #fafbfc; }
.pv-table .prod-mini { display: flex; align-items: center; gap: 12px; }
.pv-table .prod-mini .mini-thumb { width: 46px; height: 46px; border-radius: var(--pv-radius-sm); background: var(--pv-primary-light); display: flex; align-items: center; justify-content: center; color: var(--pv-primary); flex: none; }

/* ---------- Status pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-success { background: #e6f6ee; color: #1f8a5b; }
.pill-warning { background: #fdf2e1; color: #c98212; }
.pill-danger  { background: #fbe9e6; color: #c0392b; }
.pill-info    { background: #e7f1fb; color: #2167a8; }
.pill-muted   { background: #eef1f5; color: #5f6b78; }

/* ---------- Alerts ---------- */
.pv-alert { border-radius: var(--pv-radius-sm); padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid transparent; font-size: 14px; }
.pv-alert i { font-size: 18px; margin-top: 1px; }
.pv-alert-success { background: #e6f6ee; color: #1f6f4a; border-color: #bfe6d2; }
.pv-alert-warning { background: #fdf2e1; color: #9a6510; border-color: #f4dcae; }
.pv-alert-danger  { background: #fbe9e6; color: #98271a; border-color: #f1c4bd; }
.pv-alert-info    { background: #e7f1fb; color: #1d4f80; border-color: #c3dbf3; }

/* ---------- Toast ---------- */
.pv-toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 1080; display: flex; flex-direction: column; gap: 10px; }
.pv-toast { background: #fff; border-left: 4px solid var(--pv-primary); box-shadow: var(--pv-shadow-lg); border-radius: var(--pv-radius-sm); padding: 14px 18px; min-width: 280px; display: flex; gap: 12px; align-items: center; }

/* ---------- Pagination ---------- */
.pv-pagination { display: flex; gap: 6px; }
.pv-pagination a, .pv-pagination span { width: 40px; height: 40px; border-radius: var(--pv-radius-sm); border: 1px solid var(--pv-border); display: flex; align-items: center; justify-content: center; color: var(--pv-dark); font-weight: 600; font-size: 14px; background: #fff; }
.pv-pagination a:hover { border-color: var(--pv-primary); color: var(--pv-primary); }
.pv-pagination .active { background: var(--pv-primary); border-color: var(--pv-primary); color: #fff; }

/* ---------- Filter sidebar ---------- */
.filter-box { background: var(--pv-surface); border: 1px solid var(--pv-border); border-radius: var(--pv-radius); padding: 24px; margin-bottom: 18px; }
.filter-box h6 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--pv-dark); margin-bottom: 14px; position: relative; padding-bottom: 10px; border-bottom: 1px solid var(--pv-border); }
.filter-box h6::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 36px; height: 2px; background: var(--pv-gold-grad); }
.filter-box .form-check { padding-top: 6px; padding-bottom: 6px; padding-right: 8px; border-radius: var(--pv-radius-sm); transition: background .15s ease; margin-bottom: 1px; }
.filter-box .form-check:hover { background: var(--pv-primary-light); }
.filter-box .form-check-input { border-color: var(--pv-gold-soft); cursor: pointer; }
.filter-box .form-check-input:checked { background-color: var(--pv-accent-dark); border-color: var(--pv-accent-dark); }
.filter-box .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(200,160,75,.25); border-color: var(--pv-gold); }
.filter-box .form-check-label { font-size: 14px; color: var(--pv-body); cursor: pointer; }
.filter-box .form-range::-webkit-slider-thumb { background: var(--pv-accent-dark); }
.filter-box .form-range::-moz-range-thumb { background: var(--pv-accent-dark); }
.color-swatch:hover { transform: scale(1.12); box-shadow: 0 0 0 2px var(--pv-gold); }
.color-swatch { width: 26px; height: 26px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pv-border); cursor: pointer; }

/* ---------- Quantity stepper ---------- */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); overflow: hidden; }
.qty button { width: 36px; height: 38px; border: 0; background: #fff; color: var(--pv-dark); font-size: 16px; cursor: pointer; }
.qty input { width: 46px; height: 38px; border: 0; text-align: center; border-left: 1px solid var(--pv-border); border-right: 1px solid var(--pv-border); }

/* ---------- Checkout steps ---------- */
.steps { display: flex; gap: 0; margin-bottom: 28px; }
.steps .step { flex: 1; text-align: center; position: relative; color: var(--pv-muted); font-size: 13px; }
.steps .step .dot { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--pv-border); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 6px; }
.steps .step.active { color: var(--pv-primary); font-weight: 600; }
.steps .step.active .dot { background: var(--pv-primary); border-color: var(--pv-primary); color: #fff; }
.steps .step.done .dot { background: var(--pv-success); border-color: var(--pv-success); color: #fff; }
.steps .step::after { content: ""; position: absolute; top: 18px; left: 50%; width: 100%; height: 2px; background: var(--pv-border); z-index: -1; }
.steps .step:last-child::after { display: none; }

/* ---------- Order summary ---------- */
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.summary-row.total { border-top: 1px solid var(--pv-border); margin-top: 8px; padding-top: 14px; font-size: 17px; font-weight: 700; color: var(--pv-dark); }

/* ---------- Product gallery (single product) ---------- */
.gallery-main { aspect-ratio: 1/1; background: var(--pv-primary-light); border-radius: var(--pv-radius); display: flex; align-items: center; justify-content: center; color: var(--pv-primary); font-size: 90px; }
.gallery-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.gallery-thumbs .gt { flex: 1; aspect-ratio: 1/1; border-radius: var(--pv-radius-sm); background: var(--pv-primary-light); border: 2px solid transparent; display: flex; align-items: center; justify-content: center; color: var(--pv-primary); cursor: pointer; overflow: hidden; }
.gallery-thumbs .gt.active { border-color: var(--pv-primary); }

/* ---------- Pricing table (B2B) ---------- */
.price-tier { display: flex; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); margin-bottom: 8px; font-size: 14px; }
.price-tier .lbl { color: var(--pv-muted); }
.price-tier .val { font-weight: 700; color: var(--pv-dark); }
.price-tier.best { border-color: var(--pv-primary); background: var(--pv-primary-light); }

/* ---------- Reviews ---------- */
.review { padding: 18px 0; border-bottom: 1px solid var(--pv-border); }
.review .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--pv-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--pv-muted); }
.empty-state i { font-size: 54px; color: var(--pv-border); margin-bottom: 16px; }

/* ---------- Product gallery sticky (fills the empty space beside details) ---------- */
@media (min-width: 992px){
  .pd-sticky { position: sticky; top: 92px; align-self: flex-start; }
}

/* ---------- Premium tabs (Description / Specs / Reviews / Shipping) ---------- */
.nav-tabs { border-bottom: 2px solid var(--pv-border); gap: 4px; flex-wrap: wrap; }
.nav-tabs .nav-link {
  border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: var(--pv-muted); font-family: var(--pv-h-font); font-weight: 600; font-size: 15px;
  padding: 12px 24px; margin-bottom: -2px; border-radius: 0;
  transition: color .2s ease, border-color .2s ease;
}
.nav-tabs .nav-link:hover { color: var(--pv-accent-dark); border-bottom-color: var(--pv-gold-soft); isolation: isolate; }
.nav-tabs .nav-link.active { color: var(--pv-primary); background: transparent; border-color: transparent; border-bottom: 3px solid var(--pv-gold); }
.tab-content.pv-card { margin-top: 20px; border-radius: var(--pv-radius) !important; }
.tab-content .tab-pane h5 { font-family: var(--pv-h-font); }
.tab-content .tab-pane > p:first-child { margin-top: 0; }
.tab-content .tab-pane ul { padding-left: 20px; }
.tab-content .tab-pane ul li { margin-bottom: 8px; }
@media (max-width: 575.98px){ .nav-tabs .nav-link { padding: 10px 14px; font-size: 14px; } }

/* ---------- File upload ---------- */
.upload-box { border: 2px dashed var(--pv-border); border-radius: var(--pv-radius); padding: 26px; text-align: center; color: var(--pv-muted); cursor: pointer; transition: border-color .15s; }
.upload-box:hover { border-color: var(--pv-primary); color: var(--pv-primary); }