/* ===== HFL Locks – Phase 1 Styles ===== */

/* --- NEW: Modern Light Card Composer Design (SaaS Style) --- */

/* 1. Main Composer Card (White, Shadow, Rounded) */
#youzify-wall-form {
  border: 1px solid #dcdcde !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
  padding: 0 !important;
  overflow: visible !important;
  margin-bottom: 25px !important;
}

/* Fix Text Colors (Dark text on White bg) */
#youzify-wall-form textarea {
  color: #f2f2f2 !important;
  background: transparent !important;
  font-size: 15px !important;
  padding: 20px !important;
  min-height: 80px;
}
#youzify-wall-form textarea::placeholder {
  color: #8c8f94 !important;
}

/* 2. Lock / Flow Footer Area */
.hfl-composer-wrap {
  position: relative;
  background: #f8f9fa !important; /* Light gray footer */
  border-top: 1px solid #dcdcde !important;
  padding: 20px 25px !important;
  border-radius: 0 0 12px 12px !important;
  color: #1d2327 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0 !important;
}

/* Inputs & Labels (Clean Standard Style) */
.hfl-composer-wrap label {
  color: #1d2327 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  margin-bottom: 4px;
  display: block;
}
/* Main Switches */
.hfl-switch {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; margin-bottom: 0;
}
.hfl-switch span {
  font-weight: 700; font-size: 14px;
}
.hfl-switch input[type="checkbox"],
.hfl-switch input[type="radio"] {
  accent-color: #2271b1;
  width: 16px; height: 16px;
  margin: 0; cursor: pointer; border: 1px solid #ccc;
}

/* Text/Number Inputs */
.hfl-composer-wrap input[type="number"],
.hfl-composer-wrap input[type="text"] {
  background: #ffffff !important;
  border: 1px solid #c3c4c7 !important;
  border-radius: 6px !important;
  padding: 0 10px !important;
  height: 36px !important;
  line-height: 36px !important;
  color: #1d2327 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) inset !important;
  width: 100%; max-width: 100%;
}
.hfl-composer-wrap input[type="number"]:focus,
.hfl-composer-wrap input[type="text"]:focus {
  border-color: #2271b1 !important;
  box-shadow: 0 0 0 1px #2271b1 !important;
  outline: none !important;
}

/* Buttons in Footer */
.hfl-composer-wrap .button {
  background: #fff; border: 1px solid #2271b1; color: #2271b1;
  border-radius: 4px; padding: 4px 10px; cursor: pointer; font-weight: 600;
}
.hfl-composer-wrap .button-primary {
  background: #2271b1; border-color: #2271b1; color: #fff;
}

/* Hierarchy & Indentation for Options */
.hfl-price-row, .hfl-teaser-row, .hfl-duration-row, .hfl-peek-row, .hfl-free-row, .hfl-limit-row, .hfl-thumbnail-row {
  margin-top: 5px !important;
  padding: 15px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* Flow Builder Teleport Row */
#hfl-teleported-row {
  background: #f0f6fc; /* Slightly blueish to highlight feature */
  border: 1px solid #cce5ff;
  border-radius: 8px;
  padding: 12px 15px;
  margin-top: 10px;
}
/* Override inline styles from PHP */
#hfl-teleported-row .hfl-flow-row {
  color: #1d2327 !important; margin: 0 !important;
}
#hfl-open-flow-builder-action {
  background: #2271b1 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 5px 15px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-left: auto !important;
}
#hfl-open-flow-builder-action:hover {
  background: #135e96 !important;
}

/* --- NEW: Transform Upload Buttons (Sneak Peek/Voice) to Match "Edit Flow" --- */
/* Target any button/upload trigger specifically inside the peek row AND specific IDs including Remove Buttons */
.hfl-peek-row .button,
.hfl-peek-row button,
.hfl-peek-row input[type="button"],
.hfl-peek-row input[type="submit"],
.hfl-peek-row .hfl-upload-trigger,
.hfl-peek-row label[class*="button"],
#hfl-pick-thumb,
#hfl-remove-thumb,
#hfl-remove-peek {
  background: #2271b1 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 5px 15px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  /* Reset Size to be small and inline like "Edit Flow" */
  width: auto !important;
  display: inline-block !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  line-height: normal !important;
  text-decoration: none !important;
  text-transform: none !important;
  min-height: unset !important;
  max-width: fit-content !important;
}

