/*
 * Front end only — this class only ever gains Swiper's own structural
 * look once container-carousel.js has actually restructured the DOM
 * (never in the editor, see that file). No editor-specific overrides
 * needed here since the editor never applies this class's swiper markup
 * at all — the container just renders its children completely normally.
 *
 * `overflow:hidden` lives on `el` itself (required for horizontal
 * slide-clipping, can't be removed) — REVERTED HERE 2026-09-08 after a
 * same-day attempt to move it onto `.swiper-wrapper` instead (so a
 * negative "Distance From Edge" arrow offset could genuinely render
 * outside the box) turned out to be a WORSE, live-breaking regression,
 * confirmed via a real headless-Chrome session against ketsat.axia.vn
 * mid-transition: Swiper's own base CSS applies the sliding
 * `transform:translate3d(...)` directly onto `.swiper-wrapper` itself
 * (confirmed by grepping the vendored swiper-bundle.min.css) — the exact
 * same element the attempted fix had just put `overflow:hidden` on. When
 * a clip boundary and a transform live on the SAME element, the clip
 * region moves RIGIDLY together with the transformed content instead of
 * staying fixed at a stationary viewport — so during every single slide
 * transition, the "window" through which slides are visible slid across
 * the screen along with the content instead of staying anchored to `el`'s
 * own edges, visibly showing slides bleeding past where the carousel box
 * actually ends (reported live: a card sliver poking out past the left
 * arrow, a large blank area past the right edge) — worse than the
 * original clipped-arrow cosmetic issue this was meant to fix, since it
 * broke on every transition rather than only when "Distance From Edge"
 * was pushed negative. Confirmed correct again at rest (transform:none)
 * in isolated testing, which is exactly why the original fix's own
 * verification — checking only the resting state — missed this.
 *
 * A negative "Distance From Edge" arrow offset in Sides mode is therefore
 * an ACCEPTED, DOCUMENTED LIMITATION again: the arrow gets clipped by
 * `el`'s own required overflow:hidden, same as before this session. The
 * only way to truly let it escape without breaking transition-clipping
 * would be portaling the two arrow buttons OUT of `el`'s subtree entirely
 * (Swiper hard-requires `.swiper-wrapper` to stay a DIRECT child of `el`,
 * so nothing between them can host an independent, non-transformed clip
 * boundary) — a much larger rewrite (of the extensive existing Vertical/
 * Horizontal Alignment, Fine-Tune offset, and Bottom Bar positioning CSS,
 * all of which is written assuming the arrows stay inside `el`) than is
 * justified for a cosmetic positioning preference; not attempted here.
 */
.xtool-container-carousel.swiper {
	overflow: hidden;
}

/* Swiper's own base CSS ships an unconditional `.swiper{padding:0}` reset —
   the instant container-carousel.js adds the `swiper` class onto the
   ORIGINAL Elementor Container (never a new element, see that file), this
   silently zeroes out whatever Padding the user configured on that same
   Container, since both rules target the exact same element. Invisible
   while editing specifically because the editor never adds this class at
   all (see container-carousel.js's own isEditMode() early return) — the
   container renders as a fully plain, unmodified Container there, Padding
   included, which is exactly why "looks correct in the editor, flush on
   the real front end" was the reported symptom. Re-asserted here at
   higher specificity (2 classes vs. Swiper's 1) using the SAME CSS custom
   properties Elementor's own container CSS already computes the real
   padding value into (--padding-top/-right/-bottom/-left) — not a
   hardcoded value, so this stays correct for whatever the user actually
   configured, and falls back to 0 (matching "no padding set") when a
   variable isn't present at all. */
.xtool-container-carousel.swiper {
	padding-top: var(--padding-top, 0);
	padding-right: var(--padding-right, 0);
	padding-bottom: var(--padding-bottom, 0);
	padding-left: var(--padding-left, 0);
}

/* Editor-only static arrow preview (container-carousel.js) — the
   container's real children are never touched here, only the two arrow
   buttons get appended as extra siblings, so this just needs to give them
   something to position:absolute against (matching what the real .swiper
   class provides on the front end via Swiper's own base CSS). Deliberately
   NOT overflow:hidden here (unlike .swiper above) — the container's
   children should keep rendering exactly as Elementor's own native
   drag-and-drop canvas already shows them, only the arrows overlay on top. */
