/* =========================================================
   Wolf Custom Auth (wcauth) — scoped, theme-proof, responsive
   Every visual/layout declaration is !important on purpose:
   many WP themes / page builders ship generic button/input/flex
   rules with !important, which otherwise wins over class
   selectors of equal specificity. This guarantees the modal
   always renders exactly the same regardless of host theme,
   on both mobile and desktop.
   ========================================================= */

.wcauth-scope {
	--wcauth-radius: 16px;
	--wcauth-radius-sm: 10px;
	--wcauth-bg: #ffffff;
	--wcauth-fg: #18151d;
	--wcauth-muted: #77727f;
	--wcauth-muted-bg: #f6f4f8;
	--wcauth-border: #e5e1e9;
	--wcauth-input: #ffffff;
	--wcauth-ring: rgb(104, 62, 164);
	--wcauth-primary: rgb(104, 62, 164);
	--wcauth-primary-fg: #ffffff;
	--wcauth-primary-hover: rgb(87, 47, 143);
	--wcauth-destructive: #e5484d;
	--wcauth-shadow-lg: 0 24px 70px rgba(31, 20, 43, .22), 0 3px 12px rgba(31, 20, 43, .08);
	--wcauth-font: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}

html.wp-dark-mode-active .wcauth-scope {
	--wcauth-bg: #121214;
	--wcauth-fg: #fafafa;
	--wcauth-muted: #a1a1aa;
	--wcauth-muted-bg: #1c1c1f;
	--wcauth-border: #2a2a2e;
	--wcauth-input: #19191c;
}

html.wcauth-no-scroll,
body.wcauth-no-scroll { overflow: hidden !important; }

/* Reset real elements only. Resetting pseudo-elements removes Remix Icon glyphs. */
.wcauth-scope, .wcauth-scope * {
	all: revert !important;
	box-sizing: border-box !important;
	font-family: var(--wcauth-font) !important;
	text-align: right !important;
	direction: rtl !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	list-style: none !important;
	float: none !important;
	max-width: none !important;
	white-space: normal !important;
}
.wcauth-scope i[class^="ri-"],
.wcauth-scope i[class*=" ri-"],
.wcauth-scope i[class^="ri-"]::before,
.wcauth-scope i[class*=" ri-"]::before {
	font-family: "remixicon" !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-variant: normal !important;
	line-height: 1 !important;
	text-transform: none !important;
	display: inline-block !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}
.wcauth-scope button { cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important; }
.wcauth-scope a { cursor: pointer !important; }

/* ---- Overlay / Modal shell ---- */
.wcauth-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(18, 14, 24, .58) !important;
	-webkit-backdrop-filter: blur(3px) !important;
	backdrop-filter: blur(3px) !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 999999 !important;
	padding: 24px !important;
	margin: 0 !important;
	border: 0 !important;
}
.wcauth-overlay.is-open { display: flex !important; }

.wcauth-modal {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 424px !important;
	background: var(--wcauth-bg) !important;
	color: var(--wcauth-fg) !important;
	border: 1px solid var(--wcauth-border) !important;
	border-radius: var(--wcauth-radius) !important;
	padding: 32px !important;
	box-shadow: var(--wcauth-shadow-lg) !important;
	max-height: 92vh !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	animation: wcauth-modal-in .2s ease-out both !important;
}

.wcauth-close {
	position: absolute !important;
	top: 16px !important;
	left: 16px !important;
	width: 32px !important; height: 32px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	border: 1px solid transparent !important;
	border-radius: var(--wcauth-radius-sm) !important;
	color: var(--wcauth-muted) !important;
	background: transparent !important;
	font-size: 19px !important;
	padding: 0 !important;
	flex: none !important;
}
.wcauth-close:hover { color: var(--wcauth-fg) !important; background: var(--wcauth-muted-bg) !important; }
.wcauth-close:focus-visible,
.wcauth-back:focus-visible,
.wcauth-btn:focus-visible,
.wcauth-link:focus-visible,
.wcauth-avatar-btn:focus-visible {
	outline: 3px solid rgba(104,62,164,.22) !important;
	outline-offset: 2px !important;
}

