/* VelocityBuilder Frontend Styles */

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.vb-tabs-nav { display: flex; gap: 0; border-bottom: 2px solid #e0e0e0; margin-bottom: 0; }
.vb-tabs-btn {
  padding: 10px 20px; border: none; background: none; cursor: pointer;
  font-size: 14px; font-weight: 500; color: #666; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color .2s, border-color .2s;
}
.vb-tabs-btn:hover           { color: #333; }
.vb-tabs-btn.vb-active       { color: #6b46c1; border-bottom-color: #6b46c1; }
.vb-tabs-panel               { display: none; padding: 20px 0; }
.vb-tabs-panel.vb-active     { display: block; }

/* ── Accordion / Toggle ───────────────────────────────────────────────────── */
.vb-accordion details         { border: 1px solid #e0e0e0; margin-bottom: 4px; border-radius: 4px; overflow: hidden; }
.vb-accordion summary         { padding: 14px 16px; cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.vb-accordion summary::after  { content: '+'; font-size: 18px; line-height: 1; }
.vb-accordion details[open] summary::after { content: '−'; }
.vb-accordion .vb-accordion-content { padding: 0 16px 16px; }

/* ── Counter ──────────────────────────────────────────────────────────────── */
.vb-counter         { text-align: center; padding: 20px; }
.vb-counter-value   { display: inline-block; font-size: 60px; font-weight: 700; line-height: 1; }
.vb-counter-prefix,
.vb-counter-suffix  { font-size: 30px; font-weight: 600; vertical-align: top; margin-top: 10px; }
.vb-counter-title   { font-size: 15px; color: #666; margin-top: 8px; }

/* ── Progress Bar ─────────────────────────────────────────────────────────── */
.vb-progress        { margin-bottom: 16px; }
.vb-progress-label  { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.vb-progress-track  { background: #e0e0e0; border-radius: 100px; overflow: hidden; height: 8px; }
.vb-progress-bar    { height: 100%; background: #6b46c1; border-radius: 100px; transition: width 1.2s cubic-bezier(.4,0,.2,1); }

/* ── Countdown ────────────────────────────────────────────────────────────── */
.vb-countdown        { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.vb-countdown-block  { text-align: center; min-width: 60px; }
.vb-countdown-digit  { font-size: 48px; font-weight: 700; line-height: 1; display: block; }
.vb-countdown-label  { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #888; margin-top: 4px; }

/* ── Alert ────────────────────────────────────────────────────────────────── */
.vb-alert           { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 6px; border: 1px solid transparent; }
.vb-alert-info      { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.vb-alert-success   { background: #f0fdf4; border-color: #86efac; color: #166534; }
.vb-alert-warning   { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.vb-alert-danger    { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.vb-alert-icon      { font-size: 18px; flex-shrink: 0; }
.vb-alert-body      { flex: 1; }
.vb-alert-title     { font-weight: 600; margin-bottom: 4px; }
.vb-alert-desc      { font-size: 14px; }
.vb-alert-dismiss   { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; opacity: .6; padding: 0; }
.vb-alert-dismiss:hover { opacity: 1; }

/* ── Star Rating ──────────────────────────────────────────────────────────── */
.vb-star-rating       { display: flex; align-items: center; gap: 6px; }
.vb-star-full         { color: #f59e0b; }
.vb-star-empty        { color: #d1d5db; }
.vb-star-half::before { content: '★'; color: #f59e0b; clip-path: inset(0 50% 0 0); }
.vb-rating-scale      { font-size: 13px; color: #888; }

/* ── Price Table ──────────────────────────────────────────────────────────── */
.vb-price-table       { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; text-align: center; }
.vb-price-table.featured { border-color: #6b46c1; box-shadow: 0 4px 20px rgba(107,70,193,.15); }
.vb-pt-header         { background: #6b46c1; color: #fff; padding: 24px 20px 16px; }
.vb-pt-header.featured { background: #553c9a; }
.vb-pt-name           { font-size: 20px; font-weight: 700; }
.vb-pt-desc           { font-size: 13px; opacity: .8; margin-top: 4px; }
.vb-pt-price-wrap     { padding: 20px; border-bottom: 1px solid #e0e0e0; }
.vb-pt-currency       { font-size: 20px; font-weight: 600; vertical-align: top; margin-top: 8px; display: inline-block; }
.vb-pt-amount         { font-size: 52px; font-weight: 800; line-height: 1; }
.vb-pt-period         { font-size: 14px; color: #888; }
.vb-pt-features       { padding: 20px; text-align: left; }
.vb-pt-feature        { padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.vb-pt-feature:last-child { border: 0; }
.vb-pt-check          { color: #22c55e; flex-shrink: 0; }
.vb-pt-footer         { padding: 16px 20px 24px; }
.vb-pt-cta            { display: block; width: 100%; padding: 12px; background: #6b46c1; color: #fff; border: none; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; }

/* ── Flip Box ─────────────────────────────────────────────────────────────── */
.vb-flip-box          { perspective: 1000px; height: var(--vb-flip-h, 260px); }
.vb-flip-inner        { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s; }
.vb-flip-box:hover .vb-flip-inner { transform: rotateY(180deg); }
.vb-flip-front,
.vb-flip-back         { position: absolute; inset: 0; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px; padding: 20px; }
.vb-flip-back         { transform: rotateY(180deg); }

/* ── Social Icons ─────────────────────────────────────────────────────────── */
.vb-social-icons     { display: flex; flex-wrap: wrap; gap: 10px; }
.vb-social-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; font-size: 18px; text-decoration: none; transition: transform .2s, opacity .2s; }
.vb-social-icon-link:hover { transform: scale(1.1); opacity: .9; }

/* ── Share Buttons ────────────────────────────────────────────────────────── */
.vb-share-buttons    { display: flex; flex-wrap: wrap; gap: 8px; }
.vb-share-btn        { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 5px; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; }

/* ── Icon Box ─────────────────────────────────────────────────────────────── */
.vb-icon-box          { display: flex; gap: 16px; align-items: flex-start; }
.vb-icon-box-icon     { font-size: 40px; flex-shrink: 0; line-height: 1; }
.vb-icon-box-title    { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.vb-icon-box-desc     { color: #666; line-height: 1.6; }

/* ── Image Box ─────────────────────────────────────────────────────────────── */
.vb-image-box         { overflow: hidden; }
.vb-image-box img     { width: 100%; height: auto; display: block; }
.vb-image-box-body    { padding: 16px; }
.vb-image-box-title   { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.vb-image-box-desc    { color: #666; line-height: 1.6; }
.vb-image-box-btn     { display: inline-block; margin-top: 12px; text-decoration: none; color: #6b46c1; font-weight: 600; font-size: 14px; }

/* ── Icon List ────────────────────────────────────────────────────────────── */
.vb-icon-list         { list-style: none; margin: 0; padding: 0; }
.vb-icon-list li      { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.vb-icon-list-icon    { flex-shrink: 0; }

/* ── Call to Action ───────────────────────────────────────────────────────── */
.vb-cta               { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px; border-radius: 8px; flex-wrap: wrap; }
.vb-cta-content       { flex: 1; }
.vb-cta-title         { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.vb-cta-desc          { color: #666; }
.vb-cta-btn           { flex-shrink: 0; display: inline-block; padding: 12px 28px; border-radius: 6px; background: #6b46c1; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }

/* ── Table of Contents ────────────────────────────────────────────────────── */
.vb-toc               { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 6px; padding: 16px 20px; }
.vb-toc-title         { font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.vb-toc-toggle        { background: none; border: none; cursor: pointer; font-size: 18px; padding: 0; }
.vb-toc-list          { list-style: none; margin: 0; padding: 0; }
.vb-toc-item          { padding: 4px 0; }
.vb-toc-item a        { color: #555; text-decoration: none; font-size: 14px; }
.vb-toc-item a:hover  { color: #6b46c1; text-decoration: underline; }
.vb-toc-depth-h3      { padding-left: 16px; }
.vb-toc-depth-h4      { padding-left: 32px; }

/* ── Slides / Hero Slider ─────────────────────────────────────────────────── */
.vb-slides-wrap       { position: relative; overflow: hidden; }
.vb-carousel-slide    { display: none; position: relative; }
.vb-carousel-slide.vb-active { display: block; }
.vb-slide-overlay     { position: absolute; inset: 0; }
.vb-slide-content     { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: var(--vb-slide-align, center); justify-content: center; height: 100%; padding: 40px; gap: 16px; }
.vb-slide-title       { color: #fff; font-size: 42px; font-weight: 800; margin: 0; }
.vb-slide-desc        { color: rgba(255,255,255,.85); font-size: 18px; margin: 0; }
.vb-slide-btn         { display: inline-block; padding: 12px 32px; background: #fff; color: #333; font-weight: 700; border-radius: 6px; text-decoration: none; }
.vb-carousel-prev,
.vb-carousel-next     { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(0,0,0,.4); color: #fff; border: none; cursor: pointer; padding: 10px 14px; font-size: 20px; border-radius: 4px; }
.vb-carousel-prev     { left: 10px; }
.vb-carousel-next     { right: 10px; }
.vb-carousel-dots     { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.vb-carousel-dot      { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); border: 2px solid rgba(255,255,255,.8); cursor: pointer; padding: 0; }

/* ── Testimonial Carousel ─────────────────────────────────────────────────── */
.vb-testimonial-carousel    { position: relative; }
.vb-testimonial-card        { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 28px; }
.vb-testimonial-rating      { margin-bottom: 14px; font-size: 18px; }
.vb-testimonial-content     { font-size: 15px; line-height: 1.7; color: #444; margin: 0 0 20px; border: 0; padding: 0; font-style: italic; }
.vb-testimonial-author      { display: flex; align-items: center; gap: 12px; }
.vb-testimonial-avatar      { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.vb-testimonial-avatar-placeholder { width: 48px; height: 48px; border-radius: 50%; background: #6b46c1; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.vb-testimonial-name        { display: block; font-weight: 700; }
.vb-testimonial-role        { font-size: 13px; color: #888; }
.vb-star-full               { color: #f59e0b; }
.vb-star-empty              { color: #d1d5db; }

/* ── Animated Headline ────────────────────────────────────────────────────── */
.vb-animated-headline { display: inline; }
.vb-ah-rotate         { position: relative; display: inline-block; }
.vb-ah-word           { opacity: 0; position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity .4s; }
.vb-ah-word.vb-active { opacity: 1; position: relative; }

/* Effect: typing */
.vb-ah-effect-type .vb-ah-word.vb-active {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  animation: vb-type 1s steps(20) forwards, vb-blink .5s step-end 3;
}
@keyframes vb-type  { from { width: 0 } to { width: 100% } }
@keyframes vb-blink { 50% { border-color: transparent } }

/* Effect: slide */
.vb-ah-effect-slide .vb-ah-word           { transform: translateY(20px); }
.vb-ah-effect-slide .vb-ah-word.vb-active { transform: translateY(0); }

/* Effect: fade */
.vb-ah-effect-fade .vb-ah-word { transition: opacity .6s; }

/* ── Lottie ───────────────────────────────────────────────────────────────── */
.vb-lottie-wrap { display: flex; }
.vb-lottie-wrap[style*="center"] { justify-content: center; }
.vb-lottie-placeholder { border-radius: 6px; font-size: 13px; color: #999; }

/* ── Video Playlist ───────────────────────────────────────────────────────── */
.vb-video-playlist      { display: grid; grid-template-columns: 1fr 280px; gap: 12px; }
@media (max-width: 768px) { .vb-video-playlist { grid-template-columns: 1fr; } }
.vb-playlist-player     { aspect-ratio: 16/9; }
.vb-playlist-iframe     { width: 100%; height: 100%; border-radius: 6px; }
.vb-playlist-list       { overflow-y: auto; max-height: 400px; display: flex; flex-direction: column; gap: 2px; }
.vb-playlist-item       { display: flex; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; align-items: center; border: 2px solid transparent; }
.vb-playlist-item:hover { background: #f3f4f6; }
.vb-playlist-item.vb-active { border-color: #6b46c1; background: #faf5ff; }
.vb-playlist-thumb      { width: 80px; height: 45px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.vb-playlist-thumb-placeholder { width: 80px; height: 45px; background: #e0e0e0; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vb-playlist-title      { font-size: 13px; font-weight: 500; line-height: 1.4; display: block; }
.vb-playlist-duration   { font-size: 12px; color: #888; }

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
.vb-breadcrumbs     { font-size: 14px; }
.vb-crumb-list      { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.vb-crumb-sep       { color: #aaa; }
.vb-crumb-link      { color: #6b46c1; text-decoration: none; }
.vb-crumb-link:hover { text-decoration: underline; }
.vb-crumb-current   { color: #666; }

/* ── Nav Menu ─────────────────────────────────────────────────────────────── */
.vb-nav-menu        { }
.vb-nav-horizontal ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.vb-nav-horizontal li a { display: block; padding: 10px 16px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; }
.vb-nav-vertical ul { list-style: none; margin: 0; padding: 0; }
.vb-nav-vertical li a { display: block; padding: 8px 0; color: inherit; text-decoration: none; font-size: 14px; }

/* ── Search Form ──────────────────────────────────────────────────────────── */
.vb-search-form     { display: flex; }
.vb-search-input    { flex: 1; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 6px 0 0 6px; font-size: 14px; outline: none; }
.vb-search-btn      { padding: 10px 18px; background: #6b46c1; color: #fff; border: none; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.vb-search-btn:hover { background: #553c9a; }

/* ── Entrance Animations ──────────────────────────────────────────────────── */
[data-vb-animation] { opacity: 0; }
.vb-anim-run        { opacity: 1; }

@keyframes vb-fadeIn          { from { opacity: 0 }                                          to { opacity: 1 } }
@keyframes vb-fadeInUp        { from { opacity: 0; transform: translateY(40px) }             to { opacity: 1; transform: none } }
@keyframes vb-fadeInDown      { from { opacity: 0; transform: translateY(-40px) }            to { opacity: 1; transform: none } }
@keyframes vb-fadeInLeft      { from { opacity: 0; transform: translateX(-40px) }            to { opacity: 1; transform: none } }
@keyframes vb-fadeInRight     { from { opacity: 0; transform: translateX(40px) }             to { opacity: 1; transform: none } }
@keyframes vb-zoomIn          { from { opacity: 0; transform: scale(.6) }                    to { opacity: 1; transform: none } }
@keyframes vb-bounceIn        { 0%,20%,40%,60%,80%,100% { animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; transform: scale3d(.3,.3,.3) } 20% { transform: scale3d(1.1,1.1,1.1) } 40% { transform: scale3d(.9,.9,.9) } 60% { opacity: 1; transform: scale3d(1.03,1.03,1.03) } 80% { transform: scale3d(.97,.97,.97) } 100% { opacity: 1; transform: none } }
@keyframes vb-slideInLeft     { from { transform: translateX(-100%) }                        to { transform: none } }
@keyframes vb-slideInRight    { from { transform: translateX(100%) }                         to { transform: none } }
@keyframes vb-slideInUp       { from { transform: translateY(100%) }                         to { transform: none } }
@keyframes vb-slideInDown     { from { transform: translateY(-100%) }                        to { transform: none } }
@keyframes vb-rotateIn        { from { opacity: 0; transform: rotate(-200deg) }              to { opacity: 1; transform: none } }
@keyframes vb-flipInX         { from { transform: perspective(400px) rotateX(90deg); opacity: 0 } to { transform: none; opacity: 1 } }

.vb-anim-fadeIn      { animation: vb-fadeIn      both; }
.vb-anim-fadeInUp    { animation: vb-fadeInUp    both; }
.vb-anim-fadeInDown  { animation: vb-fadeInDown  both; }
.vb-anim-fadeInLeft  { animation: vb-fadeInLeft  both; }
.vb-anim-fadeInRight { animation: vb-fadeInRight both; }
.vb-anim-zoomIn      { animation: vb-zoomIn      both; }
.vb-anim-bounceIn    { animation: vb-bounceIn    both; }
.vb-anim-slideInLeft  { animation: vb-slideInLeft  both; overflow: hidden; }
.vb-anim-slideInRight { animation: vb-slideInRight both; overflow: hidden; }
.vb-anim-slideInUp    { animation: vb-slideInUp    both; overflow: hidden; }
.vb-anim-slideInDown  { animation: vb-slideInDown  both; overflow: hidden; }
.vb-anim-rotateIn     { animation: vb-rotateIn  both; }
.vb-anim-flipInX      { animation: vb-flipInX   both; }

/* ── Responsive visibility ────────────────────────────────────────────────── */
@media (max-width: 1024px) { .vb-hide-tablet  { display: none !important; } }
@media (max-width: 767px)  { .vb-hide-mobile  { display: none !important; } }
@media (min-width: 768px)  { .vb-hide-desktop { display: none !important; } }

/* ── Hover Animations ─────────────────────────────────────────────────────── */
@keyframes vb-hover-grow    { 0%,100% { transform: scale(1) }   50% { transform: scale(1.1) } }
@keyframes vb-hover-shrink  { 0%,100% { transform: scale(1) }   50% { transform: scale(.9)  } }
@keyframes vb-hover-pulse   { 0%,100% { transform: scale(1) }   50% { transform: scale(1.06) } }
@keyframes vb-hover-float   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes vb-hover-bob     { 0%,100% { transform: translateY(-8px) } 50% { transform: translateY(-4px) } }
@keyframes vb-hover-skew    { 0%,100% { transform: skewX(0) } 25% { transform: skewX(-6deg) } 75% { transform: skewX(6deg) } }
@keyframes vb-hover-rotate  { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } }
@keyframes vb-hover-shake   {
  0%,100% { transform: translateX(0) }
  20%     { transform: translateX(-8px) }
  40%     { transform: translateX(8px) }
  60%     { transform: translateX(-6px) }
  80%     { transform: translateX(6px) }
}
@keyframes vb-hover-bounce  {
  0%,20%,50%,80%,100% { transform: translateY(0) }
  40% { transform: translateY(-20px) }
  60% { transform: translateY(-10px) }
}
@keyframes vb-hover-buzz    {
  0%,100% { transform: translate(0,0) }
  25%     { transform: translate(2px,2px) }
  50%     { transform: translate(-2px,-2px) }
  75%     { transform: translate(2px,-2px) }
}
@keyframes vb-hover-swing   {
  15%  { transform: rotate(6deg) }
  30%  { transform: rotate(-4deg) }
  45%  { transform: rotate(4deg) }
  60%  { transform: rotate(-2deg) }
  75%  { transform: rotate(2deg) }
  100% { transform: rotate(0) }
}

.vb-hover-anim-run.vb-hover-anim-grow    { animation: vb-hover-grow   .4s ease both; }
.vb-hover-anim-run.vb-hover-anim-shrink  { animation: vb-hover-shrink .4s ease both; }
.vb-hover-anim-run.vb-hover-anim-pulse   { animation: vb-hover-pulse  .5s ease both; }
.vb-hover-anim-run.vb-hover-anim-float   { animation: vb-hover-float  .5s ease both; }
.vb-hover-anim-run.vb-hover-anim-bob     { animation: vb-hover-bob    .5s ease both; }
.vb-hover-anim-run.vb-hover-anim-skew    { animation: vb-hover-skew   .5s ease both; }
.vb-hover-anim-run.vb-hover-anim-rotate  { animation: vb-hover-rotate .6s ease both; }
.vb-hover-anim-run.vb-hover-anim-shake   { animation: vb-hover-shake  .5s ease both; }
.vb-hover-anim-run.vb-hover-anim-bounce  { animation: vb-hover-bounce .7s ease both; }
.vb-hover-anim-run.vb-hover-anim-buzz    { animation: vb-hover-buzz   .3s ease both; }
.vb-hover-anim-run.vb-hover-anim-swing   { animation: vb-hover-swing  .6s ease both; }

/* ── Background Video ─────────────────────────────────────────────────────── */
.vb-bg-video-container {
  position: absolute; inset: 0; overflow: hidden;
  z-index: 0; pointer-events: none;
}
.vb-bg-video-el {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  object-fit: cover;
}
.vb-bg-video-overlay {
  position: absolute; inset: 0;
}

/* ── Sticky stuck indicator ───────────────────────────────────────────────── */
[data-vb-sticky] { position: sticky; z-index: 100; }
[data-vb-sticky].vb-is-stuck { box-shadow: 0 2px 12px rgba(0,0,0,.12); }

/* ── Scroll effect smooth rendering ─────────────────────────────────────────── */
[data-vb-scroll] {
  will-change: transform;
  backface-visibility: hidden;
}