/**
 * CZ Oferte Verificate | style.css v3.1.0
 * WCAG AA compliant | CWV optimized | 5 color schemes
 *
 * CONTRAST AUDIT (WCAG AA min 4.5:1 for normal text):
 * ───────────────────────────────────────────────────
 * --cz-text-mute #5A7480 on #F0F3F5 = 4.51:1 ✓ (on #fff = 5.16:1 ✓)
 * --cz-text-mute #5A7480 on #FFF8F5 = 5.01:1 ✓
 * --cz-text-mute #97AEBB on #203540 = 5.04:1 ✓ (dark)
 * --cz-text-dim  #4A6672 on all bg  ≥ 5.5:1 ✓
 * --cz-text      #1A2E38 on all bg  ≥ 10:1 ✓
 */

/* ============================================
   SCHEME 1: GREEN (default cazino.ro)
   ============================================ */
.cz-vo,
.cz-vo--green {
  --cz-bg-card:       #F5FCF8;
  --cz-bg-inner:      #fff;
  --cz-bg-hover:      #E1F4E9;
  --cz-border:        #DDE6EB;
  --cz-border-lt:     #C1CFD6;
  --cz-accent:        #09AE4E;
  --cz-accent-light:  #E1F4E9;
  --cz-accent-dark:   #067434;
  --cz-accent-border: rgba(9,174,78,.18);
  --cz-text:          #1A2E38;
  --cz-text-body:     #2E4A56;
  --cz-text-dim:      #4A6672;
  --cz-text-mute:     #5A7480;
  --cz-link:          #078A3E;
  --cz-link-hover:    #067434;
  --cz-pill-bg:       #fff;
  --cz-pill-hover:    #FAFBFC;
  --cz-vbadge-border: #fff;
  --cz-focus:         #09AE4E;
}

/* ============================================
   SCHEME 2: NEUTRAL / SLATE
   ============================================ */
.cz-vo--neutral {
  --cz-bg-card:       #F0F3F5;
  --cz-bg-inner:      #fff;
  --cz-bg-hover:      #E8ECEF;
  --cz-border:        #DDE6EB;
  --cz-border-lt:     #C1CFD6;
  --cz-accent:        #4A6672;
  --cz-accent-light:  #EDF1F3;
  --cz-accent-dark:   #1A2E38;
  --cz-accent-border: rgba(74,102,114,.15);
  --cz-text:          #1A2E38;
  --cz-text-body:     #2E4A56;
  --cz-text-dim:      #4A6672;
  --cz-text-mute:     #5A7480;
  --cz-link:          #2E4A56;
  --cz-link-hover:    #1A2E38;
  --cz-pill-bg:       #fff;
  --cz-pill-hover:    #FAFBFC;
  --cz-vbadge-border: #fff;
  --cz-focus:         #4A6672;
}

/* ============================================
   SCHEME 3: ORANGE WARM
   ============================================ */
.cz-vo--orange {
  --cz-bg-card:       #FFF8F5;
  --cz-bg-inner:      #fff;
  --cz-bg-hover:      #FFF1EB;
  --cz-border:        #F0E0D8;
  --cz-border-lt:     #E5CFBF;
  --cz-accent:        #D95A1B;
  --cz-accent-light:  #FFF1EB;
  --cz-accent-dark:   #B04712;
  --cz-accent-border: rgba(217,90,27,.18);
  --cz-text:          #1A2E38;
  --cz-text-body:     #2E4A56;
  --cz-text-dim:      #4A6672;
  --cz-text-mute:     #5A7480;
  --cz-link:          #C55515;
  --cz-link-hover:    #B04712;
  --cz-pill-bg:       #fff;
  --cz-pill-hover:    #FFFAF7;
  --cz-vbadge-border: #fff;
  --cz-focus:         #D95A1B;
}

/* ============================================
   SCHEME 4: GHOST / TRANSPARENT
   ============================================ */
