/* Story IG tool UI — overlays + viewer; story row forced to 3/2 grid */

.sg-st-status {
	margin: 0 0 12px;
	font-size: 0.95rem;
	line-height: 1.4;
	color: #1a1a1a;
}

.sg-st-status.is-error {
	color: #b42318;
}

.sg-st-quota {
	margin: 12px 0 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

/* Story row: always 2 cols mobile / 3 cols desktop */
.kadence-column22140_6c3e32-44 > .kt-inside-inner-col {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-items: stretch;
}

@media (min-width: 768px) {
	.kadence-column22140_6c3e32-44 > .kt-inside-inner-col {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kadence-column22140_6c3e32-44 > .kt-inside-inner-col > .sg-st-story-slot,
.kadence-column22140_6c3e32-44 > .kt-inside-inner-col > .sg-st-story-placeholder,
.kadence-column22140_6c3e32-44 > .kt-inside-inner-col > .sg-st-story-skeleton,
.kadence-column22140_6c3e32-44 > .kt-inside-inner-col > figure.wp-block-kadence-image {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	aspect-ratio: 9 / 16;
	overflow: hidden;
}

.kadence-column22140_6c3e32-44 > .kt-inside-inner-col > .sg-st-story-slot img,
.kadence-column22140_6c3e32-44 > .kt-inside-inner-col > figure.wp-block-kadence-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sg-st-story-placeholder {
	border-radius: 4px;
	background: transparent;
	pointer-events: none;
	visibility: hidden;
}

.sg-st-story-skeleton {
	border-radius: 4px;
	background: #ececec;
	pointer-events: none;
}

.sg-st-story-slot {
	position: relative;
	cursor: pointer;
}

/* Shimmer skeleton while API / images load */
.sg-st-is-skeleton {
	position: relative;
	overflow: hidden;
	pointer-events: none;
	cursor: default;
}

.sg-st-is-skeleton img {
	opacity: 0 !important;
}

.sg-st-is-skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(110deg, #ececec 25%, #f7f7f7 40%, #ececec 55%);
	background-size: 200% 100%;
	animation: sg-st-shimmer 1.2s ease-in-out infinite;
}

.kb-is-ratio-image.sg-st-is-skeleton,
.kb-image-ratio-square.sg-st-is-skeleton {
	border-radius: 50%;
}

.kb-is-ratio-image.sg-st-is-skeleton::after,
.kb-image-ratio-square.sg-st-is-skeleton::after {
	border-radius: 50%;
}

.sg-st-story__actions {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	z-index: 2;
}

.sg-st-story__action,
.sg-st-story__download {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	line-height: 0;
}

.sg-st-story__action {
	pointer-events: none;
}

.sg-st-story__download {
	pointer-events: auto;
}

.sg-st-story__action svg,
.sg-st-story__download svg {
	width: 14px;
	height: 14px;
	display: block;
}

.sg-st-busy {
	opacity: 0.65;
	pointer-events: none;
}

/* Loading modal */
.sg-st-loading {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
}

.sg-st-loading[hidden] {
	display: none !important;
}

.sg-st-loading__card {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: calc(100vw - 32px);
	padding: 14px 18px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
	color: #1a1a1a;
	font-size: 0.95rem;
	line-height: 1.3;
}

.sg-st-loading__icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	animation: sg-st-spin 0.9s linear infinite;
}

.sg-st-loading__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

@keyframes sg-st-spin {
	to {
		transform: rotate(360deg);
	}
}

body.sg-st-viewer-open,
body.sg-st-loading-open,
body.sg-st-notice-open {
	overflow: hidden;
}

/* Quota / notice modal */
.sg-st-notice {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sg-st-notice[hidden] {
	display: none !important;
}

.sg-st-notice__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

.sg-st-notice__panel {
	position: relative;
	z-index: 1;
	width: max-content;
	max-width: min(92vw, 360px);
	padding-top: 18px;
	padding-right: 18px;
}

.sg-st-notice__card {
	position: relative;
	width: 100%;
	padding: 22px 28px 20px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
	text-align: center;
}

.sg-st-notice__text {
	margin: 0;
	color: #1a1a1a;
	font-size: 0.98rem;
	line-height: 1.45;
}

.sg-st-notice__close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #1a1a1a;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	line-height: 0;
}

.sg-st-notice__close svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* Prevent iOS zoom on focus (needs >= 16px) + keep search field readable */
.kadence-column22140_21e90f-83 #field072745-f1,
.kadence-column22140_21e90f-83 input.kb-field {
	font-size: 16px !important;
}

/* Hide Safari/Chrome password-manager affordances on the search field */
.kadence-column22140_21e90f-83 #field072745-f1::-webkit-credentials-auto-fill-button,
.kadence-column22140_21e90f-83 #field072745-f1::-webkit-contacts-auto-fill-button,
.kadence-column22140_21e90f-83 #field072745-f1::-webkit-strong-password-auto-fill-button {
	visibility: hidden !important;
	display: none !important;
	pointer-events: none !important;
	position: absolute !important;
	right: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sg-st-viewer {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sg-st-viewer[hidden] {
	display: none !important;
}

.sg-st-viewer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.82);
}

.sg-st-viewer__dialog {
	position: relative;
	z-index: 1;
	height: 70vh;
	width: min(92vw, calc(70vh * 9 / 16));
	max-width: 420px;
	aspect-ratio: 9 / 16;
}

.sg-st-viewer__media {
	position: relative;
	width: 100%;
	height: 100%;
	background: #111;
	border-radius: 14px;
	overflow: hidden;
}

.sg-st-viewer__media.is-loading .sg-st-viewer__skeleton {
	opacity: 1;
}

.sg-st-viewer__skeleton {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	border-radius: 14px;
	background: linear-gradient(110deg, #1a1a1a 25%, #2a2a2a 40%, #1a1a1a 55%);
	background-size: 200% 100%;
	animation: sg-st-shimmer 1.2s ease-in-out infinite;
}

@keyframes sg-st-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

.sg-st-viewer__media img,
.sg-st-viewer__media video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	border-radius: 14px;
}

.sg-st-viewer__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	line-height: 0;
}

