/* ===========================================================================
 * Toolbar engine — LOGIN SKINS styling.
 * Full-screen WebGL background behind the login form + graceful CSS-gradient
 * fallback. Namespaced tbeng-login-*. Injected only on login pages (pre-auth,
 * brand-standalone), so the skin palettes below are intentional design colours,
 * not admin-theme tokens.
 * ======================================================================== */
.tbeng-login-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tbeng-login-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tbeng-login-bg.is-live .tbeng-login-canvas { animation: tbengLoginFade 1.1s ease both; }
@keyframes tbengLoginFade { from { opacity: 0; } to { opacity: 1; } }

/* Fallback / reduced-motion: hide canvas, show a CSS gradient in the skin's palette */
.tbeng-login-bg--fallback .tbeng-login-canvas, .tbeng-login-bg--static .tbeng-login-canvas { display: none; }
.tbeng-login-bg--fallback, .tbeng-login-bg--static { background: linear-gradient(135deg, #3a3f66, #4a4a8a, #2f6b7d); background-size: 300% 300%; }
.tbeng-login-bg--fallback { animation: tbengLoginShift 20s ease infinite; }
/* Colour wash for scenes that keep their own palette (3D scenes, city drives):
   the chosen login colour (custom, or the admin theme's when following it)
   re-hues the scene while its light and shade stay intact. Above the scene,
   below the sign-in card. */
.tbeng-login-wash { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: color; }

/* ── Custom media background (chosen image or stock video) ──────────────────
   A fixed, full-bleed layer behind the sign-in card, own namespace. The image
   or video is referenced directly (no server streaming); object-fit keeps it
   crisp at any size. The dark base only shows for the instant before it paints. */
.tbeng-loginmedia { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #0b1020; }
.tbeng-loginmedia-img,
.tbeng-loginmedia-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tbeng-loginmedia-vid { z-index: 1; }
/* Tint overlay over the media — above the image/video, below the sign-in card. */
.tbeng-loginmedia-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
@keyframes tbengLoginShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.tbeng-login-bg--aurora.tbeng-login-bg--fallback, .tbeng-login-bg--aurora.tbeng-login-bg--static { background: linear-gradient(135deg, #3a3f66, #4a4a8a, #2f6b7d); background-size: 300% 300%; }
.tbeng-login-bg--midnight.tbeng-login-bg--fallback, .tbeng-login-bg--midnight.tbeng-login-bg--static { background: linear-gradient(135deg, #1c2036, #2a2c50, #1f2f4a); background-size: 300% 300%; }
.tbeng-login-bg--sunset.tbeng-login-bg--fallback, .tbeng-login-bg--sunset.tbeng-login-bg--static { background: linear-gradient(135deg, #6b3b52, #a1495a, #d08a4a); background-size: 300% 300%; }
.tbeng-login-bg--forest.tbeng-login-bg--fallback, .tbeng-login-bg--forest.tbeng-login-bg--static { background: linear-gradient(135deg, #2a4636, #35664a, #2f6b6b); background-size: 300% 300%; }
.tbeng-login-bg--ember.tbeng-login-bg--fallback, .tbeng-login-bg--ember.tbeng-login-bg--static { background: linear-gradient(135deg, #3a2230, #6b2f2f, #a1533a); background-size: 300% 300%; }

/* ── Theme-accent aliases (colours follow the enabled admin theme; the token
 *    injector publishes the compiled --at-color-* onto :root, with hex
 *    fallbacks so the card stays polished if they're unavailable) ── */
html.tbeng-authskin {
  --tbeng-login-accent: var(--at-color-primary, #3b5bdb);
  --tbeng-login-ring:   var(--at-color-ring, var(--at-color-primary, #3b5bdb));
  --tbeng-login-font: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Card entrance is driven by the 3D physics tornado (toolbar_login_tornado.js).
 *    Until it runs, the "arm" class holds the card hidden (structural selectors,
 *    so it works before the element tagger runs); the script reveals it and a
 *    hard failsafe always clears the arm. Default entrance; the effects popup
 *    can switch it off. ── */
html.tbeng-tornado-arm [class*="authentication-form-wrapp"] > div:last-child,
html.tbeng-tornado-arm .panel_s { opacity: 0; }

/* Logo + heading reveal */
@keyframes tbengLoginLogoIn { from { opacity: 0; transform: translate3d(0, -30px, 0) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes tbengLoginRiseIn { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }

/* Lift every auth piece above the fixed background canvas (works whatever the
 * page's container nesting is). */
html.tbeng-authskin .tbeng-auth-wrap,
html.tbeng-authskin .tbeng-auth-card,
html.tbeng-authskin .tbeng-auth-title,
html.tbeng-authskin .tbeng-auth-sub,
html.tbeng-authskin .company-logo { position: relative; z-index: 20; }

/* headings + subtitle: legible over the animation, modern display font */
.tbeng-auth-title { color: #ffffff; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); font-family: var(--tbeng-login-font); animation: tbengLoginRiseIn .7s ease both; animation-delay: .22s; }
.tbeng-auth-sub   { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 10px rgba(0, 0, 0, .45); animation: tbengLoginRiseIn .7s ease both; animation-delay: .36s; }
.company-logo     { animation: tbengLoginLogoIn .8s cubic-bezier(.16, .84, .3, 1) both; animation-delay: .05s; }

/* frosted-glass logo plate (gated by the logo effect setting) */
html.tbeng-login-logo-frost .tbeng-auth-logo {
  padding: 14px 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .3));
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 18px;
  box-shadow: 0 20px 55px -24px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* modern frosted-glass card that lifts off the animated background */
.tbeng-auth-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .6));
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 22px;
  box-shadow: 0 34px 90px -28px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .75);
}
.tbeng-auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 22px 22px 0 0; pointer-events: none; opacity: .9;
  background: linear-gradient(90deg, transparent, var(--tbeng-login-accent), transparent);
}
.tbeng-auth-card .form-control {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.tbeng-auth-card .form-control:focus {
  background: rgba(255, 255, 255, .92);
  border-color: var(--tbeng-login-ring);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .28);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tbeng-login-ring) 32%, transparent);
}
.tbeng-auth-card .btn-primary {
  border-radius: 12px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .4);
}
.tbeng-auth-card .btn-primary:hover {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 18px 38px -12px rgba(0, 0, 0, .45);
}

/* ── Hover-flip fields: modern centred label by default; rotates to reveal the
 *    input on hover / focus / when filled. Built by toolbar_login_fields.js. ── */
.tbeng-lf-front { font-family: var(--tbeng-login-font); }
.tbeng-lf-scene { perspective: 950px; }
.tbeng-lf-inner {
  position: relative;
  min-height: 46px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.tbeng-lf-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tbeng-lf-front {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 600; font-size: 15px; letter-spacing: .05em;
  color: var(--at-color-heading, #1c2340);
  cursor: text; border-radius: 12px;
  background: rgba(255, 255, 255, .26);
  border: 1px dashed rgba(120, 130, 150, .38);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tbeng-lf-front:hover { background: rgba(255, 255, 255, .44); border-color: var(--tbeng-login-ring); color: var(--tbeng-login-ring); }
.tbeng-lf-back { transform: rotateY(180deg); }
/* Flip to reveal the input ONLY on hover or while focused/typing — a filled or
 * browser-autofilled field stays in its closed label position until touched. */
.tbeng-lf:hover .tbeng-lf-inner,
.tbeng-lf:focus-within .tbeng-lf-inner { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .tbeng-login-bg.is-live .tbeng-login-canvas { animation: none; }
  .tbeng-login-bg--fallback { animation: none; }
  .tbeng-auth-card { animation: tbengLoginFade 1.1s ease both; transform: none; filter: none; }
  .company-logo, .tbeng-auth-title, .tbeng-auth-sub { animation: none; }
  /* Show the input outright — no flip gimmick when motion is reduced. */
  .tbeng-lf-inner { transform: rotateY(180deg); transition: none; }
}

/* ── Immersive scene controls (play / scrub-rewind / autoplay) ── */
.tbeng-imm-ctl { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; }
.tbeng-imm-play { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; transition: background .16s ease, border-color .16s ease; }
.tbeng-imm-play:hover { border-color: rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .5); }
.tbeng-imm-play::before { content: '\25B6'; margin-left: 2px; }
.tbeng-imm-play[data-auto="1"]::before { content: '\275A\275A'; letter-spacing: -3px; margin-left: 0; }
.tbeng-imm-scrub { position: relative; width: min(440px, 56vw); height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .16); cursor: pointer; }
.tbeng-imm-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: rgba(255, 255, 255, .88); }
.tbeng-imm-head { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .55); pointer-events: none; }
.tbeng-imm-tc { flex: none; min-width: 58px; font-size: 11px; letter-spacing: .04em; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; }
/* Phones and tablets: no play/pause button or timeline bar — they overlapped
   the sign-in form and captions there, and the scene plays by itself (1 Oct). */
@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
  .tbeng-imm-ctl { display: none; }
}

/* ── Timeline caption "beats" — story text that changes as the scene plays.
 *    Accent follows the chosen scene colour (falls back to the admin theme). ── */
.tbeng-imm-beat {
  /* Mobile-first base (xs): sits in the normal flow, inserted directly under the
   * login card, so card + caption stack and centre together as one group (per the
   * page-layout formula). No overlap, no fixed positioning on small screens. */
  position: static; z-index: 20; pointer-events: none; box-sizing: border-box;
  width: 100%; max-width: 28rem; margin: 16px auto 0; text-align: center;
  background: rgba(20, 18, 17, .72); padding: 14px 18px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #f3f2f2; text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
  border-top: 2px solid var(--tbeng-imm-accent, var(--tbeng-login-accent, #ec3013));
}
/* Safety net: long words wrap inside the caption instead of spilling out of it,
 * whatever width the box ends up at. */
.tbeng-imm-beat-label,
.tbeng-imm-beat-title,
.tbeng-imm-beat-text { overflow-wrap: break-word; }
.tbeng-imm-beat-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tbeng-imm-accent, var(--tbeng-login-accent, #ec3013)); margin-bottom: 8px; }
.tbeng-imm-beat-title { font-family: var(--tbeng-login-font); font-size: clamp(19px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -.01em; margin-bottom: 8px; }
.tbeng-imm-beat-text  { font-size: 13px; line-height: 1.6; opacity: .74; max-width: 34ch; margin: 0 auto; }

/* Tablet and up (≥768px): the caption lifts out of the flow to the corner / side
 * placement chosen in the popup — there's room beside the centred card. */
@media (min-width: 768px) {
  .tbeng-imm-beat {
    position: fixed; z-index: 55; pointer-events: none;
    width: auto; max-width: min(400px, 42vw); margin: 0; text-align: left;
    border-top: 0; border-left: 2px solid var(--tbeng-imm-accent, var(--tbeng-login-accent, #ec3013));
  }
  .tbeng-imm-beat-text { margin: 0; }
  html.tbeng-cap-bl .tbeng-imm-beat { left: clamp(20px, 5vw, 64px); bottom: 96px; }
  html.tbeng-cap-br .tbeng-imm-beat { right: clamp(20px, 5vw, 64px); bottom: 96px; }
  html.tbeng-cap-tl .tbeng-imm-beat { left: clamp(20px, 5vw, 64px); top: 92px; }
  html.tbeng-cap-tr .tbeng-imm-beat { right: clamp(20px, 5vw, 64px); top: 92px; }
  html.tbeng-cap-ml .tbeng-imm-beat { left: clamp(20px, 5vw, 64px); top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; height: max-content; }
  html.tbeng-cap-mr .tbeng-imm-beat { right: clamp(20px, 5vw, 64px); top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; height: max-content; }
}
/* The caption eases in, and cross-fades whenever its words change: it eases out,
 * the copy swaps while it is invisible, then it eases back in. A transition
 * rather than a replayed keyframe animation, so a stage change never snaps and
 * never fights the entrance — one behaviour, identical on phone, tablet and
 * desktop. Driven by TBLOGIN_SWAP_CAP in toolbar_login.js. */
.tbeng-imm-beat {
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.tbeng-imm-beat.is-out { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) {
  .tbeng-imm-beat { transition: none; }
  .tbeng-imm-beat.is-out { opacity: 1; transform: none; }
}

/* ── Login panel placement (default = centred; left / right shift the whole
 *    logo + heading + card column). Outspecifies the centring utility without
 *    !important via the html-scoped selector. ── */
/* Left/right placement only from tablet up; on phones the panel always centres. */
@media (min-width: 768px) {
  html.tbeng-pos-left .tbeng-auth-wrap  { margin-left: clamp(20px, 6vw, 120px); margin-right: auto; }
  html.tbeng-pos-right .tbeng-auth-wrap { margin-right: clamp(20px, 6vw, 120px); margin-left: auto; }
}

/* Vertically centre the sign-in column in the viewport (the admin login body is
 * only as tall as its content by default, leaving the card near the top). Fixed
 * background/control layers are out of flow, so they're unaffected. */
/* The customer's own sign-in page is named differently by the platform, so
   it was never matched here and its card sat high on the page while the
   staff one was centred — the single visible difference between two pages
   that are meant to be the same. Both names now, one rule. */
html.tbeng-authskin body.login_admin,
html.tbeng-authskin body.customers_login { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }

/* ⚠ The customer page carries a bar across the top; the staff page does not.
   Centring the BODY therefore centres the bar and the sign-in column
   together, which lifts the panel about half the bar's height above true
   centre — 26px, and the single reason the two pages did not agree once
   everything else matched.
   The bar keeps its own height, and the space left under it does the
   centring instead, so the panel sits dead centre of the area a person is
   actually looking at. */
html.tbeng-authskin body.customers_login > #wrapper { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
html.tbeng-authskin body.customers_login > #wrapper > #content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
html.tbeng-authskin body.customers_login .navbar { flex: 0 0 auto; }
html.tbeng-authskin body.login_admin .authentication-form-wrapper,
html.tbeng-authskin body.customers_login .tbeng-auth-wrap { padding-top: 0; }

/* ── The small single-card pages: one card, opened in the middle ──
   Forgotten password, reset password, set password and the sign-in code page.
   Each is a single small card with nothing beside it, so it sits in the
   centre of the screen both ways, whatever side the sign-in card is set to.
   Top to bottom it is centred the way the sign-in page is: the bar across the
   top keeps its height and the space under it does the centring.
   Side to side the platform floats the column, and a floated box ignores
   "auto" margins — so the float is dropped here and the margins can work.
   These selectors outrank the left / right placement rules above by weight
   alone; nothing is marked important. */
html.tbeng-auth-solo.tbeng-authskin body.customers { min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; }
html.tbeng-auth-solo.tbeng-authskin body.customers > #wrapper { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
html.tbeng-auth-solo.tbeng-authskin body.customers > #wrapper > #content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
html.tbeng-auth-solo.tbeng-authskin body.customers .navbar { flex: 0 0 auto; }
html.tbeng-auth-solo.tbeng-authskin body.customers .mtop40 { margin-top: 0; }
/* The cap is the width the column already has on a desktop screen. Without
   it a tablet, which is narrower than the platform's column grid starts at,
   stretched the card across the whole screen. */
html.tbeng-auth-solo.tbeng-authskin body.customers .tbeng-auth-wrap { float: none; max-width: 456px; margin-left: auto; margin-right: auto; padding-top: 0; }
/* The staff versions of the same pages. The platform names their body
   differently from the staff sign-in page, so the rule that centres that one
   top to bottom never matched them and the card sat against the top edge. */
html.tbeng-auth-solo.tbeng-authskin body.authentication { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
html.tbeng-auth-solo.tbeng-authskin body.authentication .tbeng-auth-wrap { width: 100%; margin-left: auto; margin-right: auto; padding-top: 0; }

/* ── The customer Register page: a wide form, kept in the middle ──
   The left / right placement is meant for the small sign-in card. Applied to
   this page it only nudged a form that already fills its centred column a few
   dozen pixels to one side, so the form sat visibly off-centre. Here the form
   simply fills its column. */
html.tbeng-authskin body.register .tbeng-auth-wrap { margin-left: 0; margin-right: 0; }
/* The strip holding the Register button arrives with the platform's own pale
   fill, which showed as a white bar across the bottom of a dark glass card.
   It takes the card's own surface instead, with a hairline in the card's text
   colour so the strip still reads as a separate row on every card style. */
html.tbeng-authskin body.register .tbeng-auth-card .panel-footer { background: transparent; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
/* Country and City sit side by side as floated halves. The country picker is
   a pixel taller than the City box, so the Address row below caught on it and
   its label slid across to the right-hand half. Starting Address on a clear
   line puts the label back above its own box. */
html.tbeng-authskin body.register .register-address-group { clear: both; }
/* On a tablet the heading row above the form reached 15px past each edge of
   the screen, so the whole page could be dragged sideways. The platform marks
   that row as both a column and a row; between its phone and desktop sizes
   only the row half applies, with its negative side margins and nothing
   around it to absorb them. */
@media (min-width: 768px) and (max-width: 991px) {
  html.tbeng-authskin body.register .col-md-10.row { margin-left: 0; margin-right: 0; }
}

/* ══ Heading + intro bound INSIDE the card (relocated by the tagger) ══
 * They lose the over-artwork white treatment and become legible on the card. */
html.tbeng-auth-textin .tbeng-auth-title { color: var(--at-color-heading, #1c2340); text-shadow: none; margin: 0 0 4px; }
html.tbeng-auth-textin .tbeng-auth-sub   { color: var(--at-color-subtext, #5a6478); text-shadow: none; margin: 0 0 18px; }
html.tbeng-auth-textin .tbeng-auth-logo  { display: block; margin: 0 auto 12px; }

/* ══ Logo placement ══ */
/* Small brand mark fixed in a top corner (container leaves the column so no gap). */
html.tbeng-logo-tl .company-logo, html.tbeng-logo-tr .company-logo { position: fixed; top: 20px; margin: 0; z-index: 40; }
html.tbeng-logo-tl .company-logo { left: 26px; }
html.tbeng-logo-tr .company-logo { right: 26px; }
/* Fixed corner size — override Bootstrap .img-responsive (max-width:100%), which
 * otherwise collapses the logo to the shrink-wrapped fixed container's width. */
html.tbeng-logo-tl .tbeng-auth-logo, html.tbeng-logo-tr .tbeng-auth-logo { display: block; height: 34px; width: auto; max-width: none; max-height: none; }
html.tbeng-logo-tl.tbeng-login-logo-frost .tbeng-auth-logo,
html.tbeng-logo-tr.tbeng-login-logo-frost .tbeng-auth-logo { padding: 8px 14px; border-radius: 12px; }
/* Logo dropped inside the card, sized to sit above the heading. */
html.tbeng-logo-card .tbeng-auth-logo { max-height: 46px; width: auto; }

/* ══════════════════════════════════════════════════════════════════════
 *  PANEL STYLE PRESETS (login-card looks ported from the reference designs)
 *  Default = Frosted (the rounded glass card above). Classical + Modernist
 *  restyle the card, its fields, button and heading. html-scoped so they win
 *  over the frosted defaults without !important.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Classical: light editorial paper, hard dark border, square, serif head ── */
html.tbeng-card-classical .tbeng-auth-card {
  background: #f6f5f2; color: #201e1d;
  border: 2px solid #201e1d; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 30px 74px -30px rgba(0, 0, 0, .62);
}
html.tbeng-card-classical .tbeng-auth-card::before { display: none; }
html.tbeng-card-classical .tbeng-auth-title { font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; font-weight: 600; letter-spacing: -.01em; color: #201e1d; }
html.tbeng-card-classical .tbeng-auth-sub   { color: #5c574f; }
html.tbeng-card-classical .tbeng-auth-card .form-control { background: #fff; border: 1px solid #201e1d; border-radius: 0; color: #201e1d; }
html.tbeng-card-classical .tbeng-auth-card .form-control:focus { border-color: var(--tbeng-login-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tbeng-login-ring) 24%, transparent); }
html.tbeng-card-classical .tbeng-auth-card .btn-primary { border-radius: 0; }
html.tbeng-card-classical .tbeng-lf-front { background: #fff; border: 1px solid rgba(32, 30, 29, .4); border-radius: 0; color: #201e1d; }
html.tbeng-card-classical .tbeng-lf-front:hover { background: #efeae0; border-color: var(--tbeng-login-ring); color: var(--tbeng-login-ring); }

/* ── Modernist: dark frosted glass, thin border, square, underline fields ── */
html.tbeng-card-modernist .tbeng-auth-card {
  background: rgba(24, 22, 21, .46);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(243, 242, 242, .16); border-radius: 0; color: #f3f2f2;
  box-shadow: 0 34px 92px -30px rgba(0, 0, 0, .72);
}
html.tbeng-card-modernist .tbeng-auth-title { color: #f3f2f2; }
html.tbeng-card-modernist .tbeng-auth-sub   { color: rgba(243, 242, 242, .68); }
html.tbeng-card-modernist .tbeng-auth-card label { color: rgba(243, 242, 242, .72); }
html.tbeng-card-modernist .tbeng-auth-card .form-control {
  background: transparent; border: 0; border-bottom: 1px solid rgba(243, 242, 242, .28);
  border-radius: 0; color: #f3f2f2;
}
html.tbeng-card-modernist .tbeng-auth-card .form-control:focus { background: transparent; border-bottom-color: var(--tbeng-login-ring); box-shadow: none; }
html.tbeng-card-modernist .tbeng-lf-front { background: rgba(243, 242, 242, .06); border: 1px solid rgba(243, 242, 242, .18); border-radius: 0; color: rgba(243, 242, 242, .82); }
html.tbeng-card-modernist .tbeng-lf-front:hover { background: rgba(243, 242, 242, .12); border-color: var(--tbeng-login-ring); color: #fff; }
html.tbeng-card-modernist .tbeng-auth-card .btn-primary {
  background: transparent; border: 1px solid var(--tbeng-login-accent); color: #f3f2f2;
  border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 13px;
}
html.tbeng-card-modernist .tbeng-auth-card .btn-primary:hover { background: var(--tbeng-login-accent); color: #fff; }

/* ══ The customer sign-in page's masthead ═════════════════════════════════
 * The logo and intro line the engine adds to that page so it matches the
 * staff one. Both are then moved into the card by the engine's own script,
 * exactly as the staff pair are — these rules only make the intro read the
 * same as its staff counterpart. No colour is written: both follow the
 * theme labels the card already uses. */
html.tbeng-auth-textin .tbeng-auth-intro { color: var(--at-color-subtext, #5a6478); text-shadow: none; margin: 0 0 18px; }
html.tbeng-authskin .tbeng-auth-masthead { margin: 0 0 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   THE CUSTOMER'S OWN SIGN-IN PAGE, MADE TO MATCH THE STAFF ONE

   Both pages are given the same skin and the same settings — this workspace
   has "left" set for both — yet the customer's panel sat in the middle of
   the page and looked cramped. Two reasons, neither of them the settings:

   1. PLACEMENT. The platform builds the customer sign-in column with a
      Bootstrap offset — a third of the row pushed in from the left — which
      centres it before our own placement gets a say. Our left margin WAS
      being applied; it simply had nowhere to move to inside an already
      centred third of the page. The column is now full width with no
      offset, so the panel is placed by the setting alone, as it is for staff.

   2. SPACING. The staff card carries its own padding. The customer card is
      one of the platform's panels, whose padding lives on an inner box and
      is smaller — so the same card looked tighter. Matched to the staff card.

   The placement half applies only from 768px up: below that the whole page
   centres anyway and the platform's own stacking is right.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  /* Let the column be full width so the panel can actually be placed.
     Matched on the column classes themselves, NOT as a child of the row:
     the platform puts a spacing div in between, so a child combinator here
     quietly matches nothing — which is exactly what happened first time. */
  html.tbeng-authskin body.customers_login [class*="col-md-"],
  html.tbeng-authskin body.customers_login [class*="col-sm-"] {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    float: none;
  }

  /* The platform wraps this page in a container that is inset from the edge
     of the screen, and that inset was being ADDED to our own placement — so
     the customer's card sat 27px further in than the staff card, which has
     no container around it. The inset is removed here so both cards are
     measured from the same place.
     ⚠ Only the content container. The bar across the top has one of its own
     and must keep it. */
  html.tbeng-authskin body.customers_login #content > .container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  html.tbeng-authskin body.customers_login #content > .container > .row {
    margin-left: 0;
    margin-right: 0;
  }
  html.tbeng-authskin body.customers_login #content [class*="col-md-"],
  html.tbeng-authskin body.customers_login #content [class*="col-sm-"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Now the same shape as the staff column: a 398px column holding a 350px
     card with 24px either side of it, exactly as the staff page has. */
  /* The same cap the staff column has, so the card is sized the same way
     rather than to a number copied from one measurement — a copied number
     was 2px out the moment a style with a thicker border was chosen. */
  html.tbeng-authskin body.customers_login .tbeng-auth-wrap {
    /* 398px, which is what the staff column settles at. It has to be stated
       rather than derived: the staff column sizes itself to its content, and
       this page's content is not the same — it carries a language picker and
       a Register button the staff page has no equivalent of, so left to size
       itself this card comes out far wider.
       ⚠ One consequence, measured and accepted: the staff card grows by 2px
       under the "classical" style, whose fields have thicker borders. This
       one is fixed, so under that single style the customer card is 2px
       narrower. Two of the three styles match to the pixel. */
    max-width: 398px;
    margin-left: auto;
    margin-right: auto;
  }
  html.tbeng-authskin body.customers_login .tbeng-auth-card {
    margin-left: 24px;
    margin-right: 24px;
  }
  html.tbeng-pos-left.tbeng-authskin body.customers_login .tbeng-auth-wrap {
    margin-left: clamp(20px, 6vw, 120px);
    margin-right: auto;
  }
  html.tbeng-pos-right.tbeng-authskin body.customers_login .tbeng-auth-wrap {
    margin-right: clamp(20px, 6vw, 120px);
    margin-left: auto;
  }
}

/* The same room inside the card as the staff one has, at every width. */
html.tbeng-authskin body.customers_login .tbeng-auth-card > .panel-body {
  padding: 32px;
}

/* The heading and its line of intro. The tagger moves both INTO the card on
   every auth page. On the staff page the card carries its own padding, so
   they land properly inset. On the customer page the padding lives on an
   inner box that the heading is not inside — so it sat hard against the
   card's edges while the form below it was comfortably inset, which is what
   made the panel look cramped even once it was the right size.

   They are given the same inset here, and the inner box loses its top
   padding so the gap under the intro is not counted twice.

   Every customer sign-in page, not only login: register and forgot
   password carry the same card and measured their heading 2px ABOVE the
   card's top edge (and 1px from its left on forgot password). The inset
   eases down on phones so a narrow screen keeps its room. */
html.tbeng-authskin body.customers .tbeng-auth-card > .tbeng-auth-title,
html.tbeng-authskin body.customers .tbeng-auth-card > .tbeng-auth-sub {
  padding-left: clamp(20px, 6vw, 32px);
  padding-right: clamp(20px, 6vw, 32px);
}
html.tbeng-authskin body.customers .tbeng-auth-card > .tbeng-auth-title {
  padding-top: clamp(24px, 6vw, 32px);
}
html.tbeng-authskin body.customers .tbeng-auth-card > .panel-body {
  padding: 4px clamp(20px, 6vw, 32px) clamp(24px, 6vw, 32px);
}

/* The inner box the platform puts inside its panel carries a solid fill of
   its own — so even once the card was ours, the form half of the customer's
   panel stayed opaque while the heading half showed the chosen style. It is
   made see-through here so the card's own style is the only thing painting
   it, whichever of the three is picked. */
html.tbeng-authskin .tbeng-auth-card > .panel-body,
html.tbeng-authskin .tbeng-auth-card .panel-body {
  background: transparent;
}