/* =====================================================================
   parteco.in — Phase 4 CSS
   Store polish, profile, vehicles, wallet, nav active, misc
   ===================================================================== */

/* ── Nav active state ── */
.pt-nav-link.active {
  background: var(--pt-accent-soft);
  color: var(--pt-accent) !important;
  font-weight: 600;
}

/* ── Profile page ── */
.pt-profile-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--pt-accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--pt-accent);
  font-weight: 700; flex-shrink: 0;
}
.pt-account-sidebar .nav-link {
  color: var(--pt-text);
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 500;
  padding: .55rem .85rem;
  transition: background .15s, color .15s;
}
.pt-account-sidebar .nav-link:hover { background: var(--pt-accent-soft); color: var(--pt-accent); }
.pt-account-sidebar .nav-link.active { background: var(--pt-accent-soft); color: var(--pt-accent); font-weight: 600; }
.pt-account-sidebar .nav-link i { width: 20px; }

/* ── Vehicle manager ── */
.pt-vehicle-card {
  background: var(--pt-surface);
  border: 1.5px solid var(--pt-border);
  border-radius: var(--pt-radius-lg);
  padding: 1rem 1.25rem;
  transition: border-color .2s;
}
.pt-vehicle-card:hover { border-color: var(--pt-accent); }
.pt-vehicle-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--pt-accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--pt-accent);
  flex-shrink: 0;
}

/* ── Wallet ── */
.pt-wallet-hero {
  background: linear-gradient(135deg, var(--pt-dark) 0%, var(--pt-dark-elevated) 100%);
  border-radius: var(--pt-radius-lg);
  padding: 2rem;
  color: #fff;
}
.pt-wallet-balance {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--pt-accent);
  line-height: 1;
}
.pt-txn-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--pt-border);
}
.pt-txn-row:last-child { border-bottom: none; }
.pt-txn-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.pt-txn-credit .pt-txn-icon { background: var(--pt-success-soft); color: var(--pt-success); }
.pt-txn-debit  .pt-txn-icon { background: var(--pt-danger-soft);  color: var(--pt-danger); }
.pt-txn-neutral .pt-txn-icon { background: var(--pt-bg); color: var(--pt-text-muted); }
.pt-txn-amount { font-weight: 700; font-size: 1rem; }
.pt-txn-credit .pt-txn-amount { color: var(--pt-success); }
.pt-txn-debit  .pt-txn-amount { color: var(--pt-danger); }

/* ── Store hero logo overlap ── */
.pt-store-logo-lg { position: relative; }

/* ── Requirements feed ── */
.pt-req-card { position: relative; }
.pt-req-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pt-success);
  display: inline-block;
  margin-right: .35rem;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ── Upload box ── */
.pt-upload-box { position: relative; border: 2px dashed var(--pt-border); border-radius: 10px; padding: 1.5rem; text-align: center; cursor: pointer; transition: border-color .2s; background: var(--pt-bg); min-height: 140px; display: flex; align-items: center; justify-content: center; }
.pt-upload-box:hover { border-color: var(--pt-accent); }
.pt-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ── Password strength bar ── */
.pt-pass-strength { height: 4px; border-radius: 2px; transition: width .3s, background .3s; }

/* ── Success / Error inline alerts ── */
.pt-inline-success { background: var(--pt-success-soft); border: none; border-radius: 10px; color: var(--pt-success); font-size: .875rem; padding: .75rem 1rem; }
.pt-inline-danger  { background: var(--pt-danger-soft);  border: none; border-radius: 10px; color: var(--pt-danger);  font-size: .875rem; padding: .75rem 1rem; }
.pt-inline-warning { background: var(--pt-warning-soft); border: none; border-radius: 10px; color: var(--pt-warning); font-size: .875rem; padding: .75rem 1rem; }

/* ── Subdir .htaccess guard message ── */
.pt-login-wall { min-height: 60vh; display: flex; align-items: center; justify-content: center; }

