/**
 * Alixa storefront nav bar — theme-independent, RTL-first.
 */

.alixa-nav {
	background: #ffffff;
	border-bottom: 1px solid #e2e8f0;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	margin-bottom: 18px;
}

/* ---------- Footer ---------- */
.alixa-foot {
	margin-top: 32px;
	background: #0f172a;
	color: #cbd5e1;
	padding: 26px 16px 18px;
}
.alixa-foot__in {
	max-width: 1040px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
}
.alixa-foot__col { min-width: 180px; }
.alixa-foot__brand { font-weight: 700; color: #fff; font-size: 1.05rem; margin-bottom: 6px; }
.alixa-foot__h { font-weight: 700; color: #fff; margin-bottom: 8px; font-size: 0.95rem; }
.alixa-foot__col a { display: block; color: #cbd5e1; text-decoration: none; padding: 3px 0; font-size: 0.9rem; }
.alixa-foot__col a:hover { color: #fff; }
.alixa-foot__col p { margin: 3px 0; font-size: 0.85rem; line-height: 1.9; }
.alixa-foot__btn {
	display: inline-block;
	margin-top: 10px;
	padding: 7px 14px;
	border: 1px solid #00b4d8;
	border-radius: 9px;
	color: #7fdfff !important;
	font-size: 0.85rem;
	font-weight: 700;
}
.alixa-foot__btn:hover { background: #00b4d8; color: #04201d !important; }
.alixa-foot__badges { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.alixa-foot__umslogo { height: 52px; width: auto; background: #fff; border-radius: 8px; padding: 4px; }
.alixa-foot__btn + .alixa-foot__btn { margin-top: 6px; }
.alixa-foot__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	height: 40px;
	padding: 0 8px;
	border-radius: 9px;
	background: #fff;
	color: #0f172a;
	font-size: 0.72rem;
	font-weight: 700;
	text-align: center;
}
.alixa-foot__col a.alixa-foot__about-link { cursor: pointer; }

/* "درباره ما" modal */
.alixa-about { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.alixa-about[hidden] { display: none; }
.alixa-about__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.alixa-about__box {
	position: relative;
	max-width: 560px;
	width: calc(100% - 32px);
	max-height: 80vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
	padding: 22px 24px;
	direction: rtl;
	text-align: right;
}
.alixa-about__title { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; color: #0096c7; }
.alixa-about__body { color: #334155; line-height: 2; font-size: 0.95rem; }
.alixa-about__body p { margin: 0 0 10px; }
.alixa-about__close {
	position: absolute; inset-inline-start: 16px; top: 14px;
	background: none; border: none; font-size: 1.6rem; line-height: 1; color: #94a3b8; cursor: pointer;
}
.alixa-about__close:hover { color: #0f172a; }

/* staff/operator login (footer link + modal) */
.alixa-foot__oplogin-link { color: #94a3b8 !important; text-decoration: underline; font-size: 0.78rem; }
.alixa-foot__oplogin-link:hover { color: #fff !important; }
.alixa-oplogin { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.alixa-oplogin[hidden] { display: none; }
.alixa-oplogin__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.alixa-oplogin__box {
	position: relative; width: calc(100% - 32px); max-width: 360px;
	background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
	padding: 22px 24px; direction: rtl; text-align: right;
}
.alixa-oplogin__title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: #0096c7; }
.alixa-oplogin__hint { margin: 0 0 14px; font-size: 0.8rem; color: #64748b; }
.alixa-oplogin__phone, .alixa-oplogin__pass {
	width: 100%; padding: 11px 12px; margin-bottom: 10px;
	border: 1px solid #e2e8f0; border-radius: 10px; font-family: inherit; font-size: 0.95rem;
}
.alixa-oplogin__phone { direction: ltr; text-align: center; letter-spacing: 0.04em; }
.alixa-oplogin__phone:focus, .alixa-oplogin__pass:focus { outline: none; border-color: #0096c7; box-shadow: 0 0 0 3px rgba(0, 150, 199, 0.15); }
.alixa-oplogin__err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 7px 10px; border-radius: 8px; font-size: 0.82rem; margin-bottom: 10px; }
.alixa-oplogin__btn { width: 100%; padding: 11px; border: none; border-radius: 10px; background: #0096c7; color: #fff; font-weight: 700; font-family: inherit; cursor: pointer; }
.alixa-oplogin__btn:hover { background: #0077a8; }
.alixa-oplogin__btn:disabled { opacity: 0.7; cursor: default; }
.alixa-oplogin__close { position: absolute; inset-inline-start: 16px; top: 14px; background: none; border: none; font-size: 1.6rem; line-height: 1; color: #94a3b8; cursor: pointer; }
.alixa-oplogin__close:hover { color: #0f172a; }

.alixa-foot__legal {
	max-width: 1040px;
	margin: 18px auto 0;
	border-top: 1px solid #1e293b;
	padding-top: 12px;
	font-size: 0.8rem;
	color: #94a3b8;
	text-align: center;
	line-height: 1.8;
}

/* account login dropdown (V3) */
.alixa-nav__acctli { position: relative; }
.alixa-nav__acct-toggle { background: none; border: none; cursor: pointer; font: inherit; }
.alixa-nav__acctpop {
	position: absolute;
	top: 120%;
	inset-inline-start: 0;
	width: 264px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
	padding: 14px;
	z-index: 80;
}
.alixa-nl-title { margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; }
.alixa-nl-phone, .alixa-nl-code {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-family: inherit;
	margin-bottom: 8px;
	direction: ltr;
	text-align: center;
	letter-spacing: 0.04em;
}
.alixa-nl-btn {
	width: 100%;
	padding: 10px;
	border: none;
	border-radius: 10px;
	background: #0096c7;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}
.alixa-nl-btn:hover { background: #0077a8; }
.alixa-nl-btn:disabled { opacity: 0.7; cursor: default; }
.alixa-nl-err {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 0.82rem;
	margin-bottom: 8px;
}
.alixa-nl-hint { font-size: 0.76rem; color: #64748b; margin: 8px 0 0; }
.alixa-nl-meta {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin-bottom: 8px; font-size: 0.8rem;
}
.alixa-nl-meta[hidden] { display: none !important; }
.alixa-nl-timer { color: #64748b; }
.alixa-nl-resend {
	background: none; border: none; padding: 0; cursor: pointer;
	color: #0096c7; font: inherit; text-decoration: underline;
}
.alixa-nl-resend:disabled { color: #94a3b8; cursor: default; text-decoration: none; }
@media (max-width: 640px) {
	/* Both popups become a full-width floating panel just under the nav (positioned
	   against .alixa-nav, not the narrow flex <li>), so they don't lengthen the page. */
	.alixa-nav { position: relative; }
	.alixa-nav__acctli { position: static; }
	.alixa-nav__acctpop {
		position: absolute;
		inset-inline: 10px;
		top: 100%;
		width: auto;
		box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
		border: 1px solid #e2e8f0;
		padding: 12px;
		z-index: 90;
	}
	/* account menu: compact 2-column grid instead of a long vertical list */
	.alixa-nav__acctmenu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
}

/* logged-in account menu (Digikala-style dropdown) */
.alixa-nav__acctmenu { width: 232px; padding: 8px; }
/* The `hidden` attribute MUST win over any display rule (e.g. the mobile grid),
   otherwise the dropdown can never be closed. */
.alixa-nav__acctpop[hidden] { display: none !important; }
.alixa-am__name {
	font-weight: 700; color: #0f172a; font-size: 0.92rem;
	padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid #f1f5f9;
	grid-column: 1 / -1; /* span full width in the mobile grid */
}
.alixa-am__item {
	display: block; padding: 9px 10px; border-radius: 9px;
	color: #334155; text-decoration: none; font-size: 0.9rem;
}
.alixa-am__item:hover { background: #f1f5f9; color: #0f172a; }
.alixa-am__logout {
	color: #b91c1c; margin-top: 4px; border-top: 1px solid #f1f5f9; border-radius: 0 0 9px 9px;
	grid-column: 1 / -1; /* span full width in the mobile grid */
}
.alixa-am__logout:hover { background: #fef2f2; color: #b91c1c; }

/* operator online/offline toggle (inside the account menu) */
.alixa-am__op {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 8px 10px; margin-bottom: 6px;
	background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
	grid-column: 1 / -1; /* full width in the mobile grid */
}
.alixa-am__op-state { font-size: 0.82rem; color: #334155; }
.alixa-am__op[data-online="1"] .alixa-am__op-state strong { color: #15803d; }
.alixa-am__op[data-online="0"] .alixa-am__op-state strong { color: #b91c1c; }
.alixa-am__op-btn {
	border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer;
	font-family: inherit; font-size: 0.8rem; font-weight: 700; color: #fff; background: #0096c7;
}
.alixa-am__op-btn:hover { background: #0077a8; }
.alixa-am__op-btn:disabled { opacity: 0.7; cursor: default; }

/* notification bell */
.alixa-nav__bell { display: inline-flex; align-items: center; gap: 2px; color: #334155; }
.alixa-nav__badge--notif { background: #ef4444; }

/* cart hover preview (V4) */
.alixa-nav__cartli { position: relative; }
.alixa-nav__cartpop {
	display: none;
	position: absolute;
	top: 120%;
	inset-inline-start: 0;
	width: 280px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
	padding: 12px;
	z-index: 80;
}
.alixa-nav__cartli:hover .alixa-nav__cartpop { display: block; }
.alixa-ncp-empty { color: #64748b; font-size: 0.88rem; text-align: center; padding: 10px 0; }
.alixa-ncp-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #f1f5f9; font-size: 0.85rem; }
.alixa-ncp-nm { color: #334155; }
.alixa-ncp-pr { color: #0096c7; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.alixa-ncp-more { color: #64748b; font-size: 0.78rem; padding: 6px 0; }
.alixa-ncp-foot { display: flex; justify-content: space-between; font-weight: 700; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0; font-size: 0.9rem; }
.alixa-ncp-btn { display: block; text-align: center; margin-top: 10px; padding: 9px; border-radius: 9px; background: #0096c7; color: #fff !important; font-weight: 700; font-size: 0.88rem; }
.alixa-ncp-btn:hover { background: #0077a8; }
@media (max-width: 640px) { .alixa-nav__cartpop { display: none !important; } }

/* cart count badge (U3) */
.alixa-nav__link--cart { position: relative; }
.alixa-nav__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-inline-start: 5px;
	border-radius: 999px;
	background: #0096c7;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

.alixa-nav__inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.alixa-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 1.05rem;
	color: #0096c7;
	text-decoration: none;
	white-space: nowrap;
}
.alixa-nav__logo { height: 34px; width: auto; display: block; }
@media (max-width: 480px) { .alixa-nav__brand-txt { display: none; } }

/* pharmacy open/closed status pill (moved from the old nirweb header) */
.alixa-nav__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}
.alixa-nav__status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.alixa-nav__status--online { background: #dcfce7; color: #15803d; }
.alixa-nav__status--online .alixa-nav__status-dot { background: #16a34a; }
.alixa-nav__status--offline { background: #fee2e2; color: #b91c1c; }
.alixa-nav__status--offline .alixa-nav__status-dot { background: #dc2626; }
@media (max-width: 640px) { .alixa-nav__status { font-size: 0.72rem; padding: 3px 8px; } }

/* category mega-menu (storefront v3) */
.alixa-nav__catli { position: relative; }
.alixa-nav__caret { font-size: 0.8em; margin-inline-start: 2px; }
.alixa-nav__megamenu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 280px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(2, 32, 54, 0.16);
	padding: 8px;
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	z-index: 80;
}
.alixa-nav__catli:hover .alixa-nav__megamenu,
.alixa-nav__catli:focus-within .alixa-nav__megamenu { display: grid; }
.alixa-nav__megaitem {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 11px;
	border-radius: 9px;
	color: #334155;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}
.alixa-nav__megaitem:hover { background: #eaf6fb; color: #0096c7; }
.alixa-nav__megaic { font-size: 1.05rem; line-height: 1; }
/* mobile: no hover — the «دسته‌ها» link navigates to the shop page (tiles there) */
@media (max-width: 640px) { .alixa-nav__megamenu { display: none !important; } }

.alixa-nav__toggle {
	display: none;
	margin-inline-start: auto;
	background: none;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 1.2rem;
	line-height: 1;
	padding: 6px 11px;
	cursor: pointer;
	color: #0f172a;
}

.alixa-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-inline-start: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.alixa-nav__link {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 8px;
	color: #334155;
	text-decoration: none;
	font-size: 0.92rem;
	transition: background 0.15s ease, color 0.15s ease;
}

.alixa-nav__link:hover {
	background: #f1f5f9;
	color: #0f172a;
}

.alixa-nav__link.is-active {
	background: #e6f6fc;
	color: #0096c7;
	font-weight: 700;
}

@media (max-width: 640px) {
	.alixa-nav__inner { gap: 8px; }
	/* No hamburger — the main items stay HORIZONTAL (wrap to a 2nd row if needed). */
	.alixa-nav__toggle { display: none; }
	.alixa-nav__list {
		display: flex;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
		margin: 6px 0 2px;
	}
	.alixa-nav__link {
		display: inline-flex;
		align-items: center;
		padding: 7px 11px;
		font-size: 0.9rem;
	}
}