// Keep original global variables - used across multiple pages
$primary-color: #F26C0D;
$secondary-color: #F0F0F1;
$primary-text-color: #2c2d2f;
$secondary-text-color: #3C434A;
$button-text-color: #756C69;
$max-width: 1400px;

// Quick Start specific variables
$primary-hover: #e9510c;
$text-muted: #757575;
$border-color: #ddd;
$white: #FFFFFF;
$link-blue: #1a74e4;
$link-blue-hover: #0f5cb3;

// Pro icon colors
$pro-icon-blue: #2196F3;
$pro-icon-green: #4CAF50;
$pro-icon-pink: #E91E63;
$pro-icon-cyan: #00BCD4;
$pro-icon-red: #F44336;
$pro-icon-lime: #CDDC39;
$pro-icon-purple: #9C27B0;
$pro-icon-yellow: #FFEB3B;
$pro-icon-green-light: #8BC34A;
$pro-icon-orange: #FF9800;

// ====================
// Main Container
// ====================

.splwb-settings-getting-start-page {
	max-width: $max-width;
	margin: 0 auto;
	// padding: 0 50px;

	* {
		box-sizing: border-box;
	}
}

.splwb-settings-getting-start-page-content {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

// ====================
// Left Side Content
// ====================

.splwb-qs-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

// About Section
.splwb-qs-about-section {
	background: $white;
	border: 1px solid $border-color;
	border-radius: 12px;
	overflow: hidden;
}

.splwb-qs-about-content {
	display: flex;
	gap: 24px;
	padding: 32px;
	align-items: center;
}

.splwb-qs-about-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.splwb-qs-greeting {
	color: #2c2d2f;
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	line-height: 1.3;
}

.splwb-qs-welcome-title {
	font-size: 24px;
	font-weight: 600;
	color: #2c2d2f;
	margin: -6px 0 0 0;
	line-height: 1.3;

	span {
		color: $primary-color;
	}
}

.splwb-qs-welcome-desc {
	color: #4e4f52;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.splwb-qs-create-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #f26c0d;
	color: $white;
	padding: 12px 18px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	transition: background 0.2s, color 0.2s;
	text-transform: capitalize;
	flex-shrink: 0;
	white-space: nowrap;

	&:hover {
		background: #e9510c;
		color: #fff;
	}

	&:focus {
		color: #fff;
	}
}

.splwb-qs-video-wrapper {
	position: relative;
	flex: 1;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 9.689px;

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(242, 108, 13, 0.4);
		pointer-events: none;
	}
}

.splwb-qs-video {
	width: 100%;
	height: 100%;
	aspect-ratio: 804 / 452;

	iframe {
		width: 100%;
		height: 100%;
		border: none;
		border-radius: 6px;
	}
}

.splwb-qs-video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s;
}

.splwb-qs-play-btn {
	position: absolute;
	top: calc(50% + 0.12px);
	left: 50%;
	transform: translate(-50%, -50%);
	width: 54px;
	height: 54px;
	background: $white;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;

	svg {
		width: 21px;
		height: 21px;
		margin-left: 2px;
		position: relative;
		z-index: 2;
	}

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: $white;
		opacity: 0;
		z-index: 1;
	}

	&::before {
		animation: pulse 2s ease-out infinite;
	}

	&::after {
		animation: pulse 2s ease-out infinite 1s;
	}
}

@keyframes pulse {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.6;
	}
	100% {
		transform: translate(-50%, -50%) scale(2);
		opacity: 0;
	}
}

.splwb-qs-video-placeholder {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

// Video Modal
.splwb-qs-video-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
}

.splwb-qs-video-modal-content {
	position: relative;
	width: 100%;
	max-width: 900px;
	background: $white;
	border-radius: 12px;
	overflow: hidden;
}

.splwb-qs-video-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	background: rgba(0, 0, 0, 0.6);
	color: $white;
	border: none;
	border-radius: 50%;
	font-size: 24px;
	font-weight: 300;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: background 0.2s, color 0.2s;

	&:hover {
		background: rgba(0, 0, 0, 0.8);
	}

	&:focus {
		color: inherit;
	}
}

.splwb-qs-video-modal-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	display: flex;

	iframe {
		width: 100%;
		height: 100%;
		border: none;
	}
}