/* ── Misc ── */
.min-w-0 { min-width: 0; }
.font-monospace { font-family: 'Courier New', monospace; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.text-accent { color: var(--pt-accent) !important; }
.text-success { color: var(--pt-success) !important; }
.text-danger  { color: var(--pt-danger) !important; }

/* ── Responsive table scroll ── */
@media (max-width: 575px) {
  .pt-spec-table th { width: 45%; }
  .pt-detail-price { font-size: 1.25rem; }
}

/* ── Print (invoice already has its own) ── */
@media print {
  .pt-header, .pt-footer, .pt-toast-container { display: none !important; }
}
/* =====================================================================
   parteco.in — Homepage v2
   Light, high-contrast, decent-visibility design system
   Display: Plus Jakarta Sans · Body: Inter · Data/SKU: JetBrains Mono
   ===================================================================== */


/* ── Section heading system ──────────────────────────────────────── */
.pt-section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 750;
  letter-spacing: -.01em;
  color: var(--pt-dark);
  margin-bottom: .2rem;
}
.pt-section-subtitle {
  font-size: .85rem;
  color: var(--pt-text-muted);
  margin-bottom: 0;
  font-family: var(--font-mono);
  letter-spacing: -.01em;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.pt-hero-wrap { background: var(--pt-dark); overflow: hidden; }
.pt-hero-img  { width: 100%; height: 400px; object-fit: cover; display: block; }
.pt-hero-single { position: relative; }
.pt-hero-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding-bottom: 2.25rem;
  background: linear-gradient(to top, rgba(11,14,20,.85) 0%, rgba(11,14,20,.25) 55%, transparent 100%);
}
.pt-hero-body { max-width: 540px; }
.pt-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: #FF8A5C; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem;
}
.pt-hero-eyebrow::before { content:''; width: 16px; height: 1.5px; background: #FF8A5C; }
.pt-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 780; color: #fff; line-height: 1.12;
  margin-bottom: .55rem;
}
.pt-hero-sub { font-size: .9rem; color: rgba(255,255,255,.78); line-height: 1.65; margin-bottom: 0; }
.pt-hero-cta {
  font-family: var(--font-body); font-weight: 700; font-size: .88rem;
  border-radius: 9px; padding: .6rem 1.5rem; display: inline-flex; align-items: center; gap: .4rem;
  transition: transform .15s, box-shadow .15s;
}
.pt-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,90,31,.35); }

.pt-carousel-dots { position:absolute; bottom:1rem; right:1.25rem; z-index:10; display:flex; gap:6px; }
.pt-carousel-dot { width:7px; height:7px; border-radius:50%; border:none; background:rgba(255,255,255,.4); padding:0; cursor:pointer; transition:.2s; }
.pt-carousel-dot.active { background:var(--pt-accent); width:20px; border-radius:4px; }
.pt-carousel-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;
}
.pt-carousel-arrow:hover { background:rgba(255,255,255,.28); }
.pt-carousel-prev { left:1rem; } .pt-carousel-next { right:1rem; }

.pt-hero-default { padding: 0; }
.pt-hero-static {
  position: relative; height: 360px;
  background: radial-gradient(circle at 18% 30%, rgba(255,90,31,.16) 0%, transparent 45%),
              linear-gradient(135deg, #11151C 0%, #1A2029 100%);
}
.pt-hero-static .pt-hero-overlay { background:none; align-items:center; padding-bottom:0; }

/* ── Post-requirement bar ────────────────────────────────────────── */
.pt-req-bar { background: var(--pt-dark-elevated); border-bottom: 1px solid rgba(255,255,255,.06); padding: .6rem 0; }
.pt-req-bar-text { font-size: .82rem; color: rgba(255,255,255,.72); }

/* ── Vehicle finder ───────────────────────────────────────────────── */
.pt-finder {
  background: var(--pt-dark);
  background-image: radial-gradient(circle at 90% 10%, rgba(255,90,31,.14) 0%, transparent 50%);
  border-radius: var(--pt-radius-lg);
  padding: 1.75rem 1.75rem 1.5rem;
}
.pt-finder-title {
  font-family: var(--font-display); color: #fff; font-weight: 700;
  font-size: 1.15rem; margin-bottom: 1.1rem;
}
.pt-finder-title span { color: var(--pt-accent); }
.pt-finder select.form-select {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: .85rem; border-radius: 8px;
}
.pt-finder select.form-select:focus { border-color: var(--pt-accent); box-shadow: none; }
.pt-finder select.form-select option { color: #14181F; background: #fff;}
.pt-finder-btn {
  width: 100%; background: var(--pt-accent); color: #fff; border: none; border-radius: 8px;
  padding: .55rem 1rem; font-size: .85rem; font-weight: 700; transition: background .15s, transform .15s;
}
.pt-finder-btn:hover:not(:disabled) { background: var(--pt-accent-dark); transform: translateY(-1px); }
.pt-finder-btn:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.35); cursor: not-allowed; }