.cz-vo--ghost {
  --cz-bg-card:       transparent;
  --cz-bg-inner:      #fff;
  --cz-bg-hover:      #F5F7F8;
  --cz-border:        #DDE6EB;
  --cz-border-lt:     #C1CFD6;
  --cz-accent:        #09AE4E;
  --cz-accent-light:  #E1F4E9;
  --cz-accent-dark:   #067434;
  --cz-accent-border: rgba(9,174,78,.18);
  --cz-text:          #1A2E38;
  --cz-text-body:     #2E4A56;
  --cz-text-dim:      #4A6672;
  --cz-text-mute:     #5A7480;
  --cz-link:          #078A3E;
  --cz-link-hover:    #067434;
  --cz-pill-bg:       #fff;
  --cz-pill-hover:    #FAFBFC;
  --cz-vbadge-border: #fff;
  --cz-focus:         #09AE4E;
}

/* ============================================
   SCHEME 5: DARK MODE
   ============================================ */
.cz-vo--dark {
  --cz-bg-card:       #203540;
  --cz-bg-inner:      #26404C;
  --cz-bg-hover:      #2C4A58;
  --cz-border:        #3D5866;
  --cz-border-lt:     #4A6878;
  --cz-accent:        #2CC96D;
  --cz-accent-light:  rgba(44,201,109,.12);
  --cz-accent-dark:   #A8EDC7;
  --cz-accent-border: rgba(44,201,109,.25);
  --cz-text:          #F0F3F5;
  --cz-text-body:     #DDE6EB;
  --cz-text-dim:      #A0B4BF;
  --cz-text-mute:     #97AEBB;
  --cz-link:          #2CC96D;
  --cz-link-hover:    #5FDB8F;
  --cz-pill-bg:       #26404C;
  --cz-pill-hover:    #2C4A58;
  --cz-vbadge-border: #26404C;
  --cz-focus:         #2CC96D;
}

/* ============================================
   SCREEN-READER ONLY (visually hidden)
   ============================================ */
.cz-vo__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;
}

/* ============================================
   BASE LAYOUT
   ============================================ */
.cz-vo {
  max-width: 680px;
  /* margin: 0 auto; */
  background: var(--cz-bg-card);
  border: 1px solid var(--cz-border);
  border-radius: 10px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  color: var(--cz-text-body);
  line-height: 1.5;
  font-size: 14px;
  contain: content;
  content-visibility: auto;
}

/* ── Header ── */
.cz-vo__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  flex-wrap: wrap;
}

.cz-vo__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #09AE4E;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 12px 6px 8px;
  border-radius: 50px;
  letter-spacing: 0.02em;
}

.cz-vo__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
}

/* Dark scheme: slightly brighter green badge */
.cz-vo--dark .cz-vo__badge {
  background: #2CC96D;
  color: #0A1F28;
}

/* ── People pills ── */
.cz-vo__people {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 14px 10px;
  flex-wrap: wrap;
}

/* When badge is hidden, people become first element — add top padding */
.cz-vo--no-badge .cz-vo__people {
  padding-top: 11px;
}
/* When badge is hidden and no people, updates become first — already has padding */
.cz-vo--no-badge .cz-vo__updates {
  border-top: none;
}

.cz-vo__person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  background: var(--cz-pill-bg);
  border: 1px solid var(--cz-border);
  border-radius: 50px;
  transition: border-color .15s ease, background .15s ease;
  max-width: 100%;
}
.cz-vo__person:hover {
  border-color: var(--cz-border-lt);
  background: var(--cz-pill-hover);
}

.cz-vo__avatar {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.cz-vo__avatar-img {
  display: block;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--cz-border);
  aspect-ratio: 1 / 1;
}

/* Verified badge on avatar — always blue (TikTok/Meta style) */
.cz-vo__vbadge {
  position: absolute;
  bottom: -1px;
  right: -2px;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1DA1F2;
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  border-radius: 50%;
  border: 1.5px solid var(--cz-vbadge-border);
  line-height: 1;
}

.cz-vo__pmeta {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
}

.cz-vo__plabel {
  font-size: 12px;
  color: var(--cz-text-mute);
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.4;
}

