/**
 * GSSMG Elementor Extension — frontend styles.
 */

/* Container link ------------------------------------------------------- */
.gssmg-ee-linked {
	cursor: pointer;
}

.gssmg-ee-linked:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Numbered pagination -------------------------------------------------- */
.gssmg-ee-num-pagination .swiper-pagination-bullet.gssmg-ee-numbered-bullet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 1.6em;
	height: auto;
	padding: 0.15em 0.5em;
	border-radius: 999px;
	line-height: 1;
	font-size: 0.85em;
	background: transparent;
	color: inherit;
}

.gssmg-ee-num-pagination .swiper-pagination-bullet.gssmg-ee-numbered-bullet.swiper-pagination-bullet-active {
	background: currentColor;
	color: #fff;
}

/* Accordion columns ---------------------------------------------------- *
 * The layout is gated on .gssmg-ee-has-cols, which the script adds only once
 * the column wrappers exist. Two reasons: the column count is now per
 * breakpoint, so the same accordion may legitimately be single-column at some
 * widths, and until the wrappers are built the items are direct children -
 * turning on `display:flex` before that would lay them out in a row.
 * There is deliberately no max-width rule here: which breakpoint gets how many
 * columns is the author's call in the panel, resolved server-side.
 */
.gssmg-ee-accordion-columns .e-n-accordion.gssmg-ee-has-cols {
	display: flex;
	align-items: flex-start;
	gap: var( --n-accordion-gap, 20px );
}

.gssmg-ee-accordion-columns .e-n-accordion.gssmg-ee-has-cols > .gssmg-ee-accordion-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: var( --n-accordion-gap, 20px );
	min-inline-size: 0;
}

/* Accordion title icon ------------------------------------------------- */
.e-n-accordion-item-title-text .gssmg-ee-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.5em;
	flex: 0 0 auto;
	line-height: 1;
}

.e-n-accordion-item-title-text .gssmg-ee-title-icon svg,
.e-n-accordion-item-title-text .gssmg-ee-title-icon img {
	width: 1em;
	height: 1em;
	fill: currentColor;
}