// Blocks Section
.splwb-qs-blocks-section {
	background: $white;
	border: 1px solid $border-color;
	border-radius: 12px;
	padding: 22px 32px 10px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.splwb-qs-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.splwb-qs-section-title {
	font-size: 24px;
	font-weight: 500;
	color: #2c2d2f;
	margin: 0;
	line-height: 32px;
}

.splwb-qs-view-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: $link-blue;
	background: none;
	border: none;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	padding: 0;
	border-radius: 0;
	transition: background 0.2s, color 0.2s;

	svg {
		width: 12px;
		height: 12px;
	}

	&:hover {
		background: transparent;
		color: $link-blue-hover;
	}

	&:focus {
		color: $link-blue;
	}
}

.spl-weather-pro-block-admin-page .splwb-qs-blocks-grid.spl-weather-blocks-settings-card-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;

	.spl-weather-blocks-settings-card {
		border: 1px solid $border-color;
		box-shadow: none;
		padding: 14px 18px;

		// Last 2 items opacity
		&:nth-last-child(-n+2) {
			opacity: 0.7;
		}

		.splw-pro-blocks-badge {
			display: none;
		}
	}
}


// Video Tutorials Section
.splwb-qs-tutorials-section {
	background: $white;
	border: 1px solid $border-color;
	border-radius: 12px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.splwb-qs-tutorials-grid {
	display: flex;
	gap: 24px;
}

.splwb-qs-tutorial-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 9.689px;
}

.splwb-qs-tutorial-video {
	position: relative;
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 16 / 9;

	iframe {
		width: 100%;
		height: 100%;
		border: none;
	}
}

.splwb-qs-tutorial-title {
	font-size: 18px;
	font-weight: 600;
	color: #2f2f2f;
	margin: 0;
	padding-top: 10px;
	line-height: 1.4;
}

// ====================
// Right Side Sidebar
// ====================

.splwb-qs-sidebar {
	width: 380px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	top: 20px;
}

// Weather Patterns Library Card
.splwb-qs-patterns-card {
	background: $white;
	border: 1px solid $border-color;
	border-radius: 12px;
	overflow: hidden;
}

.splwb-qs-patterns-image {
	position: relative;
	height: 200px;
	background: linear-gradient(180deg, #FFE0B3 0%, #FFF3E0 100%);
	overflow: hidden;
	padding: 12px;
}

.splwb-qs-patterns-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.2);
}

.splwb-qs-patterns-cards {
	position: relative;
	width: 100%;
	height: auto;
	display: block;
	margin-top: 8px;
	transform: translateY(-5px);
}

.splwb-qs-hot-tag {
	position: absolute;
	top: 9px;
	left: 9px;
	background: #cc1818;
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
	padding: 3px 9px;
	border-radius: 4px;
}

