/* ================================================================
   Karacter Product Info — product-info.css

   Rânduri declanșatoare în pagină + panou lateral din dreapta,
   în același stil cu panoul coșului.
   ================================================================ */

/* ── Rândurile din pagină ───────────────────────────────────── */

.krcinfo {
  margin: 24px 0;
  border-top: 1px solid #e6e6e6;
  /*background: var(--c-gray-100);*/
  background: var(--c-gray-50);
  /*padding:0 1rem;*/
}

.krcinfo-trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 15px 4px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #e6e6e6;
  border-radius: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.krcinfo-trigger-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-text, #1A1A1A);
}

.krcinfo-trigger-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--c-text, #1A1A1A);
  /* Săgeata alunecă spre stânga la hover — sugerează „trage panoul afară". */
  transition: transform 0.2s ease;
}

.krcinfo-trigger:hover .krcinfo-trigger-arrow,
.krcinfo-trigger:focus-visible .krcinfo-trigger-arrow {
  transform: translateX(-8px);
}

.krcinfo-trigger:hover .krcinfo-trigger-title {
  color: var(--c-accent, #E50F1E);
}

.krcinfo-trigger:focus-visible {
  outline: 2px solid var(--c-accent, #E50F1E);
  outline-offset: -2px;
}

.krcinfo-trigger-arrow svg,
.krcinfo-close-arrow svg {
  display: block;
  width:20px;
  height:20px;
}

@media (prefers-reduced-motion: reduce) {
  .krcinfo-trigger-arrow {
    transition: none;
  }
}


/* ── Fundalul întunecat ─────────────────────────────────────── */

.krcinfo-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(26, 26, 26, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.krcinfo-overlay.is-open {
  opacity: 1;
  visibility: visible;
}


/* ── Panoul lateral ─────────────────────────────────────────── */

/* `visibility` face două lucruri deodată: scoate panoul din arborele de
   accesibilitate cât e închis (deci cititoarele de ecran nu-l văd) și se
   animează discret — comută instantaneu la deschidere și abia la final la
   închidere. De aceea nu e nevoie nici de atributul `hidden`, nici de
   ascultarea lui transitionend din JS. */
.krcinfo-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  width: 480px;
  max-width: 100vw;
  background: #fff;
  box-shadow: -8px 0 30px rgba(26, 26, 26, 0.12);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

.krcinfo-panel.is-open {
  transform: translateX(0);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .krcinfo-panel,
  .krcinfo-overlay {
    transition: none;
  }
}

/* ── Bara de sus ── */

.krcinfo-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #ececec;
}

.krcinfo-panel-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-text, #1A1A1A);
}

.krcinfo-panel-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text, #1A1A1A);
  white-space: nowrap;
}

.krcinfo-panel-close:hover {
  color: var(--c-accent, #E50F1E);
}

/* Aceeași cale SVG ca pe rânduri, oglindită. „→|" în loc de „←|": panoul
   pleacă înapoi spre dreapta. */
.krcinfo-close-arrow {
  display: flex;
  align-items: center;
  transform: scaleX(-1);
}

/* ── Conținutul ── */

.krcinfo-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 24px 32px;
  font-size: .95rem;
  line-height: 1.65;
  color: #4a4a4a;
}

.krcinfo-panel-body::-webkit-scrollbar {
  width: 6px;
}
.krcinfo-panel-body::-webkit-scrollbar-thumb {
  background: rgba(26, 26, 26, .2);
  border-radius: 3px;
}
.krcinfo-panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.krcinfo-section > *:first-child {
  margin-top: 0;
}
.krcinfo-section > *:last-child {
  margin-bottom: 0;
}

.krcinfo-section p {
  margin-bottom: 1rem;
}

.krcinfo-section a {
  color: var(--c-accent, #E50F1E);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.krcinfo-section ul,
.krcinfo-section ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.krcinfo-section img {
  max-width: 100%;
  height: auto;
}

.krcinfo-section table {
  width: 100%;
  border-collapse: collapse;
}

.krcinfo-section th,
.krcinfo-section td {
  padding: .5rem .65rem;
  border-bottom: 1px solid #ececec;
  text-align: left;
}


/* ── Ecrane mici ────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .krcinfo-panel {
    width: 100vw;
  }
  .krcinfo-trigger {
    padding: 16px 2px;
    gap: 12px;
  }
  .krcinfo-trigger-title {
    font-size: 1.05rem;
  }
  .krcinfo-panel-head {
    padding: 18px 16px 14px;
  }
  .krcinfo-panel-title {
    font-size: 1.25rem;
  }
  .krcinfo-panel-body {
    padding: 18px 16px 28px;
  }
}