@import './variables';

body.toplevel_page_maxi-blocks-dashboard {
	background-color: var(--maxi-admin-white) !important;
	#wpfooter {
		position: static;
	}
}

body.toplevel_page_maxi-blocks-dashboard {
	.notice-warning {
		&.inline {
			margin: 20px 39px;
		}
	}
	#wpwrap {
		min-height: auto;
	}
	#wpbody {
		height: calc(100vh - 73px);
	}
	#wpcontent {
		padding-left: 0;
		.maxi-dashboard_wrap {
			// This is the black border around the edge of the dashboard
			background-color: var(--maxi-admin-white);
			border: 18px solid var(--maxi-admin-black);
			max-width: 1720px;
			width: 95%;
			margin: 30px auto 0;
			border-radius: 25px;
			& * {
				font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif !important;
			}
		}
	}
	.maxi-dashboard_header {
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
		border-bottom: 2px solid var(--maxi-admin-black);
		background-color: var(--maxi-admin-white);
		padding: 4px 23px;

		// Logo section
		.maxi-dashboard_logo {
			width: 190px;
			height: auto;
		}

		.nav-tab-wrapper {
			position: relative;
			z-index: 1;
			padding: 12px 39px 10px;
			margin-top: 0;
			border: none;
			background: var(--maxi-admin-white);
			margin-right: auto;

			.maxi-dashboard_nav-tab {
				position: relative;
				background: transparent;
				border: none;
				font-size: 20px;
				margin: 0;
				padding: 8px 16px;
				color: var(--maxi-admin-black-text);
				font-weight: 400;
				transition: all 0.5s ease;
				outline: none;
				box-shadow: none;

				&:after {
					display: none;
				}

				&:hover {
					color: var(--maxi-admin-pink-hover);
					background: transparent;
					border: none;
				}

				&.nav-tab-active {
					color: var(--maxi-admin-black);
					font-weight: 700;
				}
			}
		}

		// Header actions section
		.maxi-dashboard_header-actions {
			display: flex;
			align-items: center;
			gap: 10px;

			// Get Cloud button
			.maxi-dashboard_get-cloud-link {
				padding: 17px 33px;
				background: var(--maxi-admin-purple-hover);
				color: var(--maxi-admin-black);
				text-decoration: none;
				border-radius: 26px;
				font-size: 18px;
				font-weight: 700;
				transition: background 0.3s ease, transform 0.2s ease;

				&:hover {
					background: var(--maxi-admin-pink-hover) !important;
					transform: scale(1.035);
				}
			}

			// Icons container
			.maxi-dashboard_header-icons {
				display: flex;
				align-items: center;
				gap: 6px;

				.maxi-dashboard_header-icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 51px;
					height: 51px;
					background: var(--maxi-admin-light-grey);
					border-radius: 100%;
					transition: background-color 0.5s ease;

					&:hover {
						background: var(--maxi-admin-pink-hover) !important;
						transform: scale(1.035);
					}

					img {
						width: 25px;
						height: 25px;
					}
				}
			}
		}
	}

	.maxi-dashboard_form {
		.maxi-dashboard_main {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 0;
			max-width: 1150px;
			margin: 0 auto;
			padding-bottom: 60px; // Space behind intro title and sub text
			&:has(.maxi-dashboard_main-content-starter-sites) {
				max-width: 100%;
			}
			&:has(.maxi-dashboard_main-content-settings),
			&:has(.maxi-dashboard_main-content-maxi-ai) {
				max-width: 1208px;
				padding-bottom: 120px; // also the background intro title and sub text
			}
			#maxi-api-test {
				width: 1px !important;
				height: 1px !important;

				&__validation-message {
					width: 100%;
					&.api-loading {
						color: var(--maxi-secondary-color);
					}
					&.api-error {
						color: var(--maxi-orange-red);
					}
				}
			}
			&-content {
				//width: 70%;
				&:has(#maxi-copy-report) {
					width: 100%; //  seems only System status has this
				}
				&-start {
					width: 100%; // Welcome background space title and subtext
				}
				&-starter-sites {
					width: 100%;
				}
				&-settings {
					text-align: center;
					margin-top: 96px;
					margin-bottom: 42px; // System status + Maxi AI + Settings background behind intro text and subtext
					+ .maxi-dashboard_main-content_accordion_wrapper {
						width: 100%;
					}

					h1 {
						font-size: 50px !important;
						font-weight: 700;
						color: var(--maxi-admin-black);
						margin-bottom: 16px !important; // main title
					}

					p {
						font-size: 20px !important;
						color: var(--maxi-admin-black-text) !important;
						max-width: 510px;
						margin: 0 auto !important; // subtext
					}
				}
				h1,
				h2,
				h3 {
					margin-top: 0;
					line-height: 120%;
				}
				p {
					margin-top: 0;
					line-height: 160%;
				}
				h1 {
					color: var(--maxi-admin-black);
					margin-bottom: 13px;
				}
				h3,
				h1 {
					font-size: 32px;
					font-weight: 700;
				}
				h2 {
					font-size: 24px;
					font-weight: 500;
				}
				p {
					font-size: 14px;
					color: var(--maxi-admin-black-text);
					margin-bottom: 26px;
					&:nth-child(7),
					&:nth-child(3) {
						margin-bottom: 0;
					}
				}
				& > h3 {
					padding-top: 19px;
					border-top: 1px solid var(--maxi-admin-border-light);
					margin-bottom: 11px;
					&:first-of-type {
						margin-top: 52px;
					}
				}
				ol {
					margin: 4px 0 17px 43px;
					color: var(--maxi-admin-black-text);
					li {
						font-size: 16px;
					}
				}
				a {
					color: var(--maxi-admin-green);
					transition: all 0.4s ease;
					&:hover {
						color: var(--maxi-admin-purple-hover);
					}
				}
				&-start {
					padding-top: 95px; // welcome screen padding only
					h1 {
						margin-bottom: 18px;
						font-size: 47px;
					}
					h2 {
						margin-bottom: 15px;
						font-size: 30px;
						font-weight: 700;
					}
					& > h3 {
						padding-top: 0;
						border-top: 0;
						&:first-of-type {
							margin-top: 49px;
						}
					}
					p {
						font-size: 20px;
						color: var(--maxi-admin-black-text);
						margin-bottom: 0 !important;
						max-width: 600px;
						margin: 0 auto;
					}
				}
				&-pro-library {
					padding-top: 96px !important; // Starter sites top padding only
					h1 {
						font-size: 50px;
						margin-bottom: 18px !important;
						text-align: center;
					}
					h2 {
						margin-bottom: 29px;
						font-size: 20px;
						color: var(--maxi-admin-black-text);
						text-align: center;
					}
					p {
						font-size: 16px !important;
					}
				}
				&-logged-in {
					h1 {
						font-size: 40px;
					}
					h2 {
						margin-bottom: 23px;
						font-size: 25px;
						font-weight: 700;
					}
					h3 {
						margin-top: 23px !important;
						font-size: 20px;
					}
					h4 {
						margin: 19px 0 30px !important;
					}
					ul {
						li {
							&:not(:last-child) {
								margin-bottom: 7px;
							}
						}
					}
					ul.loggedin-bottom-menu {
						display: flex;
						margin-top: 20px;
						li {
							color: var(--maxi-admin-black-text);
							font-size: 14px;
							font-weight: 400;
							a {
								color: var(--maxi-admin-black-text);
							}
							&:not(:last-child):after {
								content: '|';
								margin: 0 5px;
							}
						}
					}
				}
			}
			.maxi-dashboard_main-content_accordion {
				position: relative;
				z-index: 2;
				// max-width: clamp(280px, 95%, 1000px);
				width: 95%;
				margin: 0 auto;
				&_wrapper {
					background-color: var(--maxi-admin-light-grey);
					padding-top: clamp(1vw, 8vw, 3vw) !important;
					padding-bottom: clamp(1vw, 8vw, 4vw) !important;
				}
				&#maxi-dashboard_main-content_starter-sites {
					max-width: 100%;
				}
				h3 {
					font-size: 16px;
					margin: 0;
				}
				h4 {
					font-size: 16px;
					font-weight: 700;
					color: var(--maxi-admin-green);
					margin: 0 0 10px;
				}
				p {
					margin: 15px 0 10px;
					font-size: 16px;
					color: var(--maxi-admin-black-text);
					&:last-child {
						margin: 0;
					}
				}
				&-item {
					width: 100%;
					background: var(--maxi-admin-white);
					border: 2px solid var(--maxi-admin-border-light);
					overflow: hidden;
					margin-bottom: 15px;
					border-radius: 10px;

					&-label {
						display: flex;
						justify-content: space-between;
						padding: 22px 22px 22px 32px;
						margin-bottom: -1px;
						font-weight: 700;
						cursor: pointer;
						background: var(--maxi-admin-white);
						border-radius: 8px;
						transition: all 0.3s ease;

						h3 {
							font-size: 20px !important;
							font-weight: 700;
							color: var(--maxi-admin-black);
							margin: 0;
						}

						&::after {
							content: '\276F';
							width: 24px;
							height: 24px;
							text-align: center;
							transition: all 0.5s;
							color: var(--maxi-admin-black);
							transform-origin: center;
							font-size: 16px;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.maxi-dashboard_main-content_accordion-item-content {
						display: none;

						&-switcher__label {
							color: var(--maxi-admin-black-text);
						}

						&-switcher__dropdown {
							select {
								border-radius: 10px;
								border: 2px solid var(--maxi-admin-border-light) !important;
								padding: clamp(4px, 1vw, 12px)
									clamp(15px, 2vw, 25px) !important;
								box-sizing: border-box;
								width: clamp(900px, 100vw, 45vw);
								display: block;
							}
						}
					}

					&-checkbox {
						display: none !important;

						&:checked {
							+ .maxi-dashboard_main-content_accordion-item-label {
								border-radius: 8px 8px 0 0;

								&::after {
									transform: rotate(90deg);
								}
							}

							~ .maxi-dashboard_main-content_accordion-item-content {
								display: block;
								border-top-width: 3px;
								border-color: var(--maxi-admin-border-light);
								max-height: 10000vh;
								padding: 25px 25px 20px 34px;
								transition: all 0.5s ease-in-out;
							}
						}
					}

					&-content {
						border-top: 0px solid var(--maxi-admin-border-light);
						background: white;
						max-height: 0;
						padding: 0 24px;
						transition: all 0.5s;
						overflow: hidden;

						&-setting {
							display: flex;
							flex-wrap: wrap;
							border-bottom: 3px dotted
								var(--maxi-admin-border-light);
							padding: 16px 0;

							&:last-child {
								border-bottom: none;
								padding-bottom: 0;
							}

							&:first-child {
								padding-top: 0;
							}
						}

						&-description {
							flex: 80%;
							padding-right: 40px;

							h4 {
								font-size: 16px;
								font-weight: 700;
								color: var(--maxi-admin-green);
								margin: 0 0 10px;
							}

							p {
								font-size: 16px !important;
								color: var(--maxi-admin-black-text) !important;
								line-height: 2 !important;
								margin: 0 !important;
							}
						}

						&-switcher {
							&__input {
								margin-top: clamp(5px, 1vw, 10px);
								margin-bottom: clamp(5px, 1vw, 10px);
								width: clamp(70vw, 100vw, 45vw) !important;

								input,
								textarea {
									border-radius: 10px;
									border: 2px solid
										var(--maxi-admin-border-light) !important;
									padding: 10px;
									box-sizing: border-box;
									width: clamp(70vw, 100vw, 45vw);
									display: block;
									max-width: 95%;
								}

								textarea {
									resize: none;
									margin-top: clamp(8px, 1vw, 15px);
									min-height: clamp(80px, 10vw, 120px);
									display: block;
								}
							}
							&__toggle {
								position: relative;
								cursor: pointer;

								input[type='checkbox'] {
									position: absolute;
									z-index: 1;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									padding: 0;
									border: none;
									margin: 0;
									opacity: 0;

									&:focus
										+ .maxi-toggle-switch__toggle__track {
										border-radius: 12px;
										box-shadow: 0 0 0 1px var(--maxi-grey);
										outline: 2px solid transparent;
									}

									&:checked
										~ .maxi-dashboard_main-content_accordion-item-content-switcher__toggle__thumb {
										background-color: var(
											--maxi-admin-green
										);
										border-color: var(--maxi-admin-green);
										-webkit-transform: translateX(20px);
										-ms-transform: translateX(20px);
										transform: translateX(20px);
									}
								}

								&__track {
									content: '';
									display: inline-block;
									box-sizing: border-box;
									vertical-align: top;
									width: 44px;
									height: 24px;
									background-color: var(--maxi-white);
									background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.8 8"><path d="M8.43.22A1 1 0 0 0 7 .37L2.93 5.48 1.72 4.21a1 1 0 0 0-1.41 0 1 1 0 0 0 0 1.41l2 2.1h.05a.83.83 0 0 0 .16.09l.1.06A1.15 1.15 0 0 0 3 8a.93.93 0 0 0 .4-.09l.11-.07a.71.71 0 0 0 .18-.12s0 0 0-.06l4.8-6A1 1 0 0 0 8.43.22Z"/></svg>'),
										url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="m5.6 4 2.55-2.55A.85.85 0 1 0 7 .25L4.4 2.8 1.85.25a.85.85 0 0 0-1.2 1.2L3.2 4 .65 6.55a.85.85 0 0 0 0 1.2.83.83 0 0 0 .6.25.82.82 0 0 0 .6-.25.82.82 0 0 0 .6-.25L4.4 5.2 7 7.75a.82.82 0 0 0 .6.25.83.83 0 0 0 .6-.25.85.85 0 0 0 0-1.2Z" transform="translate(-.4)"/></svg>');
									background-repeat: no-repeat, no-repeat;
									background-position: 8px center, 24px center;
									background-size: 10px auto, 10px auto;
									border: 1px solid var(--maxi-grey-light);
									border-radius: 12px;
									transition: 0.2s background ease;
								}
								&__thumb {
									position: absolute;
									top: 3px;
									left: 3px;
									display: block;
									box-sizing: border-box;
									width: 18px;
									height: 18px;
									background-color: var(--maxi-admin-white);
									border: 1px solid var(--maxi-grey-light);
									border-radius: 50%;
									transition: 0.1s transform ease;
								}
							}
						}

						.submit {
							padding: 15px 0 0;
							margin: 24px 0 0;
							text-align: left;

							.button-primary {
								background: var(--maxi-admin-black);
								border: none;
								border-radius: 26px;
								padding: 9px 19px;
								font-size: 14px;
								font-weight: 700;
								height: auto;
								line-height: 1.6;
								transition: background 0.4s ease,
									transform 0.2s ease;

								&:hover {
									background: var(--maxi-admin-pink-hover);
								}
							}
						}
					}
				}
			}
			#maxi-dashboard_main-content_pro-not-pro {
				display: none;
			}
			&-status {
				.maxi-status-table {
					padding: 20px !important;
					border-collapse: collapse;
					background-color: var(--maxi-admin-white);

					th {
						background: var(--maxi-admin-black);
						padding: 12px;
						text-align: left;
						border-bottom: 1px solid var(--maxi-admin-border-light);
						color: var(--maxi-admin-white);
						padding: 20px;
					}

					td {
						padding: 20px;
						border-bottom: 1px solid var(--maxi-admin-border-light);
					}

					.header-row td {
						font-weight: bold;
						background: var(--maxi-primary-color);
					}

					.status-ok span {
						background: var(--maxi-admin-white);
						color: var(--maxi-admin-green);
						padding: 0px;
						font-size: 14px;
						font-weight: 700;
						border-radius: 26px;
						text-decoration: none;
						position: relative;

						&::before {
							content: '\2713'; /* Unicode for check mark */
							color: var(--maxi-admin-green);
							margin-right: 8px;
							margin-left: 12px;
							font-size: 14px;
						}
					}

					.status-warning span {
						background: none !important;
						color: var(--maxi-admin-orange);
						padding: 4px 8px;
						border-radius: 3px;
						font-size: 14px;
						font-weight: 700;
						position: relative;

						&::before {
							content: '✖'; /* Unicode for cross mark */
							color: var(--maxi-admin-orange);
							margin-right: 8px;
						}
					}
				}

				.wrapper {
					padding: 50px; // Example padding for the wrapper
					background-color: var(
						--maxi-admin-light-grey
					); // Optional background color
				}
			}
		}
		&-sidebar {
			width: 100%;
			.maxi-dashboard_main-sidebar-item {
				background-color: var(--maxi-admin-white);
				padding: 20px 30px;
				margin-bottom: 31px;
				text-align: center;
				svg {
					margin-bottom: 7px;
				}
				p {
					font-size: 16px;
					color: var(--maxi-admin-black-text);
					font-weight: 700;
					margin: 0;
					line-height: 136%;
					a {
						color: var(--maxi-primary-color);
						&:hover {
							transition: all 0.4s ease;
							opacity: 0.5;
						}
					}
				}
			}
		}
	}
}

