/* ============================================================
   GMS Quote Slideshow v2.0 — Frontend Styles
   AlphaGainz default colors: accent #c0392b, card #e8e8e8
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────────── */
.gms-quote-slideshow {
	--gms-qs-accent:    #c0392b;
	--gms-qs-card-bg:   #e8e8e8;
	--gms-qs-card-text: #1a1a1a;
	--gms-qs-nav:       #1a1a1a;

	position: relative;
	outline: none;
	max-width: 100%;
}

/* ── Track ─────────────────────────────────────────────────────── */
.gms-quote-slideshow .gms-qs-track {
	position: relative;
	overflow: hidden;
}

/* ── Slides ────────────────────────────────────────────────────── */
.gms-quote-slideshow .gms-qs-slide {
	display: none;
	margin: 0 !important;
}

.gms-quote-slideshow .gms-qs-slide.is-active {
	display: block;
}

/* ── Card Styles ────────────────────────────────────────────────── */

/* CARD — matches the current AlphaGainz look */
.gms-quote-slideshow.gms-qs-card--card .gms-qs-slide {
	background: var(--gms-qs-card-bg) !important;
	border-left: 5px solid var(--gms-qs-accent) !important;
	color: var(--gms-qs-card-text) !important;
	padding: 40px 44px !important;
	border-radius: 0 6px 6px 0 !important;
}

.gms-quote-slideshow.gms-qs-card--card .gms-qs-slide p,
.gms-quote-slideshow.gms-qs-card--card .gms-qs-slide cite {
	color: var(--gms-qs-card-text) !important;
}

/* PLAIN — transparent, just the quote */
.gms-quote-slideshow.gms-qs-card--plain .gms-qs-slide {
	background: transparent !important;
	border: none !important;
	padding: 24px 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* DARK — dark background */
.gms-quote-slideshow.gms-qs-card--dark .gms-qs-slide {
	background: #1a1a1a !important;
	border-left: 5px solid var(--gms-qs-accent) !important;
	color: #f0f0f0 !important;
	padding: 40px 44px !important;
	border-radius: 6px !important;
}

.gms-quote-slideshow.gms-qs-card--dark .gms-qs-slide p,
.gms-quote-slideshow.gms-qs-card--dark .gms-qs-slide cite {
	color: #f0f0f0 !important;
}

/* GLASS — glassmorphism */
.gms-quote-slideshow.gms-qs-card--glass .gms-qs-slide {
	background: rgba(255, 255, 255, 0.12) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-left: 5px solid var(--gms-qs-accent) !important;
	color: var(--gms-qs-card-text) !important;
	padding: 40px 44px !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

/* ── Animations ─────────────────────────────────────────────────── */

.gms-quote-slideshow.gms-qs-anim--fade .gms-qs-slide.is-active {
	animation: gmsQsFadeIn 0.5s ease both;
}
@keyframes gmsQsFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.gms-quote-slideshow.gms-qs-anim--zoom .gms-qs-slide.is-active {
	animation: gmsQsZoomIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gmsQsZoomIn {
	from { opacity: 0; transform: scale(0.95); }
	to   { opacity: 1; transform: scale(1); }
}

.gms-quote-slideshow.gms-qs-anim--slide .gms-qs-slide {
	transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.45s ease;
}
.gms-quote-slideshow.gms-qs-anim--slide .gms-qs-slide.is-active {
	display: block;
}

/* ── Progress bar ───────────────────────────────────────────────── */
.gms-quote-slideshow .gms-qs-progress {
	height: 3px;
	background: rgba(0, 0, 0, 0.1);
	overflow: hidden;
	margin-top: 2px;
}

.gms-quote-slideshow .gms-qs-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--gms-qs-accent);
	border-radius: 2px;
}

/* ── Nav bar ────────────────────────────────────────────────────── */
.gms-quote-slideshow .gms-qs-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 18px 0 6px;
	flex-wrap: wrap;
}

/* ── Counter ────────────────────────────────────────────────────── */
.gms-quote-slideshow .gms-qs-counter {
	font-size: 13px;
	color: var(--gms-qs-nav);
	opacity: 0.5;
	font-variant-numeric: tabular-nums;
	min-width: 3em;
	text-align: center;
	line-height: 1;
	/* prevent theme from inheriting other styles */
	font-family: inherit;
	background: none;
	padding: 0;
	margin: 0;
	border: none;
}

/* ══════════════════════════════════════════════════════════════════
   ARROWS — Full reset to prevent theme interference
   ══════════════════════════════════════════════════════════════════ */
.gms-quote-slideshow .gms-qs-btn {
	/* Hard reset */
	all: unset;
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
	color: var(--gms-qs-nav);
	flex-shrink: 0;
	line-height: 1;
	/* Remove any theme button styles */
	text-decoration: none !important;
	font-size: 0 !important;
}

