/* RoufaiShop — formulaires d'authentification.
   Design sobre et aéré : bleu #002374 pour la structure, orange #fe6803
   réservé à l'action principale. */

.rs-auth {
	--rs-navy: #002374;
	--rs-orange: #fe6803;
	--rs-ink: #1c2333;
	--rs-muted: #6b7280;
	--rs-line: #e3e6ee;
	--rs-bg: #ffffff;
	max-width: 420px;
	margin: 0 auto;
	font-family: inherit;
}

.rs-form {
	background: var(--rs-bg);
	border: 1px solid var(--rs-line);
	border-radius: 16px;
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rs-title {
	color: var(--rs-navy);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 24px;
	text-align: center;
}

.rs-step {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Une seule étape visible à la fois : l'attribut hidden doit primer. */
.rs-step[hidden],
.rs-auth [hidden] {
	display: none !important;
}

.rs-row {
	display: flex;
	gap: 12px;
}

.rs-row .rs-field {
	flex: 1;
}

.rs-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rs-field > span {
	color: var(--rs-ink);
	font-size: 0.875rem;
	font-weight: 600;
}

.rs-field input,
.rs-dial {
	border: 1px solid var(--rs-line);
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 1rem;
	color: var(--rs-ink);
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.rs-field input:focus,
.rs-dial:focus {
	outline: none;
	border-color: var(--rs-navy);
	box-shadow: 0 0 0 3px rgba(0, 35, 116, 0.12);
}

.rs-phone-row {
	display: flex;
	gap: 8px;
}

.rs-phone-row .rs-dial {
	flex: 0 0 40%;
}

.rs-otp-input {
	text-align: center;
	font-size: 1.5rem !important;
	letter-spacing: 0.5em;
	font-weight: 700;
}

.rs-btn {
	border: none;
	border-radius: 10px;
	padding: 15px 20px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: opacity 0.15s, background 0.15s;
}

.rs-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.rs-btn-primary {
	background: var(--rs-orange);
	color: #fff;
}

.rs-btn-primary:hover:not(:disabled) {
	background: #e35c00;
}

.rs-btn-ghost {
	background: transparent;
	color: var(--rs-navy);
	border: 1px solid var(--rs-line);
}

.rs-btn-ghost:hover:not(:disabled) {
	border-color: var(--rs-navy);
}

.rs-links {
	text-align: center;
	margin: 4px 0 0;
	font-size: 0.875rem;
}

.rs-links a {
	color: var(--rs-navy);
	text-decoration: none;
	font-weight: 600;
}

.rs-links a:hover {
	color: var(--rs-orange);
}

.rs-hint {
	color: var(--rs-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
	margin: 0;
}

.rs-message {
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0 0 8px;
}

.rs-message.rs-error {
	background: #fdecec;
	color: #b3261e;
}

.rs-message.rs-success {
	background: #e8f5ee;
	color: #146c43;
}

.rs-countdown {
	color: var(--rs-muted);
	font-weight: 400;
	font-size: 0.8125rem;
}

@media (max-width: 480px) {
	.rs-form {
		padding: 28px 20px;
		border: none;
	}

	.rs-row {
		flex-direction: column;
		gap: 20px;
	}
}