/* Form widget */
.spb-form { display: flex; flex-direction: column; gap: 14px; max-width: 100%; }
.spb-form-fields { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 10px; }
.spb-form-field { display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; flex-basis: 100%; max-width: 100%; }
.spb-form-field label { font-size: 14px; font-weight: 600; }
.spb-form-field .spb-required { color: #b3261e; }
.spb-form-field input,
.spb-form-field textarea,
.spb-form-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #d5d8dc;
	border-radius: 4px;
	font: inherit;
	background: #fff;
}
.spb-form-field textarea { min-height: 120px; resize: vertical; }
.spb-form-field .spb-checkbox-label { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.spb-form-field .spb-checkbox-label input[type="checkbox"] { width: auto; }

/* Input Size presets - applied via a class on the <form> so it cascades to every field. */
.spb-form-size-xs .spb-form-field input,
.spb-form-size-xs .spb-form-field textarea,
.spb-form-size-xs .spb-form-field select { padding: 6px 8px; font-size: 13px; }
.spb-form-size-sm .spb-form-field input,
.spb-form-size-sm .spb-form-field textarea,
.spb-form-size-sm .spb-form-field select { padding: 8px 10px; font-size: 14px; }
.spb-form-size-md .spb-form-field input,
.spb-form-size-md .spb-form-field textarea,
.spb-form-size-md .spb-form-field select { padding: 12px 14px; font-size: 15px; }
.spb-form-size-lg .spb-form-field input,
.spb-form-size-lg .spb-form-field textarea,
.spb-form-size-lg .spb-form-field select { padding: 16px 18px; font-size: 16px; }
.spb-form-size-xl .spb-form-field input,
.spb-form-size-xl .spb-form-field textarea,
.spb-form-size-xl .spb-form-field select { padding: 20px 22px; font-size: 17px; }

.spb-form-buttons { display: flex; }
.spb-form button[type="submit"] {
	padding: 12px 24px;
	border: none;
	border-radius: 4px;
	background: #1a1a1a;
	color: #fff;
	cursor: pointer;
	font: inherit;
	width: 100%;
}
.spb-form button.spb-btn-size-xs[type="submit"] { padding: 6px 14px; font-size: 13px; }
.spb-form button.spb-btn-size-sm[type="submit"] { padding: 10px 20px; font-size: 14px; }
.spb-form button.spb-btn-size-md[type="submit"] { padding: 12px 24px; font-size: 15px; }
.spb-form button.spb-btn-size-lg[type="submit"] { padding: 16px 30px; font-size: 16px; }
.spb-form button.spb-btn-size-xl[type="submit"] { padding: 20px 36px; font-size: 17px; }
.spb-form button[type="submit"][disabled] { opacity: .6; cursor: default; }
.spb-form-message { font-size: 14px; }
.spb-form-message.spb-success { color: #16794f; }
.spb-form-message.spb-error { color: #b3261e; }

@media (max-width: 767px) {
	.spb-form-field { flex-basis: 100% !important; max-width: 100% !important; }
}

/* Loop Grid */
.spb-loop-grid {
	display: grid;
	grid-template-columns: repeat(var(--spb-columns, 3), 1fr);
	column-gap: var(--spb-gap-columns, 20px);
	row-gap: var(--spb-gap-rows, 20px);
}
@media (max-width: 767px) {
	.spb-loop-grid { grid-template-columns: repeat(1, 1fr); }
}

/* Equal Height: stretch every card to the tallest in its row (grid default
   is already align-items:stretch, but the card's own content needs to fill
   the item wrapper too). */
.spb-loop-grid.spb-equal-height .spb-loop-grid-item { height: 100%; display: flex; }
.spb-loop-grid.spb-equal-height .spb-loop-grid-item > * { flex: 1 1 auto; width: 100%; }

/* Masonry: switches from CSS Grid to a multi-column layout, since true
   variable-height masonry isn't possible with CSS Grid alone. */
.spb-loop-grid.spb-masonry {
	display: block;
	columns: var(--spb-columns, 3);
	column-gap: var(--spb-gap-columns, 20px);
}
.spb-loop-grid.spb-masonry .spb-loop-grid-item {
	break-inside: avoid;
	margin-bottom: var(--spb-gap-rows, 20px);
}
@media (max-width: 767px) {
	.spb-loop-grid.spb-masonry { columns: 1; }
}

.spb-loop-pagination { margin-top: 24px; display: flex; gap: 8px; justify-content: center; }
.spb-loop-pagination .page-numbers {
	padding: 6px 12px;
	border: 1px solid #d5d8dc;
	border-radius: 4px;
	text-decoration: none;
}
.spb-loop-empty { opacity: .7; }
.spb-fallback-loop-item { border: 1px solid #eceff1; border-radius: 6px; padding: 16px; }

/* Loop Grid: Load More / Infinite Scroll */
.spb-loop-more { margin-top: 24px; text-align: center; }
.spb-loop-more-btn {
	padding: 10px 28px;
	border: none;
	border-radius: 4px;
	background: #1a1a1a;
	color: #fff;
	cursor: pointer;
	font: inherit;
}
.spb-loop-more-btn[disabled] { opacity: .6; cursor: default; }
.spb-loop-sentinel { height: 1px; }

/* Carousel (shared by Loop Carousel + Carousel widgets) */
.spb-carousel {
	position: relative;
	--spb-prev-h-offset: 0px;
	--spb-prev-v-offset: 0px;
	--spb-next-h-offset: 0px;
	--spb-next-v-offset: 0px;
}
.spb-carousel.spb-nav-inside { overflow: hidden; }
.spb-carousel.spb-nav-outside { overflow: visible; padding-left: 44px; padding-right: 44px; }
.spb-carousel.spb-offset-one .spb-carousel-track { padding-right: 12%; }
.spb-carousel.spb-offset-both .spb-carousel-track { padding-left: 6%; padding-right: 6%; }

.spb-carousel-track {
	display: flex;
	gap: var(--spb-gap, 16px);
	transition: transform var(--spb-transition-duration, .35s) ease;
	will-change: transform;
}
/* Target every direct child of the track with the universal selector (`> *`),
   not a specific class name. The earlier fix assumed Elementor always marks
   slide containers with `.elementor-element`, but something in Elementor's
   own generated CSS for the child container (its own per-element ID
   selector, which is more specific than a shared class selector) can still
   out-rank a plain class rule and win the cascade - which is exactly what
   caused "Slides on display: 3" to still render every slide at full/equal
   width instead of 3-per-view, on both the editor canvas and the published
   page. Matching on structure instead of a class removes the guesswork
   about what class Elementor happens to add, and `!important` guarantees
   this always wins regardless of what other, more specific rule targets the
   same element. */
.spb-carousel-track > * {
	flex: 0 0 calc((100% - (var(--spb-slides, 3) - 1) * var(--spb-gap, 16px)) / var(--spb-slides, 3)) !important;
	max-width: calc((100% - (var(--spb-slides, 3) - 1) * var(--spb-gap, 16px)) / var(--spb-slides, 3)) !important;
	min-width: 0 !important;
}
.spb-content-slide { text-align: center; }
.spb-content-slide img { width: 100%; height: auto; border-radius: 6px; }

/* Equal Height: stretch every slide to match the tallest in the row.
   Flex containers already stretch children by default, but a slide's own
   inner content (an Elementor container, or the loop-item markup) needs to
   be told to fill that stretched box too. */
.spb-carousel.spb-equal-height .spb-carousel-track { align-items: stretch; }
.spb-carousel.spb-equal-height .spb-carousel-track > * {
	display: flex !important;
	height: auto;
}
.spb-carousel.spb-equal-height .spb-carousel-track > * > * {
	flex: 1 1 auto;
	width: 100%;
}
.spb-carousel-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 18px;
	border-radius: 4px;
	background: #1a1a1a;
	color: #fff;
	text-decoration: none;
}

/* Arrows: default appearance (Style controls override via inline CSS vars/selectors) */
.spb-carousel-prev,
.spb-carousel-next {
	position: absolute;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,.65);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 2;
}
.spb-carousel-prev:hover,
.spb-carousel-next:hover { background: rgba(0,0,0,.85); }
.spb-carousel-prev.spb-disabled,
.spb-carousel-next.spb-disabled { opacity: .35; cursor: default; pointer-events: none; }
.spb-carousel-prev svg,
.spb-carousel-next svg { width: 1em; height: 1em; fill: currentColor; }

/* Horizontal orientation */
.spb-carousel-prev.spb-nav-h-start   { left: calc(8px + var(--spb-prev-h-offset, 0px)); }
.spb-carousel-prev.spb-nav-h-center  { left: calc(50% + var(--spb-prev-h-offset, 0px)); }
.spb-carousel-prev.spb-nav-h-end     { right: calc(8px - var(--spb-prev-h-offset, 0px)); }
.spb-carousel-next.spb-nav-h-start   { left: calc(8px + var(--spb-next-h-offset, 0px)); }
.spb-carousel-next.spb-nav-h-center  { left: calc(50% + var(--spb-next-h-offset, 0px)); }
.spb-carousel-next.spb-nav-h-end     { right: calc(8px - var(--spb-next-h-offset, 0px)); }

/* Vertical orientation */
.spb-carousel-prev.spb-nav-v-top,
.spb-carousel-next.spb-nav-v-top     { top: 8px; transform: none; }
.spb-carousel-prev.spb-nav-v-middle,
.spb-carousel-next.spb-nav-v-middle  { top: 50%; transform: translateY(-50%); }
.spb-carousel-prev.spb-nav-v-bottom,
.spb-carousel-next.spb-nav-v-bottom  { bottom: 8px; top: auto; transform: none; }
.spb-carousel-prev.spb-nav-v-top    { margin-top: var(--spb-prev-v-offset, 0px); }
.spb-carousel-prev.spb-nav-v-middle { margin-top: var(--spb-prev-v-offset, 0px); }
.spb-carousel-prev.spb-nav-v-bottom { margin-bottom: calc(-1 * var(--spb-prev-v-offset, 0px)); }
.spb-carousel-next.spb-nav-v-top    { margin-top: var(--spb-next-v-offset, 0px); }
.spb-carousel-next.spb-nav-v-middle { margin-top: var(--spb-next-v-offset, 0px); }
.spb-carousel-next.spb-nav-v-bottom { margin-bottom: calc(-1 * var(--spb-next-v-offset, 0px)); }

.spb-carousel.spb-nav-outside .spb-carousel-prev.spb-nav-h-start { left: 0; }
.spb-carousel.spb-nav-outside .spb-carousel-next.spb-nav-h-end { right: 0; }

/* Pagination dots */
.spb-carousel-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}
.spb-carousel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(0,0,0,.25);
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease;
}
.spb-carousel-dot.spb-active { background: rgba(0,0,0,.75); transform: scale(1.2); }

