[x-cloak] { display: none !important; }
		
		/* RTL Enhancements for Persian */
		[dir="rtl"] {
			font-family: 'IRANYekanXV', 'Tahoma', sans-serif;
		}
		
		[dir="rtl"] .flex {
			direction: rtl;
		}
		
		[dir="rtl"] .flex-1 {
			text-align: right;
		}
		
		/* Toast RTL support (fallback) */
		[dir="rtl"] toast-message,
		toast-message[dir="rtl"] {
			font-family: 'IRANYekanXV', 'Tahoma', sans-serif !important;
			text-align: right !important;
			direction: rtl !important;
		}
		
		/* Force RTL for Persian content in toasts */
		toast-message {
			font-family: 'IRANYekanXV', 'Tahoma', sans-serif !important;
			direction: rtl !important;
			text-align: right !important;
		}
		
		/* Better support for Persian numbers */
		input[type="tel"], input[name="code"] {
			font-variant-numeric: lining-nums;
			letter-spacing: 0.1em;
		}
		
		/* Style for Persian/Arabic text inputs */
		input[dir="rtl"] {
			text-align: right;
			font-family: 'IRANYekanXV', 'Tahoma', sans-serif;
		}
		
		toast-message div {
			direction: rtl !important;
			text-align: right !important;
		}
		
		/* Better spacing for RTL buttons */
		[dir="rtl"] .flex.items-center.gap-1 {
			flex-direction: row-reverse;
		}
		
		[dir="rtl"] .ti {
			margin-left: 0;
			margin-right: 0.25rem;
		}

		.mb-1 {
			margin-bottom: 0.25rem;
		}

		.mb-6 {
			margin-bottom: 1.5rem;
		}

		.bg-\[\#f58a0712\] {
			background-color: rgba(245, 138, 7, 0.07);
		}

		.\!border-0 {
			border-width: 0px !important;
		}


		.bg-main{
			background-color: #111214;
		}

		.container > .flex{
			height: 95vh;
		}

		.container > .flex > div{
			margin: auto 0;
		}

		.box{
			background-color: #1a1a1c !important;
			box-shadow: 0 0 30px rgb(12 12 12) !important;
			padding: 50px !important;
    		margin-bottom: 40px;

			@media (max-width: 360px){
				padding: 50px 25px !important;
			}
		}

		.box input[type="text"], .box input[type="tel"]{
			height: 56px;
			background: #0a0a0a;
			font-family: var(--font-primary);
			font-weight: 500;
			letter-spacing: 3px;
			padding-top: 4px;
			border: solid 2px #47484a;

			&:focus{
				outline: none;
				box-shadow: none;
				border: solid 2px var(--color-accent);
			}
		}

		.box input[type="text"]{
			letter-spacing: 1px !important;
		}

		label[for="code"] + div > p{
			line-height: 1.8;
		}

		.code-input {
			height: 56px;
			background: #0a0a0a;
			font-family: var(--font-primary);
			font-weight: 500;
			letter-spacing: 3px;
			padding-top: 4px;
			border: solid 2px #47484a;

			&:focus{
				outline: none;
				box-shadow: none;
				border: solid 2px var(--color-accent);
			}
		}

		.box button{
            height: 56px;
        }

		.box .button-accent{
     		color: white;
		}

		label:before{
			margin-left: 4px;
		}

		html[data-mode="light"]{
			.bg-main{
        		background-color: #ffffff !important;
			}

			.box{
				box-shadow: 0 0 30px rgba(0, 0, 0, 0.1) !important;
        		background-color: #ffffff !important;
			}
			
			.box input[type="text"], .box input[type="tel"] {
			    background: #efefef;
        		border-color: #c3c3c3;

				&::placeholder {
    				color: #b9b9b9;
				}
			}
			
			.code-input {
				background: #efefef;
				border-color: #c3c3c3;

				&::placeholder {
					color: #b9b9b9;
				}
			}
		}

		:root[data-mode="dark"] {
			--color-intermediate: rgb(37 38 40);
		}

		header div.flex.gap-2.items-center button.w-10.h-10 > i{
			margin-right: 0;
		}
		input#verification_code {
			letter-spacing: 20px;
		}