/* ═══════════════════════════════════════════════════════════
   AUTH — يطابق AuthPage من ملفات التصميم
═══════════════════════════════════════════════════════════ */

/* ── صفحة المصادقة الكاملة ── */
.abaya-auth-page {
	min-height: 85vh;
	display: flex;
	flex-direction: column;
	direction: rtl;
}

/* ── الهيدر الداكن (200px) ── */
.abaya-auth-header {
	position: relative;
	height: 200px;
	overflow: hidden;
	flex-shrink: 0;
}
.abaya-auth-header__bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, #2C2C2C 0%, #1A1714 50%, #2C2316 100%);
}
.abaya-auth-header__grid {
	position: absolute;
	inset: 0;
	opacity: 0.05;
	background-image:
		linear-gradient(rgba(196,168,130,1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196,168,130,1) 1px, transparent 1px);
	background-size: 40px 40px;
	pointer-events: none;
}

/* كرات عائمة */
.abaya-auth-header__orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(20px);
}
.abaya-auth-header__orb--1 {
	width: 200px; height: 200px;
	top: -40%; right: -10%;
	background: radial-gradient(circle, rgba(196,168,130,0.18), transparent 70%);
	animation: abaya-auth-orb1 6s ease-in-out infinite;
}
.abaya-auth-header__orb--2 {
	width: 140px; height: 140px;
	bottom: -20%; left: 5%;
	background: radial-gradient(circle, rgba(183,110,121,0.15), transparent 70%);
	animation: abaya-auth-orb2 8s ease-in-out infinite 1s;
}
@keyframes abaya-auth-orb1 {
	0%, 100% { transform: scale(1) translateX(0); }
	50%       { transform: scale(1.2) translateX(10px); }
}
@keyframes abaya-auth-orb2 {
	0%, 100% { transform: scale(1) translateY(0); }
	50%       { transform: scale(1.3) translateY(-10px); }
}

/* جسيمات */
.abaya-auth-particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(196,168,130,0.7);
	animation: abaya-auth-particle 3s ease-out infinite;
	pointer-events: none;
}
@keyframes abaya-auth-particle {
	0%   { transform: translateY(0) scale(0); opacity: 0; }
	30%  { opacity: 1; transform: scale(1.8); }
	100% { transform: translateY(-60px) scale(0); opacity: 0; }
}

/* حلقات زخرفية */
.abaya-auth-header__ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(196,168,130,0.2);
	animation: abaya-auth-ring 4s ease-in-out infinite;
	pointer-events: none;
}
.abaya-auth-header__ring--outer {
	width: 60px; height: 60px;
	top: 2rem; left: 2rem;
}
.abaya-auth-header__ring--inner {
	width: 30px; height: 30px;
	top: calc(2rem + 15px); left: calc(2rem + 15px);
	border-color: rgba(196,168,130,0.15);
	animation: abaya-auth-ring-inner 6s ease-in-out infinite;
}
@keyframes abaya-auth-ring {
	0%, 100% { transform: scale(1); opacity: 0.3; }
	50%       { transform: scale(1.2); opacity: 0.6; }
}
@keyframes abaya-auth-ring-inner {
	0%, 100% { transform: scale(1.2) rotate(0deg); }
	100%      { transform: scale(1) rotate(360deg); }
}

