.zoldhang-shortcode{
  border:1px solid #e5e5e5;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  padding:14px 16px;
  margin:16px 0;
}

.zoldhang-sc-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.zoldhang-sc-title1{
  font-weight:800;
  font-size:18px;
  line-height:1.25;
}

.zoldhang-sc-title2{
  margin-top:4px;
  color:#666;
  font-size:13px;
}

.zoldhang-sc-rate{display:flex;gap:6px;align-items:center}
.zoldhang-sc-rate .zh-rate{
  border:1px solid #d0d0d0;
  background:#f7f7f7;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;

  /*
    Egyes témák / böngészők a <button> szövegét felülírhatják (pl. fehér/átlátszó),
    így a 1.0x / 1.25x / 1.5x felirat eltűnik. Kényszerítjük a szöveg színét.
  */
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  text-transform:none;
}
.zoldhang-sc-rate .zh-rate.active{background:#fff;font-weight:700}

.zoldhang-sc-player{margin-top:10px}
.zoldhang-sc-player audio{width:100%}

.zoldhang-sc-tools{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.zoldhang-sc-tools .zh-tool{
  border:1px solid #d0d0d0;
  background:#fff;
  border-radius:8px;
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;

  /*
    Egyes WP témák globálisan felülírják a <button> színét (pl. fehér/átlátszó),
    amitől a gomb szövege „eltűnik”. Itt explicit beállítjuk.
  */
  color:#111 !important;
  line-height:1.2;
  text-transform:none;
  letter-spacing:normal;
}

.zoldhang-sc-links{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.zoldhang-sc-links .zh-link{
  display:inline-block;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #d0d0d0;
  text-decoration:none;
  font-size:13px;
  color:#111 !important;
}

.zoldhang-sc-extra{margin-top:12px;font-size:14px;line-height:1.5}
.zoldhang-sc-extra img{max-width:100%;height:auto;display:block;margin:.35rem 0}

.zoldhang-embed{margin-top:6px}
.zoldhang-embed .video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px}
.zoldhang-embed .video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%}

/* Shortcode panel: alsó sor (bal szöveg + jobb ikonok) */
.zh-bottom-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}

.zh-bottom-text{font-weight:700}

