/* ══════════════════════════════════════════════════════════════
   product.css — stiluri extrase din product.php (Etapa A)
   Generat din blocurile <style> inline. Conținut NEMODIFICAT.
   ══════════════════════════════════════════════════════════════ */

/* ─── Buton admin edit (PDP) (era product.php L431-458) ─── */
    .pdp-admin-edit {
      position: fixed;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 45;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--brand-navy, #191d29);
      color: #fff;
      border-radius: 9999px;
      box-shadow: 0 8px 24px rgba(15, 30, 50, 0.35);
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .pdp-admin-edit:hover {
      transform: translateY(-50%) scale(1.08);
      background: var(--brand-blue, #0090d7);
      box-shadow: 0 12px 30px rgba(0, 144, 215, 0.4);
    }
    .pdp-admin-edit svg { width: 21px; height: 21px; }
    @media (max-width: 767px) {
      .pdp-admin-edit { right: 10px; width: 44px; height: 44px; }
    }
  

/* ─── Componente specifice paginii produs (era product.php L464-515) ─── */
/* Componente specifice paginii produs */
.spec-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #E5E7EB; font-size: 13px; }
.spec-row.hidden { display: none; }
.spec-row:last-child { border-bottom: none; }
.spec-label { color: #6B7280; flex-shrink: 0; max-width: 55%; }
.spec-value { color: #111827; font-weight: 600; text-align: right; }
.tab-section { scroll-margin-top: 100px; }

.gallery-thumb { border: 2px solid transparent; transition: all .15s; }
.gallery-thumb.active { border-color: var(--brand-blue); }
.gallery-thumb:hover { border-color: var(--brand-blue); }

/* Border bottom pe bara rating/cod produs (toate ecranele) */
.mobile-bar-border { border-bottom: 1px solid #f3f5fb; padding-bottom: 0.75rem; }

/* Slider drag/swipe */
#sliderViewport {
  touch-action: pan-y; /* permite scroll vertical pe pagină + drag orizontal pe slider */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#sliderTrack {
  will-change: transform;
}
#sliderViewport img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.slider-dot {
  cursor: pointer;
  transition: all 0.2s ease;
}

.expand-btn {
  background: none; border: none; color: var(--brand-blue);
  font-weight: 600; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  padding: 8px 0; transition: color .15s;
}
.expand-btn:hover { color: var(--brand-blue-dark); }

.feature-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #F3F4F6; border-radius: 999px; font-size: 12px; color: #4B5563; font-weight: 500; }
.feature-pill svg { width: 14px; height: 14px; color: var(--brand-blue); }

.in-stock-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #DCFCE7; color: #166534; border-radius: 999px; font-size: 12px; font-weight: 600; }
.in-stock-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }

.showroom-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #FEF3C7; color: #92400E; border-radius: 999px; font-size: 12px; font-weight: 600; }

/* ─── Formatarea descrierii TinyMCE (.prose) (era product.php L949-1007) ─── */
          /* ═══ Formatarea descrierii (HTML din TinyMCE) ═══
             Clasa .prose e din plugin-ul Tailwind Typography, care NU e inclus
             în build → reset-ul Tailwind ștergea toată formatarea (fără bullets,
             titluri, spații). Definim aici stilurile, scoped pe .prose. */
          .prose p { margin: 0 0 0.9em; }
          .prose h1, .prose h2, .prose h3, .prose h4 {
            font-family: 'Manrope', sans-serif;
            font-weight: 800;
            color: var(--brand-navy);
            line-height: 1.25;
            margin: 1.4em 0 0.55em;
          }
          .prose h1 { font-size: 1.5rem; }
          .prose h2 { font-size: 1.3rem; }
          .prose h3 { font-size: 1.15rem; }
          .prose h4 { font-size: 1.05rem; }
          .prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.5em; }
          .prose ul { list-style: disc; }
          .prose ul ul { list-style: circle; margin-bottom: 0; }
          .prose ol { list-style: decimal; }
          .prose li { margin: 0.3em 0; }
          .prose li::marker { color: var(--brand-blue); }
          .prose strong, .prose b { font-weight: 700; color: var(--brand-navy); }
          /* Culorile alese manual în editor (span cu color inline) au prioritate:
             strong/b și titlurile din interiorul unui span colorat moștenesc culoarea
             aleasă, în loc să fie suprascrise de navy-ul implicit al site-ului */
          .prose span[style*="color"] strong, .prose span[style*="color"] b,
          .prose span[style*="color"] h1, .prose span[style*="color"] h2,
          .prose span[style*="color"] h3, .prose span[style*="color"] h4 { color: inherit; }
          .prose em, .prose i { font-style: italic; }
          .prose u { text-decoration: underline; }
          .prose s, .prose strike { text-decoration: line-through; }
          .prose a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; }
          .prose a:hover { opacity: 0.8; }
          .prose blockquote {
            border-left: 3px solid var(--brand-blue);
            padding: 0.4em 0 0.4em 1em;
            margin: 1em 0;
            color: #4b5563;
            font-style: italic;
            background: #f8fafc;
            border-radius: 0 8px 8px 0;
          }
          .prose hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.5em 0; }
          .prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 1em 0; }
          .prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.9em; }
          .prose th, .prose td { border: 1px solid #e5e7eb; padding: 0.55em 0.8em; text-align: left; }
          .prose th { background: #f8fafc; font-weight: 700; color: var(--brand-navy); }
          .prose tr:nth-child(even) td { background: #fafbfc; }
          .prose > :first-child { margin-top: 0; }
          .prose > :last-child { margin-bottom: 0; }
          /* aliniere imagini — ACELEAȘI clase ca în editorul TinyMCE */
          .prose img.img-left  { float: left; margin: 0 20px 16px 0; max-width: 45%; border-radius: 8px; }
          .prose img.img-right { float: right; margin: 0 0 16px 20px; max-width: 45%; border-radius: 8px; }
          .prose img.img-center { display: block; margin: 16px auto; max-width: 80%; border-radius: 8px; }
          .prose img.img-full { display: block; width: 100%; margin: 16px 0; border-radius: 8px; }
          .prose p::after { content: ""; display: table; clear: both; }
        

/* ─── Carusel produse similare (era product.php L1308-1320) ─── */
  /* Ascund scrollbar */
  .similar-carousel::-webkit-scrollbar { display: none; }
  .similar-carousel { scrollbar-width: none; -ms-overflow-style: none; }

  /* Responsive — 5 desktop, 3 tablet, 2 mobile */
  @media (max-width: 1023px) {
    .similar-item { width: calc((100% - 2 * 1rem) / 3) !important; }
  }
  @media (max-width: 639px) {
    .similar-item { width: calc((100% - 1rem) / 2) !important; }
  }

/* ─── Galerie slider (era product.php L1426-1430) ─── */
.tab-nav-btn { color: #6B7280; border-bottom: 2px solid transparent; transition: all .2s; }
.tab-nav-btn:hover { color: var(--brand-navy); }
.tab-nav-btn.active { color: var(--brand-navy); border-bottom-color: var(--brand-blue); }

/* ─── Vizualizator 3D / AR — responsive (era product.php L1782-1838) ─── */
@media (max-width: 768px) {
  .obj-ar-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
    right: 12px !important;
  }
}
.v3d-ar-btn {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-blue, #0090d7);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 9999px;
  padding: 10px 20px;
  box-shadow: 0 6px 20px rgba(0, 144, 215, 0.4);
  white-space: nowrap;
}
#v3dWrap:fullscreen { aspect-ratio: auto; max-height: none; background: #fff; }
/* 3D ETAPA B: cote — ascunse implicit, afișate cu butonul „Cote" */
.v3d-dot, .v3d-dim, .v3d-dim-lines { display: none; }
model-viewer.v3d-show-dims .v3d-dot,
model-viewer.v3d-show-dims .v3d-dim,
model-viewer.v3d-show-dims .v3d-dim-lines { display: block; }
.v3d-dot { width: 10px; height: 10px; border-radius: 9999px; background: var(--brand-blue, #0090d7); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.v3d-dim {
  background: var(--brand-navy, #191d29);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  padding: 4px 10px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.v3d-dim-lines { position: absolute; inset: 0; pointer-events: none; }
.v3d-dimline { stroke: var(--brand-navy, #191d29); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.75; }
/* 3D ETAPA C: scenele de fundal (funcționează și pt OBJ — canvasul three.js e transparent) */
.v3d-scene-btn {
  width: 26px; height: 26px;
  border-radius: 9999px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: transform 0.15s;
}
.v3d-scene-btn:hover { transform: scale(1.12); }
.v3d-scene-btn-active { outline: 2px solid var(--brand-blue, #0090d7); outline-offset: 1px; }
#v3dWrap.v3d-scene-gri { background: linear-gradient(180deg, #d6dade 0%, #c8ccd1 61.8%, #aeb1b6 62%, #cbcfd4 100%) !important; }
#v3dWrap.v3d-scene-bej { background: linear-gradient(180deg, #ece4d8 0%, #ded3c2 61.8%, #c2b5a1 62%, #d8cdbd 100%) !important; }