.wcauth-step { display: none !important; }
.wcauth-step[data-wcauth-active="1"] { display: block !important; }

.wcauth-head {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin: 0 0 26px !important;
	width: 100% !important;
	padding-left: 32px !important;
}
.wcauth-head h3 { display: block !important; margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--wcauth-fg) !important; }
.wcauth-sub { display: block !important; color: var(--wcauth-muted) !important; font-size: 13.5px !important; line-height: 1.6 !important; margin: 2px 0 0 !important; word-break: break-word !important; }

.wcauth-badge {
	width: 50px !important; height: 50px !important;
	flex: none !important;
	border-radius: 999px !important;
	background: rgba(104,62,164,.09) !important;
	color: var(--wcauth-primary) !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	font-size: 24px !important;
}

.wcauth-back {
	width: 46px !important; height: 46px !important;
	flex: none !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(104,62,164,.09) !important;
	color: var(--wcauth-primary) !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	font-size: 21px !important;
	padding: 0 !important;
}
.wcauth-back:hover { background: rgba(104,62,164,.16) !important; }

.wcauth-label {
	display: block !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	margin: 18px 0 8px !important;
	color: var(--wcauth-fg) !important;
}
.wcauth-optional { font-weight: 400 !important; color: var(--wcauth-muted) !important; font-size: 12px !important; }

.wcauth-input-wrap { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; }
.wcauth-input-icon {
	position: absolute !important;
	top: 50% !important; right: 13px !important;
	transform: translateY(-50%) !important;
	color: var(--wcauth-muted) !important;
	font-size: 16px !important;
	pointer-events: none !important;
	display: flex !important;
}
.wcauth-input-wrap .wcauth-input { padding-right: 38px !important; }

.wcauth-input {
	display: block !important;
	width: 100% !important;
	height: 42px !important;
	background: var(--wcauth-input) !important;
	border: 1px solid var(--wcauth-border) !important;
	border-radius: var(--wcauth-radius-sm) !important;
	padding: 0 14px !important;
	margin: 0 !important;
	font-size: 14px !important;
	direction: ltr !important;
	text-align: right !important;
	outline: none !important;
	box-shadow: none !important;
}
.wcauth-input::placeholder { color: var(--wcauth-muted) !important; opacity: 1 !important; }
.wcauth-input:focus {
	border-color: var(--wcauth-ring) !important;
	box-shadow: 0 0 0 3px rgba(104,62,164,.22) !important;
}
.wcauth-input:hover,
.wcauth-select:hover { border-color: #cec8d5 !important; }

.wcauth-select-wrap {
	position: relative !important;
	flex: 0 0 96px !important;
	width: 96px !important;
	height: 42px !important;
	min-width: 0 !important;
}
.wcauth-select {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	background: var(--wcauth-input) !important;
	border: 1px solid var(--wcauth-border) !important;
	border-radius: var(--wcauth-radius-sm) !important;
	padding: 0 12px 0 32px !important;
	margin: 0 !important;
	font-size: 13px !important;
	text-align: center !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer !important;
}
.wcauth-select-icon {
	position: absolute !important;
	top: 50% !important;
	left: 10px !important;
	transform: translateY(-50%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--wcauth-muted) !important;
	font-size: 18px !important;
	pointer-events: none !important;
}
.wcauth-select:focus {
	border-color: var(--wcauth-ring) !important;
	box-shadow: 0 0 0 3px rgba(104,62,164,.22) !important;
}

.wcauth-phone-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	gap: 10px !important;
	width: 100% !important;
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
}
.wcauth-phone-row .wcauth-input-wrap { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }

