/* =====================================================================
   ProVirtual Stage — Responsive (Elementor breakpoints)
   ===================================================================== */

/* Tablet & below */
@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { max-width: 520px; margin-inline: auto; }
	.why__inner, .order__inner, .faq__inner { grid-template-columns: 1fr; }
	.section-header--left { text-align: center; }
	.showcase__grid, .how__steps, .credit-grid, .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
	.stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 767px) {
	:root { --space-section: 3.25rem; }

	.site-nav { display: none; }
	.site-header__actions .btn-cta { display: none; }
	.nav-toggle { display: flex; }
	.site-header__actions { margin-left: auto; }
	.mobile-nav.is-open { display: block; }

	.hero__actions .btn { flex: 1 1 auto; }
	.hero__floating { display: none; }

	.showcase__grid, .how__steps, .credit-grid, .testimonials__grid,
	.site-footer__top, .site-footer__widgets, .form-grid-2 { grid-template-columns: 1fr; }

	.credit-card__foot { flex-wrap: wrap; }
	.site-footer__bottom { flex-direction: column; text-align: center; }
}

/* Small phones */
@media (max-width: 420px) {
	.stats__grid { grid-template-columns: 1fr; }
	.hero__badges { gap: 0.75rem; }
}

/* Small phones — compact header so the logo fits cleanly */
@media (max-width: 480px) {
	.site-header__inner { gap: 0.5rem; min-height: 62px; }
	.site-logo { font-size: 1rem; gap: 0.45rem; }
	.site-logo__mark { width: 26px; height: 26px; border-radius: 8px; }
	.site-header__actions { gap: 0.4rem; }
	.pvs-lang__btn { padding: 0.38rem 0.55rem; font-size: 0.78rem; gap: 0.3rem; }
	.pvs-lang__caret { display: none; }
	.nav-toggle { width: 42px; height: 40px; }
}

@media (max-width: 360px) {
	.site-logo { font-size: 0.92rem; }
	.pvs-lang__btn .pvs-lang__code { display: none; }
}
/* =====================================================================
   Mobile UX fixes — newsletter field, compare table, manual band
   ===================================================================== */
@media (max-width: 600px) {
	/* Newsletter: flex-basis was applied to the column main-axis (height),
	   turning the email field into a tall ~square with a 999px radius (a
	   circle). Reset to a normal full-width field. */
	.pvs-news__form { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; max-width: 100%; }
	.pvs-news__form input[type="email"] { flex: 0 0 auto; width: 100%; }
	.pvs-news__form .btn { flex: 0 0 auto; width: 100%; justify-content: center; }
	.pvs-news .pvs-consent { flex: 0 0 auto; width: 100%; min-width: 0; }
	/* The consent label is a flex row [checkbox][text]. Keep the checkbox its
	   natural size (the email rule above must NOT stretch it) and let the text
	   span wrap normally instead of collapsing to the right. */
	.pvs-news .pvs-consent input { flex: 0 0 auto; width: 16px; }
	.pvs-news .pvs-consent span { min-width: 0; overflow-wrap: break-word; }
}

@media (max-width: 767px) {
	/* Compare table: contain it so it can't push the page wider than the
	   viewport (which was creating the left/right scrollbar). */
	.why__compare { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.compare { min-width: 0; }
	.compare th, .compare td { padding: 0.6rem 0.7rem; font-size: 0.82rem; }

	/* Manual "done-for-you" band: tighter padding so nothing is clipped. */
	.pmanual { padding: 1.5rem 1.15rem; }
	.pmanual__aside { padding: 1.25rem 1rem; }

	/* Safety net: stop any stray full-bleed element from adding a horizontal
	   scrollbar on phones (clip keeps sticky positioning working). */
	body { overflow-x: clip; }
}