/*
 * Customer auth shell — single centred card.
 *
 * Loaded only by frontend/layouts/user/auth.blade.php, so replacing this file
 * cannot affect any other screen. Colours are Tabler's own defaults, already
 * in use across the customer area, rather than a second palette.
 */

.gt-uauth-body {
	margin: 0;
}

.gt-uauth {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 32px 20px;
	box-sizing: border-box;
	color: #182433;
	background:
		radial-gradient(800px 420px at 15% -10%, rgba(6, 111, 209, .14), transparent 60%),
		radial-gradient(700px 400px at 100% 110%, rgba(99, 102, 241, .14), transparent 60%),
		linear-gradient(rgba(24, 36, 51, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(24, 36, 51, .035) 1px, transparent 1px),
		#f1f5f9;
	background-size: auto, auto, 40px 40px, 40px 40px, auto;
}

.gt-uauth * {
	box-sizing: border-box;
}

/* Card */
.gt-uauth__card {
	width: 100%;
	max-width: 480px;
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(24, 36, 51, .05),
	0 30px 70px -20px rgba(24, 36, 51, .22),
	0 0 0 1px rgba(24, 36, 51, .05);
}

.gt-uauth__head {
	padding: 28px 28px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.gt-uauth__brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -.02em;
	color: #182433;
	text-decoration: none;
	min-width: 0;
}

.gt-uauth__brand:hover {
	color: #182433;
}

.gt-uauth__wordmark {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gt-uauth__mark {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	background: linear-gradient(180deg, #2b8ae6, #066fd1);
	box-shadow: 0 6px 16px rgba(6, 111, 209, .35);
}

.gt-uauth__mark svg {
	width: 16px;
	height: 16px;
}

/* Height-bound, width-free: any lockup the buyer uploads keeps its proportions. */
.gt-uauth__logo {
	height: 26px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	object-position: left center;
	flex: 0 1 auto;
	min-width: 0;
}

[dir="rtl"] .gt-uauth__logo {
	object-position: right center;
}

.gt-uauth__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f1f5f9;
	border: 1px solid #e6e7e9;
	font-size: 11.5px;
	font-weight: 600;
	color: #182433;
	white-space: nowrap;
	flex: none;
}

.gt-uauth__badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2fb344;
	flex: none;
	box-shadow: 0 0 0 3px rgba(47, 179, 68, .2);
}

.gt-uauth__body {
	padding: 32px 40px 40px;
	display: flex;
	flex-direction: column;
}

/* Heading block */
.gt-uauth__icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: rgba(6, 111, 209, .10);
	color: #066fd1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	flex: none;
	margin-bottom: 20px;
}

.gt-uauth__icon svg {
	width: 24px;
	height: 24px;
}

.gt-uauth__title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.15;
	color: #182433;
}

.gt-uauth__sub {
	margin: 8px 0 0;
	color: #667382;
	font-size: 14.5px;
	line-height: 1.6;
	max-width: 400px;
}

.gt-uauth__sub strong {
	color: #182433;
	font-weight: 600;
}

/* Alerts (keep Tabler .alert, restyle) */
.gt-uauth__body .alert {
	border-radius: 12px;
	margin: 20px 0 0;
	font-size: 13.5px;
}

/* Social */
.gt-uauth__social {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 28px;
}

/*
 * One provider is as likely as two, and a half-width button beside empty space
 * reads as a broken row, so a lone button takes the full width.
 */
.gt-uauth__social:has(.gt-uauth__social-btn:only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.gt-uauth__social-btn {
	height: 46px;
	border: 1px solid #e6e7e9;
	border-radius: 12px;
	background: #fff;
	color: #182433;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-weight: 500;
	font-size: 13.5px;
	box-shadow: 0 1px 2px rgba(24, 36, 51, .04);
	text-decoration: none;
	transition: background .12s;
}

.gt-uauth__social-btn:hover {
	background: #f6f8fb;
	color: #182433;
}

.gt-uauth__social-btn img {
	width: 18px;
	height: 18px;
}

.gt-uauth__or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 22px 0;
	color: #a6a9b6;
	font-size: 12px;
}

.gt-uauth__or::before,
.gt-uauth__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e6e7e9;
}

/* Form */
.gt-uauth__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 28px;
}

.gt-uauth__form--social {
	margin-top: 0;
}

.gt-uauth__grid2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.gt-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.gt-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	color: #182433;
	margin: 0;
}

.gt-label a {
	font-size: 12.5px;
	font-weight: 500;
	color: #066fd1;
	text-decoration: none;
}

.gt-label .gt-label__hint {
	color: #a6a9b6;
	font-weight: 400;
}

