/* ═══════════════════════════════════════
   Todo Onboarding — Exact React Match
   ═══════════════════════════════════════ */

/* Full page background */
body:has(.todo-ob),
body:has(.todo-ob) #main,
body:has(.todo-ob) #wrapper {
	background: #fafafa !important;
	background-color: #fafafa !important;
}

.todo-ob {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 16px;
	background: #fafafa;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	color: #111827;
}

@media (min-width: 640px) {
	.todo-ob { padding: 32px; }
}

.todo-ob *,
.todo-ob *::before,
.todo-ob *::after {
	box-sizing: border-box;
}

/* ─── Card ───────────────────────────── */

.todo-ob__card {
	width: 100%;
	max-width: 520px;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
	border: 1px solid #f3f4f6;
	padding: 32px;
	position: relative;
	overflow: visible;
}

@media (min-width: 640px) {
	.todo-ob__card { padding: 40px; }
}

/* ─── Step container ─────────────────── */

.todo-ob__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ─── Typography ─────────────────────── */

.todo-ob__title {
	font-size: 24px;
	font-weight: 600;
	color: #111827;
	margin: 0 0 8px;
	line-height: 1.2;
	text-align: center;
	letter-spacing: -0.025em;
}

@media (min-width: 640px) {
	.todo-ob__title { font-size: 30px; }
}

.todo-ob__subtitle {
	font-size: 15px;
	color: #6b7280;
	margin: 0 0 32px;
	line-height: 1.5;
	text-align: center;
}

/* ─── Tabs ───────────────────────────── */

.todo-ob__tabs {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0 0 32px;
	border-bottom: 1px solid #e5e7eb;
	position: relative;
}

.todo-ob__tab {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-bottom: 16px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #9ca3af;
	transition: color 0.2s;
	margin: 0 0 -1px;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1;
	position: relative;
	border-bottom: 2px solid transparent;
}

.todo-ob__tab:hover {
	color: #4b5563;
}

.todo-ob__tab--active {
	color: #000;
	border-bottom-color: #000;
}

.todo-ob__tab svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.todo-ob__tab--active svg {
	opacity: 1;
}

/* ─── Tab Content ────────────────────── */

.todo-ob__tab-content {
	display: none;
	width: 100%;
}

.todo-ob__tab-content--active {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ─── Input (Phone / Email) ──────────── */

.todo-ob__main-input,
.todo-ob input[type="email"].todo-ob__main-input,
.todo-ob input[type="text"].todo-ob__main-input {
	width: 100% !important;
	padding: 14px 16px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: #111827 !important;
	outline: none !important;
	transition: border-color 0.2s, box-shadow 0.2s !important;
	box-sizing: border-box !important;
	background: #fff !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	height: auto !important;
}

.todo-ob__main-input:focus,
.todo-ob input[type="email"].todo-ob__main-input:focus {
	border-color: #000 !important;
	box-shadow: 0 0 0 1px #000 !important;
}

.todo-ob__main-input::placeholder {
	color: #9ca3af;
}

/* intl-tel-input */
.todo-ob__input-box .iti {
	width: 100% !important;
}

.todo-ob__input-box .iti .iti__tel-input {
	padding: 14px 16px 14px 100px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	box-sizing: border-box !important;
	outline: none !important;
	height: auto !important;
	transition: border-color 0.2s, box-shadow 0.2s !important;
}

.todo-ob__input-box .iti .iti__tel-input:focus {
	border-color: #000 !important;
	box-shadow: 0 0 0 1px #000 !important;
}

.todo-ob__input-box .iti .iti__country-container {
	border-right: 1px solid #d1d5db;
	border-radius: 12px 0 0 12px;
	background: #f9fafb;
}

.todo-ob__hint {
	font-size: 14px;
	color: #6b7280;
	margin: 16px 0 0;
	line-height: 1.5;
	text-align: left;
}

.todo-ob__hint a {
	text-decoration: underline;
	color: inherit;
}

.todo-ob__hint a:hover {
	color: #000;
}

/* ─── Social Buttons ─────────────────── */

.todo-ob__social-content {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0;
}

.todo-ob__btn--social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	padding: 14px 16px;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s;
	width: 100%;
}

.todo-ob__btn--social:hover {
	text-decoration: none;
}

.todo-ob__btn--social.todo-ob__btn--google,
.todo-ob__btn--social.todo-ob__btn--facebook {
	margin-top: 0;
}

.todo-ob__btn--google {
	background: #f3f4f6;
	color: #111827;
	border: 1px solid #e5e7eb;
}

.todo-ob__btn--google:hover {
	background: #e5e7eb;
}

.todo-ob__btn--facebook {
	background: #1877F2;
	color: #fff;
	border: none;
}