.sg-st-viewer__close svg {
	width: 18px;
	height: 18px;
	display: block;
}

.sg-st-viewer__close:hover {
	background: rgba(255, 255, 255, 0.18);
}

.sg-st-viewer__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 42px;
	line-height: 1;
	width: auto;
	height: auto;
	padding: 8px;
	cursor: pointer;
	border-radius: 0;
	opacity: 0.9;
}

.sg-st-viewer__nav:hover {
	opacity: 1;
}

.sg-st-viewer__prev {
	left: -44px;
}

.sg-st-viewer__next {
	right: -44px;
}

@media (max-width: 640px) {
	.sg-st-viewer__dialog {
		height: 70vh;
		width: min(92vw, calc(70vh * 9 / 16));
	}

	.sg-st-viewer__prev {
		left: 4px;
	}
	.sg-st-viewer__next {
		right: 4px;
	}
	.sg-st-viewer__close {
		top: 8px;
		right: 8px;
	}
}

/* Comparison table: keep cell text on one line; scroll sideways on narrow screens */
.kb-table-container22140_e88bf9-b3 {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

.kb-table-container22140_e88bf9-b3 .kb-table22140_e88bf9-b3 {
	width: max-content !important;
	min-width: 100%;
	table-layout: auto;
	overflow: visible !important;
}

.kb-table-container22140_e88bf9-b3 .kb-table22140_e88bf9-b3 th,
.kb-table-container22140_e88bf9-b3 .kb-table22140_e88bf9-b3 td,
.kb-table-container22140_e88bf9-b3 .kb-table22140_e88bf9-b3 th p,
.kb-table-container22140_e88bf9-b3 .kb-table22140_e88bf9-b3 td p,
.kb-table-container22140_e88bf9-b3 .kb-table22140_e88bf9-b3 th strong,
.kb-table-container22140_e88bf9-b3 .kb-table22140_e88bf9-b3 td strong {
	white-space: nowrap !important;
}