.gt-input {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #dadcde;
	border-radius: 12px;
	background: #fff;
	transition: border-color .12s, box-shadow .12s;
}

.gt-input:focus-within {
	border-color: #066fd1;
	box-shadow: 0 0 0 3px rgba(6, 111, 209, .15);
}

.gt-input.is-invalid {
	border-color: #d63939;
	box-shadow: 0 0 0 3px rgba(214, 57, 57, .12);
}

.gt-input__addon {
	display: inline-flex;
	color: #a6a9b6;
	flex: none;
}

.gt-input__addon svg {
	width: 17px;
	height: 17px;
}

.gt-input input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 0;
	background: transparent;
	color: #182433;
	font-size: 14.5px;
	font-family: inherit;
	outline: none;
	box-shadow: none;
}

.gt-input input::placeholder {
	color: #a6a9b6;
}

/* text field with no addon */
.gt-input--plain {
	padding: 0 14px;
}

.gt-input--code input {
	text-transform: uppercase;
	letter-spacing: .04em;
}

.gt-input__eye {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #667382;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	padding: 0;
	margin-inline-end: -8px;
}

.gt-input__eye:hover {
	background: #f1f5f9;
	color: #182433;
}

.gt-input__eye svg {
	width: 18px;
	height: 18px;
}

.gt-error {
	font-size: 12px;
	color: #d63939;
}

.gt-check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: #182433;
	cursor: pointer;
	margin: 0;
	line-height: 1.5;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.gt-check--top {
	align-items: flex-start;
}

/*
 * Drawn rather than native, so it matches the fields: a soft rounded box whose
 * tick grows in on check. The tick is a background image, which every browser
 * animates, where a pseudo-element on an input is not reliable.
 */
.gt-check input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	flex: none;
	border: 1.5px solid #c8ced6;
	border-radius: 6px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0 0;
	box-shadow: 0 1px 2px rgba(24, 36, 51, .06);
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease,
	background-size .2s cubic-bezier(.34, 1.56, .64, 1), transform .12s ease;
}

.gt-check:hover input[type="checkbox"]:not(:checked) {
	border-color: #066fd1;
	box-shadow: 0 0 0 4px rgba(6, 111, 209, .08);
}

.gt-check input[type="checkbox"]:checked {
	border-color: #066fd1;
	background-color: #066fd1;
	background-size: 14px 14px;
	box-shadow: 0 2px 6px -1px rgba(6, 111, 209, .45);
}

.gt-check input[type="checkbox"]:focus-visible {
	outline: none;
	border-color: #066fd1;
	box-shadow: 0 0 0 4px rgba(6, 111, 209, .2);
}

.gt-check input[type="checkbox"]:active {
	transform: scale(.9);
}

.gt-check input[type="checkbox"]:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.gt-check--top input[type="checkbox"] {
	margin-top: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.gt-check input[type="checkbox"] {
		transition: none;
	}
}

