/**
 * BG Page Builder — front-end styles (loaded ONLY on pages that carry a
 * builder document, or when a Theme Builder canvas applies).
 *
 * Motion: Entrance animations (scroll-triggered via IntersectionObserver
 * when JS is present, else on-load — SEO-safe), Hover, Sticky.
 * prefers-reduced-motion disables entrance animations entirely.
 */

/* Shared layout (canvas mode inlines its own copy — this one covers
   builder content rendered inside a normal theme page). */
.bgpb-section { display: flex; flex-wrap: wrap; }
.bgpb-col { display: inline-block; vertical-align: top; }
/* Advanced-layout sections lay their columns as a real flex row so multi-column
   splits (e.g. 55/45 hero) sit side-by-side without inline-block whitespace
   wrapping; single-column sections are unaffected. */
.bgpb-sec-inner { display: flex; flex-wrap: wrap; align-items: center; }
.bgpb-sec-inner > .bgpb-col { display: block; flex: 0 1 auto !important; }
@media (max-width: 768px) { .bgpb-sec-inner > .bgpb-col { width: 100% !important; } }

/* ---- Entrance animations (on load — no JS, no scroll) ---- */
@keyframes bgpb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bgpb-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bgpb-slide-down { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes bgpb-zoom-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }

.bgpb-anim-fade-in { animation: bgpb-fade-in 0.6s ease-out both; }
.bgpb-anim-slide-up { animation: bgpb-slide-up 0.6s ease-out both; }
.bgpb-anim-slide-down { animation: bgpb-slide-down 0.6s ease-out both; }
.bgpb-anim-zoom-in { animation: bgpb-zoom-in 0.6s ease-out both; }

/* Scroll-reveal: when JS is available (html.bgpb-js set synchronously BEFORE
   the animated elements paint), hold the animation at its start until the
   element scrolls into view (.bgpb-in). No JS => class never added => the
   animation runs on load exactly as before (no hidden content, SEO-safe). */
.bgpb-js .bgpb-anim-fade-in, .bgpb-js .bgpb-anim-slide-up,
.bgpb-js .bgpb-anim-slide-down, .bgpb-js .bgpb-anim-zoom-in { animation-play-state: paused; }
.bgpb-anim-fade-in.bgpb-in, .bgpb-anim-slide-up.bgpb-in,
.bgpb-anim-slide-down.bgpb-in, .bgpb-anim-zoom-in.bgpb-in { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
	.bgpb-anim-fade-in, .bgpb-anim-slide-up, .bgpb-anim-slide-down, .bgpb-anim-zoom-in {
		animation: none !important;
	}
}

/* ---- Hover ---- */
.bgpb-hover-lift, .bgpb-hover-grow { transition: transform 0.2s ease; }
.bgpb-hover-lift:hover { transform: translateY(-4px); }
.bgpb-hover-grow:hover { transform: scale(1.03); }

/* ---- Sticky section (header-template sections) ---- */
.bgpb-sticky { position: sticky; top: 0; z-index: 90; }

/* ==================================================================
   P3 — Sections/Responsive
   Breakpoints: tablet ≤1024px · mobile ≤768px.
   Per-device visibility (any element), per-device column widths, and
   default column stacking on mobile (the responsive guarantee).
   ================================================================== */

/* Per-device column widths — desktop (no query; base layer) */
.bgpb-wd-25 { width: 25%; } .bgpb-wd-33 { width: 33.333%; }
.bgpb-wd-50 { width: 50%; } .bgpb-wd-66 { width: 66.666%; }
.bgpb-wd-75 { width: 75%; } .bgpb-wd-100 { width: 100%; }

/* Tablet */
@media (max-width: 1024px) {
	.bgpb-wt-25 { width: 25% !important; } .bgpb-wt-33 { width: 33.333% !important; }
	.bgpb-wt-50 { width: 50% !important; } .bgpb-wt-66 { width: 66.666% !important; }
	.bgpb-wt-75 { width: 75% !important; } .bgpb-wt-100 { width: 100% !important; }
	.bgpb-hide-tablet { display: none !important; }
}

/* Mobile: per-device widths + DEFAULT STACKING (every builder column
   becomes full-width — the plan's responsive baseline) */
@media (max-width: 768px) {
	.bgpb-wm-25 { width: 25% !important; } .bgpb-wm-33 { width: 33.333% !important; }
	.bgpb-wm-50 { width: 50% !important; } .bgpb-wm-66 { width: 66.666% !important; }
	.bgpb-wm-75 { width: 75% !important; } .bgpb-wm-100 { width: 100% !important; }
	.bgpb-col { width: 100% !important; display: block !important; }
	.bgpb-hide-mobile { display: none !important; }
}