.todo-ob__btn--facebook:hover {
	background: #166fe5;
}

.todo-ob__btn--social svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* ─── Buttons ────────────────────────── */

.todo-ob__btn {
	width: 100%;
	padding: 16px;
	border: none;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	margin-top: 32px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.todo-ob__btn--primary {
	background: #000;
	color: #fff;
}

.todo-ob__btn--primary:hover {
	background: #1f2937;
}

.todo-ob__btn--primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ─── Back Button ────────────────────── */

.todo-ob__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	font-size: 14px;
	color: #6b7280;
	cursor: pointer;
	padding: 0;
	margin-bottom: 32px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s;
	align-self: flex-start;
}

.todo-ob__back:hover {
	color: #000;
	text-decoration: none;
}

/* ─── OTP ────────────────────────────── */

.todo-ob__otp-box {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 16px auto;
	background: none;
	border: none;
	padding: 0;
}

@media (min-width: 640px) {
	.todo-ob__otp-box { gap: 16px; }
}

.todo-ob__otp-char {
	width: 48px !important;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	color: #111827 !important;
	border: 1.5px solid #e5e7eb !important;
	border-radius: 12px !important;
	outline: none !important;
	background: #f9fafb !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	caret-color: #000;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	line-height: 48px !important;
}

@media (min-width: 640px) {
	.todo-ob__otp-char {
		width: 52px !important;
		height: 52px !important;
		min-height: 52px !important;
		max-height: 52px !important;
		line-height: 52px !important;
		font-size: 22px;
	}
}

.todo-ob__otp-char:focus {
	border-color: #000 !important;
	box-shadow: none !important;
	background: #fff !important;
}

.todo-ob__otp-char::-webkit-outer-spin-button,
.todo-ob__otp-char::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.todo-ob__otp-dash {
	display: none;
}

.todo-ob__error,
.todo-ob__otp-error,
.todo-ob__profile-error {
	color: #dc2626;
	font-size: 13px;
	padding: 8px 12px;
	background: #fef2f2;
	border-radius: 8px;
	margin: 10px 0 0;
	text-align: left;
	width: 100%;
}

/* ─── Resend ─────────────────────────── */

.todo-ob__resend {
	text-align: center;
	font-size: 14px;
	color: #6b7280;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.todo-ob__link-btn {
	background: none;
	border: none;
	color: #9ca3af;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	font-size: 14px;
	padding: 0;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	transition: color 0.2s;
}

.todo-ob__link-btn:hover {
	color: #000;
}

.todo-ob__link-btn:disabled {
	color: #d1d5db;
	cursor: default;
}

.todo-ob__terms {
	font-size: 12px;
	color: #6b7280;
	margin-top: 24px;
	line-height: 1.6;
	text-align: center;
}

.todo-ob__terms a {
	text-decoration: underline;
	color: inherit;
}

.todo-ob__terms a:hover {
	color: #000;
}

/* ─── Profile Fields ─────────────────── */

.todo-ob__profile-fields {
	margin-top: 16px;
	width: 100%;
}

.todo-ob__profile-row {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 0;
}

@media (min-width: 640px) {
	.todo-ob__profile-row {
		flex-direction: row;
		gap: 16px;
	}
}

.todo-ob__profile-field {
	position: relative;
	margin-bottom: 16px;
	flex: 1;
}

.todo-ob__profile-field input,
.todo-ob__profile-field select {
	width: 100% !important;
	padding: 14px 16px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: #111827 !important;
	background: #fff !important;
	outline: none !important;
	transition: border-color 0.2s, box-shadow 0.2s, padding 0.15s !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	height: auto !important;
	margin: 0 !important;
	line-height: normal !important;
}

.todo-ob__profile-field select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	padding-right: 40px !important;
}

.todo-ob__profile-field input:focus,
.todo-ob__profile-field select:focus {
	border-color: #000 !important;
	box-shadow: 0 0 0 1px #000 !important;
}

/* Floating label */
.todo-ob__profile-field label {
	position: absolute;
	left: 12px;
	top: -8px;
	font-size: 12px;
	font-weight: 500;
	color: #6b7280;
	pointer-events: none;
	background: #fff;
	padding: 0 4px;
	line-height: 1;
	transition: all 0.15s ease;
}

.todo-ob__profile-field input:placeholder-shown:not(:focus) + label {
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	font-weight: 400;
	left: 16px;
	padding: 0;
	background: transparent;
}

.todo-ob__profile-field input:focus,
.todo-ob__profile-field input:not(:placeholder-shown) {
	padding-top: 20px;
	padding-bottom: 8px;
}

.todo-ob__profile-field input:focus + label,
.todo-ob__profile-field input:not(:placeholder-shown) + label {
	top: -8px;
	left: 12px;
	transform: none;
	font-size: 12px;
	font-weight: 500;
	background: #fff;
	padding: 0 4px;
}



