/**
 * Trimax Slider — Frontend Styles
 *
 * SCOPING RULE FOR THIS PLUGIN — please keep to it:
 *
 *  1. Selectors target ONLY the slider's own chrome (.txs-slider, .txs-viewport,
 *     .txs-track, .txs-slide, .txs-arrow, .txs-dots, .txs-dots-list, .txs-dot).
 *  2. No descendant wildcards (no `.txs-slider *`) and no !important on anything
 *     inside .txs-slide. Each slide renders arbitrary Elementor content, and
 *     this plugin must not fight the template's own styles or override
 *     Elementor's box model for widgets it knows nothing about.
 *  3. !important IS used on .txs-arrow and .txs-dot. Those are the plugin's own
 *     <button> elements and need defending from theme button styles.
 *  4. Every themable value goes through a CSS custom property set by Elementor
 *     on the widget wrapper, so a style control can never lose to the resets in
 *     (3). Do NOT declare these variables on .txs-slider itself — a local
 *     declaration would shadow the inherited one.
 *  5. No hardcoded breakpoints. Responsive behaviour comes from Elementor
 *     responsive controls, which emit the site's configured breakpoints.
 *
 * @package TXS
 */

/* ==========================================================================
   1. Shell
   ========================================================================== */

.txs-slider {
	position: relative;
	width:    100%;
}

.txs-viewport {
	width:    100%;
	overflow: hidden;
}

.txs-track {
	display:     flex;
	flex-wrap:   nowrap;
	align-items: flex-start;
	will-change: transform;
}

/* height:auto lets each slide size to its own template's content instead of
   being stretched. The equal-height option swaps this via .txs-equal-height. */
.txs-slide {
	width:       100%;
	flex-shrink: 0;
	height:      auto;
}

.txs-slider.txs-equal-height .txs-track {
	align-items: stretch;
}

.txs-slider.txs-equal-height .txs-slide {
	height: auto;
}

/* ==========================================================================
   2. Navigation arrows

   Two pairs are rendered. .txs-arrow--side sits either side of the slide and
   is the desktop/tablet layout (sections 2 and 2.1). .txs-arrow--inline sits
   either side of the pagination dots and is the mobile layout (section 2.2).
   Which pair is displayed is decided by the widget's Navigation Arrows
   control, which emits the media query from the site's own breakpoints — this
   file never picks a pair itself (rule 5). It only hides the inline pair as a
   fallback for when no Elementor CSS is present.
   ========================================================================== */

