/* CAMERE.MD — Detaliile unui pachet si comparatia.
   Antet / continut derulabil / actiuni sunt randuri separate ale grilei.
   Numai continutul se deruleaza; piciorul nu acopera niciun echipament.
   Culorile, fonturile si ritmul de spatiere vin din tema existenta. */

.pk{
  position:fixed;
  inset:0;
  z-index:var(--z-lightbox);
  display:grid;
  place-items:center;
  padding:var(--sp-24);
  opacity:0;
  transition:opacity var(--t-ui) var(--e-out);
}
.pk.is-open{opacity:1}
.pk:not(.is-open){pointer-events:none}
.pk__fundal{
  position:absolute;
  inset:0;
  background:rgba(6,9,15,.72);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.pk__panou{
  position:relative;
  width:min(1120px,100%);
  min-width:0;
  min-height:0;
  max-height:calc(100dvh - var(--sp-48));
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  border:1px solid var(--border-strong);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--sh-lg);
  transform:translateY(8px);
  transition:transform var(--t-ui) var(--e-out);
}
.pk.is-open .pk__panou{transform:none}
.pk--pachet .pk__panou{width:min(960px,100%)}

/* Antetul pastreaza impreuna numele si promisiunea pachetului. */
.pk__bar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-24);
  padding:var(--sp-24) var(--sp-32);
  border-bottom:1px solid var(--border);
}
.pk__heading{display:grid;gap:var(--sp-8);min-width:0}
.pk__bar h2{
  font-size:var(--fs-h3);
  line-height:1.15;
  text-wrap:pretty;
}
.pk__pozitionare{font-size:var(--fs-body);line-height:1.45;color:var(--text-muted)}
.pk__inchide{
  flex:0 0 44px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface-raised);
  color:var(--text-muted);
  transition:background-color var(--t-micro) var(--e-out),color var(--t-micro) var(--e-out);
}
.pk__inchide:hover{background:var(--chip-bg);color:var(--text)}
.pk__inchide svg{width:20px;height:20px}

/* O singura zona verticala de derulare, cu latime si inaltime reductibile. */
.pk__corp{
  min-width:0;
  min-height:0;
  padding:var(--sp-24) var(--sp-32) var(--sp-32);
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
  scrollbar-gutter:stable;
}
.pk__corp::-webkit-scrollbar{width:6px}
.pk__corp::-webkit-scrollbar-track{background:transparent}
.pk__corp::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill)}
.pk__info,.pk__detalii-corp,.pk__cmp{display:grid;min-width:0;gap:var(--sp-24);align-content:start}
.pk__sectiune{display:grid;min-width:0;gap:var(--sp-12)}
.pk__sectiune h3,.pk__cmp-grup h4{
  font-size:var(--fs-h4);
  line-height:1.25;
}

/* Configuratia: iconul apartine etichetei, valoarea ramane aliniata sub ea. */
.pk__spec{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-16) var(--sp-24);
  margin:0;
  padding:var(--sp-16);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface-raised);
}
.pk__spec > div{min-width:0}
.pk__spec dt{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-label);color:var(--text-muted)}
.pk__spec dt .icon{flex:0 0 16px;width:16px;height:16px;color:var(--accent-text)}
.pk__spec dd{
  margin:var(--sp-4) 0 0 var(--sp-24);
  color:var(--text);
  font-size:var(--fs-body);
  font-weight:600;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.pk__spec .pk__spec-wide{grid-column:1 / -1;border-top:1px solid var(--border-soft);padding-top:var(--sp-12)}
.pk__spec .pk__spec-wide dd{font-size:var(--fs-small);font-weight:400}

/* Randuri de echipamente: imagine continuta, text liber, cantitate separata.
   Vechile miniaturi de 56x56 nu puteau contine modelul si descrierea. */
.pk__produse{display:grid;gap:var(--sp-12);margin:0;padding:0;list-style:none}
.pk__produs{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-16);
  min-width:0;
  padding:var(--sp-12);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface-raised);
}
.pk__produs img,.pk__produs-gol{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  padding:var(--sp-4);
  border-radius:var(--r-xs);
  background:#fff; /* Fotografiile existente au fundal alb. */
  object-fit:contain;
}
.pk__produs-gol{background:var(--surface-sunken);color:var(--text-muted)}
.pk__produs-gol .icon{width:24px;height:24px}
.pk__produs-texte{display:grid;gap:var(--sp-4);min-width:0;overflow-wrap:anywhere}
.pk__produs-texte b{font-size:var(--fs-body);font-weight:600;line-height:1.4;color:var(--text)}
.pk__produs-texte span{font-size:var(--fs-small);line-height:1.4;color:var(--text-muted)}
.pk__produs-qty{white-space:nowrap;color:var(--accent-text);font-family:var(--f-mono);font-size:var(--fs-small)}

/* Restul sistemului pastreaza exact denumirile si preturile din date. */
.pk__linii{margin:0;padding:0;list-style:none}
.pk__linii li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:var(--sp-8) var(--sp-16);
  padding:var(--sp-12) 0;
  border-bottom:1px solid var(--border-soft);
  font-size:var(--fs-small);
  line-height:1.45;
}
.pk__linii li:first-child{padding-top:0}
.pk__linii li:last-child{padding-bottom:0;border-bottom:0}
.pk__linii span{min-width:0;overflow-wrap:anywhere;color:var(--text)}
.pk__linii b{font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-muted)}
.pk__nota{display:flex;align-items:flex-start;gap:var(--sp-8);font-size:var(--fs-small);line-height:1.5}
.pk__nota .icon{width:16px;height:16px;flex:0 0 16px;margin-top:3px;color:var(--accent-text)}
.pk__varianta{padding:var(--sp-16);border-left:2px solid var(--accent);background:var(--accent-wash)}
.pk__varianta h4{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-body);line-height:1.4}
.pk__varianta .icon{width:18px;height:18px;flex:none;color:var(--accent-text)}
.pk__varianta p{margin-top:var(--sp-8);font-size:var(--fs-small);line-height:1.5}
.pk__varianta-pret b{color:var(--text)}