.hfl-peek-row .button:hover,
.hfl-peek-row button:hover,
.hfl-peek-row input[type="button"]:hover,
.hfl-peek-row label[class*="button"]:hover,
#hfl-pick-thumb:hover,
#hfl-remove-thumb:hover,
#hfl-remove-peek:hover {
  background: #135e96 !important;
}

/* Hint Text */
.hfl-composer-wrap span {
  font-size: 12px; opacity: 0.8;
}

/* Helper Animation */
@keyframes hfl-shake-kf{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-3px)} }
.hfl-shake{ animation:hfl-shake-kf .45s ease }

/* Admin Warning */
.hfl-admin-warn{
  margin:8px 0 12px; padding:10px 12px; border-radius:6px;
  background:#fcf0f1; color:#d63638; font-weight:600; border:1px solid #d63638;
}

/* Toast */
.hfl-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 30px);
  min-width: 280px; max-width: 88vw; color:#fff; z-index:1000002;
  background:rgba(20,20,24,.9); border:1px solid rgba(255,255,255,.18); border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.35); padding:12px 14px; opacity:0; transition:all .22s ease;
}
.hfl-toast.is-on{ opacity:1; transform:translate(-50%,0) }
.hfl-toast__x{
  position:absolute; top:6px; right:8px; border:0; background:transparent; color:#fff; font-size:18px; cursor:pointer
}
.hfl-toast__msg a{ color:#fff; text-decoration:underline }
.hfl-toast--error{ background:rgba(160,20,28,.92) }
.hfl-toast--info{ background:rgba(30,32,48,.9) }

/* Modal */
.hfl-modal-backdrop{
  position:fixed; inset:0; background:rgba(10,10,14,.45);
  backdrop-filter:blur(4px) saturate(140%); display:none; z-index:999999;
  opacity:0; transition: opacity 160ms ease;
}
.hfl-modal{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,420px); color:#fff; border-radius:20px; overflow:hidden;
  background:linear-gradient(90deg,#f24f7c 0%, #7b5ed6 50%, #22c1d6 100%);
  box-shadow:0 18px 42px rgba(0,0,0,.35); display:none; z-index:1000000
}
.hfl-modal::before{
  content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:url('https://app.luca1998s.com/wp-content/plugins/youzify/includes/public/assets/images/geopattern.png');
  background-size:240px auto; background-position:center; background-repeat:repeat
}
.hfl-modal-inner{ position:relative; padding:20px }
.hfl-modal h3{ margin:0 0 6px 0; font-size:18px; letter-spacing:.02em }
.hfl-modal p{ margin:0 0 14px 0; opacity:.95 }
.hfl-modal-actions{ display:flex; align-items:center; justify-content:center }
.hfl-btns{ display:flex; align-items:center; gap:14px }
.hfl-btn{ border:0; border-radius:999px; padding:10px 26px; font-weight:800; font-size:14px; cursor:pointer; text-decoration:none; white-space:nowrap }
.hfl-btn:hover, .hfl-btn:focus{ text-decoration:none }
.hfl-btn[disabled]{ opacity:.6; cursor:default }
.hfl-btn--secondary{ background:rgba(255,255,255,.18); color:#fff }
.hfl-btn--primary{ background:rgba(255,255,255,.92); color:#111; display:inline-flex; align-items:center; gap:8px }
.hfl-unlock-gif{ height:22px; width:auto; display:inline-block; pointer-events:none; user-select:none }

/* Unlocked badge */
.hfl-activity-has-badge{ position:relative }
.hfl-unlocked-badge{
  position:absolute; z-index:4; right:16px; top:14px; pointer-events:none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.22));
  display:flex; flex-direction:column; align-items:flex-end
}
.hfl-unlocked-badge img{ display:block; width:clamp(86px, 12vw, 128px); height:auto }
.hfl-unlocked-badge .hfl-unlocked-admin-stat{
  margin-top:6px; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:800; color:#fff; background:rgba(0,0,0,.28); text-shadow:0 1px 6px rgba(0,0,0,.28)
}
@media (max-width: 768px){
  .hfl-unlocked-badge{ right:10px; top:10px }
  .hfl-unlocked-badge img{ width:clamp(72px, 28vw, 110px) }
}

/* ===== Hide footer while locked → Buttons weg, Stats bleiben ===== */
.activity-content[data-hfc-locked="1"] .activity-meta,
.activity-content[data-hfc-locked="1"] + .activity-meta,
.activity-content[data-hfc-locked="1"] ~ .activity-meta{
  display:none !important;
  visibility:hidden !important;
  max-height:0 !important;
  opacity:0 !important;
  margin:0 !important; padding:0 !important;
  overflow:hidden !important;
}
.activity-content[data-hfc-locked="1"] .youzify-post-footer{
  position:relative;
  pointer-events:none !important;
  border:0 !important;
}
.activity-content[data-hfc-locked="1"] .youzify-post-footer::before,
.activity-content[data-hfc-locked="1"] .youzify-post-footer::after{
  content:none !important; display:none !important; border:0 !important; box-shadow:none !important;
}
.activity-content[data-hfc-locked="1"] a.acomment-reply,
.activity-content[data-hfc-locked="1"] a.button.acomment-reply,
.activity-content[data-hfc-locked="1"] [id^="acomment-comment-"],
.activity-content[data-hfc-locked="1"] a[class*="yzpr-"],
.activity-content[data-hfc-locked="1"] a[class*="yzp-"],
.activity-content[data-hfc-locked="1"] .yzpr-reacto-post,
.activity-content[data-hfc-locked="1"] .youzify-post-footer a.button,
.activity-content[data-hfc-locked="1"] .youzify-post-footer .button{
  display:none !important;
  visibility:hidden !important;
  max-height:0 !important;
  pointer-events:none !important;
}

/* nur die Stats sichtbar lassen (rein Display, nicht klickbar) */
.activity-content[data-hfc-locked="1"] .youzify-activity-statistics{
  position:absolute; left:12px; bottom:12px; z-index:3;
  margin:0 !important; padding:0 !important;
  display:flex !important; align-items:center; gap:6px;
  pointer-events:none !important;
  width:auto; min-width:max-content; max-width:unset; overflow:visible !important;
}
.activity-content[data-hfc-locked="1"] .youzify-activity-statistics .yz-post-reactors-list{
  display:flex !important; align-items:center; gap:6px; width:auto; min-width:auto; overflow:visible !important;
}
.activity-content[data-hfc-locked="1"] .youzify-activity-statistics .yzpr-reactions-count{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  opacity:1 !important; visibility:visible !important;
  width:30px !important; height:30px !important;
  min-width:30px !important; min-height:30px !important;
  margin-left:4px;
  font-size:13px; font-weight:700;
  line-height:1; color:#fff;
}
@media (max-width:768px){
  .activity-content[data-hfc-locked="1"] .youzify-activity-statistics{ left:10px; bottom:10px; }
}

/* Hard edges on media block */
.youzify-post-attachments{
  position:relative; border-radius:14px; overflow:hidden;
}
.youzify-post-attachments a{ display:block; border-radius:inherit; overflow:hidden }
.youzify-post-attachments img{ display:block; width:100%; height:auto }

/* ---------- Locked Overlay ---------- */
.youzify-post-attachments .hfl-locked-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  pointer-events:none; z-index:3; text-align:center; padding:18px;
}