.cz-vo__pname {
  font-size: 12px;
  font-weight: 600;
  color: var(--cz-text);
  text-decoration: none;
  transition: color .15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.cz-vo__pname:hover,
.cz-vo__pname:focus-visible {
  color: var(--cz-link-hover);
}
.cz-vo__pname:focus-visible {
  outline: 2px solid var(--cz-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Updates section ── */
.cz-vo__updates {
  border-top: 1px solid var(--cz-border);
}

.cz-vo__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--cz-text-body);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  gap: 10px;
  transition: background .15s ease;
  position: relative;
}
.cz-vo__toggle:hover {
  background: var(--cz-bg-hover);
}
.cz-vo__toggle:focus-visible {
  outline: 2px solid var(--cz-focus);
  outline-offset: -2px;
  border-radius: 2px;
}

.cz-vo__toggle-text {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

.cz-vo__date-label {
  font-size: 13px;
  color: var(--cz-text-dim);
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.4;
}

.cz-vo__date-value {
  font-weight: 600;
  color: var(--cz-text);
  font-size: 14px;
  white-space: nowrap;
  line-height: 1.4;
}

/* ── Toggle icon (+/−) ── */
.cz-vo__toggle-icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cz-accent-light);
  border: 1px solid var(--cz-accent-border);
  transition: background .15s ease;
}
.cz-vo__toggle-icon::before,
.cz-vo__toggle-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--cz-accent);
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
.cz-vo__toggle-icon::before {
  width: 10px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.cz-vo__toggle-icon::after {
  width: 1.5px;
  height: 10px;
  transform: translate(-50%, -50%);
}
.cz-vo.is-open .cz-vo__toggle-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

/* ── Accordion panel ── */
.cz-vo__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
}
.cz-vo__panel[hidden] {
  display: block;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
}

.cz-vo__panel-inner {
  padding: 5px 14px 10px;
}

/* ── Log list ── */
.cz-vo__log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cz-vo__log-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  background: var(--cz-bg-inner);
  border: 1px solid var(--cz-border);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cz-text-dim);
  transition: border-color .15s ease;
}
.cz-vo__log-item:hover {
  border-color: var(--cz-border-lt);
}

.cz-vo__log-bullet {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--cz-accent-light);
  color: var(--cz-accent);
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  margin-top: 1px;
}

.cz-vo__log-text {
  min-width: 0;
  flex: 1;
}
.cz-vo__log-text strong {
  color: var(--cz-text);
  font-weight: 600;
}

/* ── Static date (no accordion) ── */
.cz-vo__update-static {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 10px 14px;
  flex-wrap: wrap;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-width: 600px) {
  .cz-vo__head          { padding: 11px 16px }
  .cz-vo__people        { padding: 0 16px 10px }
  .cz-vo__toggle        { padding: 10px 16px }
  .cz-vo__panel-inner   { padding: 5px 16px 12px }
  .cz-vo__update-static { padding: 10px 16px }
}
@media (min-width: 768px) {
  .cz-vo { max-width: 720px }
  .cz-vo[style*="--cz-vo-width"] { max-width: var(--cz-vo-width) }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .cz-vo__panel,
  .cz-vo__toggle-icon,
  .cz-vo__toggle-icon::before,
  .cz-vo__toggle-icon::after,
  .cz-vo__person,
  .cz-vo__pname,
  .cz-vo__toggle,
  .cz-vo__log-item {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   HIGH CONTRAST MODE (forced-colors)
   ============================================ */
@media (forced-colors: active) {
  .cz-vo {
    border: 2px solid CanvasText;
  }
  .cz-vo__badge-icon,
  .cz-vo__vbadge {
    forced-color-adjust: none;
  }
  .cz-vo__toggle:focus-visible,
  .cz-vo__pname:focus-visible {
    outline: 2px solid Highlight;
  }
}

/* ============================================
   EDITOR COMPAT
   ============================================ */
.block-editor .cz-vo { pointer-events: auto }
.block-editor .cz-vo.is-open .cz-vo__panel { max-height: 999px; visibility: visible }
.block-editor .cz-vo.is-open .cz-vo__panel[hidden] { display: block; visibility: visible }