.tl-shell {
	--tm-navy: #0b132b;
	--tm-accent: #ea580c;
	--tm-accent-hover: #c2410c;
	--tm-accent-ink: #fff;
	--tm-accent-glow: rgba(234, 88, 12, 0.08);
	--tm-accent-ring: rgba(234, 88, 12, 0.35);
	--tm-ink: #0f172a;
	--tm-ink-soft: #475569;
	--tm-line: #e2e8f0;
	--tm-canvas: #f8fafc;
	font-family: "Arimo", "Assistant", "Segoe UI", Arial, sans-serif;
	background:
		radial-gradient(1200px 400px at 100% 0%, var(--tm-accent-glow), transparent 50%),
		var(--tm-canvas);
	padding: 28px 16px;
	border-radius: 16px;
	border: 1px solid var(--tm-line);
}

.tl-card {
	max-width: 400px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--tm-line);
	border-radius: 16px;
	padding: 28px 24px 24px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 40px -24px rgba(15, 23, 42, 0.2);
}

/*
 * Centred, and stacked rather than a logo-beside-text row.
 *
 * The row worked when the mark was a known 40x40 square. A store's own logo is
 * whatever shape they uploaded — often a wide wordmark — so it is constrained
 * by HEIGHT and left to take whatever width that implies, centred.
 */
.tl-brand {
	text-align: center;
	margin-bottom: 20px;
}

.tl-brand__logo {
	display: block;
	margin: 0 auto 14px;
	max-height: 56px;
	max-width: 190px;
	width: auto;
	height: auto;
	/* No background plate: a transparent PNG on a coloured square is how you
	   make somebody else's logo look broken. */
	object-fit: contain;
}

/* Text stand-in when the site has no custom logo. Never a Tiger asset. */
.tl-brand__site {
	font-family: "Rubik", "Assistant", sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--tm-ink);
	margin-bottom: 10px;
	overflow-wrap: anywhere;
}

.tl-brand__name {
	font-family: "Rubik", "Assistant", sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--tm-ink);
}

.tl-brand__sub {
	font-size: 13px;
	color: var(--tm-ink-soft);
	margin-top: 2px;
}

.tl-tabs {
	display: grid;
	/* Auto columns, not a hardcoded three: the tab strip now shows only the
	   channels that can actually deliver, so it may be one or two wide. */
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 4px;
	padding: 4px;
	background: var(--tm-canvas);
	border-radius: 999px;
	margin-bottom: 18px;
}

.tl-tab {
	appearance: none;
	border: 0;
	background: transparent;
	border-radius: 999px;
	padding: 8px 6px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	color: var(--tm-ink-soft);
}

.tl-tab.is-on {
	background: #fff;
	color: var(--tm-ink);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/*
 * Anything the script marks hidden stays hidden. The panes are labels with a
 * display value from this sheet, and an author display beats the browser's
 * default for the hidden attribute, so on pages without a theme [hidden] rule
 * both channel fields showed at once (the lightbox on xcalibre.co.il, Dror,
 * 2026-09-02). The honeypot is not hidden this way on purpose (see .tl-hp).
 */
.tl-shell [hidden],
.tl-checkout[hidden],
.tl-lightbox[hidden] {
	display: none !important;
}

.tl-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tm-ink);
}

.tl-field input {
	padding: 12px 14px;
	border: 1px solid var(--tm-line);
	border-radius: 10px;
	font-size: 16px;
	font-weight: 400;
}

.tl-field input:focus {
	outline: 3px solid var(--tm-accent-ring);
	border-color: var(--tm-accent);
}

.tl-submit {
	width: 100%;
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 12px 16px;
	background: var(--tm-accent);
	color: var(--tm-accent-ink);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

.tl-submit:hover {
	background: var(--tm-accent-hover);
}

.tl-note {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--tm-ink-soft);
	text-align: center;
}

/* ---------------------------------------------------------------- step two */

.tl-msg {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	font-size: 13px;
	font-weight: 600;
}

.tl-sent {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--tm-ink-soft);
}

.tl-code {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-align: center;
}

.tl-link {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: var(--tm-accent);
	text-decoration: underline;
	cursor: pointer;
}