.xtool-cc-editor-preview {
	position: relative;
}

/* Editor-only "Slide N" badges + a click-to-scroll mini nav strip
   (container-carousel.js) — same fix already shipped for Container Tabs,
   added here for the identical reason: with every real slide child left
   in plain stacked flow while editing, there's otherwise no way to tell
   which stacked block corresponds to which slide, or jump straight to
   one. Both are new SIBLING elements the JS positions against the slide
   host, never inserted into a real child's own contents. */
.xtool-cc-editor-badge {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	background: #1C1C1E;
	color: #fff;
	font: 600 11px/1.4 -apple-system, sans-serif;
	padding: 2px 8px;
	border-radius: 0 0 6px 0;
}

.xtool-cc-editor-slides-nav {
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
}

.xtool-cc-editor-slides-nav__btn {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid #D4CEC7;
	background: #fff;
	color: #1A1814;
	font: 600 12px/1 -apple-system, sans-serif;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.xtool-cc-editor-slides-nav__btn:hover {
	background: #F2EDE7;
}

.xtool-cc-editor-flash {
	outline: 2px solid #1C1C1E;
	outline-offset: 4px;
	transition: outline-color 0.4s ease;
}

.xtool-container-carousel .swiper-wrapper {
	align-items: stretch;
}

.xtool-container-carousel .swiper-slide {
	height: auto;
}

.xtool-container-carousel--equal-height .swiper-slide {
	height: 100%;
}

.xtool-container-carousel .swiper-button-next,
.xtool-container-carousel .swiper-button-prev {
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	/* Fine-tune nudge (Horizontal/Vertical Offset controls) — safe to apply
	   as a plain transform here since Swiper's own default "Sides"
	   positioning never uses transform itself (just top/left/right/
	   margin-top), so this can't collide with it. "Bottom Center" mode
	   below needs its OWN transform for horizontal centering, so it folds
	   these same --xtool-cc-nudge-x/-y variables into that transform
	   instead of relying on this base rule (see xtool_cc_arrows_gap's
	   selectors in class-module.php). */
	transform: translate(var(--xtool-cc-nudge-x, 0px), var(--xtool-cc-nudge-y, 0px));
}

/* A custom Icon (from the Previous/Next Icon controls) is injected as real
   markup (an <i> icon-font tag or an <svg>) rather than left to Swiper's
   own ::after pseudo-icon — see container-carousel.js. Both need to scale
   with the same "Icon Size" control (which sets font-size on the button
   itself): an <i> font-icon does this automatically via font-size
   inheritance, but an <svg> icon needs explicit em-based sizing since SVG
   dimensions don't inherit font-size on their own. */
.xtool-container-carousel .swiper-button-next svg,
.xtool-container-carousel .swiper-button-prev svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* The Previous/Next Icon controls render a real icon element inside the
   button (see the comment above) — Swiper's own default ::after chevron
   must be explicitly disabled here, otherwise both the real icon and
   Swiper's built-in one render on top of each other (confirmed live —
   this is the same fix already applied to the plain Carousel widget's own
   CSS, missed here originally since this is a separate stylesheet). */
.xtool-container-carousel .swiper-button-next:after,
.xtool-container-carousel .swiper-button-prev:after {
	content: none;
}

/* Vertical Alignment (Sides mode only) - ported from Loop Grid Carousel's
   identical feature. Top/Bottom sit just inside the slides' own top/bottom
   edge (a small fixed 10px inset, further adjustable via the always-
   available Fine-Tune Offset); "Middle" (the default, no modifier class)
   is left completely untouched, i.e. Swiper's own stock top:50%/
   margin-top:-half-height centering. */
.xtool-cc-arrows--valign-top .swiper-button-next,
.xtool-cc-arrows--valign-top .swiper-button-prev {
	top: 10px;
	margin-top: 0;
}