/* IMAGE: lock icon */
.hfl-locked-overlay .hfl-locked-icon{
  width:clamp(160px, 55vw, 330px); height:auto;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.45));
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}

/* ===================== VIDEO ===================== */
.hfl-locked-overlay.hfl-is-video .hfl-locked-icon{ display:none }
.hfl-locked-overlay.hfl-is-video::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.16) 45%, rgba(0,0,0,.22) 100%);
  pointer-events:none; z-index:1;
}
.hfl-player-ui{
  position:relative; z-index:2; display:block; width:100%; height:auto;
  pointer-events:none; user-select:none; transform: translateY(40px); will-change: transform;
}
.hfl-locked-overlay.hfl-is-video{ gap:0; }
.hfl-locked-overlay.hfl-is-video .hfl-glow-btn{ position:relative; z-index:4; margin-top:-14px; }
.hfl-duration-badge{
  position:absolute; right:10px; bottom:10px; z-index:3;
  background:rgba(0,0,0,.72); color:#fff; font-weight:800; font-size:12px; line-height:1;
  padding:6px 8px; border-radius:8px; letter-spacing:.2px; box-shadow:0 2px 10px rgba(0,0,0,.25); pointer-events:none;
}

/* ===== Glow CTA button ===== */
@property --s { syntax: '<number>'; inherits: false; initial-value: 1; }
.hfl-locked-overlay .hfl-glow-btn{ pointer-events:auto }

