/**
 * Preview Frame Widget Styles
 *
 * @package ElementorKit
 * @since 1.0.0
 */

/* Container */
.elementor-preview-frame-wrapper {
	width: 100%;
	max-width: 100%;
}

/* Button Container */
.preview-frame-buttons {
	display: flex;
	gap: 10px;
	margin-bottom: 25px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

/* Label */
.preview-frame-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 10px;
}

.preview-frame-label i,
.preview-frame-label svg {
	display: inline-block;
	width: 12px;
	height: auto;
}

/* Buttons */
.preview-frame-btn {
	border: none;
	transition: all 0.3s ease;
	display: inline-flex;
	padding: 0 0.5rem;
	align-items: center;
	position: relative;
	opacity: 0.7;
}

/* Button with icon - hide text */
.preview-frame-btn.has-icon .btn-text {
	text-indent: -9999px;
	display: inline-block;
	width: 0;
	overflow: hidden;
	white-space: nowrap;
}

/* Button icon styling */
.preview-frame-btn i,
.preview-frame-btn svg {
	display: inline-block;
	width: 32px;
	height: 32px;
	transform: translateY(0);
}

.preview-frame-btn:hover,
.preview-frame-btn:focus {
	opacity: 1;
	background-color: transparent;
}

.preview-frame-btn.active {
	opacity: 1;
}

/* Device Containers */
.preview-frame-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.device-preview {
	display: none;
	width: 100%;
	margin: 0 auto;
}

.device-preview.active {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 20px;
}

/* Desktop View - 1280x720 */
.device-preview.device-desktop .preview-iframe {
	width: 1280px;
	height: 720px;
	max-width: 100%;
}

/* Tablet View - 768x1024 */
.device-preview.device-tablet .preview-iframe {
	width: 768px;
	height: 1024px;
	max-width: 100%;
}

/* Mobile View - 375x667 */
.device-preview.device-mobile .preview-iframe {
	width: 375px;
	height: 667px;
	max-width: 100%;
}

/* Iframe Base Styles */
.preview-iframe {
	border: 1px solid #ddd;
	border-radius: 4px;
	transition: all 0.5s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Loading State */
.iframe-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 10;
}

.iframe-loading .spinner {
	width: 50px;
	height: 50px;
	margin: 0 auto 15px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #ff3700;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.iframe-loading p {
	font-size: 0.875rem;
	margin: 0;
}

/* Error State */
.iframe-error {
	text-align: center;
	padding: 20px;
}

.iframe-error p {
	font-size: 0.875rem;
	margin: 00;
}

.iframe-refresh-link {
	color: #000;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-decoration: none;
	background-image: linear-gradient(currentColor 0 0);
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: 100% 0.0625em;
	transition: background-size .3s linear;
}

.iframe-refresh-link:is(:hover, :focus-visible) {
	color: #000;
	background-size: 0% 0.0625em;
	background-position: bottom right;
}

/* Hide loading/error when iframe is loaded */
.preview-iframe.loaded ~ .iframe-loading,
.preview-iframe.loaded ~ .iframe-error {
	display: none;
}

/* Show error when iframe fails */
.preview-iframe.error {
	display: none;
}

.preview-iframe.error ~ .iframe-loading {
	display: none;
}

.preview-iframe.error ~ .iframe-error {
	display: block !important;
}

/* Responsive Breakpoints */

/* Tablet: Hide desktop button, show tablet and mobile */
@media (max-width: 1024px) {
	.preview-frame-btn[data-device="desktop"] {
		display: none;
	}

	/* Auto-activate tablet view on tablet devices if desktop was active */
	.device-preview.device-desktop {
		display: none;
	}

	.device-preview.device-tablet {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		padding: 20px;
	}
}

/* Mobile: Hide desktop and tablet buttons, show only mobile */
@media (max-width: 767px) {
	.preview-frame-btn[data-device="desktop"],
	.preview-frame-btn[data-device="tablet"] {
		display: none;
	}

	.device-preview.active {
		padding: 10px;
	}

	/* Auto-activate mobile view on mobile devices */
	.device-preview.device-desktop,
	.device-preview.device-tablet {
		display: none;
	}

	.device-preview.device-mobile {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		padding: 10px;
	}
}

/* Extra small screens */
@media (max-width: 480px) {
	.preview-frame-buttons {
		gap: 8px;
	}

	.preview-frame-btn {
		padding: 8px 16px;
	}
}


/* Accessibility Improvements */
.preview-frame-btn:focus-visible {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

/* Print Styles */
@media print {
	.preview-frame-buttons {
		display: none;
	}

	.device-preview {
		display: block !important;
		padding: 0 !important;
	}

	.preview-iframe {
		border: none;
		box-shadow: none;
	}
}