.xtool-cc-arrows--valign-bottom .swiper-button-next,
.xtool-cc-arrows--valign-bottom .swiper-button-prev {
	top: auto;
	bottom: 10px;
	margin-top: 0;
}

/* "Bottom Center" arrow position — switches both buttons off Swiper's own
   default vertically-centered/edge-anchored positioning (top:50%,
   left/right via --swiper-navigation-sides-offset) onto a row below the
   slider instead. The actual bottom distance comes from its own responsive
   control (xtool_cc_arrows_bottom_offset) via 'selectors' — this just
   flips the structural positioning mode itself.

   The carousel itself (.xtool-container-carousel.swiper) has
   overflow:hidden — required for horizontal slide-clipping during
   transitions, can't be removed. Without reserved space, any button
   positioned below the slides' own bottom edge sits outside that
   overflow:hidden box and gets clipped to invisible (confirmed live —
   this is exactly what "the arrows are outside the box so they're
   hidden" was). padding-bottom here carves out real, unclipped room
   inside the box for the arrows to sit in — bottom: 0 on an absolutely
   positioned child lands at the PADDING edge, not the slide content's own
   edge, so this space is always visible regardless of overflow:hidden.

   Computed from Distance From Bottom + Button Size (both written as
   custom properties by their own controls) rather than a fixed value —
   ported from the identical fix already shipped for Loop Grid Carousel
   after a fixed 80px reservation was reported live as leaving a large,
   visibly dead blank gap below the arrows whenever the actual chosen
   offset+size added up to noticeably less than 80px. The +10px is a small
   breathing-room buffer past the arrows' own visual edge, not tied to any
   control. */
.xtool-cc-arrows--bottom-center {
	padding-bottom: calc(var(--xtool-cc-arrows-bottom, 20px) + var(--xtool-cc-arrows-size, 40px) + 10px);
}

.xtool-cc-arrows--bottom-center .swiper-button-next,
.xtool-cc-arrows--bottom-center .swiper-button-prev {
	top: auto;
	margin-top: 0;
}

/* Horizontal Alignment within Bottom Center — ported from Loop Grid
   Carousel's identical feature. "Center" (default, no modifier class)
   anchors both buttons at the row's own horizontal midpoint (left:50%)
   and centers the pair around it via transform. "Left"/"Right" instead
   anchor the pair flush against that edge of the row (left:0 / right:0) -
   an edge anchor (0%, not a fixed px value) is what keeps this correctly
   positioned across every breakpoint on its own, unlike a pure px
   Fine-Tune offset which would need re-tuning per breakpoint as the
   carousel's own width changes. All 3 read the SAME --xtool-cc-arrows-gap
   custom property (written by the Gap Between Buttons control) and
   --xtool-cc-nudge-x/-y (Fine-Tune Offset) - the gap/nudge controls only
   ever write those custom properties, never a 'transform' directly, since
   two different Elementor controls both targeting 'transform' on the same
   selector would just have the later-registered one silently overwrite
   the earlier one instead of composing. */
.xtool-cc-arrows--bottom-center:not(.xtool-cc-arrows--halign-left):not(.xtool-cc-arrows--halign-right) .swiper-button-next,
.xtool-cc-arrows--bottom-center:not(.xtool-cc-arrows--halign-left):not(.xtool-cc-arrows--halign-right) .swiper-button-prev {
	left: 50%;
	right: auto;
}

.xtool-cc-arrows--bottom-center:not(.xtool-cc-arrows--halign-left):not(.xtool-cc-arrows--halign-right) .swiper-button-prev {
	transform: translateX(calc(-100% - var(--xtool-cc-arrows-gap, 12px) / 2 + var(--xtool-cc-nudge-x, 0px))) translateY(var(--xtool-cc-nudge-y, 0px));
}

.xtool-cc-arrows--bottom-center:not(.xtool-cc-arrows--halign-left):not(.xtool-cc-arrows--halign-right) .swiper-button-next {
	transform: translateX(calc(var(--xtool-cc-arrows-gap, 12px) / 2 + var(--xtool-cc-nudge-x, 0px))) translateY(var(--xtool-cc-nudge-y, 0px));
}

