/**
 * JT Premium Product Showcase widget styles.
 *
 * Entirely static inline <style> block (including the
 * --jt-pps-primary/-heading/-text custom-property defaults, which
 * Elementor's own color controls also set via {{WRAPPER}}, unaffected
 * by this move) moved verbatim, scoped by the stable .jt-pps-wrapper
 * class instead of the per-instance element ID.
 */

:where(.jt-pps-wrapper) {
	width: 100%;
	position: relative;
}

/* Header & Tabs */
:where(.jt-pps-wrapper) .jt-pps-header {
	display: flex; flex-direction: column; align-items: center; margin-bottom: 16px;
}
:where(.jt-pps-wrapper) .jt-pps-main-title {
	font-size: 28px; font-weight: 800; color: var(--jt-pps-heading, #0f172a); margin: 0 0 10px 0; letter-spacing: -0.5px; text-transform: uppercase; line-height: 1.2;
}
:where(.jt-pps-wrapper) .jt-pps-tabs {
	display: flex; justify-content: center; gap: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px; width: 100%; max-width: 100%; -webkit-overflow-scrolling: touch;
}
:where(.jt-pps-wrapper) .jt-pps-tabs::-webkit-scrollbar { display: none; }
:where(.jt-pps-wrapper) .jt-pps-tab {
	background: #ffffff; border: 1px solid #e2e8f0; padding: 8px 22px; border-radius: 100px;
	font-size: 13px; font-weight: 700; color: var(--jt-pps-text, #64748b); cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; flex-shrink: 0; outline: none;
	box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
:where(.jt-pps-wrapper) .jt-pps-tab.active, 
:where(.jt-pps-wrapper) .jt-pps-tab:hover {
	background: var(--jt-pps-primary, #00d2d3); color: #fff; border-color: var(--jt-pps-primary, #00d2d3); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); transform: translateY(-2px);
}

/* Body Layout */
:where(.jt-pps-wrapper) .jt-pps-body {
	display: flex; gap: 24px; align-items: stretch;
}

/* Promo Box */
:where(.jt-pps-wrapper) .jt-pps-promo {
	flex: 0 0 300px; background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); border-radius: 24px; padding: 32px 24px;
	display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 1px solid rgba(226, 232, 240, 0.8);
	box-shadow: 0 10px 30px -5px rgba(0,0,0,0.04); overflow: hidden; position: relative; transition: all 0.3s ease;
}
:where(.jt-pps-wrapper) .jt-pps-promo:hover {
	transform: translateY(-4px); box-shadow: 0 15px 35px -5px rgba(0,0,0,0.08);
}
:where(.jt-pps-wrapper) .jt-pps-promo::before {
	content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px;
	background: radial-gradient(circle, var(--jt-pps-primary, #00d2d3) 0%, transparent 70%); opacity: 0.1; border-radius: 50%; pointer-events: none;
}
:where(.jt-pps-wrapper) .jt-pps-promo-sub {
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
	color: var(--jt-pps-text, #64748b); margin-bottom: 10px; display: block;
}
:where(.jt-pps-wrapper) .jt-pps-promo-huge {
	font-size: 56px; font-weight: 900; color: var(--jt-pps-primary, #00d2d3); line-height: 1;
	margin-bottom: 10px; letter-spacing: -2px;
}
:where(.jt-pps-wrapper) .jt-pps-promo-title {
	font-size: 22px; font-weight: 800; color: var(--jt-pps-heading, #0f172a); margin: 0 0 12px 0; line-height: 1.2;
}
:where(.jt-pps-wrapper) .jt-pps-promo-desc {
	font-size: 14.5px; color: var(--jt-pps-text, #64748b); margin: 0 0 24px 0; line-height: 1.5;
}
:where(.jt-pps-wrapper) .jt-pps-promo-btn {
	display: inline-flex; align-items: center; gap: 8px; background: #0f172a; color: #ffffff;
	padding: 14px 28px; border-radius: 100px; font-weight: 700; font-size: 14px; text-decoration: none; border: none;
}
:where(.jt-pps-wrapper) .jt-pps-promo-btn:hover {
	background: var(--jt-pps-primary, #00d2d3); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); color: #fff;
}

/* Slider */
:where(.jt-pps-wrapper) .jt-pps-slider-wrap {
	flex: 1; min-width: 0; position: relative; display: flex; align-items: center;
}
:where(.jt-pps-wrapper) .jt-pps-swiper {
	width: 100%; padding: 5px 5px 8px 5px !important; margin: -5px -5px -8px -5px !important; 
}

/* Product Card */
:where(.jt-pps-wrapper) .swiper-slide { height: auto; box-sizing: border-box; }
:where(.jt-pps-wrapper) .swiper-slide .mj-premium-card { height: 100%; width: 100%; }

/* Slider Navigation */
:where(.jt-pps-wrapper) .jt-pps-nav-prev, 
:where(.jt-pps-wrapper) .jt-pps-nav-next {
	position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: #fff;
	border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	cursor: pointer; z-index: 10; color: #0f172a; transition: all 0.3s ease; border: 1px solid #f1f5f9;
}
:where(.jt-pps-wrapper) .jt-pps-nav-prev:hover, 
:where(.jt-pps-wrapper) .jt-pps-nav-next:hover { background: var(--jt-pps-primary, #00d2d3); color: #fff; border-color: var(--jt-pps-primary, #00d2d3); }
:where(.jt-pps-wrapper) .jt-pps-nav-prev { left: -22px; }
:where(.jt-pps-wrapper) .jt-pps-nav-next { right: -22px; }

/* Responsive */
@media (max-width: 1024px) {
	:where(.jt-pps-wrapper) .jt-pps-body { flex-direction: column; gap: 20px; }
	:where(.jt-pps-wrapper) .jt-pps-promo { flex: none; width: 100%; padding: 32px 20px; }
	:where(.jt-pps-wrapper) .jt-pps-slider-wrap { width: 100%; }
	:where(.jt-pps-wrapper) .jt-pps-promo-btn { align-self: center; }
	:where(.jt-pps-wrapper) .jt-pps-nav-prev { left: -10px; }
	:where(.jt-pps-wrapper) .jt-pps-nav-next { right: -10px; }
}
@media (max-width: 768px) {
	:where(.jt-pps-wrapper) .jt-pps-header { margin-bottom: 16px; }
	:where(.jt-pps-wrapper) .jt-pps-tabs {
		justify-content: flex-start;
		padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; width: calc(100% + 32px);
	}
	:where(.jt-pps-wrapper) .jt-pps-tab:first-child { margin-left: 0; }
	:where(.jt-pps-wrapper) .jt-pps-main-title { font-size: 22px; margin-bottom: 12px; }
	:where(.jt-pps-wrapper) .jt-pps-promo-huge { font-size: 42px; margin-bottom: 8px; }
	:where(.jt-pps-wrapper) .jt-pps-promo-title { font-size: 18px; margin-bottom: 12px; }
	:where(.jt-pps-wrapper) .jt-pps-promo-desc { font-size: 14px; margin-bottom: 20px; }
	:where(.jt-pps-wrapper) .jt-pps-nav-prev, :where(.jt-pps-wrapper) .jt-pps-nav-next { display: none; } /* Hide arrows on mobile */
}