.wcauth-btn {
	position: relative !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	height: 48px !important;
	border: 1px solid transparent !important;
	border-radius: var(--wcauth-radius-sm) !important;
	padding: 0 18px !important;
	margin: 22px 0 0 !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: normal !important;
	box-shadow: 0 6px 14px rgba(104,62,164,.16) !important;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
.wcauth-btn i { font-size: 16px !important; }
.wcauth-btn .wcauth-btn-loading {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	display: none !important;
	color: var(--wcauth-primary-fg) !important;
	font-size: 21px !important;
	transform: translate(-50%, -50%) !important;
}
.wcauth-btn.is-loading {
	color: transparent !important;
	cursor: wait !important;
	transform: none !important;
}
.wcauth-btn.is-loading > i:not(.wcauth-btn-loading) { visibility: hidden !important; }
.wcauth-btn.is-loading .wcauth-btn-loading {
	display: inline-block !important;
	animation: wcauth-btn-spin .7s linear infinite !important;
}
.wcauth-btn-primary {
	background: var(--wcauth-primary) !important;
	color: var(--wcauth-primary-fg) !important;
}
.wcauth-btn-primary:hover { background: var(--wcauth-primary-hover) !important; color: var(--wcauth-primary-fg) !important; box-shadow: 0 8px 18px rgba(104,62,164,.22) !important; transform: translateY(-1px) !important; }
.wcauth-btn-primary:active { transform: translateY(0) !important; box-shadow: 0 4px 10px rgba(104,62,164,.16) !important; }
.wcauth-btn-primary:disabled { opacity: .55 !important; cursor: not-allowed !important; }

.wcauth-error {
	display: block !important;
	color: var(--wcauth-destructive) !important;
	font-size: 12px !important;
	min-height: 17px !important;
	margin: 6px 0 0 !important;
	line-height: 1.5 !important;
}

.wcauth-otp-row {
	display: flex !important;
	flex-direction: row !important;
	gap: 10px !important;
	direction: ltr !important;
	margin: 4px 0 0 !important;
	width: 100% !important;
}
.wcauth-otp-box {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	height: 42px !important;
	text-align: center !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	background: var(--wcauth-input) !important;
	border: 1px solid var(--wcauth-border) !important;
	border-radius: var(--wcauth-radius-sm) !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	padding: 0 !important;
	outline: none !important;
}
.wcauth-otp-box:focus {
	border-color: var(--wcauth-ring) !important;
	box-shadow: 0 0 0 3px rgba(104,62,164,.22) !important;
}

.wcauth-resend { display: block !important; text-align: center !important; font-size: 12.5px !important; color: var(--wcauth-muted) !important; margin: 14px 0 0 !important; }
.wcauth-link {
	display: inline !important;
	color: var(--wcauth-primary) !important;
	font-weight: 700 !important;
	font-size: 12.5px !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
}
.wcauth-link:disabled { color: var(--wcauth-muted) !important; cursor: default !important; }

.wcauth-avatars { display: flex !important; flex-direction: row !important; gap: 10px !important; flex-wrap: wrap !important; width: 100% !important; }
.wcauth-avatar-btn {
	width: 52px !important; height: 52px !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	border: 2px solid transparent !important;
	background: var(--wcauth-muted-bg) !important;
	padding: 0 !important;
	flex: none !important;
}
.wcauth-avatar-btn img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; }
.wcauth-avatar-btn.is-selected {
	border-color: var(--wcauth-primary) !important;
	box-shadow: 0 0 0 3px rgba(104,62,164,.18) !important;
}

.wcauth-checkbox-row {
	display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 9px !important;
	margin: 18px 0 0 !important;
	font-size: 13px !important;
	color: var(--wcauth-fg) !important;
}
.wcauth-checkbox-row input[type="checkbox"] {
	all: revert !important;
	width: 17px !important; height: 17px !important;
	margin: 2px 0 0 !important;
	flex: none !important;
	accent-color: var(--wcauth-primary) !important;
}
.wcauth-terms-link { color: var(--wcauth-primary) !important; font-weight: 700 !important; text-decoration: underline !important; display: inline !important; }

