/* WpopW PopVid — minimal shared base. Scoped to .wpopw-vw so it never
touches the host theme. Each skin file supplies all the visual styling. */
.wpopw-vw,
.wpopw-vw *,
.wpopw-vw *::before,
.wpopw-vw *::after { box-sizing: border-box; }
.wpopw-vw {
font-family: var(--vw-font, 'Jost'), system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
line-height: 1.4;
}
.wpopw-vw img { max-width: 100%; display: block; }
/* ---- Brand logo: small, contained mark (fallback sizing). Without an explicit
container size, a large uploaded logo can blow up the panel in skins that
only style the inner ![]()
(e.g. skin-93, skin-100). This is a NON-!important
default, so any skin that sets its own logo size still wins (skins load after
this base file). ---- */
.wpopw-vw .vw-brand__logo {
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 10px;
overflow: hidden;
display: inline-grid;
place-items: center;
}
.wpopw-vw .vw-brand__logo img { width: 100%; height: 100%; object-fit: cover; }
.wpopw-vw .vw-brand__logo svg { width: 60%; height: 60%; }
/* ---- Brand row layout: logo on the left, name + slogan stacked to its right,
vertically centred. Fallback for skins that don't lay out .vw-brand themselves
(e.g. skin-93, skin-100). Skins with their own layout override this (they load
after this base file). ---- */
.wpopw-vw .vw-brand { display: flex; align-items: center; gap: 10px; }
.wpopw-vw .vw-brand__name small { display: block; }
/* ---- Brand slogan (the sub-line under the name) — always white in
every skin (some skins tint it with their accent). Forces the colour only;
each skin's own opacity/size is kept. ---- */
.wpopw-vw .vw-brand__name small { color: #fff !important; }
/* Let flex CTAs shrink below their content width on narrow panels (prevents
a button from overflowing / being pushed out of view). */
.wpopw-vw .vw-cta { min-width: 0; }
/* WhatsApp CTA is one standard look in every skin: official WhatsApp green
background (the panel's WhatsApp colour still overrides via --wpopw-wa) and
white label text. Overrides skins that use a light/off background. */
.wpopw-vw .vw-cta--wa {
background: var(--wpopw-wa, #25d366) !important;
color: #fff !important;
border-color: transparent !important;
}
/* Official WhatsApp logo (bundled SVG, rendered as ![]()
) — sized to sit beside
the label in every skin; its colours come from the file, never recoloured. */
.wpopw-vw .vw-cta--wa .vw-cta__waicon {
width: 1.3em !important;
height: 1.3em !important;
flex: 0 0 auto !important;
display: inline-block !important;
vertical-align: middle !important;
}
/* ---- Headline always on a single line in every skin. engine.js auto-shrinks
the font so a long headline still fits on one line (no wrapping). ---- */
.wpopw-vw .vw-headline { white-space: nowrap !important; }
/* ---- Headline is always white in every skin (some skins tint it). It sits over
the video, so white stays readable. ---- */
.wpopw-vw .vw-headline { color: #fff !important; }
/* ---- Remove decorative marks/lines some skins add beside the headline
(e.g. a "$ " prefix or an accent rule) — keep it clean in every skin. ---- */
.wpopw-vw .vw-headline::before,
.wpopw-vw .vw-headline::after { content: none !important; display: none !important; }
/* ---- Headline spans the full width so its alignment actually takes effect in
every skin; with the saved "center" setting it sits centred on screen. ---- */
.wpopw-vw .vw-headline { display: block !important; width: 100% !important; }
/* ---- Headline alignment (panel setting: left/center/right) — HEADLINE ONLY.
Question pills have their own independent layout setting below. ---- */
.wpopw-vw.wpopw-ha-left .vw-headline { text-align: left !important; }
.wpopw-vw.wpopw-ha-center .vw-headline { text-align: center !important; }
.wpopw-vw.wpopw-ha-right .vw-headline { text-align: right !important; }
/* ---- Question layout (panel setting) — applies in EVERY skin ----
auto : two side-by-side, auto-collapsing to one column when too narrow
grid2 : always two equal columns
stack : one full-width pill per row
inline: keep the skin's natural content-width flow (just ensure wrapping) */
.wpopw-vw.wpopw-ql-auto .vw-questions,
.wpopw-vw.wpopw-ql-grid2 .vw-questions,
.wpopw-vw.wpopw-ql-stack .vw-questions {
display: grid !important;
gap: 8px !important;
width: 100% !important;
align-items: stretch !important;
}
.wpopw-vw.wpopw-ql-auto .vw-questions { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
.wpopw-vw.wpopw-ql-grid2 .vw-questions { grid-template-columns: repeat(2, 1fr) !important; }
.wpopw-vw.wpopw-ql-stack .vw-questions { grid-template-columns: 1fr !important; }
/* In grid modes pills fill their cell and centre their content. */
.wpopw-vw.wpopw-ql-auto .vw-pill,
.wpopw-vw.wpopw-ql-grid2 .vw-pill,
.wpopw-vw.wpopw-ql-stack .vw-pill {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
/* Inline keeps the skin's own flow; just guarantee wrapping. */
.wpopw-vw.wpopw-ql-inline .vw-questions { display: flex !important; flex-wrap: wrap !important; }
/* Long question text wraps onto multiple lines instead of clipping/overflowing
the pill (most skins set white-space:nowrap). Pills have no fixed height, so
they grow to fit. Applies in every skin and every layout. */
.wpopw-vw .vw-pill {
white-space: normal !important;
overflow-wrap: anywhere !important;
line-height: 1.3 !important;
height: auto !important;
}
/* ---- Sub-questions (drill-down) ---- */
/* A main pill that has sub-questions becomes a row: text left, "+N ›" badge right. */
.wpopw-vw .vw-pill--more {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
text-align: left !important;
gap: 8px !important;
}
.wpopw-vw .vw-pill__more {
flex: 0 0 auto !important;
font-weight: 700 !important;
opacity: .82 !important;
white-space: nowrap !important;
}
/* Back button is only visible while drilled into a sub-view. */
.wpopw-vw .vw-back[hidden] { display: none !important; }
/* Sub-view groups follow the same question layout as the main list. */
.wpopw-vw .vw-subgroup { gap: 8px; width: 100%; }
.wpopw-vw.wpopw-ql-auto .vw-subgroup,
.wpopw-vw.wpopw-ql-grid2 .vw-subgroup,
.wpopw-vw.wpopw-ql-stack .vw-subgroup {
display: grid !important; gap: 8px !important; width: 100% !important; align-items: stretch !important;
}
.wpopw-vw.wpopw-ql-auto .vw-subgroup { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
.wpopw-vw.wpopw-ql-grid2 .vw-subgroup { grid-template-columns: repeat(2, 1fr) !important; }
.wpopw-vw.wpopw-ql-stack .vw-subgroup { grid-template-columns: 1fr !important; }
.wpopw-vw.wpopw-ql-inline .vw-subgroup { display: flex !important; flex-wrap: wrap !important; }
/* The `hidden` attribute MUST win over the layout display rules above, so the
main list / sub-groups actually hide when not the active view. */
.wpopw-vw .vw-questions[hidden],
.wpopw-vw .vw-subgroup[hidden] { display: none !important; }
/* 10px extra space between the headline and the questions (only when the
headline is shown). Does not touch the spacing between the pills. */
.wpopw-vw:not(.wpopw-no-headline) .vw-headline + .vw-questions { margin-top: 10px !important; }
/* ---- Universal auto-hide of overlay text while playing + pointer outside ----
Guarantees the headline (inside .vw-overlay-text), question pills and brand
all fade out together in EVERY skin, regardless of the skin's own rules. */
.wpopw-vw .vw-overlay-text,
.wpopw-vw .vw-headline,
.wpopw-vw .vw-questions,
.wpopw-vw .vw-brand { transition: opacity .3s ease, transform .3s ease; }
.wpopw-vw .vw-overlay-text.vw-q-hidden,
.wpopw-vw .vw-headline.vw-q-hidden,
.wpopw-vw .vw-questions.vw-q-hidden,
.wpopw-vw .vw-brand.vw-q-hidden { opacity: 0 !important; pointer-events: none !important; }
/* ---- Launcher hides completely once the panel opens (every skin) ---- */
.wpopw-vw .vw-launcher.vw-hidden {
opacity: 0 !important;
transform: scale(.4) !important;
pointer-events: none !important;
}
/* ---- Launcher rings off (panel setting): hide the decorative halo/pulse around
the closed launcher in EVERY skin, leaving a clean round button. ---- */
.wpopw-vw.wpopw-no-rings .vw-launcher__ring,
.wpopw-vw.wpopw-no-rings .vw-launcher__ring2,
.wpopw-vw.wpopw-no-rings .vw-launcher__pulse { display: none !important; }
/* ---- Launcher badge off (panel setting): hide the small round/square mark on
the launcher edge in EVERY skin. ---- */
.wpopw-vw.wpopw-no-badge .vw-launcher__badge { display: none !important; }
/* ---- Launcher size (panel setting: small / medium / large) ---- */
.wpopw-vw.wpopw-ls-sm .vw-launcher { width: 56px !important; height: 56px !important; }
.wpopw-vw.wpopw-ls-md .vw-launcher { width: 72px !important; height: 72px !important; }
.wpopw-vw.wpopw-ls-lg .vw-launcher { width: 94px !important; height: 94px !important; }
/* ---- Dock position (panel setting: right / left) ---- */
.wpopw-vw.wpopw-pos-right .vw-launcher { right: 24px !important; left: auto !important; }
.wpopw-vw.wpopw-pos-left .vw-launcher { left: 24px !important; right: auto !important; }
/* Panel dock only on desktop — on mobile the panel is full-screen (below). */
@media (min-width: 601px) {
.wpopw-vw.wpopw-pos-right .vw-panel { right: 20px !important; left: auto !important; }
.wpopw-vw.wpopw-pos-left .vw-panel { left: 20px !important; right: auto !important; }
}
/* Tooltip sits BESIDE the launcher; its offset scales with launcher size and
follows the dock side so it never overlaps the (now larger) round button. */
.wpopw-vw.wpopw-pos-right .vw-tooltip { left: auto !important; }
.wpopw-vw.wpopw-pos-left .vw-tooltip { right: auto !important; }
.wpopw-vw.wpopw-pos-right.wpopw-ls-sm .vw-tooltip { right: 92px !important; }
.wpopw-vw.wpopw-pos-right.wpopw-ls-md .vw-tooltip { right: 108px !important; }
.wpopw-vw.wpopw-pos-right.wpopw-ls-lg .vw-tooltip { right: 132px !important; }
.wpopw-vw.wpopw-pos-left.wpopw-ls-sm .vw-tooltip { left: 92px !important; }
.wpopw-vw.wpopw-pos-left.wpopw-ls-md .vw-tooltip { left: 108px !important; }
.wpopw-vw.wpopw-pos-left.wpopw-ls-lg .vw-tooltip { left: 132px !important; }
/* On the left dock the default right-pointing arrow would point away from the
launcher — hide it there to keep the bubble clean. */
.wpopw-vw.wpopw-pos-left .vw-tooltip::after { display: none !important; }
@media (max-width: 600px) {
.wpopw-vw.wpopw-pos-right .vw-launcher { right: 16px !important; left: auto !important; }
.wpopw-vw.wpopw-pos-left .vw-launcher { left: 16px !important; right: auto !important; }
}
/* ---- Headline show/hide (panel setting) ---- */
.wpopw-vw.wpopw-no-headline .vw-headline { display: none !important; }
/* ---- Brand hidden: split top controls so mute stays LEFT, close stays RIGHT
(otherwise both bunch to one side). ---- */
.wpopw-vw.wpopw-no-brand .vw-top__actions {
width: 100% !important;
justify-content: flex-start !important;
}
.wpopw-vw.wpopw-no-brand .vw-top__actions .vw-close { margin-left: auto !important; }
/* Launcher teaser always frames the subject's head (overridable per skin). */
.wpopw-vw .vw-launcher__media { object-fit: cover; object-position: center 20%; }
/* ---- Business-hours states (set by engine.js when outside hours) ---- */
/* Disabled CTA: dimmed + not clickable, but still visible. */
.wpopw-vw .vw-cta.vw-cta--off {
opacity: .45 !important;
filter: grayscale(1) !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
/* ---- Mobile body scroll lock (UX setting) while the panel is open ---- */
body.wpopw-vw-lock { overflow: hidden !important; touch-action: none !important; }
/* Mobile: the open panel must always fit the VISIBLE viewport.
Using 100svh (small viewport height) avoids the bottom CTAs being hidden
behind the mobile browser's address bar (the classic 100vh/100dvh overflow).
!important so it wins for every skin regardless of its own media query. */
@media (max-width: 600px) {
.wpopw-vw .vw-panel {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100svh !important;
min-height: 100svh !important;
max-height: 100svh !important;
border-radius: 0 !important;
}
/* keep top controls clear of the status bar / notch */
.wpopw-vw .vw-top {
padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
}
.wpopw-vw .vw-bottom {
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
.wpopw-vw .vw-launcher {
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
/* keep the tooltip inside narrow screens (beside the launcher) */
.wpopw-vw .vw-tooltip {
max-width: calc(100vw - 140px) !important;
}
}