/**
 * Jedi-Robe responsive mobile service highlights.
 *
 * Reuses the original service-highlight markup above the Shoptimizer mobile
 * header. Tablet-width mobile layouts show two service messages at a time,
 * while phone layouts show one message at a time. The locale item remains
 * excluded because locale selection is already available in the mobile header.
 *
 * The galactic background and lower separator are owned by the static
 * Shoptimizer .top-bar layer so they remain visually fixed while the service
 * messages slide above them.
 *
 * @package    Jedi_Theme
 * @subpackage Components/Mobile_Highlights
 * @since      1.5.0
 */


/* ==========================================================================
   Legacy cloned slider
   ========================================================================== */

.jedi-mobile-highlights-slider {
	display: none;
}


/* ==========================================================================
   Shared mobile top bar - <= 992px
   ========================================================================== */

@media (max-width: 992px) {

	/* --------------------------------------------------------------
	   Shoptimizer top-bar shell
	   -------------------------------------------------------------- */

	body.jr-dark-commerce
		.col-full.topbar-wrapper {
		width: 100%;
		max-width: none;
		min-height: 3rem;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.top-bar {
		position: relative;
		isolation: isolate;
		width: 100%;
		max-width: none;
		min-height: 3rem;
		margin: 0;
		padding: 0;
		overflow: hidden;

		/* background:
			radial-gradient(
				circle at 8% 0,
				rgba(45, 166, 83, 0.085),
				transparent 24rem
			),
			radial-gradient(
				circle at 88% 100%,
				rgba(111, 203, 255, 0.07),
				transparent 26rem
			),
			linear-gradient(
				180deg,
				#0d141e 0%,
				#080d15 100%
			); */

		box-shadow:
			0 0.8rem 2rem rgba(0, 0, 0, 0.18);
	}

	/**
	 * Static lower separator matching the desktop highlight strip.
	 *
	 * This is intentionally attached to .top-bar rather than the animated
	 * .jedi-highlights-strip so the separator never moves with the slides.
	 *
	 * @package Jedi_Theme
	 */
	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.top-bar::after {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 5;

		width: 100%;
		height: 1px;

		background:
			linear-gradient(
				90deg,
				transparent 0%,
				rgba(152, 169, 192, 0.08) 8%,
				rgba(152, 169, 192, 0.24) 24%,
				rgba(111, 203, 255, 0.26) 50%,
				rgba(152, 169, 192, 0.24) 76%,
				rgba(152, 169, 192, 0.08) 92%,
				transparent 100%
			);

		box-shadow:
			0 1px 0 rgba(0, 0, 0, 0.34),
			0 0 0.7rem rgba(111, 203, 255, 0.035);

		content: "";
		pointer-events: none;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.top-bar
		> .col-full {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}


	/* --------------------------------------------------------------
	   Animated service track
	   -------------------------------------------------------------- */

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip {
		position: relative;
		z-index: 1;

		display: flex;
		align-items: stretch;

		width: 100%;
		height: 3rem;
		min-height: 3rem;
		margin: 0;
		padding: 0;

		gap: 0;
		overflow: visible;

		background: transparent;
		box-shadow: none;

		will-change: transform;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip::before,
	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip::after {
		display: none;
		content: none;
	}


	/* --------------------------------------------------------------
	   Shared service-item presentation
	   -------------------------------------------------------------- */

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:not(:last-child) {
		position: relative;

		display: flex;
		align-items: center;
		justify-content: center;

		height: 3rem;
		min-height: 3rem;

		gap: 0.45rem;
		white-space: normal;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:first-child {
		padding-inline-start: 0.65rem;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:not(:last-child)
		.icon {
		display: grid;
		flex: 0 0 1.25rem;
		place-items: center;

		width: 1.25rem;
		height: 1.25rem;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:not(:last-child)
		.icon
		img {
		display: block;

		width: auto;
		max-width: 1.25rem;
		height: auto;
		max-height: 1.25rem;

		object-fit: contain;

		filter:
			brightness(0)
			invert(1)
			opacity(0.88)
			drop-shadow(0 0 0.4rem rgba(69, 217, 107, 0.1));
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:not(:last-child)
		.text {
		display: block;
		min-width: 0;

		color: var(--jr-text);
		font-size: 0.775rem;
		font-weight: 700;
		letter-spacing: 0.01em;
		line-height: 1.12;
		text-align: left;
		text-transform: uppercase;
		text-wrap: balance;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:not(:last-child)
		.text
		br {
		display: none;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:not(:last-child)
		.text
		a {
		color: inherit;
		text-decoration: none;
	}

	/* Locale remains in the dedicated mobile-header control. */
	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:last-child {
		display: none;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip:hover,
	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip:focus-within {
		animation-play-state: paused;
	}
}


/* ==========================================================================
   Tablet-width mobile header - 769px to 992px
   ========================================================================== */

/**
 * Shoptimizer has already switched to its mobile header in this range, but
 * the viewport remains wide enough to present two equal service messages.
 * Every message uses the same icon/text grid so both slider pairs remain
 * visually consistent regardless of copy length.
 *
 * @package Jedi_Theme
 */
@media (min-width: 769px) and (max-width: 992px) {

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip {
		animation:
			jediMobileHighlightPairs 12s
			ease-in-out
			infinite;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:not(:last-child) {
		display: grid;
		grid-template-columns:
			1.25rem
			minmax(0, max-content);
		align-items: center;
		justify-content: center;

		flex: 0 0 50%;
		width: 50%;
		min-width: 50%;
		height: 3rem;
		min-height: 3rem;

		gap: 0.5rem;
		padding: 0 0.7rem;
	}


	/* --------------------------------------------------------------
	   Balanced slide pairing
	   -------------------------------------------------------------- */

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:nth-child(1) {
		order: 1;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:nth-child(4) {
		order: 2;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:nth-child(2) {
		order: 3;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:nth-child(3) {
		order: 4;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:last-child {
		order: 5;
	}


	/* --------------------------------------------------------------
	   Consistent text treatment for long and short pairs
	   -------------------------------------------------------------- */

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:not(:last-child)
		.text {
		max-width: 11.75rem;
		text-align: left;
		white-space: normal;
		text-wrap: balance;
	}


	/* --------------------------------------------------------------
	   Subtle centre separator for each visible pair
	   -------------------------------------------------------------- */

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:nth-child(1)::after,
	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:nth-child(2)::after {
		position: absolute;
		top: 50%;
		right: 0;

		display: block;

		width: 1px;
		height: 1.25rem;

		background: rgba(152, 169, 192, 0.16);
		content: "";
		transform: translateY(-50%);
		pointer-events: none;
	}

	@keyframes jediMobileHighlightPairs {
		0%,
		44% {
			transform: translateX(0);
		}

		50%,
		94% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(0);
		}
	}
}


/* ==========================================================================
   Phone slider - <= 768px
   ========================================================================== */

@media (max-width: 768px) {

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip {
		animation:
			jediMobileHighlightSingle 20s
			ease-in-out
			infinite;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:not(:last-child) {
		flex: 0 0 100%;
		width: 100%;
		min-width: 100%;
		padding: 0 0.7rem;
	}

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip
		.highlight-item:not(:last-child)
		.text {
		max-width: 22rem;
		font-size: clamp(0.72rem, 3vw, 0.775rem);
		letter-spacing: 0.008em;
		text-align: center;
	}

	@keyframes jediMobileHighlightSingle {
		0%,
		19% {
			transform: translateX(0);
		}

		25%,
		44% {
			transform: translateX(-100%);
		}

		50%,
		69% {
			transform: translateX(-200%);
		}

		75%,
		94% {
			transform: translateX(-300%);
		}

		100% {
			transform: translateX(0);
		}
	}


    /**
    * Keep the service-history slide visually compact on phones.
    *
    * The other three mobile highlights already align correctly. This rule
    * isolates the longer fourth message and keeps its icon directly beside
    * a controlled-width text block without changing the other slides.
    *
    * @package    Jedi_Theme
    * @subpackage Components/Mobile_Highlights
    * @since      1.4.1
    */
    body.jr-dark-commerce
        .col-full.topbar-wrapper
        .jedi-highlights-strip
        .highlight-item:nth-child(4) {
        display: flex;

        align-items: center;
        justify-content: center;

        gap: 0.5rem;
    }


    body.jr-dark-commerce
        .col-full.topbar-wrapper
        .jedi-highlights-strip
        .highlight-item:nth-child(4)
        .icon {
        flex: 0 0 1.25rem;
    }


    body.jr-dark-commerce
        .col-full.topbar-wrapper
        .jedi-highlights-strip
        .highlight-item:nth-child(4)
        .text {
        flex: 0 1 14.25rem;

        width: 14.25rem;
        min-width: 0;
        max-width: 14.25rem;

        text-align: left;
        white-space: normal;
        text-wrap: balance;
    }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

/**
 * Keep the first service message static when the visitor requests reduced
 * motion at operating-system or browser level.
 *
 * @package Jedi_Theme
 */
@media (max-width: 992px) and (prefers-reduced-motion: reduce) {

	body.jr-dark-commerce
		.col-full.topbar-wrapper
		.jedi-highlights-strip {
		animation: none;
		transform: translateX(0);
		will-change: auto;
	}
}