/*
 * ════════════════════════════════════════════════════════════════
 *  INVISION — Custom CSS  (loaded after pro.css)
 *  All Sellauth Pro base styles are preserved in pro.css.
 *  This file handles the Invision visual layer only.
 * ════════════════════════════════════════════════════════════════
 */

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
  --inv-accent:        #d92745;
  --inv-accent-dim:    rgba(217,39,69,.15);
  --inv-bg-primary:    #0f1014;
  --inv-bg-secondary:  #14161b;
  --inv-bg-elevated:   #1c1e25;
  --inv-border:        rgba(255,255,255,.07);
  --inv-text-muted:    rgba(255,255,255,.45);
  --inv-radius:        8px;
  --inv-transition:    .18s ease;
}

/* ── Body & Global ───────────────────────────────────────────── */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  background: var(--inv-bg-primary);
  color: rgba(255,255,255,.88);
  font-family: 'Inter', sans-serif;
}

/* Ambient page glow */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(700px 420px at 50% 105%, rgba(217,39,69,.09), transparent 65%);
}

/* Sticky header */
.sticky-top { z-index: 1020; }

/* ── Bootstrap overrides ─────────────────────────────────────── */
.modal-content {
  background: var(--inv-bg-elevated);
  border: 1px solid var(--inv-border);
  border-radius: 12px;
}
.modal-header { border-color: var(--inv-border); }
.modal-footer { border-color: var(--inv-border); }

.btn-primary {
  --bs-btn-bg: var(--inv-accent);
  --bs-btn-border-color: var(--inv-accent);
  --bs-btn-hover-bg: #c01f38;
  --bs-btn-hover-border-color: #c01f38;
  --bs-btn-active-bg: #aa1c32;
  font-weight: 700;
  letter-spacing: .3px;
}

.btn-outline-primary {
  --bs-btn-color: var(--inv-accent);
  --bs-btn-border-color: var(--inv-accent);
  --bs-btn-hover-bg: var(--inv-accent);
  --bs-btn-hover-color: #fff;
  font-weight: 700;
}

/* Form controls */
.form-control,
.form-select {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: #fff;
  border-radius: var(--inv-radius);
  transition: border-color var(--inv-transition), box-shadow var(--inv-transition);
}
.form-control:focus,
.form-select:focus {
  background: rgba(255,255,255,.06);
  border-color: var(--inv-accent);
  box-shadow: 0 0 0 3px rgba(217,39,69,.18);
  color: #fff;
}
.form-control::placeholder { color: rgba(255,255,255,.28); }

/* ── Announcement bar ────────────────────────────────────────── */
.announcement {
  background: var(--inv-accent);
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 8px 0;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--inv-bg-secondary); }
::-webkit-scrollbar-thumb { background: rgba(217,39,69,.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--inv-accent); }

