/*
Theme Name:  Zisto Theme
Theme URI:   https://zisto.ro
Author:      Zisto PRO
Author URI:  https://zisto.ro
Description: Tema oficială Zisto — platformă de produse affiliate din România. Minimalistă, orientată PageSpeed, conectată la pluginul zisto-bridge.
Version:     1.0.0
License:     Proprietary
Text Domain: zisto-theme
*/

/* ============================================================
   CSS VARIABLES — paleta oficială Zisto
   ============================================================ */
:root {
  /* Brand */
  --z-primary:        #6c5ce7;
  --z-primary-dark:   #5a4bd1;
  --z-primary-light:  #a29bfe;
  --z-accent:         #fd79a8;
  --z-accent-fire:    #e17055;

  /* Gradients */
  --z-grad-hero:      linear-gradient(135deg, #6c5ce7 0%, #a29bfe 50%, #fd79a8 100%);
  --z-grad-fire:      linear-gradient(135deg, #e17055 0%, #fd79a8 100%);
  --z-grad-card:      linear-gradient(135deg, #f8f9ff 0%, #fff 100%);

  /* Neutrals */
  --z-bg:             #ffffff;
  --z-bg-white:       #ffffff;
  --z-border:         #e8e8f0;
  --z-border-light:   #f0f0f8;

  /* Text */
  --z-text:           #1a1a2e;
  --z-text-muted:     #6b7280;
  --z-text-light:     #9ca3af;

  /* Orbit */
  --z-orbit-r1:       #c5b8ff;
  --z-orbit-r2:       #a8e6d8;
  --z-orbit-r3:       #ffb8d0;

  /* UI */
  --z-radius:         12px;
  --z-radius-sm:      8px;
  --z-radius-pill:    999px;
  --z-shadow-sm:      0 1px 4px rgba(0,0,0,.06);
  --z-shadow:         0 4px 20px rgba(108,92,231,.10);
  --z-shadow-hover:   0 8px 32px rgba(108,92,231,.18);

  /* Transitions */
  --z-ease:           cubic-bezier(.4,0,.2,1);
  --z-dur:            220ms;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Figtree', 'Segoe UI', sans-serif;
  background: var(--z-bg);
  color: var(--z-text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--z-primary); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
input, textarea, select { font: inherit; }

/* ============================================================
   LAYOUT
   ============================================================ */
.z-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.z-wrap--narrow {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   TIPOGRAFIE
   ============================================================ */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.25;
  color: var(--z-text);
}

h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.2rem, 3vw, 1.7rem); }
h3 { font-size: clamp(1rem, 2.5vw, 1.25rem); }

/* ============================================================
   BUTOANE
   ============================================================ */
.z-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: var(--z-radius-pill);
  font-weight: 700;
  font-size: .9rem;
  transition: transform var(--z-dur) var(--z-ease),
              box-shadow var(--z-dur) var(--z-ease),
              background var(--z-dur) var(--z-ease);
  white-space: nowrap;
}

.z-btn:hover { transform: translateY(-1px); }

.z-btn--primary {
  background: var(--z-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(108,92,231,.35);
}
.z-btn--primary:hover {
  background: var(--z-primary-dark);
  box-shadow: 0 6px 24px rgba(108,92,231,.45);
  color: #fff;
}

.z-btn--outline {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 2px solid rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
}
.z-btn--outline:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.8);
  color: #fff;
}

.z-btn--ghost {
  background: var(--z-bg);
  color: var(--z-primary);
  border: 2px solid var(--z-border);
}
.z-btn--ghost:hover {
  background: var(--z-border-light);
  border-color: var(--z-primary-light);
}

.z-btn--fire {
  background: var(--z-grad-fire);
  color: #fff;
  box-shadow: 0 4px 16px rgba(225,112,85,.35);
}
.z-btn--fire:hover {
  box-shadow: 0 6px 24px rgba(225,112,85,.50);
  color: #fff;
}

/* ============================================================
   BADGE-URI
   ============================================================ */