.gms-quote-slideshow .gms-qs-btn svg {
	display: block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.gms-quote-slideshow .gms-qs-btn:hover,
.gms-quote-slideshow .gms-qs-btn:focus-visible {
	transform: scale(1.1);
	outline: none;
}

/* Style: Outline circle */
.gms-quote-slideshow .gms-qs-btn--outline {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	border: 2px solid var(--gms-qs-nav) !important;
	opacity: 0.6;
}
.gms-quote-slideshow .gms-qs-btn--outline:hover {
	opacity: 1;
	background: var(--gms-qs-accent) !important;
	border-color: var(--gms-qs-accent) !important;
	color: #fff;
}

/* Style: Solid circle */
.gms-quote-slideshow .gms-qs-btn--solid {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: var(--gms-qs-nav) !important;
	color: #fff !important;
	opacity: 0.65;
}
.gms-quote-slideshow .gms-qs-btn--solid:hover {
	opacity: 1;
	background: var(--gms-qs-accent) !important;
}
.gms-quote-slideshow .gms-qs-btn--solid svg {
	stroke: #fff;
}

/* Style: Square */
.gms-quote-slideshow .gms-qs-btn--square {
	width: 38px !important;
	height: 38px !important;
	border-radius: 6px !important;
	border: 2px solid var(--gms-qs-nav) !important;
	opacity: 0.6;
}
.gms-quote-slideshow .gms-qs-btn--square:hover {
	opacity: 1;
	background: var(--gms-qs-accent) !important;
	border-color: var(--gms-qs-accent) !important;
	color: #fff;
}

/* Style: Minimal (just the icon) */
.gms-quote-slideshow .gms-qs-btn--minimal {
	width: 32px !important;
	height: 32px !important;
	border-radius: 0 !important;
	opacity: 0.45;
}
.gms-quote-slideshow .gms-qs-btn--minimal:hover {
	opacity: 1;
	color: var(--gms-qs-accent);
}

/* ══════════════════════════════════════════════════════════════════
   DOTS — Full reset + all style variants
   ══════════════════════════════════════════════════════════════════ */
.gms-quote-slideshow .gms-qs-dots {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	border: none !important;
}

.gms-quote-slideshow .gms-qs-dot {
	/* Hard reset */
	all: unset;
	box-sizing: border-box;
	display: inline-block !important;
	cursor: pointer;
	transition: transform 0.22s ease, background 0.22s ease, opacity 0.22s ease, width 0.22s ease;
	border: 2px solid var(--gms-qs-nav) !important;
	background: transparent !important;
	opacity: 0.4;
	flex-shrink: 0;
}

.gms-quote-slideshow .gms-qs-dot:hover {
	opacity: 0.7;
	transform: scale(1.15);
}

.gms-quote-slideshow .gms-qs-dot.is-active {
	background: var(--gms-qs-accent) !important;
	border-color: var(--gms-qs-accent) !important;
	opacity: 1;
}

/* Circle dots */
.gms-quote-slideshow .gms-qs-dot--circle {
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
}

.gms-quote-slideshow .gms-qs-dot--circle.is-active {
	transform: scale(1.3);
}

/* Square dots */
.gms-quote-slideshow .gms-qs-dot--square {
	width: 10px !important;
	height: 10px !important;
	border-radius: 2px !important;
}

.gms-quote-slideshow .gms-qs-dot--square.is-active {
	transform: scale(1.2);
}

/* Line dots */
.gms-quote-slideshow .gms-qs-dot--line {
	width: 22px !important;
	height: 3px !important;
	border-radius: 2px !important;
	border: none !important;
	background: var(--gms-qs-nav) !important;
}

.gms-quote-slideshow .gms-qs-dot--line.is-active {
	width: 36px !important;
	background: var(--gms-qs-accent) !important;
}

/* Diamond dots */
.gms-quote-slideshow .gms-qs-dot--diamond {
	width: 10px !important;
	height: 10px !important;
	border-radius: 2px !important;
	transform: rotate(45deg);
}

.gms-quote-slideshow .gms-qs-dot--diamond.is-active {
	transform: rotate(45deg) scale(1.2);
}

/* ── Single slide ──────────────────────────────────────────────── */
.gms-quote-slideshow.gms-qs-single .gms-qs-slide {
	display: block !important;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.gms-quote-slideshow .gms-qs-btn {
		width: 34px !important;
		height: 34px !important;
	}

	.gms-quote-slideshow .gms-qs-counter {
		display: none;
	}

	.gms-quote-slideshow.gms-qs-card--card .gms-qs-slide,
	.gms-quote-slideshow.gms-qs-card--dark .gms-qs-slide,
	.gms-quote-slideshow.gms-qs-card--glass .gms-qs-slide {
		padding: 24px 20px !important;
	}
}