/**
 * AMA Account — login / register / logout popup.
 *
 * @package AMAIndiaTwentySix
 */

.ama-account {
	--ama-acc-accent: var(--ama-navy, #1a2744);
	--ama-acc-maroon: var(--ama-maroon, #8a3a2a);
	--ama-acc-border: var(--ama-border, #d6cfc4);
	--ama-acc-muted:  var(--ama-muted, #534c45);
	--ama-acc-text:   var(--ama-text, #0d1524);
	/* Selected tab is a FILLED chip, not coloured text — see the tab rules. */
	--ama-acc-tab-on-bg:   var(--ama-acc-accent);
	--ama-acc-tab-on-text: #fff;
	position: relative;
	display: inline-block;
	font-family: var(--font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
}

/* ── Trigger ─────────────────────────────────────────────────────────────── */
.ama-account__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 6px 8px;
	min-height: 44px;
	cursor: pointer;
	color: inherit;
	font: inherit;
	font-weight: 600;
	line-height: 1;
}
.ama-account__toggle-label { white-space: nowrap; }
.ama-account--icon-only .ama-account__toggle-label {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Icon-only: match the Search / Mini-Cart toggles so the tile is the same size
   when the three sit together in the Utility Bar / dock.

   Reads --ama-util-box rather than hard-coding 48px. This selector is (0,2,0),
   the same specificity as the Utility Bar's own sizing rule in style.css, so
   whichever stylesheet loaded last used to win — which is why the account tile
   ignored the widget's Tap Target Size control while search and cart obeyed it.
   Sharing the variable removes the competition instead of escalating it; the
   fallback keeps 48px everywhere the bar is not involved. */
.ama-account--icon-only .ama-account__toggle {
	min-width: var(--ama-util-box, 48px);
	min-height: var(--ama-util-box, 48px);
	width: var(--ama-util-box, 48px);
	height: var(--ama-util-box, 48px);
	padding: 0;
	gap: 0;
	justify-content: center;
}
.ama-account__icon { flex-shrink: 0; }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.ama-account__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: var(--z-popover, 400); /* see the z-index scale in style.css */
	width: 300px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid var(--ama-acc-border);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
	padding: 18px;
	color: var(--ama-acc-text);
	text-align: left;
}
.ama-account__panel[hidden] { display: none; }
/* When floated to a left position, open the panel from the left edge. */
.ama-float--top-left .ama-account__panel,
.ama-float--center-left .ama-account__panel,
.ama-float--bottom-left .ama-account__panel { right: auto; left: 0; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.ama-account__tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--ama-acc-border); }
.ama-account__tab {
	flex: 1;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 8px 4px;
	font: inherit;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--ama-acc-muted);
	cursor: pointer;
}
/*
 * Selected/hovered tab fills instead of recolouring the label.
 * It used to set only `color: accent`, which is fine on white but unreadable
 * once the panel sits on a strong colour — navy text on red being the case that
 * surfaced it. A filled chip with white text carries its own contrast, whatever
 * is behind it.
 *
 * Prefixed with .ama-account (0-2-0): these are <button>s inside an Elementor
 * container, where parent-theme rules like `.elementor-widget-container button`
 * outrank a single class and repaint them.
 */
.ama-account .ama-account__tab {
	border-radius: 4px 4px 0 0;
	transition: background .15s ease, color .15s ease;
}
.ama-account .ama-account__tab:hover,
.ama-account .ama-account__tab:focus-visible {
	background: var(--ama-acc-tab-on-bg);
	color: var(--ama-acc-tab-on-text);
}
.ama-account .ama-account__tab.is-active {
	background: var(--ama-acc-tab-on-bg);
	color: var(--ama-acc-tab-on-text);
	border-bottom-color: var(--ama-acc-tab-on-bg);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.ama-account__field { display: block; margin: 0 0 12px; }
.ama-account__field > span { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ama-acc-muted); margin-bottom: 4px; }
.ama-account__field input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ama-acc-border);
	border-radius: 5px;
	font: inherit;
	font-size: 0.9375rem;
	background: #fff;
	color: var(--ama-acc-text);
}
.ama-account__field input:focus { outline: 2px solid var(--ama-acc-accent); outline-offset: 1px; border-color: var(--ama-acc-accent); }
.ama-account__remember { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; color: var(--ama-acc-muted); margin: 0 0 14px; cursor: pointer; }

.ama-account__submit {
	display: block;
	width: 100%;
	padding: 11px 16px;
	background: var(--ama-acc-accent);
	color: #fff;
	border: none;
	border-radius: 6px;
	font: inherit;
	font-weight: 700;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background .15s ease;
}
.ama-account__submit:hover { background: var(--ama-acc-maroon); }
.ama-account__submit:disabled { opacity: .6; cursor: default; }

.ama-account__lost { display: inline-block; margin-top: 12px; font-size: 0.8125rem; color: var(--ama-acc-muted); }
.ama-account__lost:hover { color: var(--ama-acc-maroon); }
.ama-account__fineprint { margin: 12px 0 0; font-size: 0.75rem; color: var(--ama-acc-muted); line-height: 1.5; }

/* ── Message ─────────────────────────────────────────────────────────────── */
.ama-account__msg {
	margin: 0 0 12px;
	padding: 9px 12px;
	border-radius: 5px;
	font-size: 0.8125rem;
	background: #eef2f8;
	color: var(--ama-acc-accent);
}
.ama-account__msg[hidden] { display: none; }
.ama-account__msg.is-error { background: #fdecea; color: #b3261e; }

/* ── Logged-in menu ──────────────────────────────────────────────────────── */
.ama-account__hello { margin: 0 0 12px; font-weight: 700; font-size: 0.9375rem; color: var(--ama-acc-accent); }
.ama-account__menu {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	/* Explicit gap rather than relying on each row's padding alone, so the
	   items stay separated whatever line-height they inherit. */
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ama-account__menu li { margin: 0; }
.ama-account__menu a {
	display: block;
	padding: 9px 10px;
	border-radius: 5px;
	color: var(--ama-acc-text);
	text-decoration: none;
	font-size: 0.9375rem;
}
.ama-account__menu a:hover { background: var(--ama-cream, #f5f0e8); color: var(--ama-acc-accent); }
.ama-account__logout {
	display: block;
	text-align: center;
	padding: 10px 16px;
	border: 1px solid var(--ama-acc-border);
	border-radius: 6px;
	color: var(--ama-acc-maroon);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.875rem;
}
.ama-account__logout:hover { background: var(--ama-acc-maroon); color: #fff; border-color: var(--ama-acc-maroon); }