.hfl-glow-zone{ display:flex; padding:16px 0 }
.hfl-glow-zone[data-align="left"]  { justify-content:flex-start }
.hfl-glow-zone[data-align="center"]{ justify-content:center }
.hfl-glow-zone[data-align="right"] { justify-content:flex-end }

.hfl-glow-btn{
  --hfl-bg: rgba(255,255,255,.10);
  --hfl-brd: rgba(255,255,255,.22);
  --hfl-txt: #fff;
  --hfl-sheen-speed: 3.6s;
  --hfl-pulse-speed: 4.2s;
  --hfl-radius: 9999px;
  --s: 1;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 28px; font-size: 16px; font-weight: 800; line-height: 1; color: var(--hfl-txt);
  text-decoration: none; border: 1px solid var(--hfl-brd); background: var(--hfl-bg);
  border-radius: var(--hfl-radius) !important; overflow: hidden; clip-path: inset(0 round 9999px);
  -webkit-mask-image: radial-gradient(#fff,#fff); background-clip: padding-box; isolation: isolate;
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.12), 0 10px 28px rgba(0,0,0,.22);
  transform-origin: 50% 55%; transform: translateZ(0) scale(var(--s)); will-change: transform, opacity;
  animation: hfl-wobble-pause var(--hfl-sheen-speed) linear infinite;
}
.hfl-glow-btn .hfl-label{
  position: relative; z-index: 3; padding: 2px 2px; letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35), 0 0 20px rgba(255,255,255,.25);
}
.hfl-glow-btn::before,
.hfl-glow-btn::after{ border-radius: inherit }
.hfl-glow-btn::before{
  content:""; position:absolute; inset:-22%; z-index: 1; pointer-events:none;
  background:
    radial-gradient(120% 120% at 0% 0%,    rgba(124, 94, 214, .55), transparent 60%),
    radial-gradient(120% 120% at 100% 0%,  rgba( 34, 193, 214, .55), transparent 60%),
    radial-gradient(140% 140% at 50% 100%, rgba(242,  79, 124, .55), transparent 60%);
  filter: blur(22px); opacity: .70; animation: hfl-bloom var(--hfl-pulse-speed) ease-in-out infinite; mix-blend-mode: screen;
}
.hfl-glow-btn::after{
  content:""; position:absolute; top:0; left:-100%; width:300%; height:100%; z-index: 2; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 58%);
  mix-blend-mode: screen; transform: translateX(33.333%);
  animation: hfl-sheen-move-rtl var(--hfl-sheen-speed) linear infinite, hfl-sheen-fade var(--hfl-sheen-speed) linear infinite;
}
.hfl-glow-btn:hover{ filter: saturate(120%) }
.hfl-glow-btn:active{ animation-play-state: paused; --s: .993 }