.splwb-qs-patterns-gradient {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px 58px;
	background: #FFFFFF66;
	filter: blur(2);
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.splwb-qs-patterns-text {
	color: #f26c0d;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}

.splwb-qs-patterns-content {
	padding: 24px;
	background: $white;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.splwb-qs-patterns-title {
	font-size: 18px;
	font-weight: 600;
	color: #2f2f2f;
	margin: 0;
	white-space: nowrap;
}

.splwb-qs-patterns-desc {
	font-size: 14px;
	color: #2f2f2f;
	line-height: 1.57;
	margin: 0;
}

.splwb-qs-patterns-btn-wrapper {
	padding-top: 6px;
}

.splwb-qs-patterns-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: $link-blue;
	color: $white;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	padding: 13px 18px;
	border-radius: 4px;
	transition: all .3s ease-in-out;

	svg {
		width: 14px;
		height: 14px;
	}

	&:hover {
		background: $link-blue-hover;
		color: #fff;
	}

	&:focus {
		color: #fff;
	}
}

// Go Pro Card
.splwb-qs-pro-card {
	background: linear-gradient(218.77605630233703deg, rgb(255, 246, 237) 0.73333%, rgba(255, 246, 237, 0.1) 99.413%), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
	border: 1px solid #e8d6bb;
	border-radius: 12px;
	overflow: hidden;
}

.splwb-qs-pro-content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.splwb-qs-pro-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.splwb-qs-pro-title {
	font-size: 18px;
	font-weight: 600;
	color: #2f2f2f;
	margin: 0;
	white-space: nowrap;
}

.splwb-qs-pro-desc {
	font-size: 14px;
	color: #2f2f2f;
	line-height: 1.5;
	margin: 0;
}

.splwb-qs-pro-features {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.splwb-qs-pro-feature {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	color: #2f2f2f;
	line-height: 1.25;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;

	> svg {
		opacity: 0;
		visibility: hidden;
		width: 12px;
		height: 12px;
		transition: all 0.2s ease;
		transform: translateX(-3px);
	}

	&:hover {
		text-decoration: underline;
		color: inherit;

		> svg {
			opacity: 1;
			visibility: visible;
			transform: translateX(0);
		}
	}

	&:focus {
		color: #2f2f2f;
	}
}

.splwb-qs-pro-icon {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	svg {
		width: 14px;
		height: 14px;
	}

	&.splwb-qs-pro-icon-blue {
		background: #e8edfa;
		color: $pro-icon-blue;
	}

	&.splwb-qs-pro-icon-green {
		background: #f2ede3;
		color: $pro-icon-green;
	}

	&.splwb-qs-pro-icon-pink {
		background: #f7edf5;
		color: $pro-icon-pink;
	}

	&.splwb-qs-pro-icon-cyan {
		background: #e2eef2;
		color: $pro-icon-cyan;
	}

	&.splwb-qs-pro-icon-red {
		background: #faebea;
		color: $pro-icon-red;
	}

	&.splwb-qs-pro-icon-lime {
		background: #e3edd8;
		color: $pro-icon-lime;
	}

	&.splwb-qs-pro-icon-purple {
		background: #efebfa;
		color: $pro-icon-purple;
	}

	&.splwb-qs-pro-icon-yellow {
		background: #faf2dc;
		color: #F9A825;
	}

	&.splwb-qs-pro-icon-green-light {
		background: #e2f0e2;
		color: $pro-icon-green-light;
	}

	&.splwb-qs-pro-icon-orange {
		background: #faece2;
		color: $pro-icon-orange;
	}
}

.splwb-qs-pro-link {
	color: #2f2f2f;
	text-decoration: underline;
	flex: 1;
	font-size: 16px;
	font-weight: 500;

	&:hover {
		color: $primary-color;
	}
}

.splwb-qs-pro-buttons {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-top: 4px;
}

.splwb-qs-pro-upgrade-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: $link-blue;
	color: $white;
	padding: 14px 24px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	transition: background 0.2s, color 0.2s;

	&:hover {
		background: $link-blue-hover;
		color: #fff;
	}

	&:focus {
		color: #fff;
	}
}

.splwb-qs-pro-compare-btn {
	display: block;
	text-align: center;
	color: #757575;
	font-size: 14px;
	font-weight: 500;
	padding: 14px 24px;
	transition: color 0.2s;
	background: transparent;
	border: none;
	cursor: pointer;
	text-decoration: underline;

	&:hover {
		color: $primary-color;
	}
}

// Info Cards (Documentation & Community)
.splwb-qs-info-card {
	background: $white;
	border: 1px solid $border-color;
	border-radius: 12px;
	padding: 28px;
}

.splwb-qs-info-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.splwb-qs-info-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	svg {
		width: 24px;
		height: 24px;
	}
}

.splwb-qs-info-title {
	font-size: 18px;
	font-weight: 600;
	color: #2f2f2f;
	margin: 0;
	text-transform: capitalize;
	line-height: 20px;
}

.splwb-qs-info-content-wrapper {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.splwb-qs-info-desc {
	font-size: 14px;
	color: #3c434a;
	line-height: 22px;
	margin: 0;
}

.splwb-qs-info-link-wrapper {
	display: flex;
	align-items: center;
}

.splwb-qs-info-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: $link-blue;
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	transition: color 0.2s;
	line-height: 13px;
	font-variation-settings: 'wdth' 100;
	white-space: nowrap;

	svg {
		width: 12px;
		height: 12px;
	}

	&:hover {
		color: $link-blue-hover;
	}
}

// ====================
// Responsive
// ====================

@media (max-width: 1200px) {
	.splwb-settings-getting-start-page-content {
		flex-direction: column;
	}

	.splwb-qs-sidebar {
		width: 100%;
		position: static;
	}

	.splwb-qs-blocks-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.splwb-qs-tutorials-grid {
		flex-direction: column;
	}
}

@media (max-width: 768px) {
	.splwb-settings-getting-start-page {
		padding: 0 20px;
	}

	.splwb-qs-about-content {
		flex-direction: column;
	}

	.splwb-qs-video-wrapper {
		width: 100%;
	}

	.splwb-qs-blocks-grid {
		grid-template-columns: 1fr;
	}
}