.gt-btn {
	height: 50px;
	width: 100%;
	border: 0;
	border-radius: 12px;
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: inherit;
	text-decoration: none;
	background: linear-gradient(180deg, #1f7fdc, #066fd1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2),
	0 10px 24px -6px rgba(6, 111, 209, .5);
	transition: transform .12s, background .12s, opacity .15s;
}

.gt-btn:hover {
	background: #0554a0;
	color: #fff;
	transform: translateY(-1px);
}

.gt-btn svg {
	width: 17px;
	height: 17px;
}

.gt-btn.is-pending {
	opacity: .55;
	transform: none;
}

.gt-btn-ghost {
	height: 46px;
	width: 100%;
	border: 1px solid #e6e7e9;
	border-radius: 12px;
	background: #fff;
	color: #182433;
	font-size: 13.5px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
}

.gt-btn-ghost:hover {
	background: #f6f8fb;
	color: #182433;
}

.gt-btn-ghost svg {
	width: 16px;
	height: 16px;
}

.gt-uauth__switch {
	text-align: center;
	color: #667382;
	margin-top: 26px;
	font-size: 13.5px;
}

/* Register sits 4px tighter than login, as the design has it. */
.gt-uauth__switch--tight {
	margin-top: 22px;
}

.gt-uauth__switch a {
	font-weight: 600;
	color: #066fd1;
	text-decoration: none;
}

/* One-click demo sign-in, under the form on a demo or local site. */
.gt-demo-login {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
	padding: 12px 14px;
	border: 1px dashed rgba(6, 111, 209, .35);
	border-radius: 12px;
	background: rgba(6, 111, 209, .05);
}

.gt-demo-login__icon {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba(6, 111, 209, .12);
	color: #066fd1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.gt-demo-login__icon svg {
	width: 16px;
	height: 16px;
}

.gt-demo-login__text {
	flex: 1 1 160px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gt-demo-login__title {
	font-size: 13px;
	font-weight: 600;
	color: #182433;
}

.gt-demo-login__creds {
	font-size: 12px;
	color: #667382;
	overflow-wrap: anywhere;
}

.gt-demo-login__btn {
	height: 36px;
	padding: 0 14px;
	border: 1px solid #066fd1;
	border-radius: 10px;
	background: #fff;
	color: #066fd1;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	flex: none;
	transition: background .12s, color .12s;
}

.gt-demo-login__btn:hover,
.gt-demo-login__btn:focus-visible {
	background: #066fd1;
	color: #fff;
}

.gt-demo-login__btn:disabled {
	opacity: .6;
	cursor: wait;
}

/* Strength */
.gt-strength {
	display: flex;
	gap: 4px;
	margin-top: 2px;
}

.gt-strength__bar {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: #e6e7e9;
	transition: background .15s;
}

.gt-strength__label {
	font-size: 12px;
	color: #a6a9b6;
}

.gt-strength[data-level="1"] .gt-strength__bar:nth-child(-n+1) { background: #d63939; }
.gt-strength[data-level="2"] .gt-strength__bar:nth-child(-n+2) { background: #f59f00; }
.gt-strength[data-level="3"] .gt-strength__bar:nth-child(-n+3) { background: #1f7fdc; }
.gt-strength[data-level="4"] .gt-strength__bar { background: #2fb344; }

.gt-strength[data-level="1"] + .gt-strength__label { color: #d63939; }
.gt-strength[data-level="2"] + .gt-strength__label { color: #f59f00; }
.gt-strength[data-level="3"] + .gt-strength__label { color: #1f7fdc; }
.gt-strength[data-level="4"] + .gt-strength__label { color: #2fb344; }

/* 2FA */
.gt-uauth__account {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #e6e7e9;
	border-radius: 12px;
	background: #f6f8fb;
}

.gt-uauth__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #066fd1;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 12px;
	flex: none;
}

.gt-uauth__account-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.gt-uauth__account-name {
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gt-uauth__account-mail {
	font-size: 12px;
	color: #667382;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gt-uauth__link {
	font-size: 12.5px;
	font-weight: 500;
	color: #066fd1;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	flex: none;
}

.gt-otp {
	display: flex;
	gap: 8px;
}

.gt-otp__box {
	flex: 1;
	min-width: 0;
	height: 58px;
	border: 1px solid #dadcde;
	border-radius: 12px;
	background: #fff;
	color: #182433;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
	padding: 0;
	font-family: inherit;
	outline: none;
}

.gt-otp__box:focus {
	border-color: #066fd1;
	box-shadow: 0 0 0 3px rgba(6, 111, 209, .18);
}

.gt-otp__box.is-filled {
	border-color: #066fd1;
}

.gt-uauth__hint {
	font-size: 12.5px;
	color: #667382;
}

.gt-uauth__hint a {
	font-weight: 500;
	color: #066fd1;
	text-decoration: none;
}

/*
 * reCAPTCHA v3.
 *
 * v3 shows nothing to tick. Google's floating badge is hidden, which its terms
 * allow only while the notice below stays visible in the form (x-recaptcha).
 */
.grecaptcha-badge {
	visibility: hidden;
}

.gt-recaptcha-note {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 7px;
	margin: 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: #8a94a3;
	text-align: center;
}

.gt-recaptcha-note__icon {
	display: inline-flex;
	flex: none;
	margin-top: 2px;
	color: #2fb344;
}

.gt-recaptcha-note__icon svg {
	width: 13px;
	height: 13px;
}

.gt-recaptcha-note a {
	color: #667382;
	text-decoration: underline;
	text-decoration-color: rgba(102, 115, 130, .35);
	text-underline-offset: 2px;
}

.gt-recaptcha-note a:hover {
	color: #066fd1;
	text-decoration-color: currentColor;
}

/*
 * reCAPTCHA v2.
 *
 * Google's checkbox is a fixed 304x78 iframe whose interior cannot be styled,
 * so the design is the frame around it: a card matching the fields, with a
 * header that names the step and a badge that follows the widget's state.
 */
.gt-captcha {
	--gt-captcha-scale: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border: 1px solid #dadcde;
	border-radius: 14px;
	background: linear-gradient(180deg, #fbfcfe 0%, #f5f7fa 100%);
	box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(24, 36, 51, .04);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.gt-captcha__head {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.gt-captcha__chip {
	width: 34px;
	height: 34px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: #066fd1;
	background: rgba(6, 111, 209, .08);
	border: 1px solid rgba(6, 111, 209, .16);
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.gt-captcha__icon {
	display: inline-flex;
}

.gt-captcha__icon svg {
	width: 16px;
	height: 16px;
}

.gt-captcha__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.gt-captcha__title {
	font-size: 13.5px;
	font-weight: 600;
	color: #182433;
	line-height: 1.3;
}

.gt-captcha__hint {
	font-size: 12px;
	color: #667382;
	line-height: 1.4;
}

.gt-captcha__badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8a5a00;
	background: #fff7e6;
	border: 1px solid #f6dfae;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.gt-captcha__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/*
 * The widget's own box, centred. Laid out left to right whatever the page
 * direction, so the scale below always shrinks it towards a known corner.
 */
.gt-captcha__widget {
	direction: ltr;
	align-self: center;
	width: calc(304px * var(--gt-captcha-scale));
	height: calc(78px * var(--gt-captcha-scale));
	overflow: hidden;
	border-radius: 4px;
}

.gt-captcha__widget .g-recaptcha {
	width: 304px;
	transform: scale(var(--gt-captcha-scale));
	transform-origin: 0 0;
}

.gt-captcha__icon--done,
.gt-captcha__word--done {
	display: none;
}

.gt-captcha[data-state="solved"] {
	border-color: #a7e3c4;
	background: linear-gradient(180deg, #f7fdf9 0%, #eefaf3 100%);
}

.gt-captcha[data-state="solved"] .gt-captcha__chip {
	color: #2f9e5c;
	background: rgba(47, 179, 68, .1);
	border-color: rgba(47, 179, 68, .28);
}

.gt-captcha[data-state="solved"] .gt-captcha__badge {
	color: #1f7a45;
	background: #e7f7ee;
	border-color: #b7e6cb;
}

.gt-captcha[data-state="solved"] .gt-captcha__icon--pending,
.gt-captcha[data-state="solved"] .gt-captcha__word--pending {
	display: none;
}

.gt-captcha[data-state="solved"] .gt-captcha__icon--done,
.gt-captcha[data-state="solved"] .gt-captcha__word--done {
	display: inline-flex;
}

.gt-captcha.is-invalid {
	border-color: #d63939;
	box-shadow: 0 0 0 3px rgba(214, 57, 57, .12);
}

.gt-captcha.is-invalid .gt-captcha__chip {
	color: #d63939;
	background: rgba(214, 57, 57, .08);
	border-color: rgba(214, 57, 57, .26);
}

.gt-captcha.is-invalid .gt-captcha__badge {
	color: #b42323;
	background: #fdecec;
	border-color: #f5c2c2;
}

/*
 * Phones. The card body is the viewport less 98px of padding at these widths,
 * and 304px of fixed widget does not fit it, so it steps down to the largest
 * scale that does.
 */
@media (max-width: 575.98px) {
	.gt-captcha {
		padding: 12px 10px;
	}

	.gt-captcha__head {
		padding: 0 2px;
	}
}

@media (max-width: 401.98px) {
	.gt-captcha {
		--gt-captcha-scale: .9;
	}

	.gt-captcha__hint {
		display: none;
	}

	.gt-captcha__head {
		gap: 9px;
	}

	.gt-captcha__chip {
		width: 30px;
		height: 30px;
		border-radius: 9px;
	}

	.gt-captcha__badge {
		gap: 5px;
		padding: 0 8px;
		letter-spacing: .04em;
	}
}

@media (max-width: 371.98px) {
	.gt-captcha {
		--gt-captcha-scale: .8;
	}
}

@media (max-width: 341.98px) {
	.gt-captcha {
		--gt-captcha-scale: .7;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gt-captcha,
	.gt-captcha__chip,
	.gt-captcha__badge {
		transition: none;
	}
}

/* Footer */
.gt-uauth__meta {
	width: 100%;
	max-width: 480px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 12px;
	color: #667382;
	padding: 0 4px;
}

.gt-uauth__meta-links {
	display: flex;
	gap: 16px;
}

.gt-uauth__meta a {
	color: #667382;
	text-decoration: none;
}

.gt-uauth__meta a:hover {
	color: #182433;
}

@media (max-width: 575.98px) {
	.gt-uauth {
		padding: 16px;
	}

	.gt-uauth__card {
		border-radius: 18px;
	}

	.gt-uauth__head {
		padding: 22px 22px 0;
	}

	.gt-uauth__body {
		padding: 24px 22px 28px;
	}

	.gt-uauth__title {
		font-size: 24px;
	}

	.gt-uauth__grid2,
	.gt-uauth__social {
		grid-template-columns: minmax(0, 1fr);
	}
}