/* ── Products page / product page ───────────────────────────── */
/* Preserve existing pro.css card styles but enhance them */
.products .card {
  background: var(--inv-bg-elevated);
  border: 1px solid var(--inv-border);
  border-radius: var(--inv-radius);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.products .card:hover {
  transform: translateY(-4px);
  border-color: rgba(217,39,69,.35);
  box-shadow: 0 12px 36px rgba(0,0,0,.35), 0 0 0 1px rgba(217,39,69,.15);
}
.products .card .card-img-top {
  background: var(--inv-bg-secondary);
  border-radius: calc(var(--inv-radius) - 1px) calc(var(--inv-radius) - 1px) 0 0;
}
.products .card .card-body { padding: 14px 16px 16px; }
.products .card .card-title {
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.products .card .price {
  font-size: .85rem;
  font-weight: 700;
  color: var(--inv-accent);
  margin-bottom: 4px;
}
.products .card .text-primary { color: var(--inv-accent) !important; font-size: .78rem; }

/* ── Product page ────────────────────────────────────────────── */
.product-page .product-header { border-bottom: 1px solid var(--inv-border); padding-bottom: 20px; margin-bottom: 28px; }

/* ── Cart page ───────────────────────────────────────────────── */
.cart-page { padding-top: 40px; padding-bottom: 60px; }

/* ── Feedback / reviews ──────────────────────────────────────── */
.feedbacks { padding: 60px 0; }
.feedbacks .section-title h2 { color: #fff; }

/* Feedback card */
.feedback-card {
  background: var(--inv-bg-elevated);
  border: 1px solid var(--inv-border);
  border-radius: var(--inv-radius);
  padding: 20px;
  transition: border-color .2s;
}
.feedback-card:hover { border-color: rgba(217,39,69,.25); }

/* ── Status page ─────────────────────────────────────────────── */
.status-card {
  background: var(--inv-bg-elevated);
  border: 1px solid var(--inv-border);
  border-radius: var(--inv-radius);
  padding: 16px 20px;
}

/* ── Customer dashboard ──────────────────────────────────────── */
.customer-sidebar {
  background: var(--inv-bg-elevated);
  border: 1px solid var(--inv-border);
  border-radius: var(--inv-radius);
}
.customer-sidebar .nav-link {
  color: rgba(255,255,255,.55);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: .88rem;
  transition: background .15s, color .15s;
}
.customer-sidebar .nav-link:hover,
.customer-sidebar .nav-link.active {
  background: rgba(217,39,69,.12);
  color: var(--inv-accent);
}

/* ── Blog cards ──────────────────────────────────────────────── */
.blog-post-card {
  background: var(--inv-bg-elevated);
  border: 1px solid var(--inv-border);
  border-radius: var(--inv-radius);
  overflow: hidden;
  transition: transform .2s, border-color .2s;
}
.blog-post-card:hover {
  transform: translateY(-3px);
  border-color: rgba(217,39,69,.3);
}

/* ── Choices.js currency selector ────────────────────────────── */
.choices__inner {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: .82rem !important;
  min-height: 34px !important;
  padding: 4px 8px !important;
}
.choices__list--dropdown {
  background: var(--inv-bg-elevated) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 6px !important;
}
.choices__item--choice:hover,
.choices__item--choice.is-highlighted {
  background: rgba(217,39,69,.15) !important;
  color: #fff !important;
}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination .page-link {
  background: var(--inv-bg-elevated);
  border-color: var(--inv-border);
  color: rgba(255,255,255,.6);
  border-radius: 6px !important;
  margin: 0 2px;
  transition: background .15s, color .15s;
}
.pagination .page-link:hover { background: rgba(217,39,69,.15); color: var(--inv-accent); }
.pagination .page-item.active .page-link { background: var(--inv-accent); border-color: var(--inv-accent); color: #fff; }

/* ── Section titles (global) ─────────────────────────────────── */
.section-title h2 {
  color: #fff;
  font-weight: 800;
  font-size: 1.55rem;
}
.section-title p { color: rgba(255,255,255,.38); }

/* ── Products-page (full products listing) ───────────────────── */
.products-page { padding-top: 32px; padding-bottom: 60px; }

/* ── Invision-specific page glow helpers ─────────────────────── */
.inv-glow-section {
  position: relative;
}
.inv-glow-section::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(217,39,69,.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Smooth global transitions ───────────────────────────────── */
a, button, .btn, .card, .inv-card, .nav-link {
  transition-duration: .18s;
  transition-timing-function: ease;
}

/* ── Responsive container padding ───────────────────────────── */
@media (max-width: 575.98px) {
  .container { padding-left: 16px; padding-right: 16px; }
}


/* Remove empty dark spacer directly above footer */
.flex-wrapper {
  min-height: 0 !important;
}

#app > div {
  min-height: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#app > div > :last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

footer,
.footer,
.footer-modern,
.inv-footer {
  margin-top: 0 !important;
  padding-top: 48px !important;
}

/* Kill inherited empty footer gap layers */
footer::before,
.footer::before,
.footer-modern::before,
.inv-footer::before {
  margin: 0 !important;
}