.wcauth-loading {
	position: absolute !important; inset: 0 !important;
	background: rgba(255,255,255,.7) !important;
	display: none !important;
	align-items: center !important; justify-content: center !important;
	border-radius: inherit !important;
}
html.wp-dark-mode-active .wcauth-loading { background: rgba(18,18,20,.7) !important; }
.wcauth-loading.is-active { display: flex !important; }
.wcauth-spinner {
	width: 30px !important; height: 30px !important;
	border: 3px solid var(--wcauth-border) !important;
	border-top-color: var(--wcauth-primary) !important;
	border-radius: 999px !important;
	display: block !important;
	animation: wcauth-spin .7s linear infinite !important;
}
@keyframes wcauth-spin { to { transform: rotate(360deg); } }
@keyframes wcauth-btn-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes wcauth-modal-in {
	from { opacity: 0; transform: translateY(8px) scale(.985); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Account Drawer ===== */
.wcauth-account-overlay { justify-content: flex-end !important; padding: 0 !important; background: rgba(10,8,15,.5) !important; }
.wcauth-drawer {
	width: 100% !important;
	max-width: 340px !important;
	height: 100% !important;
	background: var(--wcauth-bg) !important;
	color: var(--wcauth-fg) !important;
	padding: 24px 20px !important;
	overflow-y: auto !important;
	position: relative !important;
	box-shadow: var(--wcauth-shadow-lg) !important;
}
.wcauth-drawer-head { position: relative !important; margin: 0 0 26px !important; padding-top: 6px !important; padding-left: 34px !important; }
.wcauth-drawer-user { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; }
.wcauth-drawer-avatar { width: 52px !important; height: 52px !important; border-radius: 999px !important; object-fit: cover !important; border: 1px solid var(--wcauth-border) !important; display: block !important; flex: none !important; }
.wcauth-drawer-hi { display: block !important; font-size: 12px !important; color: var(--wcauth-muted) !important; margin: 0 0 2px !important; }
.wcauth-drawer-nav { display: flex !important; flex-direction: column !important; width: 100% !important; }
.wcauth-drawer-nav a {
	display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important;
	padding: 14px 6px !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	color: var(--wcauth-fg) !important;
	border-bottom: 1px solid var(--wcauth-border) !important;
	width: 100% !important;
}
.wcauth-drawer-nav a i { font-size: 18px !important; color: var(--wcauth-muted) !important; flex: none !important; }
.wcauth-drawer-nav a:hover { color: var(--wcauth-primary) !important; }
.wcauth-drawer-nav a:hover i { color: var(--wcauth-primary) !important; }
.wcauth-drawer-nav a.wcauth-logout { color: var(--wcauth-destructive) !important; border-bottom: none !important; margin-top: 6px !important; }
.wcauth-drawer-nav a.wcauth-logout i { color: var(--wcauth-destructive) !important; }

/* ===== Responsive ===== */
@media (max-width: 480px) {
	.wcauth-overlay { padding: 16px !important; align-items: center !important; }
	.wcauth-modal {
		max-width: 100% !important;
		width: 100% !important;
		border-radius: 16px !important;
		max-height: calc(100vh - 32px) !important;
		padding: 28px 20px 22px !important;
	}
	.wcauth-drawer { max-width: 90% !important; }
	.wcauth-otp-box { font-size: 17px !important; }
	.wcauth-select-wrap { flex-basis: 88px !important; width: 88px !important; }
	.wcauth-select { font-size: 12.5px !important; }
	.wcauth-head h3 { font-size: 18px !important; }
	.wcauth-avatar-btn { width: 48px !important; height: 48px !important; }
}

@media (min-width: 481px) and (max-width: 782px) {
	.wcauth-modal { max-width: 420px !important; }
}

@media (min-width: 783px) {
	.wcauth-modal { max-width: 424px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.wcauth-modal,
	.wcauth-spinner,
	.wcauth-btn { animation: none !important; transition: none !important; }
}