/* Dilarang keras menghapus credits
Devoleper : Rahmad Tenpoles
WhatsApp : wa.me/6285764735713
Instagram : instagram.com/rahmad_tenpoles
Telegram : t.me/rahmad_tenpoles
Dilarang keras menghapus credits */
/* UX-POP-01/03 — the ad pop-up. One direction: a "ticket": the product sits on a tinted media block (the same oklch
   placeholder logic as the product cards), a perforated edge separates it from the offer, the CTA carries one slow shine,
   a countdown ring replaces the old progress bar. Everything uses the site tokens, so it follows light/dark and the six
   global themes. Shown through VFPopup.sheet (bottom sheet on phones with its drag handle, centred dialog from 1024 px).
   Used by the dashboard pop-up and by the live preview in Admin > Pengaturan > Iklan (same markup). */
.vf-pop--ad { overflow: auto; }
.vf-pop--ad::backdrop { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vf-pop--ad .vf-pop__head { min-height: 0; }
.vf-pop--ad .vf-pop__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the visible heading is the product name; the dialog still has its name */
.vf-pop--ad .vf-pop__head { justify-content: flex-end; padding: 0; }

.vf-ad { --ad-r: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vf-ad__media {
  position: relative; display: grid; place-items: center; height: 148px; border-radius: var(--ad-r); overflow: hidden;
  background: oklch(var(--vf-ph-l, .94) var(--vf-ph-c, .04) var(--pc-h, 262)); color: oklch(var(--vf-ic-l, .45) var(--vf-ic-c, .12) var(--pc-h, 262));
  /* the perforated lower edge: semicircle notches every 18 px */
  -webkit-mask: radial-gradient(circle 6px at 9px 100%, transparent 98%, black) 0 0 / 18px 100% repeat-x, linear-gradient(black, black);
  -webkit-mask-composite: source-in; mask: radial-gradient(circle 6px at 9px 100%, transparent 98%, black) 0 0 / 18px 100% repeat-x, linear-gradient(black, black); mask-composite: intersect;
}
.vf-ad__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-ad__ph .rs-icon { width: 44px; height: 44px; }
.vf-ad__sale { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: var(--vf-danger); color: var(--vf-on-danger); font: 600 14px/20px var(--vf-font-num, var(--vf-font)); }
.vf-ad__badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 6px 0 0; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--vf-accent-subtle); color: var(--vf-accent-text); font: 600 12px/16px var(--vf-font); letter-spacing: .02em; }
.vf-ad__title { margin: 0; font: 600 24px/32px var(--vf-font); color: var(--vf-text-1); overflow-wrap: anywhere; }
.vf-ad__desc { margin: 0; font: 400 14px/20px var(--vf-font); color: var(--vf-text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vf-ad__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; font-family: var(--vf-font-num, var(--vf-font)); }
.vf-ad__now { font-size: 24px; line-height: 30px; font-weight: 600; color: var(--vf-text-1); font-variant-numeric: tabular-nums; }
.vf-ad__was { font-size: 14px; color: var(--vf-text-3); }
.vf-ad__voucher { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 12px; border: 1px dashed var(--vf-border-strong); border-radius: 12px; background: var(--vf-surface-3); }
.vf-ad__vlabel { font: 600 14px/20px var(--vf-font); color: var(--vf-text-1); }
.vf-ad__vcode { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--vf-surface-2); color: var(--vf-accent-text); font: 600 14px/20px var(--vf-font); cursor: pointer; }
.vf-ad__vcode code { font: inherit; letter-spacing: .04em; }
.vf-ad__cta { position: relative; overflow: hidden; width: 100%; margin-top: 6px; justify-content: center; gap: 8px; }
.vf-ad__foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 0; font: 400 12px/16px var(--vf-font); color: var(--vf-text-2); }
.vf-ad__foot b { font-variant-numeric: tabular-nums; color: var(--vf-text-1); }
.vf-ad__ring { flex: none; transform: rotate(-90deg); }
.vf-ad__ring circle { fill: none; stroke-width: 3; }
.vf-ad__ring-bg { stroke: var(--vf-border); }
.vf-ad__ring-fg { stroke: var(--vf-accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }

@media (min-width: 1024px) { .vf-ad__media { height: 172px; } }

/* the pop-up opens with a spring (phone: the sheet slides up with VFPopup's own animation; desktop: scale + fade from .92, 280 ms) */
@media (prefers-reduced-motion: no-preference) {
  .vf-pop--ad.is-closing { animation-duration: 150ms; }
  /* image -> badge -> title -> price -> CTA, 50 ms apart */
  /* one slow shine across the CTA, every 4 s, then still */
  .vf-pop--ad[open] .vf-ad__cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
}

/* confetti for a voucher: 28 specks thrown from the middle of the card (vf-ad.js), transform + opacity only */
.vf-ad__confetti { position: absolute; left: 50%; top: 30%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.vf-ad__confetti i { position: absolute; width: 7px; height: 11px; border-radius: 2px; background: var(--c); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .vf-ad__confetti { display: none; } }

/* the live preview in the admin: same card in a quiet frame, no countdown run */
.vf-ad-preview { max-width: 420px; margin: 0 auto; padding: 20px; border: 1px solid var(--vf-border); border-radius: 24px; background: var(--vf-surface-2); box-shadow: var(--vf-e2); }
.vf-ad-preview .vf-ad__ring-fg { animation: none; }