/* Tavitour Modern Register Screen - Inspired Design v7 */
:root {
	--tt-dark-blue: #1a2f4a;
	--tt-mid-blue: #2c4666;
	--tt-card-blue: #f2f5fa;
	--tt-active-blue: #4a90e2;
	--tt-accent-blue: #3b82f6;
	--tt-light-text: #22354d;
	--tt-muted-text: #4f6684;
}

body.tt-register-mode {
	background: linear-gradient(135deg, var(--tt-dark-blue) 0%, var(--tt-mid-blue) 100%);
	min-height: 100vh;
}

.tt-register-page {
	padding: 0.45rem 0.65rem;
	min-height: 100vh;
}

.tt-register-page.py-4 {
	padding-top: 0.35rem !important;
	padding-bottom: 0.45rem !important;
}

.tt-register-card {
	background: var(--tt-card-blue);
	border-radius: 16px;
	padding: 0.95rem 1rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
	max-width: 480px;
	margin: 0 auto;
	border: 1px solid rgba(35, 53, 77, 0.12);
}

/* Brand Header */
.tt-register-brand-row {
	margin-bottom: 0.15rem;
}

.tt-register-brand-logo {
	width: 36px;
	height: 36px;
	border-radius: 8px;
}

.tt-register-brand-name {
	color: var(--tt-light-text);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.tt-register-card h1 {
	color: var(--tt-light-text);
	font-size: 1.08rem;
	margin-bottom: 0.15rem;
	font-weight: 700;
}

.tt-register-subtitle {
	color: var(--tt-muted-text);
	font-size: 0.86rem;
	margin-bottom: 0.35rem;
	font-weight: 500;
}

/* Role Selection */
.tt-role-selection {
	margin-bottom: 0.45rem;
}

.tt-role-title {
	color: var(--tt-light-text);
	font-size: 0.98rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
	display: flex;
	align-items: center;
}

.tt-role-selection .row.g-2 {
	--bs-gutter-x: 0.4rem;
	--bs-gutter-y: 0.4rem;
}

.tt-role-title i {
	color: var(--tt-active-blue);
}

.tt-role-card {
	width: 100%;
	background: #7d8da2;
	border: 2px solid rgba(176, 196, 222, 0.2);
	border-radius: 8px;
	padding: 0.24rem 0.22rem;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	color: #ffffff;
	min-height: 62px;
}

.tt-role-card i {
	font-size: 1.02rem;
	margin-bottom: 0.12rem;
	display: block;
	opacity: 0.7;
}

.tt-role-card h3 {
	font-size: 0.86rem;
	font-weight: 600;
	margin-bottom: 0.08rem;
	color: #ffffff;
}

.tt-role-card p {
	font-size: 0.68rem;
	margin: 0;
	opacity: 0.95;
	color: #f1f5fb;
	line-height: 1.25;
}

.tt-role-card:hover {
	background: rgba(74, 144, 226, 0.15);
	border-color: var(--tt-active-blue);
	transform: translateY(-2px);
	color: #1f3a57;
}

.tt-role-card.active {
	background: var(--tt-active-blue);
	border-color: var(--tt-active-blue);
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(74, 144, 226, 0.35);
}

.tt-role-card.active i,
.tt-role-card.active h3,
.tt-role-card.active p {
	color: #ffffff;
	opacity: 1;
}

/* Form Sections */
.tt-form-section-title {
	color: var(--tt-light-text);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.42rem;
	display: flex;
	align-items: center;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid rgba(35, 53, 77, 0.2);
}

.tt-form-section-title i {
	color: var(--tt-active-blue);
}

/* Form Inputs - Modern White Style */
.form-label {
	color: #425a79 !important;
	font-size: 1.04rem;
	font-weight: 700;
}

.tt-register-input-group {
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tt-register-input-group .input-group-text {
	background: #f8f9fa;
	border: none;
	color: #4a607b;
	border-right: 1px solid #dee2e6;
	padding: 0.44rem 0.75rem;
	font-size: 1.02rem;
}

.tt-register-input-group .form-control {
	border: none;
	background: #ffffff;
	color: #1a2f4a !important;
	padding: 0.48rem 0.78rem;
	font-size: 1.02rem;
	font-weight: 600;
}

.tt-register-input-group .form-control::placeholder {
	color: #7d8fa6;
	font-size: 0.94rem;
	font-weight: 500;
}

.tt-register-input-group .form-control:focus {
	box-shadow: none;
	background: #ffffff;
}

.tt-register-input-group .btn-outline-secondary {
	background: #f8f9fa;
	border: none;
	border-left: 1px solid #dee2e6;
	color: #4a607b;
	font-size: 0.98rem;
	padding: 0.44rem 0.75rem;
}

.tt-register-input-group .btn-outline-secondary:hover {
	background: #e9ecef;
	color: #495057;
}

/* Password Strength */
.tt-password-strength {
	margin-top: 0.5rem;
}

.tt-strength-bar {
	background: rgba(26, 47, 74, 0.6);
	height: 4px;
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 0.35rem;
}

.tt-strength-fill {
	height: 100%;
	transition: all 0.3s ease;
	width: 0%;
}

.tt-strength-fill[data-strength="1"] {
	width: 25%;
	background: #dc3545;
}

.tt-strength-fill[data-strength="2"] {
	width: 50%;
	background: #ffc107;
}

.tt-strength-fill[data-strength="3"] {
	width: 75%;
	background: #17a2b8;
}

.tt-strength-fill[data-strength="4"] {
	width: 100%;
	background: #28a745;
}

.tt-strength-text {
	color: #3f5571;
	font-size: 0.75rem;
	font-weight: 600;
}

.tt-strength-text span {
	font-weight: 600;
}

/* Password Match */
.tt-password-match {
	color: #3f5571;
	font-size: 0.8rem;
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
}

.tt-password-match i {
	font-size: 0.9rem;
}

.tt-password-match.is-match {
	color: #28a745;
}

.tt-password-match.is-mismatch {
	color: #dc3545;
}

/* Consent Section */
.tt-consent-section {
	background: #a5afbc;
	border-radius: 8px;
	padding: 1rem;
	margin-top: 0.5rem;
}

.tt-consent-check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.7rem;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	margin-bottom: 0.65rem;
	transition: all 0.2s ease;
}

.tt-consent-check:last-child {
	margin-bottom: 0;
}

.tt-consent-check:hover {
	background: rgba(255, 255, 255, 0.08);
}

.tt-consent-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	cursor: pointer;
	accent-color: var(--tt-active-blue);
	flex-shrink: 0;
}