/* Desktop-only hiding (>1024px) */
@media (min-width: 1025px) {
	.bgpb-hide-desktop { display: none !important; }
}

/* ==================================================================
   P5 — Popups (PB-17 accessibility baked in: dialog semantics, focus
   trap, ESC, overlay click, focus return — the JS lives inline)
   ================================================================== */
.bgpb-popup-overlay {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(10, 15, 30, 0.62);
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
}
.bgpb-popup-overlay[hidden] { display: none; }
.bgpb-popup {
	background: #fff; color: #1a1a2e;
	max-width: 560px; width: 100%; max-height: 86vh; overflow: auto;
	border-radius: 12px; padding: 28px;
	position: relative;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
	animation: bgpb-pop-in 0.25s ease-out both;
}
@keyframes bgpb-pop-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bgpb-popup { animation: none; } }
.bgpb-popup-close {
	position: absolute; top: 8px; inset-inline-end: 8px;
	width: 36px; height: 36px; border: 0; border-radius: 50%;
	background: #eef0f6; color: #1a1a2e; font-size: 20px; line-height: 1;
	cursor: pointer;
}
.bgpb-popup-close:hover, .bgpb-popup-close:focus-visible { background: #dfe3ee; outline: 2px solid #1a1a2e; }
.bgpb-popup-body > *:first-child { margin-top: 0; }
.bgpb-popup-body > *:last-child { margin-bottom: 0; }

/* ==================================================================
   P7 — Global styles integration: buttons/colors follow the site's
   design tokens (defined by Styles::print_vars as CSS variables)
   ================================================================== */
.bgpb-btn { border-radius: var(--bgpb-radius, 8px); padding: 10px 22px; text-decoration: none; display: inline-block; font-weight: 600; }
.bgpb-btn-primary { background: var(--bgpb-primary, #4f7cff); color: #fff; }
.bgpb-btn-primary:hover { filter: brightness(0.92); }
.bgpb-btn-secondary { background: var(--bgpb-secondary, #16213e); color: #fff; }
.bgpb-btn-accent { background: var(--bgpb-accent, #ff9d2e); color: #fff; }
.bgpb-btn-outline { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.bgpb-btn-outline:hover { background: rgba(127,127,127,.12); }

/* P7 carousel — CSS-only, reduced-motion safe */
.bgpb-slides { position: relative; overflow: hidden; border-radius: var(--bgpb-radius, 8px); }
.bgpb-slides-track { display: flex; transition: transform .5s ease; }
.bgpb-slides-track > * { flex: 0 0 100%; }
.bgpb-slide-nav { display: flex; gap: 8px; justify-content: center; padding: 10px 0; }
.bgpb-slide-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--bgpb-secondary, #16213e); opacity: .3; cursor: pointer; }
.bgpb-slide-dot[aria-selected="true"] { opacity: 1; background: var(--bgpb-primary, #4f7cff); }
@media (prefers-reduced-motion: reduce) { .bgpb-slides-track { transition: none; } }

/* F-B: Pricing Table (review round 3) — CSS only, zero JS */
.bgpb-pricing { border: 1px solid #e2e4ea; border-radius: var(--bgpb-radius, 8px); padding: 28px 22px; text-align: center; background: var(--bgpb-bg, #fff); max-width: 340px; margin: 0 auto; }
.bgpb-pricing-featured { border-color: var(--bgpb-primary, #4f7cff); box-shadow: 0 8px 30px rgba(79, 124, 255, .18); transform: scale(1.03); }
.bgpb-pricing-title { margin: 0 0 12px; font-size: 20px; color: var(--bgpb-text, #1a1a2e); }
.bgpb-pricing-price { font-size: 40px; font-weight: 800; color: var(--bgpb-primary, #4f7cff); line-height: 1.1; }
.bgpb-pricing-period { font-size: 14px; font-weight: 500; color: #646970; margin-inline-start: 4px; }
.bgpb-pricing-features { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 8px; }
.bgpb-pricing-features li { color: var(--bgpb-text, #1a1a2e); font-size: 15px; }
.bgpb-pricing-cta { margin-top: 8px; }

/* F-C: Tabs + Accordion (review round 3) */
.bgpb-tabs-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid #e2e4ea; margin-bottom: 14px; }
.bgpb-tab { border: 0; background: transparent; padding: 10px 16px; cursor: pointer; font-size: 15px; font-weight: 600; color: #646970; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.bgpb-tab[aria-selected="true"] { color: var(--bgpb-primary, #4f7cff); border-bottom-color: var(--bgpb-primary, #4f7cff); }
.bgpb-tab:focus-visible { outline: 2px solid var(--bgpb-primary, #4f7cff); outline-offset: 2px; }
.bgpb-tabpanel { padding: 4px 2px; color: var(--bgpb-text, #1a1a2e); }
.bgpb-accordion-item { border: 1px solid #e2e4ea; border-radius: var(--bgpb-radius, 8px); margin-bottom: 8px; overflow: hidden; }
.bgpb-accordion-h { margin: 0; }
.bgpb-accordion-header { width: 100%; text-align: inherit; border: 0; background: #f6f7f9; padding: 14px 16px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--bgpb-text, #1a1a2e); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bgpb-accordion-header::after { content: "＋"; color: var(--bgpb-primary, #4f7cff); flex: 0 0 auto; }
.bgpb-accordion-header[aria-expanded="true"]::after { content: "－"; }
.bgpb-accordion-body { padding: 14px 16px; color: var(--bgpb-text, #1a1a2e); }

/* Widgets batch 1: testimonial / counter / progress / rating */
.bgpb-testimonial { border: 1px solid #e2e4ea; border-radius: var(--bgpb-radius, 8px); padding: 24px; background: var(--bgpb-bg, #fff); max-width: 520px; margin: 0 auto; }
.bgpb-testimonial blockquote { margin: 0 0 14px; font-size: 17px; line-height: 1.7; color: var(--bgpb-text, #1a1a2e); }
.bgpb-testimonial-meta { display: flex; align-items: center; gap: 12px; }
.bgpb-testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.bgpb-testimonial-meta strong { display: block; color: var(--bgpb-text, #1a1a2e); }
.bgpb-testimonial-meta em { color: #646970; font-style: normal; font-size: 13px; }
.bgpb-counter { text-align: center; }
.bgpb-counter-num { font-size: 44px; font-weight: 800; color: var(--bgpb-primary, #4f7cff); line-height: 1.1; }
.bgpb-counter-label { color: #646970; font-size: 15px; margin-top: 4px; }
.bgpb-progress { margin: 10px 0; }
.bgpb-progress-head { display: flex; justify-content: space-between; font-size: 14px; color: var(--bgpb-text, #1a1a2e); margin-bottom: 6px; }
.bgpb-progress-track { background: #e9ebf1; border-radius: 999px; overflow: hidden; height: 10px; }
.bgpb-progress-bar { height: 100%; background: var(--bgpb-primary, #4f7cff); border-radius: 999px; transition: width .8s ease; }
.bgpb-rating { color: #d9dce3; font-size: 22px; letter-spacing: 2px; }
.bgpb-rating .bgpb-star-on { color: var(--bgpb-accent, #ff9d2e); }

/* Widgets batch 2: gallery / icon-list / alert / cta / team */
.bgpb-gallery { display: grid; gap: 10px; }
.bgpb-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--bgpb-radius, 8px); aspect-ratio: 1 / 1; }
.bgpb-icon-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.bgpb-icon-list li { display: flex; align-items: center; gap: 10px; color: var(--bgpb-text, #1a1a2e); }
.bgpb-icon-list li svg { color: var(--bgpb-primary, #4f7cff); flex: 0 0 auto; }
.bgpb-alert { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--bgpb-radius, 8px); border-inline-start: 4px solid; }
.bgpb-alert-info { background: #eef4ff; border-color: #4f7cff; color: #1e3a8a; }
.bgpb-alert-success { background: #eafaf0; border-color: #22a35a; color: #14683a; }
.bgpb-alert-warning { background: #fff7e6; border-color: #ff9d2e; color: #8a5a00; }
.bgpb-alert-error { background: #fdecec; border-color: #e14b4b; color: #8a1c1c; }
.bgpb-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px; border-radius: var(--bgpb-radius, 8px); background: var(--bgpb-secondary, #16213e); color: #fff; }
.bgpb-cta h3 { margin: 0 0 4px; color: #fff; }
.bgpb-cta p { margin: 0; opacity: .85; }
.bgpb-team { text-align: center; }
.bgpb-team-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; }
.bgpb-team-name { margin: 0; color: var(--bgpb-text, #1a1a2e); }
.bgpb-team-role { color: var(--bgpb-primary, #4f7cff); font-size: 14px; font-weight: 600; margin-top: 2px; }
.bgpb-team-bio { color: #646970; font-size: 14px; margin-top: 8px; }

/* ==================================================================
   Widgets batch 3 (review round: single-image · separator · hoverbox
   · charts) + Style v5 (per-element hover/motion is emitted as scoped
   <style> by the renderer; only shared bases live here).
   ================================================================== */

/* single-image — styled image with optional caption/link */
.bgpb-single-image { margin: 0; }
.bgpb-single-image img { display: block; width: 100%; height: auto; }
.bgpb-single-image figcaption { font-size: 13px; color: #646970; margin-top: 8px; text-align: center; }
.bgpb-si-frame img { border: 6px solid #fff; box-shadow: 0 4px 18px rgba(0,0,0,.14); }
.bgpb-si-rounded img { border-radius: 12px; }
.bgpb-si-circle img { border-radius: 50%; aspect-ratio: 1/1; object-fit: cover; }
.bgpb-si-shadow img { box-shadow: 0 12px 34px rgba(0,0,0,.22); }
.bgpb-si-h-zoom { overflow: hidden; }
.bgpb-si-h-zoom img { transition: transform .4s ease; }
.bgpb-si-h-zoom:hover img { transform: scale(1.07); }
.bgpb-si-h-gray img { filter: grayscale(1); transition: filter .35s ease; }
.bgpb-si-h-gray:hover img { filter: grayscale(0); }

/* separator — line with optional centred text */
hr.bgpb-separator { border: 0; border-top: 2px solid #e2e4ea; margin: 8px 0; }
hr.bgpb-sep-dashed { border-top-style: dashed; }
hr.bgpb-sep-dotted { border-top-style: dotted; }
.bgpb-separator.bgpb-sep-text { display: flex; align-items: center; gap: 14px; color: #646970; font-size: 14px; }
.bgpb-separator.bgpb-sep-text::before, .bgpb-separator.bgpb-sep-text::after { content: ""; flex: 1; border-top: 2px solid #e2e4ea; }
.bgpb-separator.bgpb-sep-text.bgpb-sep-dashed::before, .bgpb-separator.bgpb-sep-text.bgpb-sep-dashed::after { border-top-style: dashed; }
.bgpb-separator.bgpb-sep-text.bgpb-sep-dotted::before, .bgpb-separator.bgpb-sep-text.bgpb-sep-dotted::after { border-top-style: dotted; }

/* hoverbox — front content, reveals back on hover/focus */
.bgpb-hoverbox-link { text-decoration: none; color: inherit; display: block; }
.bgpb-hoverbox { position: relative; min-height: 220px; border-radius: var(--bgpb-radius, 8px); overflow: hidden; background: var(--bgpb-secondary, #16213e) center/cover no-repeat; color: #fff; }
.bgpb-hoverbox-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; transition: opacity .4s ease, transform .4s ease; }
.bgpb-hoverbox-face h3 { margin: 0 0 8px; color: #fff; }
.bgpb-hoverbox-face p { margin: 0; opacity: .9; }
.bgpb-hoverbox-front { background: rgba(10,15,30,.42); opacity: 1; }
.bgpb-hoverbox-back { background: rgba(10,15,30,.82); opacity: 0; transform: translateY(12px); }
.bgpb-hoverbox:hover .bgpb-hoverbox-front, .bgpb-hoverbox:focus .bgpb-hoverbox-front, .bgpb-hoverbox:focus-within .bgpb-hoverbox-front { opacity: 0; }
.bgpb-hoverbox:hover .bgpb-hoverbox-back, .bgpb-hoverbox:focus .bgpb-hoverbox-back, .bgpb-hoverbox:focus-within .bgpb-hoverbox-back { opacity: 1; transform: none; }
.bgpb-hoverbox:focus-visible { outline: 3px solid var(--bgpb-primary, #4f7cff); outline-offset: 2px; }
/* Mirror/static: stack both faces, no interaction */
.bgpb-hoverbox-static { position: relative; min-height: 0; }
.bgpb-hoverbox-static .bgpb-hoverbox-face { position: static; inset: auto; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bgpb-hoverbox-face, .bgpb-si-h-zoom img, .bgpb-si-h-gray img { transition: none; } }

/* chart-bar — CSS-only horizontal bars */
.bgpb-chart-bar { display: grid; gap: 12px; }
.bgpb-cbar-row { display: grid; grid-template-columns: minmax(70px, 22%) 1fr auto; align-items: center; gap: 10px; }
.bgpb-cbar-label { font-size: 14px; color: var(--bgpb-text, #1a1a2e); }
.bgpb-cbar-track { background: #eef0f6; border-radius: 999px; height: 14px; overflow: hidden; }
.bgpb-cbar-fill { display: block; height: 100%; background: var(--bgpb-primary, #4f7cff); border-radius: 999px; transition: width .6s ease; }
.bgpb-cbar-val { font-size: 13px; font-weight: 600; color: #646970; }

/* chart-pie — conic-gradient disc + legend */
.bgpb-chart-pie { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.bgpb-cpie-disc { width: 160px; height: 160px; border-radius: 50%; flex: 0 0 auto; }
.bgpb-cpie-donut { -webkit-mask: radial-gradient(circle 44px at center, transparent 98%, #000 100%); mask: radial-gradient(circle 44px at center, transparent 98%, #000 100%); }
.bgpb-cpie-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bgpb-cpie-legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bgpb-text, #1a1a2e); }
.bgpb-cpie-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

/* Widgets batch 4 — zigzag rows + line chart */
.bgpb-zigzag { display: grid; gap: 28px; }
.bgpb-zz-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.bgpb-zz-row > * { flex: 1 1 260px; }
.bgpb-zz-row:nth-child(even) { flex-direction: row-reverse; }
.bgpb-zz-media img { display: block; width: 100%; height: auto; border-radius: var(--bgpb-radius, 8px); }
.bgpb-zz-body h3 { margin: 0 0 8px; color: var(--bgpb-text, #1a1a2e); }
.bgpb-zz-body p { margin: 0; color: #646970; line-height: 1.7; }
@media (max-width: 768px) { .bgpb-zz-row, .bgpb-zz-row:nth-child(even) { flex-direction: column; } }

.bgpb-chart-line { width: 100%; overflow-x: auto; }
.bgpb-chart-line svg { width: 100%; max-width: 640px; height: auto; display: block; }

/* Forms widget */
.bgpb-form { display: grid; gap: 14px; max-width: 560px; }
.bgpb-form-row { display: grid; gap: 6px; }
.bgpb-form-row > span { font-size: 14px; font-weight: 600; color: var(--bgpb-text, #1a1a2e); }
.bgpb-req { color: #e5484d; }
.bgpb-form input, .bgpb-form textarea { width: 100%; padding: 11px 13px; border: 1px solid #d5d8e0; border-radius: var(--bgpb-radius, 8px); font: inherit; background: #fff; color: #1a1a2e; }
.bgpb-form input:focus, .bgpb-form textarea:focus { outline: 2px solid var(--bgpb-primary, #4f7cff); outline-offset: 1px; border-color: var(--bgpb-primary, #4f7cff); }
.bgpb-form .bgpb-btn { justify-self: start; border: 0; cursor: pointer; }
.bgpb-form-ok { background: #eafaf0; border: 1px solid #22a35a; color: #14683a; padding: 12px 14px; border-radius: var(--bgpb-radius, 8px); }
.bgpb-form-err { background: #fdecec; border: 1px solid #e14b4b; color: #8a1c1c; padding: 12px 14px; border-radius: var(--bgpb-radius, 8px); }

/* WooCommerce product grid */
.bgpb-products { display: grid; gap: 22px; }
.bgpb-product { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #eceef3; border-radius: var(--bgpb-radius, 8px); padding: 14px; }
.bgpb-product-thumb img { width: 100%; height: auto; border-radius: calc(var(--bgpb-radius, 8px) - 2px); display: block; }
.bgpb-product-title { margin: 0; font-size: 16px; line-height: 1.4; }
.bgpb-product-title a { color: var(--bgpb-text, #1a1a2e); text-decoration: none; }
.bgpb-product-title a:hover { color: var(--bgpb-primary, #4f7cff); }
.bgpb-product-price { font-weight: 700; color: var(--bgpb-primary, #4f7cff); }
.bgpb-product-price del { color: #9aa0ab; font-weight: 400; margin-inline-end: 6px; }
.bgpb-product .bgpb-btn { margin-top: auto; text-align: center; }
@media (max-width: 768px) { .bgpb-products { grid-template-columns: repeat(2, 1fr) !important; } }

/* ---- Widgets batch 5: animated-headline, countdown, flip-box (F-comp) ---- */
.bgpb-animated-headline { line-height: 1.2; }
.bgpb-ah-rot { position: relative; display: inline-grid; vertical-align: bottom; }
.bgpb-ah-rot .bgpb-ah-item { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; color: var(--bgpb-primary, #4f7cff); white-space: nowrap; }
.bgpb-ah-rot .bgpb-ah-item.is-active { opacity: 1; transform: none; }
.bgpb-ah-word { color: var(--bgpb-primary, #4f7cff); }
@media (prefers-reduced-motion: reduce) { .bgpb-ah-rot .bgpb-ah-item { transition: none; } }

.bgpb-countdown { text-align: center; }
.bgpb-cd-grid { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.bgpb-cd-box { min-width: 68px; padding: 12px 10px; border-radius: var(--bgpb-radius, 8px); background: var(--bgpb-bg, #f4f6fb); }
.bgpb-cd-num { display: block; font-size: 30px; font-weight: 800; line-height: 1; color: var(--bgpb-primary, #4f7cff); font-variant-numeric: tabular-nums; }
.bgpb-cd-lbl { display: block; margin-top: 4px; font-size: 12px; color: #646970; }
.bgpb-cd-expired { display: none; margin-top: 10px; font-weight: 700; }
.bgpb-countdown.bgpb-cd-done .bgpb-cd-grid { display: none; }
.bgpb-countdown.bgpb-cd-done .bgpb-cd-expired { display: block; }

.bgpb-flip { background: transparent; perspective: 1000px; max-width: 340px; margin: 0 auto; }
.bgpb-flip-inner { position: relative; width: 100%; min-height: 240px; transition: transform .6s; transform-style: preserve-3d; }
.bgpb-flip:hover .bgpb-flip-inner, .bgpb-flip:focus .bgpb-flip-inner, .bgpb-flip:focus-within .bgpb-flip-inner { transform: rotateY(180deg); }
.bgpb-flip-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; border-radius: var(--bgpb-radius, 8px); text-align: center; }
.bgpb-flip-front { background: var(--bgpb-bg, #f4f6fb); }
.bgpb-flip-back { background: var(--bgpb-primary, #4f7cff); color: #fff; transform: rotateY(180deg); }
.bgpb-flip-back h3, .bgpb-flip-back p { color: #fff; }
.bgpb-flip-static .bgpb-flip-face { position: static; backface-visibility: visible; transform: none; margin-bottom: 8px; }
.bgpb-flip-static { perspective: none; }
@media (prefers-reduced-motion: reduce) { .bgpb-flip-inner { transition: none; } }

/* ---- Widgets batch 6: toc, share, price-list (F-comp) ---- */
.bgpb-toc { border: 1px solid #e2e4ea; border-radius: var(--bgpb-radius, 8px); padding: 14px 18px; background: var(--bgpb-bg, #f8f9fb); max-width: 520px; }
.bgpb-toc-title { font-weight: 700; margin-bottom: 8px; }
.bgpb-toc ul { list-style: none; margin: 0; padding: 0; }
.bgpb-toc li { margin: 3px 0; }
.bgpb-toc li a { text-decoration: none; color: var(--bgpb-primary, #4f7cff); }
.bgpb-toc li a:hover { text-decoration: underline; }
.bgpb-toc-h3 { margin-inline-start: 16px; font-size: 94%; }
.bgpb-toc-h4 { margin-inline-start: 32px; font-size: 90%; opacity: .9; }

.bgpb-share { display: flex; flex-wrap: wrap; gap: 8px; }
.bgpb-share-btn { display: inline-block; padding: 8px 14px; border-radius: var(--bgpb-radius, 8px); background: var(--bgpb-primary, #4f7cff); color: #fff; text-decoration: none; font-size: 14px; border: 0; cursor: pointer; }
.bgpb-share-btn:hover { filter: brightness(.94); }
.bgpb-share-facebook { background: #1877f2; } .bgpb-share-twitter, .bgpb-share-x { background: #111; }
.bgpb-share-whatsapp { background: #25d366; } .bgpb-share-telegram { background: #29a9eb; }
.bgpb-share-linkedin { background: #0a66c2; } .bgpb-share-email { background: #646970; }
.bgpb-share-copy { background: #334155; }

.bgpb-price-list { list-style: none; margin: 0; padding: 0; max-width: 620px; }
.bgpb-pl-item { padding: 8px 0; border-bottom: 1px dashed #e2e4ea; }
.bgpb-pl-head { display: flex; align-items: baseline; gap: 8px; }
.bgpb-pl-name { font-weight: 600; }
.bgpb-pl-dots { flex: 1; border-bottom: 2px dotted #cbd2dd; transform: translateY(-3px); }
.bgpb-pl-price { font-weight: 700; color: var(--bgpb-primary, #4f7cff); white-space: nowrap; }
.bgpb-pl-desc { color: #646970; font-size: 90%; margin-top: 2px; }
.bgpb-lottie { max-width: 100%; }

/* ---- Theme parity: cards-grid + steps ---- */
.bgpb-cards-grid { display: grid; gap: 22px; }
.bgpb-card { display: block; text-decoration: none; color: inherit; background: var(--bgpb-bg, #fff); border: 1px solid #eceef3; border-radius: var(--bgpb-radius, 12px); padding: 26px 22px; text-align: center; transition: transform .25s ease, box-shadow .25s ease; }
a.bgpb-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.10); }
.bgpb-cards-plain .bgpb-card { background: transparent; border: 0; padding: 14px; }
.bgpb-card-icon { width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; background: var(--bgpb-primary, #4f7cff); color: #fff; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.bgpb-icon-square { border-radius: 16px; }
.bgpb-icon-gradient { box-shadow: 0 8px 20px rgba(79,124,255,.25); }
/* Icon interaction on card hover (matches theme): scale + slight rotate + a
   pulsing colour ring (--rc = the card's own colour). RTL rotates the other way. */
.bgpb-card:hover .bgpb-card-icon { transform: scale(1.1) rotate(5deg); animation: bgpb-pulse-glow 1.5s ease-in-out infinite; }
[dir="ltr"] .bgpb-card:hover .bgpb-card-icon { transform: scale(1.1) rotate(-5deg); }
@keyframes bgpb-pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 var(--rc, rgba(79,124,255,.4)); } 50% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .bgpb-card:hover .bgpb-card-icon { transform: none; animation: none; } }
/* Images never overflow their column */
.bgpb-el img, .bgpb-col img, .bgpb-sec-inner img { max-width: 100%; height: auto; }
.bgpb-card-title { margin: 0 0 6px; font-size: 18px; color: var(--bgpb-text, #1a1a2e); }
.bgpb-card-text { margin: 0; font-size: 14px; color: #646970; line-height: 1.6; }
/* Top accent bar: hidden by default, scales in from the inline edge on hover
   (matches the theme's .service-card::before). RTL grows from the right. */
.bgpb-card-abar { position: relative; }
.bgpb-card-abar::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--ab, #4f7cff); transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.16,1,.3,1); }
[dir="ltr"] .bgpb-card-abar::before { transform-origin: left; }
.bgpb-card-abar:hover::before { transform: scaleX(1); }
.bgpb-card-link { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--bgpb-primary, #4f7cff); }
.bgpb-card:hover .bgpb-card-link { text-decoration: underline; }
.bgpb-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(79,124,255,.16); }
.bgpb-cards-plain .bgpb-card:hover { box-shadow: none; transform: none; }
/* Dark glassmorphism card variant (for dark sections) */
.bgpb-cards-glass .bgpb-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bgpb-cards-glass .bgpb-card-title { color: #fff; }
.bgpb-cards-glass .bgpb-card-text { color: rgba(255,255,255,.72); }
.bgpb-cards-glass .bgpb-card:hover { box-shadow: 0 16px 44px rgba(0,0,0,.4); border-color: rgba(255,255,255,.2); }
@media (max-width: 768px) { .bgpb-cards-grid { grid-template-columns: 1fr !important; } }

.bgpb-steps { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 8px; }
.bgpb-step { flex: 1 1 160px; max-width: 220px; text-align: center; padding: 8px; }
.bgpb-step-num { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; background: var(--bgpb-primary, #4f7cff); color: #fff; }
.bgpb-step-title { margin: 0 0 4px; font-size: 16px; color: var(--bgpb-text, #1a1a2e); }
.bgpb-step-desc { margin: 0; font-size: 13px; color: #646970; }
.bgpb-step-arrow { align-self: center; color: #c3cad6; font-size: 22px; padding: 0 4px; }
@media (max-width: 768px) { .bgpb-step-arrow { display: none; } .bgpb-step { flex-basis: 100%; max-width: none; } }

/* ---- Form choice fields (select/radio/checkbox) ---- */
.bgpb-form select { width: 100%; padding: 10px 12px; border: 1px solid #d5dae3; border-radius: 8px; background: #fff; font: inherit; }
.bgpb-form-group .bgpb-form-label { display: block; margin-bottom: 6px; font-weight: 600; }
.bgpb-choices { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.bgpb-choice { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.bgpb-choice input { width: auto; margin: 0; }
.bgpb-form-consent { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.bgpb-form-consent input { width: auto; }

/* ---- Testimonials carousel ---- */
.bgpb-tcar { overflow: hidden; position: relative; max-width: 720px; margin: 0 auto; }
.bgpb-tcar-track { display: flex; transition: transform .5s ease; }
.bgpb-tcar-card { min-width: 100%; box-sizing: border-box; padding: 30px 26px; text-align: center; margin: 0; }
.bgpb-tcar-card blockquote { font-size: 19px; line-height: 1.7; margin: 0 0 12px; color: var(--bgpb-text, #1a1a2e); }
.bgpb-tcar-stars { color: #f5a623; font-size: 18px; margin-bottom: 8px; letter-spacing: 2px; }
.bgpb-tcar-card figcaption { color: #646970; font-weight: 700; }
.bgpb-tcar-card figcaption span { font-weight: 400; }
.bgpb-testimonials-static .bgpb-tcar-card { border-bottom: 1px solid #eceef3; }
@media (prefers-reduced-motion: reduce) { .bgpb-tcar-track { transition: none; } }

/* ---- Section dark color scheme: light text for widgets that default to dark ---- */
.bgpb-scheme-dark .bgpb-step-title, .bgpb-scheme-dark .bgpb-tcar-card blockquote,
.bgpb-scheme-dark .bgpb-toc-title, .bgpb-scheme-dark .bgpb-pl-name { color: #fff; }
.bgpb-scheme-dark .bgpb-step-desc, .bgpb-scheme-dark .bgpb-tcar-card figcaption,
.bgpb-scheme-dark .bgpb-cd-lbl, .bgpb-scheme-dark .bgpb-pl-desc,
.bgpb-scheme-dark .bgpb-icon-list li { color: rgba(255,255,255,.72); }
.bgpb-scheme-dark .bgpb-tcar-card figcaption span { color: rgba(255,255,255,.55); }
.bgpb-scheme-dark .bgpb-step-arrow { color: rgba(255,255,255,.4); }
.bgpb-scheme-dark .bgpb-toc { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.bgpb-scheme-dark .bgpb-pl-item { border-bottom-color: rgba(255,255,255,.14); }
.bgpb-scheme-dark .bgpb-form select, .bgpb-scheme-dark .bgpb-form input, .bgpb-scheme-dark .bgpb-form textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.bgpb-scheme-dark .bgpb-form-row > span, .bgpb-scheme-dark .bgpb-form-label { color: rgba(255,255,255,.85); }

/* ---- Testimonials grid (shows all, matches theme) + card styling ---- */
.bgpb-tgrid { display: grid; gap: 22px; }
.bgpb-tgrid .bgpb-tcar-card { min-width: 0; margin: 0; background: var(--bgpb-bg, #fff); border: 1px solid #eceef3; border-radius: var(--bgpb-radius, 12px); padding: 26px 24px; text-align: start; transition: transform .25s ease, box-shadow .25s ease; }
.bgpb-tgrid .bgpb-tcar-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.10); }
.bgpb-tgrid .bgpb-tcar-card blockquote { font-size: 15px; line-height: 1.8; }
.bgpb-scheme-dark .bgpb-tgrid .bgpb-tcar-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.bgpb-scheme-dark .bgpb-tgrid .bgpb-tcar-card:hover { box-shadow: 0 16px 44px rgba(0,0,0,.4); border-color: rgba(255,255,255,.2); }
@media (max-width: 768px) { .bgpb-tgrid { grid-template-columns: 1fr !important; } }

/* ---- Card "learn more" arrow slides on hover (matches theme) ---- */
.bgpb-card-link span { display: inline-block; transition: transform .25s ease; }
.bgpb-card:hover .bgpb-card-link span { transform: translateX(-5px); }
[dir="ltr"] .bgpb-card:hover .bgpb-card-link span { transform: translateX(5px); }

/* ---- Dark form select: native option list follows the dark scheme ---- */
.bgpb-scheme-dark .bgpb-form select { color-scheme: dark; }
.bgpb-scheme-dark .bgpb-form select option { background: #0f1535; color: #fff; }

/* ---- Multi-item testimonials carousel (shows N per view, slides by page) ---- */
.bgpb-tcar-multi { max-width: 100%; overflow: visible; position: relative; }
.bgpb-tcar-multi .bgpb-tcar-viewport { overflow: hidden; }
.bgpb-tcar-multi .bgpb-tcar-track { display: flex; transition: transform .5s ease; }
.bgpb-tcar-multi .bgpb-tcar-track > .bgpb-tcar-card { flex: 0 0 calc(100% / var(--per, 1)); min-width: 0; box-sizing: border-box; margin: 0; padding: 24px; text-align: start; border: 1px solid #eceef3; border-radius: var(--bgpb-radius, 12px); background: var(--bgpb-bg, #fff); }
.bgpb-tcar-multi .bgpb-tcar-card blockquote { font-size: 15px; line-height: 1.8; }
.bgpb-scheme-dark .bgpb-tcar-multi .bgpb-tcar-track > .bgpb-tcar-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
@media (max-width: 768px) { .bgpb-tcar-multi { --per: 1 !important; } }
@media (prefers-reduced-motion: reduce) { .bgpb-tcar-multi .bgpb-tcar-track { transition: none; } }