/* Custom-positioned dots overlay the carousel instead of sitting below it */
.spb-carousel.spb-dots-custom { overflow: visible; }
.spb-carousel.spb-dots-custom .spb-carousel-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	margin-top: 0;
	z-index: 2;
}

/* Nav Menu */
.spb-nav-menu { position: relative; --spb-nav-pointer-width: 0px; }
.spb-nav-menu-list > ul { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.spb-nav-vertical .spb-nav-menu-list > ul { flex-direction: column; }
.spb-nav-menu a { text-decoration: none; color: #1a1a1a; }
.spb-nav-menu-list > ul > li { position: relative; display: flex; align-items: center; }
.spb-nav-menu-list > ul > li > a { display: inline-flex; align-items: center; gap: 6px; position: relative; }

/* Submenu indicator arrow (shown unless "None" is selected). */
.spb-nav-indicator-default .spb-nav-menu-list > ul > li.menu-item-has-children > a::after {
	content: '';
	width: 6px; height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
}
.spb-nav-indicator-none .spb-nav-menu-list > ul > li.menu-item-has-children > a::after { display: none; }

/* Pointer effects on hover / current item */
.spb-nav-pointer-underline .spb-nav-menu-list > ul > li > a::before,
.spb-nav-pointer-overline .spb-nav-menu-list > ul > li > a::before,
.spb-nav-pointer-double-line .spb-nav-menu-list > ul > li > a::before {
	content: '';
	position: absolute;
	left: 0;
	width: 0;
	height: var(--spb-nav-pointer-width, 2px);
	background: currentColor;
	transition: width .3s ease;
}
.spb-nav-pointer-underline .spb-nav-menu-list > ul > li > a::before { bottom: -4px; }
.spb-nav-pointer-overline .spb-nav-menu-list > ul > li > a::before { top: -4px; }
.spb-nav-pointer-double-line .spb-nav-menu-list > ul > li > a::before { top: -4px; box-shadow: 0 calc(100% + 8px) 0 0 currentColor; }
.spb-nav-pointer-underline .spb-nav-menu-list > ul > li:hover > a::before,
.spb-nav-pointer-underline .spb-nav-menu-list > ul > li.current-menu-item > a::before,
.spb-nav-pointer-overline .spb-nav-menu-list > ul > li:hover > a::before,
.spb-nav-pointer-overline .spb-nav-menu-list > ul > li.current-menu-item > a::before,
.spb-nav-pointer-double-line .spb-nav-menu-list > ul > li:hover > a::before,
.spb-nav-pointer-double-line .spb-nav-menu-list > ul > li.current-menu-item > a::before { width: 100%; }
.spb-nav-pointer-framed .spb-nav-menu-list > ul > li > a { border: 1px solid transparent; border-radius: 4px; transition: border-color .3s ease; }
.spb-nav-pointer-framed .spb-nav-menu-list > ul > li:hover > a,
.spb-nav-pointer-framed .spb-nav-menu-list > ul > li.current-menu-item > a { border-color: currentColor; }
.spb-nav-pointer-text .spb-nav-menu-list > ul > li > a { transition: opacity .3s ease; }
.spb-nav-pointer-text .spb-nav-menu-list > ul > li:hover > a,
.spb-nav-pointer-text .spb-nav-menu-list > ul > li.current-menu-item > a { opacity: .6; }

/* Dropdown submenus (desktop: hover flyout) */
.spb-nav-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #fff;
	border: 1px solid #eceef0;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	z-index: 10;
	display: none;
	flex-direction: column;
}
.spb-nav-menu .sub-menu .sub-menu { top: 0; left: 100%; }
.spb-nav-menu .sub-menu a { display: block; padding: 8px 16px; }
.spb-nav-menu-list > ul > li.menu-item-has-children:hover > .sub-menu { display: flex; }
.spb-nav-menu li.menu-item-has-children:hover > .sub-menu .sub-menu { display: none; }
.spb-nav-menu li.menu-item-has-children:hover > .sub-menu > li.menu-item-has-children:hover > .sub-menu { display: flex; }

.spb-nav-anim-fade .sub-menu { transition: opacity .25s ease; }
.spb-nav-anim-grow .sub-menu { transform: scaleY(.9); transform-origin: top; transition: transform .2s ease; }
.spb-nav-menu-list > ul > li.menu-item-has-children:hover.spb-nav-anim-grow > .sub-menu,
.spb-nav-anim-grow .sub-menu { transform: none; }
.spb-nav-anim-slide .sub-menu { transition: transform .25s ease; }

/* Toggle button */
.spb-nav-toggle-row { display: none; width: 100%; }
.spb-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	box-sizing: border-box;
}
.spb-nav-toggle-hamburger { flex-direction: column; }
.spb-nav-toggle-hamburger span { width: 24px; height: 2px; background: currentColor; display: block; }
.spb-nav-toggle-dots .spb-nav-toggle-dots,
.spb-nav-toggle-plus .spb-nav-toggle-plus { font-size: 1.4em; line-height: 1; }

/* Mobile dropdown behaviour */
.spb-nav-mobile-full-yes .spb-nav-menu-list { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; }
.spb-nav-mobile-text-left .spb-nav-menu-list a { text-align: left; }
.spb-nav-mobile-text-center .spb-nav-menu-list a { text-align: center; justify-content: center; }
.spb-nav-mobile-text-right .spb-nav-menu-list a { text-align: right; justify-content: flex-end; }
.spb-nav-open .spb-nav-menu-list .sub-menu { position: static; display: none; box-shadow: none; border: none; padding-left: 16px; }
.spb-nav-open .spb-nav-menu-list li.spb-submenu-open > .sub-menu { display: flex; }

/* Site Logo widget */
.spb-site-logo { display: flex; }
.spb-site-logo a { display: inline-block; line-height: 0; }
.spb-site-logo-img { display: block; max-width: 100%; height: auto; }
.spb-site-logo-caption { display: block; width: 100%; margin-top: 10px; font-size: 0.9em; }