/* ─── Merge-OTP (email verify inside profile step) ─── */

.todo-ob__merge-otp-wrap {
	margin-top: 16px;
	padding: 0;
	background: transparent;
	border: none;
}

.todo-ob__merge-otp-hint {
	margin: 0 0 12px;
	font-size: 13px;
	color: #1e40af;
	line-height: 1.4;
	text-align: left;
}

.todo-ob__merge-otp-wrap .todo-ob__otp-box {
	margin: 0;
	justify-content: space-between;
	gap: 0;
	width: 100%;
}

/* ─── intl-tel-input override ────────── */

.todo-ob .iti {
	width: 100%;
}

.todo-ob .iti__tel-input {
	border-radius: 12px !important;
	border: 1px solid #d1d5db !important;
	font-size: 15px !important;
	padding: 14px 16px 14px 90px !important;
}

.todo-ob .iti__tel-input:focus {
	border-color: #000 !important;
	box-shadow: 0 0 0 1px #000 !important;
}

/* ─── Vibes Grid ─────────────────────── */

.todo-ob__vibes-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 16px -4px;
	max-height: 40vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px;
	width: calc(100% + 8px);
}

.todo-ob__vibes-grid::-webkit-scrollbar {
	width: 6px;
}

.todo-ob__vibes-grid::-webkit-scrollbar-track {
	background: transparent;
}

.todo-ob__vibes-grid::-webkit-scrollbar-thumb {
	background: #e5e7eb;
	border-radius: 20px;
}

.todo-ob__vibes-grid::-webkit-scrollbar-thumb:hover {
	background: #d1d5db;
}

.todo-ob__vibe-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: all 0.2s;
	user-select: none;
	text-align: left;
}

.todo-ob__vibe-item:hover {
	border-color: #d1d5db;
	background: #f9fafb;
}

.todo-ob__vibe-item--selected {
	border-color: #000;
	background: #f9fafb;
	box-shadow: 0 0 0 1px #000;
}

.todo-ob__vibe-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.todo-ob__vibe-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: #374151;
	flex: 1;
}

.todo-ob__vibe-item--selected .todo-ob__vibe-name {
	color: #000;
}

.todo-ob__vibe-check {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #000;
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.todo-ob__vibe-item--selected .todo-ob__vibe-check {
	display: flex;
}

.todo-ob__vibe-check svg {
	width: 12px;
	height: 12px;
	stroke: #fff;
	stroke-width: 3;
	fill: none;
}

.todo-ob__skip-btn {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 16px;
	font-size: 14px;
	text-decoration: underline;
}

/* ─── Success Step ───────────────────── */

.todo-ob__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 48px 0;
}

.todo-ob__success-icon {
	width: 80px;
	height: 80px;
	background: #dcfce7;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}

.todo-ob__success-icon svg {
	width: 40px;
	height: 40px;
	stroke: #16a34a;
	stroke-width: 2.5;
	fill: none;
}

.todo-ob__success h2 {
	font-size: 30px;
	font-weight: 600;
	color: #111827;
	margin: 0 0 8px;
	letter-spacing: -0.025em;
}

.todo-ob__success p {
	font-size: 15px;
	color: #6b7280;
	margin: 0 0 32px;
}

.todo-ob__success .todo-ob__btn {
	width: auto;
	padding: 12px 32px;
	margin-top: 0;
	text-transform: none;
	letter-spacing: normal;
	font-size: 15px;
}

/* ─── Loading Overlay ────────────────── */

.todo-ob__loading {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	border-radius: 24px;
}

.todo-ob__spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #e5e7eb;
	border-top-color: #000;
	border-radius: 50%;
	animation: todo-ob-spin 0.7s linear infinite;
}

@keyframes todo-ob-spin {
	to { transform: rotate(360deg); }
}

/* ─── Responsive ─────────────────────── */

@media (max-width: 640px) {
	.todo-ob {
		padding: 0;
		background: #fff;
	}

	body:has(.todo-ob),
	body:has(.todo-ob) #main,
	body:has(.todo-ob) #wrapper {
		background: #fff !important;
		background-color: #fff !important;
	}

	.todo-ob__card {
		max-width: 100%;
		border-radius: 0;
		box-shadow: none;
		border: none;
		padding: 32px 20px;
	}

	.todo-ob__vibes-grid {
		grid-template-columns: 1fr;
	}

	.todo-ob__otp-char {
		width: 40px !important;
		height: 48px !important;
		min-height: 48px !important;
		max-height: 48px !important;
		line-height: 48px !important;
		font-size: 18px;
	}

	.todo-ob__otp-box {
		gap: 8px;
	}
}