.tt-consent-check span {
	color: #1f3550;
	font-size: 0.8rem;
	line-height: 1.5;
	flex: 1;
	font-weight: 600;
}

.tt-consent-check span a {
	color: #1e4f8e;
	text-decoration: underline;
	font-weight: 700;
}

.tt-consent-check span a:hover {
	color: #143f75;
}

.tt-consent-check input[type="checkbox"]:checked + span {
	color: #1a2f4a;
	font-weight: 700;
}

/* Alert Styles */
.alert {
	border-radius: 8px;
	font-size: 0.8rem;
	padding: 0.65rem 0.85rem;
}

/* Legal Links */
.tt-register-legal-links {
	color: #38516f;
	font-size: 0.75rem;
	line-height: 1.6;
	text-align: center;
	font-weight: 600;
}

.tt-register-legal-links a {
	color: #1e4f8e;
	text-decoration: none;
	font-weight: 700;
}

.tt-register-legal-links a:hover {
	color: #143f75;
	text-decoration: underline;
}

/* Submit Button */
.tt-register-submit {
	background: linear-gradient(135deg, var(--tt-active-blue), var(--tt-accent-blue));
	border: none;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.8rem;
	padding: 0.5rem 0.8rem;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(74, 144, 226, 0.32);
	transition: all 0.3s ease;
	width: 100%;
}

.tt-register-submit:hover {
	background: linear-gradient(135deg, #3b7dd6, #2563eb);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(74, 144, 226, 0.45);
}

.tt-register-submit:active {
	transform: translateY(0);
}

/* Footer Text */
.tt-register-muted {
	color: #425a79;
	font-size: 0.8rem;
	text-align: center;
	margin-top: 1rem;
	font-weight: 600;
}

.tt-register-muted a {
	color: var(--tt-active-blue);
	text-decoration: none;
	font-weight: 600;
}

.tt-register-muted a:hover {
	color: #3b7dd6;
	text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 767.98px) {
	.tt-register-page {
		padding: 0.35rem 0.5rem;
	}

	.tt-register-card {
		padding: 0.82rem 0.88rem;
		border-radius: 12px;
	}

	.tt-register-brand-logo {
		width: 34px;
		height: 34px;
	}

	.tt-register-brand-name {
		font-size: 1.02rem;
	}

	.tt-register-card h1 {
		font-size: 1rem;
	}

	.tt-role-card {
		min-height: 58px;
		padding: 0.2rem 0.16rem;
	}

	.tt-role-card i {
		font-size: 0.92rem;
	}

	.tt-role-card h3 {
		font-size: 0.76rem;
	}

	.tt-role-card p {
		font-size: 0.62rem;
	}
}

@media (max-width: 575.98px) {
	.tt-register-card {
		padding: 0.72rem 0.76rem;
	}

	.tt-register-brand-logo {
		width: 32px;
		height: 32px;
	}

	.tt-register-brand-name {
		font-size: 0.95rem;
	}

	.tt-register-card h1 {
		font-size: 0.95rem;
	}

	.tt-role-card {
		min-height: 54px;
		padding: 0.18rem 0.14rem;
	}

	.tt-role-card i {
		font-size: 0.86rem;
	}

	.tt-role-card h3 {
		font-size: 0.72rem;
	}

	.tt-role-card p {
		font-size: 0.58rem;
	}
}