/* ===== Sold-out state (no unlocks left) ===== */
.youzify-post-attachments[data-hfc-limit-total]:not([data-hfc-limit-total="0"])[data-hfc-limit-left="0"] .hfl-glow-btn,
.youzify-post-attachments[data-hfc-soldout="1"] .hfl-glow-btn,
.hfl-glow-btn[aria-disabled="true"],
.hfl-glow-btn.is-soldout,
.hfl-glow-btn.hfl-soldout{
  --hfl-bg: #A1A1A1 !important;
  --hfl-brd: #A1A1A1 !important;
  --hfl-txt: #1a1a1a !important;
  animation: none !important;
  filter: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.youzify-post-attachments[data-hfc-limit-total]:not([data-hfc-limit-total="0"])[data-hfc-limit-left="0"] .hfl-glow-btn::before,
.youzify-post-attachments[data-hfc-limit-total]:not([data-hfc-limit-total="0"])[data-hfc-limit-left="0"] .hfl-glow-btn::after,
.youzify-post-attachments[data-hfc-soldout="1"] .hfl-glow-btn::before,
.youzify-post-attachments[data-hfc-soldout="1"] .hfl-glow-btn::after,
.hfl-glow-btn[aria-disabled="true"]::before,
.hfl-glow-btn[aria-disabled="true"]::after,
.hfl-glow-btn.is-soldout::before,
.hfl-glow-btn.is-soldout::after,
.hfl-glow-btn.hfl-soldout::before,
.hfl-glow-btn.hfl-soldout::after{
  content: none !important;
  display: none !important;
}
/* Sold-out visual hard override: flat grey, no glow */
.youzify-post-attachments[data-hfc-soldout="1"] .hfl-glow-btn,
.youzify-post-attachments[data-hfc-limit-total]:not([data-hfc-limit-total="0"])[data-hfc-limit-left="0"] .hfl-glow-btn,
.hfl-glow-btn.is-soldout,
.hfl-glow-btn.hfl-soldout,
.hfl-glow-btn[aria-disabled="true"]{
  background: #A1A1A1 !important;
  color: #1a1a1a !important;
  border-color: #A1A1A1 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.youzify-post-attachments[data-hfc-soldout="1"] .hfl-glow-btn .hfl-label,
.youzify-post-attachments[data-hfc-limit-total]:not([data-hfc-limit-total="0"])[data-hfc-limit-left="0"] .hfl-glow-btn .hfl-label,
.hfl-glow-btn.is-soldout .hfl-label,
.hfl-glow-btn.hfl-soldout .hfl-label,
.hfl-glow-btn[aria-disabled="true"] .hfl-label{
  text-shadow: none !important;
}

@keyframes hfl-wobble-pause{
  0%{ --s: 1; animation-timing-function: cubic-bezier(.25,1.4,.35,1); }
  12%{ --s: 1.08; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  12.1%{ --s: 1.079; animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
  20%{ --s: .982; animation-timing-function: cubic-bezier(.28,1.2,.32,1); }
  28%{ --s: 1.02; animation-timing-function: cubic-bezier(.2,.85,.25,1); }
  35%{ --s: .998; animation-timing-function: cubic-bezier(.2,.9,.3,1); }
  40%{ --s: 1; }
  41%,100%{ --s: 1; }
}
@keyframes hfl-sheen-move-rtl{ 0%{ transform: translateX(33.333%) } 40%{ transform: translateX(33.333%) } 100%{ transform: translateX(-33.333%) } }
@keyframes hfl-sheen-fade{ 0%,40%{ opacity:0 } 52%,88%{ opacity:.85 } 100%{ opacity:0 } }

/* ===== Mobile slide-in states for modal ===== */
.hfl-modal-backdrop.is-show{ display:block; opacity:1; }
@media (max-width: 768px){
  .hfl-modal.is-mobile{
    display:block;
    transition: transform 280ms cubic-bezier(.22,.91,.24,1), opacity 220ms ease-out;
    will-change: transform, opacity; opacity:1;
  }
  .hfl-modal.is-mobile.is-off{ transform: translate(120%, -50%); opacity:0.01; }
  .hfl-modal.is-mobile.is-on{ transform: translate(-50%, -50%); opacity:1; }
}

/* ===================== AUDIO Locked Layout ===================== */
.youzify-post-attachments[data-hfc-kind="audio"] .hfl-locked-overlay{ display:none }
.hfl-audio-thumb{ display:block; width:100%; height:auto; }
.youzify-post-attachments[data-hfc-kind="audio"]{
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
  border-bottom-left-radius:14px !important;
  border-bottom-right-radius:14px !important;
  position:relative; z-index:1; overflow:hidden;
}
.youzify-post-attachments[data-hfc-kind="audio"] > a,
.youzify-post-attachments[data-hfc-kind="audio"] img,
.youzify-post-attachments[data-hfc-kind="audio"] .hfl-audio-thumb{
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
}
.activity-content[data-hfc-locked="1"] > *{ position:relative; z-index:1; }
.activity-content[data-hfc-locked="1"] .youzify-post-attachments{ margin-bottom:8px !important; }
.youzify-post-attachments[data-hfc-kind="audio"] .hfl-glow-zone{
  padding:16px 0 6px;
  margin-top:15px;
}

/* ===== Audio-Bubble + Dauer ===== */
.hfl-audio-bar-wrap{
  position:relative; width:85%;
  margin-top:18px;
  margin-left: clamp(12px, 4.2vw, 32px);
  margin-right: auto;
}
.hfl-audio-bar{ display:block; width:100%; height:auto; }
.hfl-audio-dur{
  position:absolute;
  right: calc(clamp(28px, 3.8vw, 48px) + 24px);
  top:50%;
  transform: translateY(-50%);
  font-family: Inter, "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  font-weight:800;
  font-size: clamp(13px, 1.9vw, 18px);
  color:#fff; letter-spacing:.2px;
  text-shadow:0 2px 10px rgba(0,0,0,.35), 0 0 14px rgba(255,255,255,.18);
  pointer-events:none; display:inline-block; opacity:1;
}

/* ===== CTA Gradient – AUDIO + IMAGE + VIDEO ===== */
.youzify-post-attachments[data-hfc-kind="audio"] .hfl-glow-btn,
.youzify-post-attachments[data-hfc-kind="image"] .hfl-glow-btn,
.youzify-post-attachments[data-hfc-kind="video"] .hfl-glow-btn{
  --hfl-bg: rgba(255,255,255,.12);
  --hfl-brd: rgba(255,255,255,.30);
  -webkit-backdrop-filter: blur(10px) saturate(500%);
  backdrop-filter: blur(10px) saturate(500%);
  background: linear-gradient(90deg, rgba(255,79,211,1) 0%, rgba(79,82,255,1) 100%);
  filter: none;
}

/* ===== Stat-Line direkt unter dem Gradient-CTA (weiß + Shadow) ===== */
.hfl-limit-stat{
  margin-top:6px;
  font-weight:800;
  font-size:14px;
  line-height:1.15;
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35), 0 0 14px rgba(255,255,255,.18);
  opacity:.95;
  pointer-events:none;
}
@media (max-width:768px){
  .hfl-limit-stat{ font-size:13px; }
}

/* ===== Sneak Peek button ===== */
.hfl-peek-btn{
  pointer-events:auto;
  --hfl-bg: rgba(255,255,255,.10);
  --hfl-brd: rgba(255,255,255,.22);
  --hfl-txt: #fff;
  position: relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:12px 28px; font-size:16px; font-weight:800; line-height:1;
  color:var(--hfl-txt); text-decoration:none; border:1px solid var(--hfl-brd); background:var(--hfl-bg);
  border-radius:9999px !important; overflow:hidden; clip-path: inset(0 round 9999px);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.12), 0 10px 20px rgba(0,0,0,.18);
}
.hfl-peek-btn .hfl-label{ position:relative; z-index:1; text-shadow:0 2px 10px rgba(0,0,0,.35), 0 0 14px rgba(255,255,255,.18) }
.hfl-peek-btn::before, .hfl-peek-btn::after{ content:none !important; }
.hfl-peek-btn:hover{ filter:saturate(120%) }

/* ▼ Peek unten fixieren */
.youzify-post-attachments[data-hfc-kind="image"] .hfl-peek-btn,
.youzify-post-attachments[data-hfc-kind="video"] .hfl-peek-btn{
  position:absolute; left:50%; transform:translateX(-50%); bottom:45px; margin-top:0 !important; z-index:5;
}
@media (max-width:768px){
  .youzify-post-attachments[data-hfc-kind="image"] .hfl-peek-btn,
  .youzify-post-attachments[data-hfc-kind="video"] .hfl-peek-btn{
    bottom:17px;
  }
}

/* ===== Peek Viewer Overlay ===== */
.hfl-peek-backdrop{
  position:fixed; inset:0;
  /* Fade-IN only via keyframes; start light */
  background-color: rgba(10,10,14,0);
  backdrop-filter: blur(4px) saturate(140%);
  display:none; z-index:1000001; opacity:0;
  transition: opacity .18s ease; /* KEIN background-color-Transition -> kein Fade-out */
}
.hfl-peek-modal{
  position:fixed; inset:0; display:none; z-index:1000002;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.hfl-peek-backdrop.is-show{
  display:block; opacity:1;
  animation: hfl-backdrop-fade 1s ease forwards; /* nur einblenden */
}
@keyframes hfl-backdrop-fade{
  from { background-color: rgba(10,10,14,0); }
  to   { background-color: rgba(10,10,14,.72); }
}
.hfl-peek-modal.is-show{ display:flex; }

/* ===== Bubble oben, Bild darunter – Grid ===== */
.hfl-peek-inner{
  position:relative;
  display:grid;
  grid-template-rows:auto auto;
  row-gap:12px;
  align-items:start;
  justify-items:center;
  width:fit-content;
  max-width:min(92vw,1080px);
  max-height:86vh;

  /* Neu: Reserven, damit Bild NIE in den Close-Button läuft */
  --hfl-close-offset: clamp(18px, 12vh, 40px); /* vorher 120px → 80px tiefer */
  --hfl-closebar-h: 56px;                      /* geschätzte Pill-Höhe */
  --hfl-min-gap: 45px;                          /* gewünschter Mindestabstand Bild→Button */
}

/* Bild: füllt Höhe, respektiert Bubble + Close-Reserve */
.hfl-peek-img{
  grid-row:2;
  max-width:100%;
  max-height: calc(80vh - var(--hfl-bubble-area, 0px) - var(--hfl-close-offset) - var(--hfl-closebar-h) - var(--hfl-min-gap));
  width:auto; height:auto; display:block;
  --hfl-peek-blur: 29px;
  filter: blur(var(--hfl-peek-blur));
  will-change: filter, transform;
}
/* 3.0s blur reveal */
.hfl-peek-img.is-revealing{ animation: hfl-peek-focus 3s ease-out forwards; }
@keyframes hfl-peek-focus{ from{ filter: blur(var(--hfl-peek-blur)) } to{ filter: blur(0px) } }

/* ===== Sneak Peek Bubble (links starten, bis rechts reichen) ===== */
.hfl-peek-bubble{
  --hfl-bub-line: 24px;
  grid-row:1;
  justify-self:start;
  display:none;

  background: linear-gradient(135deg, #007aff, #0a84ff);
  color:#fff; border:1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  padding:12px 18px; border-radius:18px;
  min-width:60px;
  max-width: calc(100% - 8px);
  font-size:16px; line-height:var(--hfl-bub-line); font-weight:500;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  letter-spacing:.01em; pointer-events:none;

  opacity:1; transform: translateX(-60vw);
  will-change: transform;
}
@media (min-width:769px){
  .hfl-peek-bubble{ max-width: calc(100% - 10px); }
}
.hfl-peek-bubble__text{ word-break: break-word; }

/* Tail LINKS */
.hfl-peek-bubble::after{
  content:""; position:absolute; left:-10px; bottom:7px; width:16px; height:14px;
  background: linear-gradient(135deg, #007aff, #0a84ff);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  box-shadow: -2px 2px 5px rgba(0,0,0,0.25);
}

/* Slide-In von LINKS */
.hfl-peek-bubble.is-sliding{ animation: hfl-bubble-slide-in-left .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hfl-bubble-slide-in-left{
  0%   { transform: translateX(-60vw); }
  100% { transform: translateX(0); }
}

/* ===== Voice-Player innerhalb der Bubble ===== */
.hfl-peek-bubble .hfl-peek-voice{
  display:flex; align-items:center; gap:10px;
  pointer-events:auto;
  min-height: var(--hfl-bub-line);
}

/* Play/Pause */
.hfl-voice__btn{
  width:24px; height:24px; flex:0 0 24px; border-radius:999px;
  background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  position:relative; cursor:pointer;
}
.hfl-voice__btn::before{
  content:""; position:absolute; left:8px; top:5px; width:0; height:0;
  border-left:9px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent;
  transition:opacity .18s ease, transform .18s ease;
}
.hfl-voice__btn.is-playing::before{ opacity:0; }
.hfl-voice__btn.is-playing::after{
  content:""; position:absolute; left:7px; top:5px; width:10px; height:12px;
  background:linear-gradient(90deg,#fff 0 40%, transparent 40% 60%, #fff 60% 100%);
  border-radius:2px;
}

/* Fortschrittsleiste – weiß auf blau */
.hfl-voice__bar{
  position:relative; flex:1; height:5px; border-radius:999px;
  background:rgba(255,255,255,.40); overflow:hidden;
}
.hfl-voice__prog{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:#fff; border-radius:inherit;
}
.hfl-voice__prog::after{
  content:""; position:absolute; right:-5px; top:50%; width:10px; height:10px;
  transform:translateY(-50%); border-radius:999px; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* Zeitangabe */
.hfl-voice__time{
  font-weight:800; font-size:14px; color:#fff; opacity:.95; white-space:nowrap;
}

/* ===== Voice-Mode (PNG-Bubble mit Slot) ===== */
.hfl-peek-bubble.is-voice{
  /* FIX: nicht mehr bis rechts skalieren → feste Größe & linksbündig */
  width:286px; max-width:286px; height:50px;
  padding:0; background:transparent; border:0; box-shadow:none; border-radius:0;
  justify-self:start;
  position:relative;
}
/* Kein CSS-Tail im Voice-Mode (Tail ist im PNG enthalten) */
.hfl-peek-bubble.is-voice::after{ display:none; }

/* Overlay exakt über dem PNG */
.hfl-peek-bubble.is-voice .hfl-peek-voice{
  position:absolute !important;
  inset:0; display:flex; align-items:center;
  padding:14px 10px 14px 18px;
  z-index:3; pointer-events:auto;
}
.hfl-peek-bubble.is-voice .hfl-voice__bar{ flex:1 1 auto; }
/* Zeit rechtsbündig */
.hfl-peek-bubble.is-voice .hfl-voice__time{
  margin-left:auto; min-width:3.6em; text-align:right; flex:0 0 auto;
}

/* PNG-Overlay + Füllstreifen-Layer */
.hfl-voice-bubble-img{
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  /* FIX: PNG folgt der festen Containergröße 286×50 */
  width:100%;
  height:100%;
  display:block;
}
.hfl-voice-fillwrap{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hfl-voice-fill-base,
.hfl-voice-fill-dark{ height:100%; position:absolute; top:0; border-radius:6px; }

/* =====================================================
   v2 fixes (2025-11-05)
   ===================================================== */

/* Progressbar & knob im Voice-PNG-Modus ausblenden */
.hfl-peek-bubble.is-voice .hfl-voice__bar,
.hfl-peek-bubble.is-voice .hfl-voice__prog{
  display:none !important;
}

/* HTML5-Audioelement nie anzeigen */
.hfl-peek-voice .hfl-voice__el{
  display:none !important;
}

/* Close-Button: Glass-Pill, unten mittig, delayed Fade-In */
.hfl-peek-closebar{
  position: fixed !important;
  left: 50% !important;
  bottom: clamp(18px, 12vh, 40px) !important; /* vorher 120px → 80px tiefer */
  transform: translateX(-50%) !important;
  z-index: 1000003 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 14px 28px;
  border-radius: 9999px;

  color: #fff;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35), 0 0 14px rgba(255,255,255,.18);

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 10px 20px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);

  /* Fade-In nach Bild-Deblur */
  opacity: 0;
  visibility: hidden;
  animation: hfl-close-reveal 1.5s ease forwards;
  animation-delay: 3s; /* nach 3s De-Blur */
  pointer-events: auto;
}
@keyframes hfl-close-reveal{
  0%   { opacity:0; visibility:hidden; }
  1%   { visibility:visible; }
  100% { opacity:1; visibility:visible; }
}

/* Alte Pseudo-Verzierungen sicher entfernen */
.hfl-peek-closebar::before,
.hfl-peek-closebar::after{
  content:none !important;
}

/* Falls innen ein <button> oder <a> liegt → erbt Stil sauber */
.hfl-peek-closebar button,
.hfl-peek-closebar a{
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-shadow: inherit;
}

/* FIX: Prevent theme rotation/transform on hover */
.hfl-peek-closebar button:hover,
.hfl-peek-closebar button:focus,
.hfl-peek-closebar button:active,
.hfl-peek-closebar a:hover,
.hfl-peek-closebar a:focus,
.hfl-peek-closebar a:active {
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Mobile: gleicher Smart-Bottom-Wert */
@media (max-width: 768px){
  .hfl-peek-closebar{ bottom: clamp(18px, 12vh, 40px) !important; }
}

/* === Voice-PNG Bubble: Tail links unten (ohne Layout-Änderung) === */
.hfl-peek-bubble.is-voice::after{
  content:"";
  position:absolute;
  left:-10px;
  bottom:7px;
  width:16px;
  height:14px;
  background: linear-gradient(135deg, #007aff, #0a84ff);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  box-shadow: -2px 2px 5px rgba(0,0,0,0.25);
  z-index:4;
  display:block !important;
}

/* =====================================================
   ✨ NEW: 200px Touch-Radius rund um den Close-Button
   (nutzt das bereits existierende JS-Element .hfl-close-halo)
   ===================================================== */
.hfl-close-halo{
  position: fixed !important;
  left: 50% !important;
  bottom: clamp(18px, 12vh, 40px) !important;
  transform: translateX(-50%) !important;

  width: 400px;   /* 200px radius */
  height: 400px;  /* 200px radius */
  margin: 0; padding: 0;
  border-radius: 9999px;

  z-index: 1000002 !important; /* unter .hfl-peek-closebar (1000003), über Backdrop */
  pointer-events: auto;
  background: transparent;

  /* sync mit Close-Pill: erst sichtbar, wenn der Button auftaucht */
  opacity: 0;
  visibility: hidden;
  animation: hfl-close-reveal 1.5s ease forwards;
  animation-delay: 3s;
  -webkit-tap-highlight-color: transparent;
}