/* محتوى الهيدر: التاج + اسم المتجر */
.abaya-auth-header__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 1rem;
}
.abaya-auth-header__crown {
	width: 3rem; height: 3rem;
	border-radius: 50%;
	background: rgba(196,168,130,0.15);
	border: 1px solid rgba(196,168,130,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #C4A882;
	margin-bottom: 0.75rem;
	animation: abaya-auth-crown-glow 2.5s ease-in-out infinite;
}
@keyframes abaya-auth-crown-glow {
	0%, 100% { box-shadow: 0 0 0px rgba(196,168,130,0); }
	50%       { box-shadow: 0 0 20px rgba(196,168,130,0.4); }
}
.abaya-auth-header__title {
	font-family: var(--abaya-font-display);
	font-size: 2rem;
	color: #fff;
	letter-spacing: 0.1em;
	margin: 0;
	animation: abaya-auth-title-glow 3s ease-in-out infinite;
}
@keyframes abaya-auth-title-glow {
	0%, 100% { text-shadow: 0 0 0px rgba(196,168,130,0); }
	50%       { text-shadow: 0 0 25px rgba(196,168,130,0.5); }
}
.abaya-auth-header__divider {
	width: 5rem; height: 1px;
	margin-top: 0.25rem;
	background: linear-gradient(90deg, transparent, #C4A882, transparent);
	animation: abaya-auth-divider 3s ease-in-out infinite;
}
@keyframes abaya-auth-divider {
	0%, 100% { transform: scaleX(0.5); opacity: 0.4; }
	50%       { transform: scaleX(1); opacity: 1; }
}

/* ── الغلاف والكارد ── */
.abaya-auth-wrap {
	flex: 1;
	padding: 0 1.25rem 2.5rem;
	margin-top: -1.5rem;
	position: relative;
	z-index: 10;
}
.abaya-auth-card {
	background: #FAF7F4;
	border-radius: 1.5rem;
	box-shadow: 0 -4px 40px rgba(0,0,0,0.08), 0 20px 60px rgba(0,0,0,0.06);
	overflow: hidden;
	padding: 1.75rem 1.5rem 2rem;
	max-width: 480px;
	margin: 0 auto;
}

/* ── رأس الكارد ── */
.abaya-auth-card__head {
	text-align: center;
	margin-bottom: 1.5rem;
}
.abaya-auth-card__icon {
	width: 3.5rem; height: 3.5rem;
	border-radius: 50%;
	background: rgba(196,168,130,0.1);
	border: 1px solid rgba(196,168,130,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #C4A882;
	margin: 0 auto 1rem;
}
.abaya-auth-card__title {
	font-family: var(--abaya-font-display);
	font-size: 1.4rem;
	color: #1A1714;
	margin: 0 0 0.3rem;
}
.abaya-auth-card__subtitle {
	font-size: 0.78rem;
	color: #9B9189;
	line-height: 1.7;
	margin: 0;
}

/* الفاصل الذهبي */
.abaya-auth-card__head .abaya-golden-divider {
	margin-top: 0.5rem;
}

/* ── رسائل الخطأ والنجاح ── */
.abaya-auth-alert {
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 0.8rem;
	margin-bottom: 1rem;
	text-align: center;
}
.abaya-auth-alert--error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
}
.abaya-auth-alert--success {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #059669;
}

/* ── تبديل طريقة الدخول ── */
.abaya-auth-method-switch {
	display: flex;
	background: #F5EFE6;
	border-radius: 0.75rem;
	padding: 0.25rem;
	margin-bottom: 1.25rem;
	gap: 0;
}
.abaya-auth-method-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.625rem 0.5rem;
	border-radius: 0.5rem;
	font-size: 0.78rem;
	color: #9B9189;
	background: transparent;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
	cursor: pointer;
}
.abaya-auth-method-btn.is-active {
	background: #fff;
	color: #1A1714;
	box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.abaya-auth-method-btn.is-active svg {
	stroke: #C4A882;
}

/* ── نموذج المصادقة ── */
.abaya-auth-form {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

/* حقل الإدخال */
.abaya-auth-field { position: relative; }
.abaya-auth-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	background: #F5EFE6;
	border-radius: 0.875rem;
	overflow: hidden;
	transition: box-shadow 0.25s;
}
.abaya-auth-input-wrap:focus-within {
	box-shadow: 0 0 0 2px rgba(196,168,130,0.35);
}
.abaya-auth-input-wrap--error {
	box-shadow: 0 0 0 1.5px rgba(192,68,74,0.4);
}
.abaya-auth-input-icon {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: #9B9189;
	pointer-events: none;
	z-index: 2;
	display: flex;
	align-items: center;
}
.abaya-auth-input {
	width: 100%;
	background: transparent;
	border: none;
	outline: none;
	padding: 1rem 3rem 1rem 3rem;
	font-size: 0.85rem;
	color: #1A1714;
	font-family: inherit;
}
.abaya-auth-input::placeholder {
	color: rgba(155,145,137,0.7);
}
.abaya-auth-input-slot {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: #9B9189;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 0;
	z-index: 2;
}
.abaya-auth-field__error {
	font-size: 0.68rem;
	color: #c0444a;
	margin: 0.25rem 0 0 0.5rem;
}

/* ── سطر "تذكرني + نسيت كلمة المرور" ── */
.abaya-auth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8rem;
	margin-top: -0.25rem;
}
.abaya-auth-remember {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: #9B9189;
	cursor: pointer;
}
.abaya-auth-link {
	color: #C4A882;
	font-size: 0.78rem;
	transition: color 0.2s;
}
.abaya-auth-link:hover { color: #A8896A; }

/* ── حقل الجوال ── */
.abaya-auth-phone-wrap {
	display: flex;
	align-items: stretch;
	background: #F5EFE6;
	border-radius: 0.875rem;
	overflow: hidden;
	direction: ltr;
	transition: box-shadow 0.25s;
}
.abaya-auth-phone-wrap:focus-within {
	box-shadow: 0 0 0 2px rgba(196,168,130,0.35);
}
.abaya-auth-phone-prefix {
	display: flex;
	align-items: center;
	padding: 0 0.85rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #4b5563;
	background: rgba(0,0,0,0.04);
	border-inline-end: 1px solid rgba(0,0,0,0.08);
	white-space: nowrap;
	flex-shrink: 0;
}
.abaya-auth-input--phone {
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding-right: 1rem !important;
	padding-left: 1rem !important;
	flex: 1;
	min-width: 0;
}

/* ── زر الإرسال ── */
.abaya-auth-submit {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 1rem;
	border-radius: 9999px;
	background: linear-gradient(135deg, #2C2C2C 0%, #1A1714 100%);
	color: #fff;
	font-size: 0.9rem;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	transition: transform 0.15s, opacity 0.2s;
	cursor: pointer;
}
.abaya-auth-submit:hover { opacity: 0.92; }
.abaya-auth-submit:active { transform: scale(0.97); }
.abaya-auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.abaya-auth-submit__shimmer {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(196,168,130,0.15), transparent);
	animation: abaya-auth-shimmer 2s ease-in-out infinite 1s;
	pointer-events: none;
}
@keyframes abaya-auth-shimmer {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(200%); }
}
.abaya-auth-submit__spinner {
	width: 1rem; height: 1rem;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: abaya-spin 0.7s linear infinite;
	display: inline-block;
}
@keyframes abaya-spin { to { transform: rotate(360deg); } }

/* زر ثانوي (أنشئي حساباً) */
.abaya-auth-btn-secondary {
	width: 100%;
	padding: 0.875rem;
	border-radius: 9999px;
	background: #F5EFE6;
	color: #1A1714;
	font-size: 0.88rem;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s;
}
.abaya-auth-btn-secondary:hover { background: #F0E8DF; }

/* زر شامبين */
.abaya-auth-btn-champagne {
	width: 100%;
	padding: 1rem;
	border-radius: 9999px;
	background: var(--abaya-primary);
	color: #fff;
	font-size: 0.88rem;
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: background 0.2s, transform 0.15s;
}
.abaya-auth-btn-champagne:hover { background: var(--abaya-primary-hover); }
.abaya-auth-btn-champagne:active { transform: scale(0.97); }
.abaya-auth-btn-champagne:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── تذييل الكارد ── */
.abaya-auth-footer {
	text-align: center;
	margin-top: 1.5rem;
	font-size: 0.8rem;
	color: #9B9189;
}
.abaya-auth-footer a {
	color: #C4A882;
	font-weight: 600;
	transition: color 0.2s;
}
.abaya-auth-footer a:hover { color: #A8896A; }

/* ── شريط المزايا (صفحة تسجيل الدخول) ── */
.abaya-auth-benefits {
	margin-top: 1.5rem;
	background: #F5EFE6;
	border-radius: 1rem;
	padding: 1rem;
}
.abaya-auth-benefits__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-size: 0.68rem;
	color: #C4A882;
}
.abaya-auth-benefits__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 0.75rem;
}
.abaya-auth-benefits__item {
	font-size: 0.62rem;
	color: #9B9189;
}

/* ── مقياس قوة كلمة المرور ── */
.abaya-pw-strength {
	margin-top: -0.25rem;
}
.abaya-pw-strength__bars {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 0.25rem;
}
.abaya-pw-strength__bar {
	flex: 1;
	height: 0.25rem;
	border-radius: 9999px;
	background: #E8E3DC;
	transition: background 0.3s;
}
.abaya-pw-strength__label {
	font-size: 0.65rem;
	color: #9B9189;
	margin: 0;
}

/* ── OTP ── */
.abaya-auth-otp-inputs {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	direction: ltr;
}
.abaya-auth-otp-digit {
	width: 3.5rem; height: 3.5rem;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 500;
	color: #1A1714;
	background: #F5EFE6;
	border: none;
	border-radius: 0.75rem;
	outline: none;
	transition: box-shadow 0.2s;
	font-family: inherit;
}
.abaya-auth-otp-digit:focus,
.abaya-auth-otp-digit.has-value {
	box-shadow: 0 0 0 2px rgba(196,168,130,0.35);
}
.abaya-auth-otp-hint {
	font-size: 0.75rem;
	color: #9B9189;
	text-align: center;
	margin: 0 0 0.75rem;
}
.abaya-auth-otp-phone {
	color: #C4A882;
	display: inline;
}
.abaya-auth-resend {
	text-align: center;
	margin-top: 1rem;
}
.abaya-auth-resend-btn {
	background: none;
	border: none;
	color: #C4A882;
	font-size: 0.8rem;
	cursor: pointer;
	font-family: inherit;
	padding: 0.25rem 0.5rem;
}
.abaya-auth-resend-btn:disabled {
	color: #9B9189;
	cursor: default;
}
.abaya-auth-change-btn {
	background: none;
	border: none;
	color: #C4A882;
	font-size: 0.75rem;
	cursor: pointer;
	text-decoration: underline;
	font-family: inherit;
	display: block;
	margin: 0.5rem auto 0;
}

/* ── شريط OTP الخاص بالدفع ── */
.abaya-auth-page--otp .abaya-auth-card {
	text-align: center;
}
.abaya-checkout-otp-phone {
	font-size: 1.1rem;
	color: #1A1714;
	display: block;
	margin: 0.5rem auto;
	letter-spacing: 0.05em;
}

/* ── الشرط والخصوصية ── */
.abaya-auth-terms {
	text-align: center;
	font-size: 0.65rem;
	color: #9B9189;
	line-height: 1.8;
	margin-top: 1.5rem;
}
.abaya-auth-terms a { color: #C4A882; cursor: pointer; }

/* ── حالة نجاح إرسال البريد ── */
.abaya-auth-success-state {
	text-align: center;
	padding: 1.5rem 0;
}
.abaya-auth-success-state__icon {
	width: 4rem; height: 4rem;
	border-radius: 50%;
	background: rgba(89,166,106,0.1);
	border: 1px solid rgba(89,166,106,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4CAF50;
	margin: 0 auto 1.25rem;
}
.abaya-auth-success-state__title {
	font-family: var(--abaya-font-display);
	font-size: 1.3rem;
	color: #1A1714;
	margin: 0 0 0.5rem;
}
.abaya-auth-success-state__text {
	font-size: 0.8rem;
	color: #9B9189;
	line-height: 1.8;
	margin: 0 0 1.5rem;
}

/* ── الوضع القديم — الكلاسات تُعيَّن ديناميكياً بـ JS ── */
.abaya-auth__alert { display: none; }

/* تعريض الكارت على الجوال */
@media (max-width: 480px) {
	.abaya-auth-card { padding: 1.5rem 1.25rem 1.75rem; }
}