.tl-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

/*
 * The honeypot.
 *
 * Hidden by CLIPPING, not by display:none and not by an off-screen offset.
 *
 * display:none is out because several form-filling bots skip fields hidden that
 * way, and a field a bot skips catches nobody.
 *
 * The usual alternative — position:absolute; left:-9999px — is a real bug on an
 * RTL page and this plugin is Hebrew-first. In LTR, content overflowing to the
 * left is simply clipped. In RTL the scroll origin is on the right, so the same
 * rule GROWS the scrollable area leftwards: measured on the demo, the login page
 * went from a 765px scrollWidth to 10724px on a 765px viewport, giving every
 * Hebrew store a 10,000-pixel horizontal scrollbar.
 *
 * Clipping to a 1px box keeps the field rendered and fillable while taking up no
 * space in either direction. tabindex=-1 and aria-hidden on the wrapper keep it
 * away from keyboard and screen-reader users, the only humans who would
 * otherwise ever reach it.
 */
.tl-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tl-shell {
	position: relative;
}

/* The admin tab renders the real form with every control disabled. */
.tl-shell.is-preview .tl-card {
	opacity: 0.85;
}

/* ── Checkout ────────────────────────────────────────────────────────────────
 *
 * The same card, dropped into WooCommerce's checkout login slot. It sits inside
 * the page rather than floating on its own background, so the outer shell drops
 * its padding and canvas there.
 */

.tl-checkout[hidden] {
	display: none;
}

.tl-checkout .tl-shell {
	background: none;
	border: 0;
	padding: 0;
	margin-bottom: 24px;
}

.tl-checkout .tl-card {
	margin: 0;
}

.tl-intro {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--tm-ink-soft);
	text-align: center;
}

/* The "open a new account" link that rides alongside a no-account message. */
.tl-msg__link {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

/* The "no code arrived?" escape hatch under the verify step. Shown always, so
   its presence never says whether this particular account exists. */
.tl-note--muted {
	margin-top: 6px;
	opacity: 0.85;
}

/* Checkout card wrapper. A <pre> so wpautop and wptexturize leave the card alone
   (Elementor checkout pages filter the shortcode output); reset so it is not a box. */
div.tl-checkout > pre.tl-checkout-pre {
	all: unset;
	display: block;
	white-space: normal;
}

/* ── Lightbox ────────────────────────────────────────────────────────────────
 *
 * The same card, floating over the page. Printed by PHP in the footer on pages
 * that carry a trigger ([tigerlogin_lightbox] or a #tigerlogin menu link), opened
 * and closed by login.js. Without JS the noscript rule in the markup shows it
 * in place at the foot of the page instead.
 */

.tl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.tl-lightbox[hidden] {
	display: none;
}

.tl-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 19, 43, 0.6);
}

.tl-lightbox__panel {
	position: relative;
	/* Matches .tl-card's width exactly. It used to be 440px against a 400px
	 * card, and .tl-lightbox__close is absolute to THIS box, so the button
	 * sat in the 20px gutter, floating outside the white card. The card is
	 * released from its own max-width below so this stays the only place a
	 * lightbox width is written down. */
	width: min(400px, 100%);
	max-height: 100%;
	overflow: auto;
	box-sizing: border-box;
}

.tl-lightbox .tl-shell {
	background: none;
	border: 0;
	padding: 0;
}

.tl-lightbox .tl-card {
	margin: 0;
	max-width: none;
}

.tl-lightbox__close {
	position: absolute;
	/* 12px, not 10px: the card is border-radius 16px, and a 10px inset clips
	 * the button into the curve. inset-inline-end is the LEFT edge in RTL,
	 * which is where a Hebrew-first close control belongs. */
	top: 12px;
	inset-inline-end: 12px;
	z-index: 1;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #f1f5f9;
	color: #0f172a;
	font: 24px/36px Arial, sans-serif;
	text-align: center;
	cursor: pointer;
	padding: 0;
}

.tl-lightbox__close:hover,
.tl-lightbox__close:focus {
	background: #e2e8f0;
	outline: 2px solid var(--tm-accent);
	outline-offset: 1px;
}

html.tl-lightbox-open {
	overflow: hidden;
}