.z-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--z-radius-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.z-badge--discount  { background: #ffeaa7; color: #856404; }
.z-badge--in-stock  { background: #d1fae5; color: #065f46; }
.z-badge--out-stock { background: #fee2e2; color: #991b1b; }
.z-badge--new       { background: #ede9fe; color: #5b21b6; }

/* ============================================================
   CARD PRODUS
   ============================================================ */
.z-product-card {
  background: var(--z-bg-white);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow var(--z-dur) var(--z-ease),
              transform var(--z-dur) var(--z-ease);
}
.z-product-card:hover {
  box-shadow: var(--z-shadow-hover);
  transform: translateY(-2px);
}
.z-product-card__title {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--z-text);
}
.z-product-card__price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--z-primary);
}
.z-product-card__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.z-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.z-breadcrumb {
  font-size: .8rem;
  color: var(--z-text-muted);
  margin-bottom: 16px;
}
.z-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.z-breadcrumb li + li::before { content: '›'; margin-right: 4px; color: var(--z-text-light); }
.z-breadcrumb a { color: var(--z-primary); }
.z-breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   FAQ
   ============================================================ */
.z-faq { margin-top: 40px; }
.z-faq h2 { margin-bottom: 20px; font-size: 1.3rem; }
.z-faq-item {
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.z-faq-item h3 {
  font-size: .95rem;
  padding: 14px 16px;
  background: var(--z-bg);
  color: var(--z-text);
  font-weight: 700;
}
.z-faq-answer {
  padding: 12px 16px;
  font-size: .9rem;
  color: var(--z-text-muted);
  line-height: 1.6;
}

/* ============================================================
   MAIN CONTAINER
   ============================================================ */
#z-main {
  min-height: 60vh;
  padding-bottom: 60px;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.z-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   RESPONSIVE — mobile breakpoints
   ============================================================ */
@media (max-width: 600px) {
  .z-product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .z-wrap { padding: 0 14px; }
}
@media (max-width: 380px) {
  .z-product-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   DARK MODE (respect system preference)
   ============================================================ */
/* Dark mode dezactivat — site mereu pe fundal alb */
/* @media (prefers-color-scheme: dark) { ... } */

/* ============================================================
   UX BLOCKS — Verdict, Merită, Scoruri
   ============================================================ */

/* Verdict Zisto */
.z-verdict-block {
  background: #EEEDFE;
  border: 0.5px solid #AFA9EC;
  border-radius: var(--z-radius);
  padding: 20px;
  margin: 24px 0;
}
.z-verdict-label {
  font-size: .75rem;
  font-weight: 700;
  color: #534AB7;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.z-verdict-text {
  font-size: .95rem;
  color: #26215C;
  line-height: 1.6;
  margin-bottom: 12px;
}
.z-verdict-meta { display: flex; flex-direction: column; gap: 6px; }
.z-vm-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .85rem;
  color: var(--z-text);
}
.z-vm-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.z-vm-good .z-vm-dot { background: #3B6D11; }
.z-vm-warn .z-vm-dot { background: #BA7517; }

/* Merită dacă */
.z-merit-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0;
}
@media (max-width: 480px) {
  .z-merit-block { grid-template-columns: 1fr; }
}
.z-merit-col {
  border-radius: var(--z-radius);
  padding: 14px;
  border: 0.5px solid;
}
.z-merit-yes {
  background: #EAF3DE;
  border-color: #97C459;
}
.z-merit-no {
  background: #FCEBEB;
  border-color: #F09595;
}
.z-merit-title {
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.z-merit-yes .z-merit-title { color: #3B6D11; }
.z-merit-no  .z-merit-title { color: #A32D2D; }
.z-merit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.z-merit-list li {
  font-size: .82rem;
  color: var(--z-text);
  line-height: 1.4;
  padding-left: 12px;
  position: relative;
}
.z-merit-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: inherit;
}
.z-merit-yes .z-merit-list li::before { color: #3B6D11; }
.z-merit-no  .z-merit-list li::before { color: #A32D2D; }

/* Scoruri */
.z-scores-block {
  background: var(--z-bg);
  border: 0.5px solid var(--z-border);
  border-radius: var(--z-radius);
  padding: 16px 20px;
  margin: 24px 0;
}
.z-scores-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--z-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
}
.z-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.z-score-label {
  font-size: .82rem;
  color: var(--z-text-muted);
  width: 150px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .z-score-label { width: 120px; font-size: .78rem; }
}
.z-score-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--z-border);
  border-radius: 3px;
  overflow: hidden;
}
.z-score-bar {
  height: 100%;
  background: #534AB7;
  border-radius: 3px;
  transition: width .3s ease;
}
.z-score-val {
  font-size: .82rem;
  font-weight: 700;
  color: #534AB7;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ============================================================
   FAZA 2 — Comparator buget + Alternative
   ============================================================ */

/* Comparator buget */
.z-budget-block {
  border: 0.5px solid var(--z-border);
  border-radius: var(--z-radius);
  overflow: hidden;
  margin: 24px 0;
}
.z-budget-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--z-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 12px 16px;
  background: var(--z-bg);
  border-bottom: 0.5px solid var(--z-border);
}
.z-budget-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--z-border);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.z-budget-row:last-child { border-bottom: none; }
.z-budget-row:hover { background: var(--z-bg); }
.z-budget-current {
  background: #EEEDFE;
}
.z-budget-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--z-primary);
  width: 90px;
  flex-shrink: 0;
}
.z-budget-current .z-budget-price { color: #534AB7; }
.z-budget-desc { flex: 1; min-width: 0; }
.z-budget-name {
  font-size: .82rem;
  font-weight: 500;
  color: var(--z-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.z-budget-note {
  font-size: .75rem;
  color: var(--z-text-muted);
}
.z-budget-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}
.z-badge-cheap   { background: #EAF3DE; color: #3B6D11; }
.z-badge-current { background: #534AB7; color: #EEEDFE; }
.z-badge-premium { background: #FAEEDA; color: #854F0B; }

/* Alternative */
.z-alts-block {
  margin: 24px 0;
}
.z-alts-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--z-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.z-alts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.z-alt-card {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border: 0.5px solid var(--z-border);
  border-radius: var(--z-radius);
  background: var(--z-bg-white);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s;
}
.z-alt-card:hover { border-color: #534AB7; }
.z-alt-img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--z-bg);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.z-alt-img img { width: 100%; height: 100%; object-fit: contain; }
.z-alt-placeholder { font-size: 20px; }
.z-alt-info { flex: 1; min-width: 0; }
.z-alt-name {
  font-size: .82rem;
  font-weight: 500;
  color: var(--z-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.z-alt-tag {
  font-size: .72rem;
  color: #534AB7;
  margin-bottom: 2px;
}
.z-alt-price {
  font-size: .85rem;
  font-weight: 700;
  color: var(--z-primary);
}