/* Add here all your CSS customizations */
		/* =========================================================
   COLOR PALETTE
========================================================= */

		:root {

			--primary: #c57803;
			--secondary: #b28a4d;

			--ink: #222222;

			--paper: #F8F9FA;

			--white: #FFFFFF;

			--night: #001526;
			--night-2: #14223d;

			--line: #E7E4DF;

		}


		/* =========================================================
   PAGE
========================================================= */

		.crm-login-page {

			width: 100%;
			min-height: 100vh;

			background: var(--paper);

			display: flex;
			align-items: center;
			justify-content: center;

			padding: 18px;

			box-sizing: border-box;

		}


		/* =========================================================
   MAIN LOGIN CONTAINER
========================================================= */

		.crm-login-wrapper {

			width: 100%;
			max-width: 1080px;

			height: min(650px, calc(100vh - 36px));

			display: grid;
			grid-template-columns: 47% 53%;

			background: var(--white);

			border-radius: 18px;

			overflow: hidden;

			border: 1px solid var(--line);

			box-shadow:
				0 18px 50px rgba(0, 21, 38, 0.10);

		}


		/* =========================================================
   LEFT BRAND AREA
========================================================= */

		.crm-login-brand {

			position: relative;

			background:
				linear-gradient(145deg,
					var(--night) 0%,
					var(--night-2) 100%);

			color: var(--white);

			padding: 42px;

			display: flex;
			align-items: center;

			overflow: hidden;

		}


		/* Decorative Circle */

		.crm-login-brand::before {

			content: "";

			position: absolute;

			width: 360px;
			height: 360px;

			border: 1px solid rgba(197, 120, 3, 0.22);

			border-radius: 50%;

			top: -190px;
			right: -150px;

		}


		/* Decorative Circle */

		.crm-login-brand::after {

			content: "";

			position: absolute;

			width: 270px;
			height: 270px;

			border: 1px solid rgba(178, 138, 77, 0.13);

			border-radius: 50%;

			bottom: -160px;
			left: -130px;

		}


		.brand-content {

			position: relative;

			z-index: 2;

			width: 100%;

		}


		/* =========================================================
   BRAND LOGO
========================================================= */

		.brand-logo {

			display: flex;

			align-items: center;

			gap: 12px;

			margin-bottom: 52px;

		}


		.brand-logo-icon {

			width: 46px;
			height: 46px;

			flex-shrink: 0;

			border-radius: 11px;

			background: rgba(197, 120, 3, 0.14);

			border: 1px solid rgba(197, 120, 3, 0.30);

			display: flex;

			align-items: center;
			justify-content: center;

			color: var(--primary);

			font-size: 19px;

		}


		.brand-logo h2 {

			margin: 0;

			color: var(--white);

			font-size: 20px;

			font-weight: 700;

		}


		.brand-logo span {

			display: block;

			margin-top: 2px;

			color: rgba(255, 255, 255, 0.48);

			font-size: 10px;

		}


		/* =========================================================
   BRAND MESSAGE
========================================================= */

		.brand-badge {

			display: inline-flex;

			align-items: center;

			gap: 7px;

			padding: 6px 11px;

			border-radius: 50px;

			background: rgba(197, 120, 3, 0.11);

			border: 1px solid rgba(197, 120, 3, 0.22);

			color: #d9ad69;

			font-size: 10px;

			font-weight: 600;

			margin-bottom: 15px;

		}


		.brand-message h1 {

			max-width: 400px;

			margin: 0 0 14px;

			color: var(--white);

			font-size: 40px;

			line-height: 1.08;

			font-weight: 700;

			letter-spacing: -1.2px;

		}


		.brand-message h1 span {

			color: var(--primary);

		}


		.brand-message p {

			max-width: 405px;

			margin: 0;

			color: rgba(255, 255, 255, 0.58);

			font-size: 13px;

			line-height: 1.7;

		}


		/* =========================================================
   FEATURES
========================================================= */

		.brand-features {

			margin-top: 30px;

			display: flex;

			flex-direction: column;

			gap: 13px;

		}


		.brand-feature {

			display: flex;

			align-items: center;

			gap: 11px;

		}


		.feature-icon {

			width: 35px;
			height: 35px;

			flex-shrink: 0;

			border-radius: 9px;

			background: rgba(255, 255, 255, 0.055);

			border: 1px solid rgba(255, 255, 255, 0.08);

			display: flex;

			align-items: center;
			justify-content: center;

			color: var(--secondary);

			font-size: 13px;

		}


		.brand-feature strong {

			display: block;

			margin-bottom: 2px;

			color: var(--white);

			font-size: 11px;

			font-weight: 600;

		}


		.brand-feature span {

			display: block;

			color: rgba(255, 255, 255, 0.40);

			font-size: 9px;

		}


		/* =========================================================
   RIGHT LOGIN AREA
========================================================= */

		.crm-login-form-section {

			display: flex;

			align-items: center;

			justify-content: center;

			padding: 35px 55px;

			background: var(--white);

		}


		.crm-login-form-wrapper {

			width: 100%;

			max-width: 380px;

		}


		/* =========================================================
   MOBILE BRAND
========================================================= */

		.mobile-brand {

			display: none;

		}


		/* =========================================================
   LOGIN HEADING
========================================================= */

		.login-heading {

			margin-bottom: 27px;

		}


		.login-small-title {

			display: inline-block;

			margin-bottom: 7px;

			color: var(--primary);

			font-size: 10px;

			font-weight: 700;

			text-transform: uppercase;

			letter-spacing: 1px;

		}


		.login-heading h3 {

			margin: 0 0 7px;

			color: var(--ink);

			font-size: 27px;

			line-height: 1.2;

			font-weight: 700;

		}


		.login-heading p {

			margin: 0;

			color: #858585;

			font-size: 12px;

			line-height: 1.5;

		}


		/* =========================================================
   ERROR MESSAGE
========================================================= */

		.crm-alert {

			display: flex;

			align-items: center;

			gap: 9px;

			padding: 10px 12px;

			margin-bottom: 18px;

			border-radius: 8px;

			font-size: 11px;

		}


		.crm-alert-danger {

			color: #a33333;

			background: #fff5f5;

			border: 1px solid #f2d4d4;

		}


		.alert-icon {

			font-size: 14px;

		}


		/* =========================================================
   FORM
========================================================= */

		.crm-login-form {

			width: 100%;

		}


		.crm-form-group {

			margin-bottom: 18px;

		}


		.crm-form-group label {

			display: block;

			margin-bottom: 7px;

			color: var(--ink);

			font-size: 11px;

			font-weight: 600;

		}


		/* =========================================================
   INPUT
========================================================= */

		.crm-input-wrapper {

			position: relative;

			width: 100%;

		}


		.crm-input-icon {

			position: absolute;

			left: 14px;

			top: 50%;

			transform: translateY(-50%);

			color: #a39d94;

			font-size: 13px;

			pointer-events: none;

		}


		.crm-input {

			width: 100%;

			height: 48px;

			padding: 0 14px 0 41px;

			box-sizing: border-box;

			border: 1px solid var(--line);

			border-radius: 8px;

			background: var(--white);

			color: var(--ink);

			font-size: 12px;

			outline: none;

			transition: all 0.2s ease;

		}


		.crm-input::placeholder {

			color: #aaa59e;

		}


		.crm-input:hover {

			border-color: var(--secondary);

		}


		.crm-input:focus {

			border-color: var(--primary);

			box-shadow:
				0 0 0 3px rgba(197, 120, 3, 0.09);

		}


		.crm-input:focus+* {

			color: var(--primary);

		}


		/* =========================================================
   LOGIN BUTTON
========================================================= */

		.crm-login-button-wrapper {

			margin-top: 5px;

		}


		.crm-login-button {

			width: 100%;

			height: 48px;

			border: 0;

			border-radius: 8px;

			background: var(--primary);

			color: var(--white);

			display: flex;

			align-items: center;

			justify-content: center;

			gap: 10px;

			font-size: 12px;

			font-weight: 600;

			cursor: pointer;

			transition: all 0.25s ease;

		}


		.crm-login-button i {

			font-size: 11px;

			transition: transform 0.25s ease;

		}


		.crm-login-button:hover {

			background: #a96502;

			box-shadow:
				0 7px 18px rgba(197, 120, 3, 0.22);

		}


		.crm-login-button:hover i {

			transform: translateX(3px);

		}


		.crm-login-button:active {

			transform: translateY(1px);

		}


		/* =========================================================
   SECURITY NOTE
========================================================= */

		.crm-security-note {

			margin-top: 15px;

			display: flex;

			align-items: center;

			justify-content: center;

			gap: 6px;

			color: #a39d94;

			font-size: 9px;

		}


		.crm-security-note i {

			color: var(--secondary);

			font-size: 10px;

		}


		/* =========================================================
   FOOTER
========================================================= */

		.crm-login-footer {

			margin-top: 30px;

			padding-top: 15px;

			border-top: 1px solid var(--line);

			display: flex;

			align-items: center;

			justify-content: center;

			gap: 8px;

			color: #a39d94;

			font-size: 9px;

		}


		.footer-dot {

			color: var(--secondary);

		}


		/* =========================================================
   TABLET
========================================================= */

		@media (max-width: 991px) {

			.crm-login-page {

				padding: 15px;

			}


			.crm-login-wrapper {

				max-width: 650px;

				height: auto;

				min-height: 560px;

				grid-template-columns: 1fr;

			}


			.crm-login-brand {

				display: none;

			}


			.crm-login-form-section {

				min-height: 560px;

				padding: 40px;

			}


			.mobile-brand {

				display: block;

				text-align: center;

				margin-bottom: 32px;

			}


			.mobile-brand-icon {

				width: 46px;

				height: 46px;

				margin: 0 auto 9px;

				border-radius: 11px;

				background: var(--night);

				color: var(--primary);

				display: flex;

				align-items: center;
				justify-content: center;

				font-size: 18px;

			}


			.mobile-brand h2 {

				margin: 0;

				color: var(--night);

				font-size: 19px;

				font-weight: 700;

			}


			.mobile-brand p {

				margin: 3px 0 0;

				color: #999;

				font-size: 9px;

			}

		}


		/* =========================================================
   MOBILE
========================================================= */

		@media (max-width: 575px) {

			.crm-login-page {

				min-height: 100dvh;

				padding: 0;

				background: var(--white);

				align-items: stretch;

			}


			.crm-login-wrapper {

				width: 100%;

				min-height: 100dvh;

				border-radius: 0;

				border: 0;

				box-shadow: none;

			}


			.crm-login-form-section {

				min-height: 100dvh;

				padding: 28px 20px;

				align-items: flex-start;

			}


			.crm-login-form-wrapper {

				max-width: 100%;

				padding-top: 5px;

			}


			.mobile-brand {

				margin-bottom: 28px;

			}


			.mobile-brand-icon {

				width: 43px;

				height: 43px;

				font-size: 17px;

			}


			.mobile-brand h2 {

				font-size: 18px;

			}


			.login-heading {

				margin-bottom: 23px;

			}


			.login-small-title {

				font-size: 9px;

			}


			.login-heading h3 {

				font-size: 24px;

			}


			.login-heading p {

				font-size: 11px;

			}


			.crm-form-group {

				margin-bottom: 16px;

			}


			.crm-input {

				height: 47px;

			}


			.crm-login-button {

				height: 47px;

			}


			.crm-security-note {

				margin-top: 13px;

			}


			.crm-login-footer {

				margin-top: 25px;

			}

		}


		/* =========================================================
   SMALL MOBILE
========================================================= */

		@media (max-width: 360px) {

			.crm-login-form-section {

				padding: 23px 16px;

			}


			.mobile-brand {

				margin-bottom: 23px;

			}


			.login-heading h3 {

				font-size: 22px;

			}


			.crm-input {

				height: 45px;

			}


			.crm-login-button {

				height: 45px;

			}

		}