/* ══════════════════════════════════════════════════════════════════════════════
   Login / Register Modal — matches reference screenshot
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Overlay & backdrop ─────────────────────────────────────────────────────── */
.gl-auth-modal {
	position: fixed;
	inset: 0;
	/* Scale lives in header-b2b.css :root. Must outrank the fixed header search
	   dropdown (--gl-z-dropdown-fixed) and the DGWT plugin suggestions wrapper. */
	z-index: var(--gl-z-modal, 100050);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.gl-auth-modal[hidden] { display: none; }

.gl-auth-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 18, 30, 0.72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: glAuthFadeIn 0.2s ease;
}

@keyframes glAuthFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes glAuthSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ── Modal box ──────────────────────────────────────────────────────────────── */
.gl-auth-modal__box {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	max-width: 480px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.36);
	animation: glAuthSlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Form panel ─────────────────────────────────────────────────────────────── */
.gl-auth-modal__panel {
	flex: 1;
	background: #fff;
	display: flex;
	flex-direction: column;
	padding: 36px 44px 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	position: relative;
	min-width: 0;
}

/* ── Close button ───────────────────────────────────────────────────────────── */
.gl-auth-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1.5px solid #ccc;
	border-radius: 50%;
	color: #555;
	cursor: pointer;
	z-index: 10;
	transition: background 0.15s, color 0.15s;
	flex-shrink: 0;
}
.gl-auth-modal__close:hover { background: #f5f5f5; color: #000; }
.gl-auth-modal__close:focus-visible { outline: 2px solid var(--hdr-navy, #003b6b); outline-offset: 2px; }

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
.gl-auth-modal__tabs {
	display: flex;
	margin-bottom: 32px;
	flex-shrink: 0;
}

.gl-auth-modal__tab {
	flex: 1;
	height: 54px;
	font-family: var(--hdr-font, 'Open Sans', sans-serif);
	font-size: 1.55rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	letter-spacing: 0.01em;
	background: #f0f0f0;
	color: #666;
}

.gl-auth-modal__tab.is-active {
	background: var(--hdr-navy, #003b6b);
	color: #fff;
}

.gl-auth-modal__tab:focus-visible {
	outline: 2px solid var(--hdr-navy, #003b6b);
	outline-offset: -2px;
}

/* ── Solo title ─────────────────────────────────────────────────────────────── */
.gl-auth-modal__solo-title {
	font-size: 1.7rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 24px;
}

.gl-auth-sr-title {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

/* ── Panes ──────────────────────────────────────────────────────────────────── */
.gl-auth-modal__pane[hidden] { display: none; }

/* ── Icon input field ───────────────────────────────────────────────────────── */
#gl-auth-modal .gl-auth-field {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	background: #fff !important;
	margin-bottom: 16px !important;
	overflow: hidden !important;
	transition: border-color 0.15s, box-shadow 0.15s;
	height: 52px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	position: relative !important;
}

#gl-auth-modal .gl-auth-field:focus-within {
	border-color: var(--hdr-navy, #003b6b) !important;
	box-shadow: 0 0 0 3px rgba(0, 59, 107, 0.1) !important;
}

#gl-auth-modal .gl-auth-field__icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 48px !important;
	min-width: 48px !important;
	height: 100% !important;
	flex-shrink: 0 !important;
	color: #999 !important;
	border-right: 1px solid #e0e0e0 !important;
	background: #fafafa !important;
}

#gl-auth-modal .gl-auth-form__input {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	flex: 1 1 auto !important;
	width: auto !important;
	height: 100% !important;
	padding: 0 12px !important;
	margin: 0 !important;
	font-family: var(--hdr-font, 'Open Sans', sans-serif) !important;
	font-size: 1.45rem !important;
	color: #111 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	min-width: 0 !important;
	line-height: normal !important;
}

#gl-auth-modal .gl-auth-form__input::placeholder { color: #bbb; }

/* Password eye toggle — absolutely pinned to right of field.
   Only inc/gastroline-auth-modal.php emits .gl-auth-form__pw-toggle, always
   inside #gl-auth-modal, so the old #gl-auth-page branches are gone. */
#gl-auth-modal .gl-auth-form__pw-toggle {
	position: absolute !important;
	right: 0 !important;
	top: 0 !important;
	height: 100% !important;
	width: 42px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: none !important;
	border: none !important;
	border-left: none !important;
	cursor: pointer !important;
	color: #aaa !important;
	padding: 0 !important;
	margin: 0 !important;
	z-index: 2 !important;
}
#gl-auth-modal .gl-auth-form__pw-toggle:hover { color: #444 !important; }

/* Give the password input right-padding so text doesn't go under the button */
#gl-auth-modal .gl-auth-field:has(.gl-auth-form__pw-toggle) .gl-auth-form__input {
	padding-right: 46px !important;
}

/* Hide WooCommerce's native show-password toggle — we use our own.
   my-account.php renders class="gl-auth-page", never an id. */
#gl-auth-modal .show-password-input,
.gl-auth-page .show-password-input { display: none !important; }

/* ── Remember me + Forgot row ───────────────────────────────────────────────── */
.gl-auth-form__row-inline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
	gap: 8px;
}