.txs-slider .txs-arrow {
	position:         absolute !important;
	top:              50% !important;
	transform:        translateY(-50%) !important;
	z-index:          10 !important;
	display:          flex !important;
	align-items:      center !important;
	justify-content:  center !important;
	width:            var(--txs-arrow-size, 40px) !important;
	height:           var(--txs-arrow-size, 40px) !important;
	min-width:        0 !important;
	min-height:       0 !important;
	padding:          0 !important;
	margin:           0 !important;
	border:           none !important;
	border-radius:    var(--txs-arrow-radius, 50%) !important;
	background-color: var(--txs-arrow-bg, rgba(255, 255, 255, 0.95)) !important;
	background-image: none !important;
	color:            var(--txs-arrow-color, #333333) !important;
	cursor:           pointer !important;
	outline:          none !important;
	float:            none !important;
	line-height:      1 !important;
	text-decoration:  none !important;
	/* No !important — lets the Elementor box-shadow group control apply. */
	box-shadow:       none;
	transition:       background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.txs-slider .txs-arrow--prev { left:  var(--txs-arrow-offset, 12px) !important; }
.txs-slider .txs-arrow--next { right: var(--txs-arrow-offset, 12px) !important; }

.txs-slider .txs-arrow:hover {
	background-color: var(--txs-arrow-hover-bg, var(--txs-arrow-bg, rgba(255, 255, 255, 0.95))) !important;
	color:            var(--txs-arrow-hover-color, var(--txs-arrow-color, #333333)) !important;
}

.txs-slider .txs-arrow:focus-visible {
	outline:        2px solid currentColor !important;
	outline-offset: 2px !important;
}

.txs-slider .txs-arrow.is-disabled {
	opacity:        0.35 !important;
	cursor:         default !important;
	pointer-events: none !important;
}

/* CSS chevrons — no icon font or SVG dependency. */
.txs-slider .txs-arrow::before {
	content:       '' !important;
	display:       block !important;
	width:         0.25em !important;
	height:        0.25em !important;
	font-size:     var(--txs-arrow-size, 40px) !important;
	border-top:    2px solid currentColor !important;
	border-right:  2px solid currentColor !important;
	border-bottom: none !important;
	border-left:   none !important;
	background:    none !important;
}

.txs-slider .txs-arrow--prev::before {
	transform: rotate(-135deg) translate(1px, -1px) !important;
}

.txs-slider .txs-arrow--next::before {
	transform: rotate(45deg) translate(-1px, 1px) !important;
}

/* --------------------------------------------------------------------------
   2.1 Outside position

   Elementor's prefix_class puts .txs-arrows-outside on the widget wrapper when
   the Position control is set to Outside.

   The slider then becomes a flex row — [prev][viewport][next], with the dots
   wrapping onto their own line — instead of the arrows staying absolute over a
   gutter reserved with padding. Laying it out this way means an arrow that the
   responsive Show/Hide control sets to display:none stops being a flex item and
   collapses its own space, rather than leaving a hole where a button used to be.
   It also keeps the container Padding control free, which a gutter built from
   padding would have fought over.

   --txs-arrow-offset becomes the gap between an arrow and the slide here, which
   is the same "distance from the content edge" it means in the inside layout.
   -------------------------------------------------------------------------- */

.txs-arrows-outside .txs-slider {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	/* Row gap stays 0 — the dots keep their own --txs-dots-spacing margin. */
	gap:         0 var(--txs-arrow-offset, 12px);
}

.txs-arrows-outside .txs-viewport {
	order: 2;
	/* The 0 basis is load-bearing, not a shorthand tidy-up. Section 1 gives the
	   viewport width:100%, so a basis of auto resolves to the full container
	   width — and because a wrapping flex container assigns items to lines from
	   their hypothetical size BEFORE shrinking any of them, each arrow would be
	   pushed onto a line of its own. A 0 basis lets the arrows share line one,
	   then flex-grow claims what is left. */
	flex:  1 1 0%;
	/* A flex item's min-width defaults to auto, which lets a wide slide push
	   the viewport past its parent instead of the track scrolling inside it. */
	min-width: 0;
}

.txs-arrows-outside .txs-dots {
	order: 4;
	flex:  0 0 100%;
}

/* Specificity beats the absolute positioning in section 2, which is itself
   !important to hold off theme button styles. Scoped to the side pair: the
   inline pair lives inside .txs-dots and must not pick up these orders. */
.txs-arrows-outside .txs-slider .txs-arrow--side {
	position:  static !important;
	top:       auto !important;
	left:      auto !important;
	right:     auto !important;
	transform: none !important;
	flex:      0 0 auto !important;
}

.txs-arrows-outside .txs-slider .txs-arrow--prev.txs-arrow--side { order: 1 !important; }
.txs-arrows-outside .txs-slider .txs-arrow--next.txs-arrow--side { order: 3 !important; }

/* --------------------------------------------------------------------------
   2.2 Inline position (mobile)

   The inline pair sits in the .txs-dots row — [prev][dots list][next] — and
   takes every themable value from the same variables as the side pair, so the
   Navigation Arrows style controls (which are responsive) skin both. The size
   and offset controls have mobile values, which is where a smaller chevron for
   this layout belongs. --txs-arrow-offset is the gap to the dots here.

   Hidden by default as a fallback only. The widget's Navigation Arrows control
   always emits a higher-specificity rule for this pair, so on a live site the
   control decides, not this declaration. Kept at two classes so the control's
   {{WRAPPER}} selector (three classes) always wins.
   -------------------------------------------------------------------------- */

.txs-slider .txs-arrow--inline {
	display:   none !important;
	position:  static !important;
	top:       auto !important;
	left:      auto !important;
	right:     auto !important;
	transform: none !important;
	flex:      0 0 auto !important;
}

.txs-slider .txs-arrow--prev.txs-arrow--inline { margin-right: var(--txs-arrow-offset, 12px) !important; }
.txs-slider .txs-arrow--next.txs-arrow--inline { margin-left:  var(--txs-arrow-offset, 12px) !important; }

/* ==========================================================================
   3. Pagination dots

   .txs-dots is the row: [inline prev][.txs-dots-list][inline next].
   .txs-dots-list is the tablist holding the dots themselves; the Pagination
   Dots Show/Hide control targets the list, so hiding the dots on mobile leaves
   the inline arrows in place.

   The spacing above the row is carried by the row's children rather than the
   row. When everything in the row is display:none the row then has no height,
   instead of leaving a --txs-dots-spacing gap under the slide.
   ========================================================================== */

.txs-slider .txs-dots {
	display:         flex;
	justify-content: center;
	align-items:     center;
}

.txs-slider .txs-dots-list {
	display:         flex;
	justify-content: center;
	align-items:     center;
	gap:             var(--txs-dot-gap, 8px);
	margin-top:      var(--txs-dots-spacing, 12px);
}

.txs-slider .txs-arrow--inline {
	margin-top: var(--txs-dots-spacing, 12px) !important;
}

.txs-slider .txs-dot {
	display:          block !important;
	width:            var(--txs-dot-size, 8px) !important;
	height:           var(--txs-dot-size, 8px) !important;
	min-width:        0 !important;
	min-height:       0 !important;
	padding:          0 !important;
	margin:           0 !important;
	border:           none !important;
	border-radius:    50px !important;
	background-color: var(--txs-dot-bg, rgba(0, 0, 0, 0.2)) !important;
	background-image: none !important;
	cursor:           pointer !important;
	outline:          none !important;
	box-shadow:       none !important;
	transition:       background-color 0.3s ease, width 0.3s ease !important;
}

.txs-slider .txs-dot.is-active {
	width:            var(--txs-dot-active-width, 24px) !important;
	background-color: var(--txs-dot-active-bg, #d32f2f) !important;
}

.txs-slider .txs-dot:focus-visible {
	outline:        2px solid var(--txs-dot-active-bg, #d32f2f) !important;
	outline-offset: 2px !important;
}

/* ==========================================================================
   4. Editor placeholder (also styled in txs-editor.css for the panel)
   ========================================================================== */

.txs-placeholder {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	min-height:       120px;
	padding:          24px;
	background-color: #f0f2f5;
	border:           2px dashed #c0c8d4;
	border-radius:    6px;
	color:            #8a9bb0;
	font-size:        0.85rem;
	text-align:       center;
}

/* ==========================================================================
   5. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.txs-slider .txs-track,
	.txs-slider .txs-arrow,
	.txs-slider .txs-dot {
		transition: none !important;
	}
}