.xtool-cc-arrows--halign-left .swiper-button-next,
.xtool-cc-arrows--halign-left .swiper-button-prev {
	left: 0;
	right: auto;
}

.xtool-cc-arrows--halign-left .swiper-button-prev {
	transform: translateX(var(--xtool-cc-nudge-x, 0px)) translateY(var(--xtool-cc-nudge-y, 0px));
}

.xtool-cc-arrows--halign-left .swiper-button-next {
	transform: translateX(calc(100% + var(--xtool-cc-arrows-gap, 12px) + var(--xtool-cc-nudge-x, 0px))) translateY(var(--xtool-cc-nudge-y, 0px));
}

.xtool-cc-arrows--halign-right .swiper-button-next,
.xtool-cc-arrows--halign-right .swiper-button-prev {
	left: auto;
	right: 0;
}

.xtool-cc-arrows--halign-right .swiper-button-next {
	transform: translateX(var(--xtool-cc-nudge-x, 0px)) translateY(var(--xtool-cc-nudge-y, 0px));
}

.xtool-cc-arrows--halign-right .swiper-button-prev {
	transform: translateX(calc(-100% - var(--xtool-cc-arrows-gap, 12px) + var(--xtool-cc-nudge-x, 0px))) translateY(var(--xtool-cc-nudge-y, 0px));
}

/* "Bottom Bar" navigation layout — pagination + arrows together on one row
   below the slides, ported from Loop Grid Carousel's identical feature.
   Only the LAYOUT changes here - Swiper's own real pagination/navigation
   mechanisms are completely untouched, this just repositions where the
   same elements sit via plain flexbox instead of Swiper's own default
   absolute-positioned-on-the-sides arrow placement. No reserved padding
   needed here (unlike Bottom Center above) - the nav bar is a normal,
   in-flow sibling of .swiper-wrapper, so the carousel's own height simply
   grows to include it, the same way Default layout's plain pagination row
   already does. */
.xtool-cc-nav--bottom-bar .xtool-cc-nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
}

.xtool-cc-nav-bar .swiper-pagination {
	position: relative;
	margin-top: 0;
	flex: 1 1 auto;
	text-align: left;
}

.xtool-cc-nav-arrows {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Swiper's own base CSS makes .swiper-button-next/-prev position:absolute
   (anchored to the slider's own left/right edges) by default - overridden
   back to a plain, normal-flow flex item here so the two buttons sit
   inline inside .xtool-cc-nav-arrows instead. transform is also reset,
   since Fine-Tune Position is hidden/inapplicable in this layout but a
   value set before switching TO Bottom Bar could otherwise still visually
   nudge these buttons via the base rule's own unconditional transform. */
.xtool-cc-nav-bar .swiper-button-prev,
.xtool-cc-nav-bar .swiper-button-next {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	margin: 0;
	transform: none;
}

/* Progress Bar pagination type is ALSO position:absolute by Swiper's own
   default (sized/pinned via its own `.swiper-pagination-progressbar` +
   `.swiper-pagination-horizontal` classes, which Swiper adds directly to
   the .swiper-pagination element regardless of DOM nesting depth) -
   overridden back to a normal, in-flow flex item so it sits correctly
   inside .xtool-cc-nav-bar's own row instead of pinning itself to
   whatever positioned ancestor happens to be further up the page. Width/
   height themselves come from the Progress Bar Width/Thickness controls
   (higher-specificity selectors, always win regardless of layout mode). */
.xtool-cc-nav-bar .swiper-pagination.swiper-pagination-progressbar {
	position: relative;
	left: auto;
	top: auto;
}

.xtool-container-carousel .swiper-pagination {
	position: relative;
}

.xtool-container-carousel .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: #d4cec7;
	opacity: 1;
}

.xtool-container-carousel .swiper-pagination-bullet-active {
	background: #1c1c1e;
}

.xtool-container-carousel .swiper-pagination-fraction {
	color: #1a1814;
	font-size: 14px;
}

.xtool-container-carousel .swiper-pagination-progressbar {
	background: rgba(0, 0, 0, 0.1);
	height: 4px;
}

.xtool-container-carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: #1c1c1e;
}