.gl-auth-form__remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1.4rem;
	color: #444;
	cursor: pointer;
	font-family: var(--hdr-font, 'Open Sans', sans-serif);
}

.gl-auth-form__remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--hdr-navy, #003b6b);
	cursor: pointer;
	flex-shrink: 0;
}

#gl-auth-modal .gl-auth-form__forgot {
	background: none;
	border: none;
	padding: 0;
	font-family: var(--hdr-font, 'Open Sans', sans-serif);
	font-size: 1.35rem !important;
	color: #333;
	cursor: pointer;
	font-weight: 600;
	text-decoration: underline;
	transition: color 0.15s;
	line-height: 1;
}
#gl-auth-modal .gl-auth-form__forgot:hover { color: var(--hdr-navy, #003b6b); }
#gl-auth-modal .gl-auth-form__forgot:focus-visible { outline: 2px solid var(--hdr-navy, #003b6b); border-radius: 2px; }

/* ── Submit button ──────────────────────────────────────────────────────────── */
#gl-auth-modal .gl-auth-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 0;
	font-family: var(--hdr-font, 'Open Sans', sans-serif);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #fff;
	background: var(--hdr-navy, #003b6b);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s, box-shadow 0.15s;
	flex-shrink: 0;
}
#gl-auth-modal .gl-auth-form__submit:hover {
	background: #002d52;
	box-shadow: 0 4px 16px rgba(0, 59, 107, 0.3);
}
#gl-auth-modal .gl-auth-form__submit:active  { background: #001e38; box-shadow: none; }
#gl-auth-modal .gl-auth-form__submit:focus-visible { outline: 2px solid var(--hdr-navy, #003b6b); outline-offset: 2px; }

/* Loading state — text feedback, no spinner */
#gl-auth-modal .gl-auth-form__submit.is-loading {
	pointer-events: none;
	opacity: 0.75;
	letter-spacing: 0.04em;
}

/* ── Error / success messages ───────────────────────────────────────────────── */
.gl-auth-form__msg {
	display: none;
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 1.4rem;
	line-height: 1.5;
	margin-bottom: 14px;
}
.gl-auth-form__msg:not(:empty)  { display: block; }
.gl-auth-form__msg--error   { background: #fff0f0; color: #c62828; border: 1px solid #f5c6cb; }
.gl-auth-form__msg--success { background: #f0faf3; color: #2e7d32; border: 1px solid #c3e6cb; font-weight: 600; }

/* ── Switch link below form ─────────────────────────────────────────────────── */
.gl-auth-modal__switch {
	margin-top: 22px;
	text-align: center;
	font-size: 1.35rem;
	color: #777;
	font-family: var(--hdr-font, 'Open Sans', sans-serif);
	flex-shrink: 0;
}
.gl-auth-modal__switch-btn {
	background: none;
	border: none;
	padding: 0;
	margin-left: 4px;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	color: var(--hdr-navy, #003b6b);
	cursor: pointer;
	text-decoration: underline;
}
.gl-auth-modal__switch-btn:hover { color: #002d52; }

/* ── Back button ────────────────────────────────────────────────────────────── */
.gl-auth-modal__back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	padding: 0;
	margin-bottom: 16px;
	font-family: var(--hdr-font, 'Open Sans', sans-serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: #666;
	cursor: pointer;
	transition: color 0.15s;
}
.gl-auth-modal__back:hover { color: var(--hdr-navy, #003b6b); }

/* ── Forgot pane description ────────────────────────────────────────────────── */
.gl-auth-modal__pane-desc {
	font-size: 1.4rem;
	color: #777;
	margin: 0 0 20px;
	line-height: 1.6;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.gl-auth-modal__backdrop,
	.gl-auth-modal__box { animation: none; }
}

/* ── Mobile: bottom sheet ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.gl-auth-modal { align-items: flex-end; padding: 0; }
	.gl-auth-modal__box { border-radius: 16px 16px 0 0; max-height: 96vh; }
	.gl-auth-modal__panel { padding: 28px 24px 36px; }
}