.zh-social-inline{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* "Kövess minket": plusz ikon -> lenyíló social sor */
.zh-social-inline.zh-social-collapsible{
  position:relative;
  flex-wrap:nowrap;
}

.zh-social-popover{
  position:absolute;
  right:0;
  bottom:46px;
  display:none;
  gap:10px;
  align-items:center;
  padding:10px;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:12px;
  box-shadow:0 12px 26px rgba(0,0,0,.12);
  z-index:99999;
}

.zh-social-inline.zh-social-collapsible.is-open .zh-social-popover{
  display:flex;
}

.zh-social.zh-social-toggle{
  background:#fff;
  border-color:#e5e5e5;
  color:#111;
  position:relative;
}

/*
  Biztos ikon-megjelenítés (nagy lejátszó): háttérképes SVG.
  A CSS mask egyes böngészőkben / CSP mellett el tud hasalni → ilyenkor csak egy szürke négyzet látszana.
  A background-image-es megoldás stabilabb.
*/
/*
  Toggle ikon: valódi karakter (▲/▼) a HTML-ben.
  Ez téma/caching/CSP mellett is biztosan megjelenik.
  A korábbi ::before background-image-es ikon maradhatna, de itt direkt kikapcsoljuk,
  hogy mindig a nyíl legyen látható.
*/
.zh-social.zh-social-toggle::before{ display:none; content:none; }

.zh-social.zh-social-toggle .zh-toggle-icon{
  font-size:18px;
  font-weight:700;
  line-height:1;
  user-select:none;
}

.zh-social{
  width:var(--zh-social-size,36px);
  height:var(--zh-social-size,36px);
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid #e5e5e5;
  background:#fff;
}

/* Egyedi (képes) ikonok */
.zh-social .zh-social-img,
.zh-social img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Social ikonok külön shortcode-hoz */
.zh-social-shortcode{
  display:flex;
  gap:var(--zh-social-gap,10px);
  align-items:center;
  justify-content:flex-start;
}

.zh-social svg{width:calc(var(--zh-social-size,36px) * 0.5);height:calc(var(--zh-social-size,36px) * 0.5);display:block}

.zh-social.zh-facebook{background:#1877F2;border-color:#1877F2}
.zh-social.zh-spotify{background:#1DB954;border-color:#1DB954}
.zh-social.zh-youtube{background:#FF0000;border-color:#FF0000}
.zh-social.zh-apple{background:#111;border-color:#111}
.zh-social.zh-tiktok{background:#000;border-color:#000}

.zh-social svg path, .zh-social svg circle{fill:#fff}

/* Akciógombok egy sorban */
.zoldhang-sc-tools,
.zoldhang-sc-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.zoldhang-sc-tools .zh-tool,
.zoldhang-sc-links .zh-link{
  white-space:nowrap;
}

/* Egy sorban: a 3 akciógomb + MP3 link (Nyomtatás után) */
.zoldhang-sc-actions{
  display:flex;
  flex-wrap:wrap; /* ha nagyon szűk a hely (mobil), törhet */
  gap:8px;
  align-items:center;
}

/* A meglévő blokkok "feloldása", hogy a gombok egy flex sorba kerüljenek */
.zoldhang-sc-actions .zoldhang-sc-tools,
.zoldhang-sc-actions .zoldhang-sc-links{
  display:contents;
}

.zoldhang-sc-actions .zh-tool,
.zoldhang-sc-actions .zh-link{
  white-space:nowrap;
}


/* Szöveg az akciógombok felett */
.zoldhang-actions-text{margin:0 0 8px 0; font-size:14px; line-height:1.4;}


/* Szöveg a lejátszó felett */
.zoldhang-top-text{margin:0 0 12px 0; font-size:15px; line-height:1.5;}

.zoldhang-title-top-text{
  margin: 0 0 6px 0;
  font-size: 14px;
  line-height: 1.35;
}

/* -------------------- Mini MP3 menü: [zoldhang_mini_menu] -------------------- */
.zh-mini-menu-wrap{
  display:flex;
  width:100%;
  /* több „levegő” a kép/szöveg felé */
  margin:18px 0 26px;
}

/* Newsmatic meta sorban (szerzővel egy sorban) legyen kompakt, ne törjön új sorba */
.zh-mini-menu-wrap.zh-context-meta{
  display:inline-flex;
  width:auto;
  margin:0 10px;
  vertical-align:middle;
}

/* Meta sorban a méretet a PHP által átadott --zh-mm-size változó adja */
.zh-mini-menu-wrap.zh-context-meta .zh-mini-menu{gap:8px}

.zh-mini-menu-wrap.zh-align-left{justify-content:flex-start}
.zh-mini-menu-wrap.zh-align-center{justify-content:center}
.zh-mini-menu-wrap.zh-align-right{justify-content:flex-end}

.zh-mini-menu{
  --zh-mini-accent: #27c052;
  --zh-mm-size: 40px;
  --zh-mm-icon: calc(var(--zh-mm-size) * 0.45);
  display:inline-flex;
  gap:10px;
  align-items:center;
}

.zh-mm-btn{
  width:var(--zh-mm-size);
  height:var(--zh-mm-size);
  border-radius:calc(var(--zh-mm-size) * 0.25);
  border:1px solid #e5e5e5;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  line-height:1;
  color:var(--zh-mini-accent);
}

.zh-mm-btn svg{width:var(--zh-mm-icon);height:var(--zh-mm-icon);display:block}
.zh-mm-btn svg path{fill:currentColor}

.zh-mm-play{
  background:var(--zh-mini-accent);
  border-color:var(--zh-mini-accent);
  color:#fff;
}

.zh-mm-plus{position:relative;display:inline-flex}

.zh-mm-follow{position:relative;display:inline-flex}

/*
  "Kövess minket" (share) ikon – a téma egyes esetekben el tudja rejteni az inline SVG-t,
  ezért itt egy maszkolt (mask) ikont használunk, ami biztosan látszik és az accent színt követi.
*/
.zh-mm-follow-btn{position:relative}
.zh-mm-follow-btn::before{
  content:"";
  width:var(--zh-mm-icon);
  height:var(--zh-mm-icon);
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  /* accent színű (zöld) ikon: kitöltés a mini menü színével */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300a000' d='M18 16.08a2.9 2.9 0 0 0-1.96.77L8.91 12.7a3.27 3.27 0 0 0 0-1.39l7.02-4.11A2.99 2.99 0 1 0 15 5a3 3 0 0 0 .06.59L8.04 9.7a3 3 0 1 0 0 4.6l7.02 4.11A3 3 0 1 0 18 16.08z'/%3E%3C/svg%3E");
}
.zh-mm-follow-popover{
  position:absolute;
  top:calc(var(--zh-mm-size) + 6px);
  right:0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  padding:10px;
  display:none;
  gap:10px;
  z-index:99999;
}
.zh-mm-follow.is-open .zh-mm-follow-popover{display:flex}
.zh-mm-follow-popover .zh-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:8px;
  text-decoration:none;
}
.zh-mm-follow-popover .zh-social svg{width:18px;height:18px;display:block}

.zh-mm-dropdown{
  position:absolute;
  top:calc(var(--zh-mm-size) + 6px);
  left:0;
  min-width:260px;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  padding:8px;
  display:none;
  z-index:9999;
}

/* Meta sorban jobbra zárt elhelyezés (ha a téma flexbox meta sort használ) */
.zh-mini-menu-wrap.zh-context-meta.zh-meta-right{
  margin-left:auto;
  float:right;
}

/* Mobilon (kis szélességnél) a meta sorban ne egy sorba kényszerítsük,
   hanem kerüljön a szerző/dátum sora alá, teljes szélességben. */
@media (max-width: 768px){
  .zh-mini-menu-wrap.zh-context-meta{
    display:block;
    width:100%;
    margin:8px 0 0;
  }
  .zh-mini-menu-wrap.zh-context-meta.zh-meta-right{
    margin-left:0;
    float:none;
  }
  .zh-mini-menu-wrap.zh-context-meta .zh-mini-menu{
    gap:10px;
  }
}

.zh-mm-plus.is-open .zh-mm-dropdown{display:block}

/* Szerzői ajánló (toll ikon) popover */
.zh-mm-author-popover{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  padding:10px;
  min-width:280px;
  max-width:360px;
  z-index:10000;
}
.zh-mm-author-head{font-weight:800;font-size:14px;margin:0 0 8px;color:#111}
.zh-mm-author-empty{font-size:13px;color:#666;padding:4px 0}
.zh-mm-author-list{list-style:none;margin:0;padding:0}
.zh-mm-author-list li{margin:0;padding:6px 0;border-top:1px solid #f0f0f0}
.zh-mm-author-list li:first-child{border-top:none}
.zh-mm-author-list a{text-decoration:none;color:#111}
.zh-mm-author-list a:hover{text-decoration:underline}
.zh-mm-author-date{display:block;font-size:12px;color:#6b7280;margin-top:2px}

.zh-mm-item{
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
  color:#111 !important;
}

.zh-mm-item:hover{background:#f5f5f5}
.zh-mm-item:disabled{opacity:.5;cursor:not-allowed}

/* Force follow/share icon visibility (theme overrides) */
.zh-mm-follow-btn{color:var(--zh-mini-accent) !important;}
.zh-mm-follow-btn svg path{fill:currentColor !important;}


/* Automatikus social blokk a bejegyzés végén */
.zh-after-post-wrap{margin-top:24px;padding-top:18px;border-top:1px solid #e5e5e5;}
.zh-after-post-text{text-align:center;font-weight:700;margin-bottom:10px;}