/* Revoza overrides. Each task appends its own block, marked with a "task NN" comment. */

/* task 02 - preloader is hidden before JS runs when the visitor prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	.preloader {
		display: none;
	}
}

/* task 02 - skip link and language switcher */
.rv-skip-link {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 1001;
	padding: 8px 16px;
	background: var(--white-color);
	color: var(--primary-color);
}

.rv-skip-link:focus {
	top: 8px;
}

/* task 03 - form message box (rvFormMessage) and field errors */
.rv-form-message{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5em;
	text-align: left;
	margin-top: 24px;
	padding: 16px 20px;
	border-radius: 12px;
}

.rv-form-message[hidden]{
	display: none;
}

.rv-form-message i{
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1.5em;
}

.rv-form-message--success{
	color: var(--primary-color);
	background: var(--secondary-color);
	border: 1px solid var(--accent-color);
}

.rv-form-message--success i{
	color: var(--accent-color);
}

.rv-form-message--error{
	color: #b42318;
	background: rgba(230, 87, 87, 0.1);
	border: 1px solid rgba(230, 87, 87, 0.4);
}

.rv-form-message--error i{
	color: var(--error-color);
}

.form-control.is-invalid{
	border-color: var(--error-color);
}

.help-block.with-errors ul{
	margin: 6px 0 0;
	padding: 0;
	font-size: 14px;
	color: var(--error-color);
}

/* task 12 - honeypot of the appointment form: out of sight for people, still in the DOM for bots */
.rv-hp{
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* task 14 - blocks that are not part of the template's .service-entry but live inside it when an editor places the
   shortcode in the content (S13 plain): undo the entry's own h2 / p rules, keep the heading and accordion spacing */
.service-entry .page-single-faqs{
    margin-top: 60px;
}

.service-entry .page-single-faqs .section-title h2{
    font-size: 46px;
    margin-bottom: 0;
}

.service-entry .page-single-faqs .section-title p{
    margin: 20px 0 0;
}

.service-entry .accordion-header{
    font-size: calc(1.325rem + 0.9vw);
    margin-bottom: 0;
}

@media (min-width: 1200px){
    .service-entry .accordion-header{
        font-size: 2rem;
    }
}

@media only screen and (max-width: 991px){
    .service-entry .page-single-faqs{
        margin-top: 40px;
    }

    .service-entry .page-single-faqs .section-title h2{
        font-size: 36px;
    }
}

@media only screen and (max-width: 767px){
    .service-entry .page-single-faqs .section-title h2{
        font-size: 26px;
    }
}

/* task 16 - the "Popular" ribbon of a highlighted elite plan is hardcoded in custom.css: take the text from the markup so it can be translated */
.pricing-item-elite.highlighted-box::after{
    content: attr(data-badge);
}

/* task 20 - the template's bootstrap.min.css falls back to the demo site URL as breadcrumb divider */
.breadcrumb{
    --bs-breadcrumb-divider: '/';
}

/* task 20 - pagination dots: 24px between centres (WCAG 2.2 target size); Swiper reads the gap from this variable */
.service-pagination,
.service-pagination-elite{
    --swiper-pagination-bullet-horizontal-gap: 7px;
}

/* task 20 - page header background as WebP (191 KB -> 56 KB), same picture */
.page-header{
    background-image: url('../images/page-header-bg.webp');
}