.maxi-dashboard-how-to-image {
	max-width: 700px;
}

.maxi-dashboard_main-content-status {
	padding: 20px;
}
body .plugins {
	.maxi-blocks-db-notice .notice-warning {
		margin-top: 0;
		button.notice-dismiss {
			padding-top: 7px;
		}
	}
}

@media only screen and (max-width: 1390px) {
	body.toplevel_page_maxi-blocks-dashboard {
		.maxi-dashboard_form {
			.maxi-dashboard_main {
				display: block;
				&-content {
					width: 100%;
					&-pro-library {
						width: 100%;
						ul.not_loggedin-bottom-menu {
							display: block;
							text-align: left;
							margin-top: 50px;

							li {
								display: inline-block;
								margin: 0 0 5px;
							}
						}
					}
				}
				&-sidebar {
					display: flex;
					width: 100%;
					max-width: unset;
					column-gap: 20px;

					&-item {
						a::before {
							content: '';
							display: block;
						}
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 767px) {
	body.toplevel_page_maxi-blocks-dashboard {
		.maxi-dashboard_form {
			.maxi-dashboard_main {
				display: block;
				&-content {
					&-pro-library,
					&-start {
						padding-top: 0;
						h1 {
							font-size: 36px;
						}
					}
					&-pro-library {
						h2,
						h3 {
							font-size: 18px;
						}
					}
				}
				&-sidebar {
					margin-top: 20px;
					flex-direction: column;
				}
			}
		}
	}
}

@media only screen and (max-width: 480px) {
	body.toplevel_page_maxi-blocks-dashboard {
		.notice-warning {
			&.inline {
				margin: 20px;
			}
		}
		.nav-tab-wrapper {
			padding: 0 20px 53px;
		}
		.maxi-dashboard_header {
			padding: 21px 20px 34px;
		}
		.maxi-dashboard_form {
			.maxi-dashboard_main {
				padding: 0 20px;
				&-content {
					.maxi-dashboard_main-content_accordion-item-content-description {
						-webkit-box-flex: 70%;
						-ms-flex: 70%;
						flex: 76%;
						padding-right: 10px;
					}
					&-pro-library {
						text-align: center;
						ul.not_loggedin-bottom-menu {
							display: block;
							text-align: center;
							li {
								display: inline-block;
								margin: 0 5px 5px;
								&::after {
									display: none;
								}
							}
						}
						.sign-up_button-wrap {
							flex-direction: column;
							align-items: center;
							row-gap: 10px;
						}
					}
					&-pro-library,
					&-start {
						h1 {
							font-size: 30px;
						}
					}
				}
			}
		}
	}
}

/*******************************
* RTL
*******************************/
html[dir='rtl'] {
	.maxi-dashboard_main-content_accordion-item-content-description {
		padding-right: 0 !important;
		padding-left: 30px;
	}

	.maxi-dashboard_main-content ol {
		margin: 4px 43px 17px 0 !important;
	}
}

/** Hide maxi-image-type template from the editor */
body.site-editor-php
	.edit-site-add-new-template__template-button.components-button:has(.edit-site-add-new-template__template-name
		span[data-wp-component='Text']:contains('maxi-image-type')) {
	display: none !important;
	background: var(--maxi-admin-light-orange);
}

.maxi-dashboard_setup-wizard-button {
	display: inline-block;
	font-size: 16px;
	line-height: 20px;
	margin: 0 20px;
	padding: 12px 24px;
	background-color: var(--maxi-admin-black);
	color: var(--maxi-admin-white) !important;
	text-decoration: none;
	border-radius: 26px;
	font-weight: 500;
	transition: all 0.4s ease;
}

.maxi-dashboard_setup-wizard-button:hover {
	background-color: var(--maxi-admin-black-text);
	color: var(--maxi-admin-white);
	transition: all 0.4s ease;
}

.maxi-dashboard_setup-wizard-button:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--maxi-admin-white),
		0 0 0 4px var(--maxi-admin-black);
	color: var(--maxi-admin-white);
}

.maxi-dashboard_main-content-start {
	padding: 34px 0;

	.welcome-header {
		text-align: center;
		margin-bottom: 85px;

		h1 {
			margin-bottom: 27px;
			font-size: 50px;
		}

		p {
			font-size: 16px;
			color: var(--maxi-admin-black-text);
			margin-bottom: 10px;

			&:last-of-type {
				margin-bottom: 30px;
			}
		}

		.welcome-actions {
			display: flex;
			gap: 16px;
			justify-content: center;
			margin-top: 29px;

			.button {
				padding: 5px 50px;
				font-size: 19px;
				font-weight: 700;
				border-radius: 26px;
				text-decoration: none;
				transition: background 0.1s ease, transform 0.3s ease;
				box-shadow: none;

				// Universal hover for all .button variants
				&:hover {
					background: var(--maxi-admin-green) !important;
					transition: all 0.5s ease;
				}

				&.quick-start {
					background: var(--maxi-admin-black);
					color: var(--maxi-admin-white);
					border: none;
				}

				&.create-new {
					background: var(--maxi-admin-black);
					color: var(--maxi-admin-white);
					border: none;
					padding: 5px 25px;
					transition: background 0.1s ease, transform 0.3s ease;
					transition: all 0.5s ease;

					&:hover {
						background: var(--maxi-admin-light-orange) !important;
						transition: all 0.5s ease;
					}
				}
			}
		}
	}

	.welcome-preview {
		margin: 40px 0;

		.preview-placeholder {
			width: 100%;
			height: auto;
			border-radius: 8px;
			display: block;
		}
	}

	.learn-section {
		text-align: center;
		margin: 80px 0 85px;

		h2 {
			font-size: 32px;
			margin-bottom: 20px;
		}

		p {
			font-size: 16px !important;
			color: var(--maxi-admin-black-text);
			margin-bottom: 50px;
		}

		.video-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px 24px;
			margin: 30px 0;
			position: relative;

			// &::before {
			// }

			.video-item {
				text-align: left;
				position: relative;
				z-index: 2;
				transition: border 0.3s ease;
				border: 2px solid var(--maxi-admin-border-light);
				border-radius: 20px;
				padding: 20px;
				text-decoration: none;
				a {
					text-decoration: none;
				}

				&:hover {
					border: 2px solid var(--maxi-admin-green);
					& > * {
						opacity: 0.7;
						transition: opacity 0.3s ease;
					}
				}

				.video-thumbnail {
					aspect-ratio: 16/9;
					background: var(--maxi-admin-light-grey);
					margin-bottom: 28px;
					overflow: hidden;
					transition: transform 0.2s ease, border 0.3s ease;
					border: 2px solid var(--maxi-admin-border-light);

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				h3 {
					font-size: 20px;
					margin-bottom: 13px;
				}

				p {
					font-size: 16px;
					line-height: 27px;
					margin-bottom: 0;
				}
			}
		}

		.more-videos {
			margin-top: 65px;

			.button {
				padding: 6px 30px;
				font-size: 18px;
				background: var(--maxi-admin-black);
				color: var(--maxi-admin-white);
				border: none;
				border-radius: 27px;
				font-weight: 700;
				box-shadow: none;
				overflow: hidden;
				transition: background 0.3s ease, transform 0.2s ease;
				transition: all 0.5s ease;

				&:hover {
					background: var(--maxi-admin-green) !important;
					color: var(--maxi-admin-white);
					transition: all 0.5s ease;
				}
			}
		}
	}

	.bottom-ctas {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		margin: 60px 0;

		.cta-item {
			text-align: center;
			padding: 75px 40px 58px;
			border-radius: 30px;
			background-color: var(--maxi-admin-light-grey);

			.cta-icon {
				max-width: 100px;
				margin: 0 auto 16px;
				display: block;
			}

			h3 {
				font-size: 25px !important;
				margin-bottom: 8px;
			}

			p {
				font-size: 18px !important;
				color: var(--maxi-admin-black-text) !important;
				font-size: 18px !important;
				line-height: 27px !important;
			}

			.button {
				padding: 5px 40px;
				font-size: 18px;
				font-weight: 700;
				background: var(--maxi-admin-black);
				color: var(--maxi-admin-white);
				border: none;
				border-radius: 26px;
				text-decoration: none;
				margin-top: 18px;
				box-shadow: none;
				transition: background 0.3s ease, transform 0.2s ease;

				&:hover {
					background: var(--maxi-primary-color) !important;
					color: var(--maxi-admin-white);
				}
			}
			&:nth-child(2) {
				.button {
					padding: 5px 57px;
				}
			}
		}
	}
}
@media only screen and (max-width: 1710px) {
	.nav-tab-wrapper {
		padding: 12px 5px 10px !important;
		display: flex;
		justify-content: center !important;
		width: 80% !important;
	}
	.maxi-dashboard_nav-tab {
		font-size: 18px !important;
		padding: 8px 8px !important;
		text-align: center;
	}
	.maxi-dashboard_header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.maxi-dashboard_logo {
			width: 18% !important;
		}

		.maxi-dashboard_header-actions {
			width: 35%;
			display: flex;
			justify-content: flex-end;
			margin-left: auto;
		}
	}
}
@media only screen and (max-width: 1500px) {
	.maxi-dashboard_main {
		display: flex;
		justify-content: space-between;
		padding: 0;
		max-width: 95% !important;
		margin: 0 auto;
		padding-bottom: 60px;
	}

	.maxi-dashboard_nav-tab {
		font-size: 16px !important;
	}
}
@media only screen and (max-width: 1400px) {
	.maxi-dashboard_header {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 10px 20px !important;
	}

	.maxi-dashboard_logo {
		width: 160px !important;
		height: auto;
		margin: 0 !important;
	}

	.nav-tab-wrapper {
		padding: 0 !important;
		display: flex !important;
		justify-content: center !important;
		width: auto !important;
		margin: 0 20px !important;
	}

	.maxi-dashboard_nav-tab {
		font-size: 16px !important;
		padding: 0 15px !important;
		text-align: center !important;
	}

	.maxi-dashboard_header-actions {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		position: static !important;
		width: auto !important;
		margin: 0 !important;
	}

	.maxi-dashboard_get-cloud-link {
		padding: 12px 20px !important;
		font-size: 16px !important;
	}

	.maxi-dashboard_header-icons {
		display: none !important;
	}
}

@media only screen and (max-width: 1280px) {
	.maxi-dashboard_header {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 15px 2.5% !important;
		gap: clamp(10px, 1vw, 20px) !important;
	}

	.maxi-dashboard_logo {
		width: clamp(120px, 8vw, 160px) !important;
		height: auto;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}

	.nav-tab-wrapper {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 1 !important;
		margin: 0 !important;
		padding: 0 !important;
		min-width: 0 !important;
	}

	.maxi-dashboard_nav-tab {
		font-size: 13px !important;
		padding: 10px !important;
		text-align: center !important;
		white-space: nowrap !important;
	}

	.maxi-dashboard_header-actions {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}

	.maxi-dashboard_get-cloud-link {
		padding: clamp(8px, 1vw, 12px) clamp(15px, 2vw, 20px) !important;
		font-size: clamp(14px, 1.2vw, 16px) !important;
		white-space: nowrap !important;
	}

	.maxi-dashboard_header-icons {
		display: none !important;
	}
	body.toplevel_page_maxi-blocks-dashboard
		.maxi-dashboard_form
		.maxi-dashboard_main-content
		h1 {
		font-size: 32px !important;
	}
	body.toplevel_page_maxi-blocks-dashboard
		.maxi-dashboard_form
		.maxi-dashboard_main-content-settings {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	body.toplevel_page_maxi-blocks-dashboard
		.maxi-dashboard_form
		.maxi-dashboard_main:has(.maxi-dashboard_main-content-settings),
	body.toplevel_page_maxi-blocks-dashboard
		.maxi-dashboard_form
		.maxi-dashboard_main:has(.maxi-dashboard_main-content-maxi-ai) {
		padding-bottom: 15px;
	}
	.maxi-dashboard_main-content-license input {
		width: 100% !important;
		max-width: 100% !important;
	}
	body.toplevel_page_maxi-blocks-dashboard
		.maxi-dashboard_form
		.maxi-dashboard_main-content-pro-library {
		padding-top: 20px !important;
	}
	.maxi-dashboard_main-content-start .welcome-header {
		margin-bottom: 0;
	}
}
@media only screen and (max-width: 1124px) {
	.maxi-dashboard_main-content-start {
		.video-grid {
			grid-template-columns: repeat(2, 1fr) !important;
			gap: 24px !important;
			width: 100% !important;
		}
	}
	.maxi-dashboard_main-content-start {
		.bottom-ctas {
			display: grid;
			grid-template-columns: repeat(2, 1fr) !important;
			gap: 24px;
			margin: 60px 0;
			width: 100% !important;
		}
	}

	.maxi-dashboard_header-actions {
		display: none !important;
	}
}

@media only screen and (max-width: 1024px) {
	.maxi-dashboard_main-content-start {
		.video-grid {
			grid-template-columns: repeat(2, 1fr) !important;
		}
	}

	body.toplevel_page_maxi-blocks-dashboard
		.maxi-dashboard_header
		.maxi-dashboard_header-actions
		.maxi-dashboard_header-icons {
		display: none !important;
	}
}
@media only screen and (max-width: 900px) {
	.maxi-dashboard_header {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px) !important;
	}

	.maxi-dashboard_logo {
		width: clamp(140px, 14vw, 160px) !important;
		height: auto;
	}

	.nav-tab-wrapper {
		flex: 1 !important;
		display: flex !important;
		justify-content: center !important;
		gap: 0 !important;
		margin: 0 clamp(6px, 1vw, 10px) !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.maxi-dashboard_nav-tab {
		padding: 10px !important;
		white-space: nowrap !important;
	}

	.maxi-dashboard_header-actions {
		display: none !important;
	}
}
@media only screen and (max-width: 767px) {
	.maxi-dashboard_main-content-start {
		.video-grid {
			grid-template-columns: 1fr !important;
		}

		.bottom-ctas {
			grid-template-columns: 1fr !important;
		}

		.welcome-header {
			h1 {
				font-size: 36px;
			}
		}
	}
}

@media only screen and (max-width: 767px) {
	.maxi-dashboard_header {
		flex-direction: column;
		gap: 16px;
		padding: 16px;

		.maxi-dashboard_header-actions {
			width: 100%;
			justify-content: center;
		}
	}

	.nav-tab-wrapper {
		padding: 0 16px 16px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;

		&::-webkit-scrollbar {
			display: none;
		}
	}
}

@media only screen and (max-width: 480px) {
	.maxi-dashboard_header {
		.maxi-dashboard_header-actions {
			flex-direction: column;
			gap: 16px;
		}
	}
}

// License page styles
.maxi-dashboard_main-content-license {
	.maxi-license-status-display {
		margin: 20px 0;

		h4 {
			margin: 8px 0;
			font-size: 16px;
			color: var(--maxi-admin-black-text);

			span {
				font-weight: 600;
				color: var(--maxi-admin-black);
			}
		}
	}

	.maxi-license-actions {
		margin: 20px 0;
	}

	.maxi-license-auth-form {
		h4 {
			margin: 0 0 8px 0;
			font-size: 16px;
			font-weight: 600;
			color: var(--maxi-admin-black);
		}

		p {
			margin: 0 0 16px 0;
			color: var(--maxi-admin-black-text);
		}
	}

	.maxi-license-input-wrapper {
		display: flex;
		gap: 12px;
		align-items: flex-start;
		margin: 16px 0;
		flex-direction: column;
		justify-content: space-between;

		input {
			flex: 1;
			padding: 8px 12px;
			border: 1px solid #ddd;
			border-radius: 4px;
			font-size: 14px;
			width: 100%;

			&:focus {
				border-color: var(--maxi-admin-purple-hover);
				outline: none;
				box-shadow: 0 0 0 1px var(--maxi-admin-purple-hover);
			}
		}
	}

	.maxi-license-message {
		padding: 12px 16px;
		border-radius: 4px;
		margin: 16px 0;
		font-size: 14px;

		&.success,
		&.maxi-license-success {
			background: #d4edda;
			color: #155724;
			border: 1px solid #c3e6cb;
		}

		&.error,
		&.maxi-license-error {
			background: #f8d7da;
			color: #721c24;
			border: 1px solid #f5c6cb;
		}
	}

	button.button-primary {
		background: var(--maxi-admin-black);
		border: none;
		border-radius: 26px;
		padding: 9px 19px;
		font-size: 14px;
		font-weight: 700;
		height: auto;
		line-height: 1.6;
		transition: background 0.4s ease, transform 0.2s ease,
			-webkit-transform 0.2s ease;

		&#maxi-validate-purchase-code {
			margin-top: 0;
		}

		&:hover {
			background: var(--maxi-admin-pink-hover);
		}
	}
	input {
		border-radius: 10px;
		border: 2px solid var(--maxi-admin-border-light) !important;
		padding: 10px;
		box-sizing: border-box;
		width: clamp(70vw, 100vw, 45vw);
		display: block;
		max-width: 95%;
	}
}

p.maxi-license-help-text {
	margin-top: 10px !important;
}

@media only screen and (max-width: 767px) {
	.maxi-dashboard_main-content-license {
		.maxi-license-input-wrapper {
			flex-direction: column;
			align-items: stretch;

			button {
				width: 100%;
			}
		}
	}
}

.maxi-custom-fonts-manager {
	margin-top: 24px;
	// padding: 20px;
	// background: #f8f9fa;
	// border: 1px solid #e2e4e7;
	// border-radius: 8px;

	h4 {
		margin-top: 0;
		margin-bottom: 8px;
		font-size: 15px;
		font-weight: 600;
		color: #1e1e1e;
	}

	> p {
		margin-top: 0;
		margin-bottom: 16px;
		color: #50575e;
	}

	#maxi-custom-fonts-notice {
		margin-bottom: 12px;

		.notice {
			margin: 0;
		}
	}

	.maxi-custom-fonts-form {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 20px;
		padding: 16px;
		background: #fff;
		border: 1px solid #e2e4e7;
		border-radius: 6px;
	}

	.maxi-custom-fonts-field {
		display: flex;
		flex-direction: column;
		gap: 6px;

		label {
			font-weight: 600;
			font-size: 13px;
			color: var(--maxi-admin-black);
		}

		input[type='text'] {
			width: 100%;
			max-width: 400px;
			padding: 8px 12px;
			border: 1px solid var(--maxi-admin-grey);
			border-radius: 4px;
			font-size: 14px;
			transition: border-color 0.15s ease, box-shadow 0.15s ease;

			&:focus {
				border-color: var(--maxi-admin-green);
				box-shadow: 0 0 0 1px var(--maxi-admin-green);
				outline: none;
			}

			&::placeholder {
				color: var(--maxi-admin-grey);
			}
		}

		input[type='file'] {
			padding: 8px 0;
			font-size: 13px;
			cursor: pointer;

			&::file-selector-button {
				padding: 6px 12px;
				margin-right: 12px;
				background: var(--maxi-admin-light-grey);
				border: 1px solid var(--maxi-admin-grey);
				border-radius: 4px;
				font-size: 13px;
				cursor: pointer;
				transition: background 0.15s ease, border-color 0.15s ease;

				&:hover {
					background: var(--maxi-admin-mint-hover);
					border-color: var(--maxi-admin-black-hover);
				}
			}
		}

		.description {
			margin: 4px 0 0;
			font-size: 12px;
			color: var(--maxi-admin-grey);
		}
	}

	#maxi-custom-font-submit {
		align-self: flex-start;
		padding: 8px 16px;
		font-size: 13px;
	}

	.submit {
		margin-top: 5px;

		.button-primary {
			color: var(--maxi-admin-white) !important;
			margin-bottom: 10px;
		}
	}

	.maxi-custom-fonts-list {
		border: 1px solid var(--maxi-admin-border-light);
		border-radius: 8px;
		overflow: hidden;

		thead {
			background-color: var(--maxi-admin-green);

			th {
				color: var(--maxi-admin-white);
				font-weight: 600;
				padding: 12px 15px;
				border: none;
			}
		}

		tbody {
			tr {
				&:nth-child(odd) {
					background-color: var(--maxi-admin-light-grey);
				}

				&:nth-child(even) {
					background-color: var(--maxi-admin-white);
				}

				&:hover {
					background-color: var(--maxi-admin-mint-hover);
				}

				td {
					padding: 10px 15px;
					border: none;
					border-bottom: 1px solid var(--maxi-admin-border-light);
					color: var(--maxi-admin-black);
				}
			}
		}
	}

	.maxi-custom-fonts-status {
		font-weight: 500;

		&.is-success {
			color: var(--maxi-admin-green);
		}

		&.is-error {
			color: var(--maxi-admin-orange-hover);
		}

		&.is-loading {
			color: var(--maxi-admin-green);
		}
	}

	.maxi-custom-fonts-empty {
		color: var(--maxi-admin-grey);
		font-style: italic;
		margin: 0;
		padding: 16px;
		background: var(--maxi-admin-white);
		border: 1px dashed var(--maxi-admin-grey);
		border-radius: 6px;
		text-align: center;
	}

	.maxi-custom-fonts-list {
		margin-top: 16px;
		border-radius: 6px;
		overflow: hidden;
		table-layout: fixed;
		width: 100%;

		thead th {
			background: var(--maxi-admin-green);
			color: var(--maxi-admin-white);
			font-weight: 600;
			font-size: 13px;
			padding: 10px 12px;
			text-align: left;

			&:nth-child(1) {
				width: 35%;
			}

			&:nth-child(2),
			&:nth-child(3) {
				width: 22%;
			}

			&:nth-child(4) {
				width: 21%;
			}
		}

		tbody td {
			padding: 12px;
			font-size: 13px;
			vertical-align: middle;

			&:first-child {
				max-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				strong {
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.maxi-font-weights,
		.maxi-font-styles {
			display: inline-block;
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
				sans-serif;
		}

		.button-link-delete {
			color: var(--maxi-admin-orange-hover);
			text-decoration: none;
			cursor: pointer;
			background: none;
			border: none;
			padding: 4px 8px;
			font-size: 13px;
			transition: color 0.15s ease;

			&:hover {
				color: var(--maxi-admin-orange);
			}

			&:disabled {
				color: var(--maxi-admin-grey);
				cursor: not-allowed;
			}
		}
	}
}