/* Стили для замены элементов Ultimate Addons. См. inc/legacy-ultimate.php */

/* --- отступ --- */
.gp-spacer { height: var(--gp-h, 0); width: 100%; clear: both; }
@media (max-width: 1024px) { .gp-spacer { height: var(--gp-ht, var(--gp-h, 0)); } }
@media (max-width: 767px)  { .gp-spacer { height: var(--gp-hm, var(--gp-ht, var(--gp-h, 0))); } }

/* --- выравнивание --- */
.gp-align-left   { text-align: left; }
.gp-align-center { text-align: center; }
.gp-align-right  { text-align: right; }

/* --- заголовок --- */
.gp-heading .gp-heading-main { margin: 0; }
.gp-heading .gp-heading-sub  { margin-top: 10px; }
.gp-heading .gp-heading-sep  { width: 40px; height: 2px; background: currentColor; opacity: .35; margin: 14px 0; display: inline-block; }
.gp-align-center .gp-heading-sep { margin-left: auto; margin-right: auto; display: block; }
.gp-align-right  .gp-heading-sep { margin-left: auto; }

/* --- инфобокс --- */
.gp-info-box { }
.gp-info-box .gp-info-icon  { margin-bottom: 14px; }
.gp-info-box .gp-info-title { font-weight: 400; line-height: 1.6; }
.gp-info-box .gp-info-desc  { margin-top: 10px; }
.gp-info-pos-left  { display: flex; align-items: flex-start; gap: 16px; }
.gp-info-pos-left .gp-info-icon { margin-bottom: 0; flex: 0 0 auto; }

/* --- кнопка --- */
.gp-btn-wrap { display: block; }
.gp-btn {
	display: inline-block;
	padding: 12px 32px;
	line-height: 1.4;
	text-decoration: none;
	border: 0 solid transparent;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.gp-btn:hover,
.gp-btn:focus {
	color: var(--gp-btn-color-h, inherit);
	background: var(--gp-btn-bg-h, transparent);
	border-color: var(--gp-btn-bd-h, transparent);
}

/* --- карусель --- */
.gp-carousel { position: relative; overflow: hidden; }
.gp-carousel-track { display: flex; transition: transform .45s ease; will-change: transform; }
.gp-carousel-track > * { flex: 0 0 100%; min-width: 0; }
.gp-carousel-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: none; border: 0; cursor: pointer; padding: 8px;
	font-size: 24px; line-height: 1; color: inherit; opacity: .6; z-index: 2;
}
.gp-carousel-nav:hover { opacity: 1; }
.gp-carousel-nav.gp-prev { left: 0; }
.gp-carousel-nav.gp-next { right: 0; }
.gp-carousel-counter { text-align: center; margin-top: 12px; opacity: .7; }
.gp-carousel.gp-single .gp-carousel-nav,
.gp-carousel.gp-single .gp-carousel-counter { display: none; }

/* --- анимации появления ---
   В оригинале это делал Velocity.js из состава Ultimate Addons.
   Его в теме 3.5.73 нет, поэтому CSS + IntersectionObserver. */
.gp-anim { opacity: 0; transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.gp-anim-left  { transform: translateX(-40px); }
.gp-anim-right { transform: translateX(40px); }
.gp-anim-down  { transform: translateY(-30px); }
.gp-anim-up    { transform: translateY(30px); }
.gp-anim-fade  { transform: none; }
.gp-anim.gp-in { opacity: 1; transform: none; }

/* Без JS ничего не должно пропасть. */
.no-js .gp-anim { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.gp-anim { opacity: 1; transform: none; transition: none; }
	.gp-carousel-track { transition: none; }
}