/* ── Segments ─────────────────────────────────────────────────────── */
.pt-segment-card {
  display: block; background: var(--pt-surface); border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius); padding: 1.5rem 1rem; text-align: center;
  text-decoration: none; color: var(--pt-text); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.pt-segment-card:hover {
  border-color: var(--pt-accent); transform: translateY(-3px); box-shadow: var(--pt-shadow-hover); color: var(--pt-text);
}
.pt-segment-icon { font-size: 1.65rem; color: var(--pt-accent); margin-bottom: .6rem; display: block; }
.pt-segment-name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; }

/* ── Cards (categories) ───────────────────────────────────────────── */
.pt-card {
  background: var(--pt-surface); border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.pt-card.p-3.d-block:hover {
  border-color: var(--pt-accent); transform: translateY(-2px); box-shadow: var(--pt-shadow-hover);
}

/* ── Trust bar ────────────────────────────────────────────────────── */
.pt-card.p-0.overflow-hidden { box-shadow: var(--pt-shadow); }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.pt-faq-item {
  background: var(--pt-surface); border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius) !important; margin-bottom: .6rem; overflow: hidden;
}
.pt-faq-item .accordion-button {
  font-family: var(--font-display); font-size: .92rem; font-weight: 650;
  padding: 1.05rem 1.3rem; color: var(--pt-text); background: var(--pt-surface);
}
.pt-faq-item .accordion-button:not(.collapsed) { color: var(--pt-accent-dark); background: var(--pt-accent-soft); }
.pt-faq-item .accordion-button:focus { box-shadow: none; }
.pt-faq-item .accordion-body { font-size: .855rem; line-height: 1.7; color: var(--pt-text-muted); padding: 0 1.3rem 1.15rem; }

/* ── Part number / SKU mono tag — signature element ──────────────── */
.pt-mono-tag {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  background: var(--pt-bg); border: 1px solid var(--pt-border); color: var(--pt-text-muted);
  border-radius: 5px; padding: 1px 6px; letter-spacing: -.02em;
}

/* FAQ accordion styling — matches pt-card aesthetic */
.pt-faq-item {
  background: #fff;
  border: 1px solid var(--pt-border);
  border-radius: 10px !important;
  margin-bottom: .6rem;
  overflow: hidden;
}
.pt-faq-item .accordion-button {
  font-size: .9rem;
  font-weight: 600;
  padding: 1rem 1.25rem;
  color: var(--pt-text);
  background: #fff;
}
.pt-faq-item .accordion-button:not(.collapsed) {
  color: var(--pt-accent);
  background: var(--pt-accent-soft);
}
.pt-faq-item .accordion-button:focus { box-shadow: none; }
.pt-faq-item .accordion-button::after {
  width: 1rem; height: 1rem; background-size: 1rem;
}
.pt-faq-item .accordion-body {
  font-size: .85rem;
  line-height: 1.7;
  padding: 0 1.25rem 1.1rem;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pt-hero-img    { height: 230px; }
  .pt-hero-static { height: 260px; }
  .pt-hero-title  { font-size: 1.35rem; }
  .pt-finder      { padding: 1.25rem; }
  .pt-finder-title{ font-size: 1rem; }
}

/* ── Accessibility: visible focus ring everywhere ────────────────── */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--pt-accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}