/* Comparatia pastreaza intrarea ei si derularea orizontala a tabelului. */
.pk__cmp-grup{min-width:0}
.pk__cmp-grup h4{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-16)}
.pk__cmp-grup h4 .icon{width:20px;height:20px;color:var(--accent-text)}
.pk__cmp .pkg-cmp{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}

/* Piciorul apartine grilei, fara suprapuneri sau spatiu rezervat artificial
   in continut. Cifrele pretului raman tabulare. */
.pk__picior{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-16) var(--sp-24);
  padding:var(--sp-16) var(--sp-32);
  border-top:1px solid var(--border);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--surface-raised);
}
.pk__pret{display:grid;gap:var(--sp-4);min-width:0;margin:0}
.pk__pret span{font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.pk__pret b{font-family:var(--f-head);font-size:var(--fs-stat);font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap;color:var(--text)}
.pk__pret small{font-size:var(--fs-label);line-height:1.4;color:var(--text-muted)}
/* Rata lunara, sub pretul intreg: aceeasi bordura punctata ca pe carduri si
   ca pe bonul de sub pachete, ca sa se vada ca e acelasi lucru. */
.pk__rate{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-4) var(--sp-8);
  margin-top:var(--sp-4);
  padding:var(--sp-4) var(--sp-8);
  border:1px dashed var(--accent-line);
  border-radius:var(--r-sm);
  background:var(--accent-wash);
}
.pk__rate[hidden]{display:none}
.pk__rate b{font-family:var(--f-head);font-size:var(--fs-body);color:var(--accent-text)}
.pk__rate i{font-style:normal;font-size:var(--fs-micro);letter-spacing:.06em;color:var(--accent-text)}
.pk__rate span{color:var(--text-muted)}
.pk__cta{flex:0 0 auto;min-height:48px;white-space:normal;text-align:center}

@media (min-width:860px){
  .pk__spec{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pk__spec .pk__spec-long{grid-column:span 2}
}

/* Telefon: aproape tot ecranul, cu margini de siguranta si actiunea pe toata
   latimea. Cele trei zone raman separate. */
@media (max-width:640px){
  .pk{
    padding:max(var(--sp-8),env(safe-area-inset-top)) max(var(--sp-8),env(safe-area-inset-right)) max(var(--sp-8),env(safe-area-inset-bottom)) max(var(--sp-8),env(safe-area-inset-left));
  }
  .pk__panou{
    height:100%;
    max-height:calc(100dvh - max(var(--sp-8),env(safe-area-inset-top)) - max(var(--sp-8),env(safe-area-inset-bottom)));
    border-radius:var(--r-md);
  }
  .pk__bar{gap:var(--sp-12);padding:var(--sp-16)}
  .pk__bar h2{font-size:var(--fs-h3)}
  .pk__pozitionare{font-size:var(--fs-small)}
  .pk__corp{padding:var(--sp-20) var(--sp-16) var(--sp-24)}
  .pk__spec{gap:var(--sp-16) var(--sp-12);padding:var(--sp-12)}
  .pk__spec dd{font-size:var(--fs-small)}
  .pk__produs{grid-template-columns:48px minmax(0,1fr) auto;gap:var(--sp-12)}
  .pk__produs img,.pk__produs-gol{width:48px;height:48px}
  .pk__produs-texte b{font-size:var(--fs-small)}
  .pk__produs-texte span{font-size:var(--fs-label)}
  .pk__picior{flex-direction:column;align-items:stretch;padding:var(--sp-12) var(--sp-16) var(--sp-16);gap:var(--sp-12);border-radius:0 0 var(--r-md) var(--r-md)}
  .pk__cta{width:100%;min-width:0;padding:var(--sp-12) var(--sp-16)}
}
@media (max-width:380px){
  .pk__spec{grid-template-columns:minmax(0,1fr)}
  .pk__spec .pk__spec-long{grid-column:auto}
  .pk__linii li{grid-template-columns:minmax(0,1fr)}
  .pk__linii b{justify-self:start}
}
@media (max-height:520px) and (orientation:landscape){
  .pk{padding:max(var(--sp-8),env(safe-area-inset-top)) max(var(--sp-8),env(safe-area-inset-right)) max(var(--sp-8),env(safe-area-inset-bottom)) max(var(--sp-8),env(safe-area-inset-left))}
  .pk__panou{max-height:calc(100dvh - max(var(--sp-8),env(safe-area-inset-top)) - max(var(--sp-8),env(safe-area-inset-bottom)))}
  .pk__bar{padding:var(--sp-12) var(--sp-16)}
  .pk__picior{flex-direction:row;align-items:center;padding:var(--sp-8) var(--sp-16)}
  .pk__cta{width:auto}
  .pk__pret b{font-size:var(--fs-h4)}
}
@media (prefers-reduced-motion:reduce){
  .pk,.pk__panou{transition:none}
}