/* fonts are hosted on this server (no Google Fonts requests) */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/source-sans-3-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/source-sans-3-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/source-sans-3-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/source-sans-3-latin-900-normal.woff2') format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:700 900;font-display:swap;src:url('fonts/josefin-sans-latin-700-normal.woff2') format('woff2')}
/* My Trucking Board - login template v3 (shared by the front-end login page and admin/login.php).
   Brand tokens are the :root variables at the top. */
:root{
    color-scheme: light;
    --bs-primary:#F05827; --bs-primary-rgb:240,88,39;
    --bs-primary-hover:#CC4B21; --bs-primary-active:#BF4620;
    --mtb-ink:#231F20;
    --bs-body-color:#212529; --bs-body-color-rgb:33,37,41;
    --bs-secondary-color:#565e64;
    --bs-link-color:#C4401A; --bs-link-hover:#9E3213;
    --page-bg:#e9ecef; --panel-bg:#ffffff; --card-bg:#ffffff; --card-footer-bg:rgba(0,0,0,.03);
    --border:#dee2e6; --card-border:transparent;
    --input-bg:#ffffff; --input-border:#ced4da; --addon-bg:#f8f9fa;
    --shadow-card:0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    --shot-shadow:0 .5rem 1.5rem rgba(33,37,41,.14);
    --badge-bg:rgba(240,88,39,.12); --badge-color:#A8340F;
    --danger-bg:#f8d7da; --danger-border:#f1aeb5; --danger-color:#58151c; --bs-danger:#dc3545; --bs-danger-text:#b02a37;
    --info-bg:#cff4fc; --info-border:#9eeaf9; --info-color:#055160;
    --warn-bg:#fff3cd; --warn-border:#ffe69c; --warn-color:#664d03;
    --card-accent-admin:var(--mtb-ink); --admin-badge-bg:#231F20; --admin-badge-color:#fff;
    --menu-bg:#ffffff; --menu-hover:#f1f3f5;
    --font:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif;
}
:root[data-bs-theme="dark"]{ 
    color-scheme: dark;
    --bs-body-color:#dee2e6; --bs-body-color-rgb:222,226,230;
    --bs-secondary-color:#adb5bd;
    --bs-link-color:#F47A55; --bs-link-hover:#F9A084;
    --page-bg:#16181b; --panel-bg:#1c1f23; --card-bg:#212529; --card-footer-bg:rgba(255,255,255,.04);
    --border:#373b3e; --card-border:rgba(255,255,255,.08);
    --input-bg:#2b3035; --input-border:#495057; --addon-bg:#2b3035;
    --shadow-card:0 0 1px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.6);
    --shot-shadow:0 .5rem 1.5rem rgba(0,0,0,.45);
    --badge-bg:rgba(240,88,39,.18); --badge-color:#F9A084;
    --danger-bg:#2c0b0e; --danger-border:#842029; --danger-color:#ea868f;
    --info-bg:#032830; --info-border:#087990; --info-color:#6edff6;
    --warn-bg:#332701; --warn-border:#997404; --warn-color:#ffda6a;
    --card-accent-admin:#6c757d; --admin-badge-bg:#343a40; --admin-badge-color:#fff;
    --menu-bg:#2b3035; --menu-hover:rgba(255,255,255,.08);
 }
@media (prefers-color-scheme: dark){
  :root:not([data-bs-theme]){ 
    color-scheme: dark;
    --bs-body-color:#dee2e6; --bs-body-color-rgb:222,226,230;
    --bs-secondary-color:#adb5bd;
    --bs-link-color:#F47A55; --bs-link-hover:#F9A084;
    --page-bg:#16181b; --panel-bg:#1c1f23; --card-bg:#212529; --card-footer-bg:rgba(255,255,255,.04);
    --border:#373b3e; --card-border:rgba(255,255,255,.08);
    --input-bg:#2b3035; --input-border:#495057; --addon-bg:#2b3035;
    --shadow-card:0 0 1px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.6);
    --shot-shadow:0 .5rem 1.5rem rgba(0,0,0,.45);
    --badge-bg:rgba(240,88,39,.18); --badge-color:#F9A084;
    --danger-bg:#2c0b0e; --danger-border:#842029; --danger-color:#ea868f;
    --info-bg:#032830; --info-border:#087990; --info-color:#6edff6;
    --warn-bg:#332701; --warn-border:#997404; --warn-color:#ffda6a;
    --card-accent-admin:#6c757d; --admin-badge-bg:#343a40; --admin-badge-color:#fff;
    --menu-bg:#2b3035; --menu-hover:rgba(255,255,255,.08);
 }
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); font-size:1rem; line-height:1.5; font-weight:400;
  color:var(--bs-body-color); background:var(--page-bg); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--bs-link-color); text-decoration:underline; text-underline-offset:.15em}
a:hover{color:var(--bs-link-hover)}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--bs-primary); outline-offset:2px}
.visually-hidden{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:.75rem; top:-4rem; z-index:100; background:var(--card-bg); color:var(--bs-body-color); padding:.5rem .875rem; border-radius:.375rem; box-shadow:var(--shadow-card); transition:top .15s}
.skip-link:focus{top:.75rem}

.icon{width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.icon-sm{width:1rem; height:1rem}

/* ------------------------------------------------------------------ layout */
.login-layout{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column}
.form-panel{
  position:relative; flex:1 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:4.25rem 1rem 2rem; background:var(--page-bg);
}
.login-box{width:100%; max-width:380px}
.login-footer{margin-top:1.5rem; text-align:center; font-size:.875rem; color:var(--bs-secondary-color)}

.slider-panel{
  background:var(--panel-bg); border-top:1px solid var(--border);
  padding:2.25rem 1.25rem 2.75rem; display:flex; flex-direction:column; justify-content:center;
}
.slider-inner{width:100%; max-width:640px; margin-inline:auto}
@media (min-width:992px){
  .login-layout{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(400px,1fr)}
  .slider-panel{order:-1; border-top:0; border-right:1px solid var(--border); padding:3rem clamp(2rem,4.5vw,4.5rem)}
}

/* ------------------------------------------------------------------ card (AdminLTE "card card-outline") */
.card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:.375rem;
  box-shadow:var(--shadow-card); overflow:hidden;
}
.card-outline{border-top:3px solid var(--bs-primary)}
.page-admin .card-outline{border-top-color:var(--card-accent-admin)}
.card-header{padding:1.25rem 1.25rem 1rem; text-align:center; border-bottom:1px solid var(--border)}
.card-body{padding:1.25rem 1.5rem 1.5rem}
.card-footer{padding:.875rem 1.25rem; background:var(--card-footer-bg); border-top:1px solid var(--border); text-align:center; font-size:.9375rem}
.brand-link{display:inline-flex; flex-direction:column; align-items:center; gap:.5rem; text-decoration:none}
.brand-logo{height:60px; width:auto}
.brand-logo.logo-dark{display:none}
:root[data-bs-theme="dark"] .brand-logo.logo-light{display:none}
:root[data-bs-theme="dark"] .brand-logo.logo-dark{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-bs-theme]) .brand-logo.logo-light{display:none}
  :root:not([data-bs-theme]) .brand-logo.logo-dark{display:block}
}
.badge{display:inline-block; padding:.28em .65em; font-size:.75rem; font-weight:700; line-height:1; letter-spacing:.04em; text-transform:uppercase; border-radius:50rem}
.badge-admin{background:var(--admin-badge-bg); color:var(--admin-badge-color); border:1px solid rgba(255,255,255,.14)}

.login-title{font-size:1.5rem; font-weight:700; line-height:1.2; text-align:center; margin-bottom:.375rem}
.login-box-msg{text-align:center; color:var(--bs-secondary-color); margin:0 auto 1.25rem; max-width:30ch; font-size:1rem}

/* ------------------------------------------------------------------ forms (floating label + input-group) */
.field{margin-bottom:1rem}
.input-group{display:flex; flex-wrap:nowrap; align-items:stretch; width:100%; position:relative}
.form-floating{position:relative; flex:1 1 auto; min-width:0}
.form-control{
  display:block; width:100%; height:calc(3.5rem + 2px); padding:1rem .75rem; font:inherit; line-height:1.25;
  color:var(--bs-body-color); background:var(--input-bg); border:1px solid var(--input-border);
  border-radius:.375rem; appearance:none; transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.input-group > .form-floating > .form-control{border-top-right-radius:0; border-bottom-right-radius:0}
.form-control::placeholder{color:transparent}
.form-control:focus{outline:0; border-color:var(--bs-primary); box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb),.28); position:relative; z-index:3}
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control:-webkit-autofill{padding-top:1.625rem; padding-bottom:.625rem}
.form-floating > label{
  position:absolute; top:0; left:0; z-index:4; height:100%; max-width:100%; padding:1rem .75rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; pointer-events:none; border:1px solid transparent; transform-origin:0 0;
  color:rgba(var(--bs-body-color-rgb),.68); transition:opacity .1s ease-in-out, transform .1s ease-in-out;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control:-webkit-autofill ~ label{opacity:.8; transform:scale(.85) translateY(-.5rem) translateX(.15rem)}
.input-group-text, .btn-addon{
  display:flex; align-items:center; justify-content:center; min-width:3rem; padding:.375rem .75rem; margin-left:-1px;
  color:var(--bs-secondary-color); background:var(--addon-bg); border:1px solid var(--input-border);
  border-radius:0 .375rem .375rem 0; font:inherit;
}
.btn-addon{cursor:pointer}
.btn-addon:hover{color:var(--bs-body-color)}
.btn-addon:focus-visible{outline-offset:-3px; position:relative; z-index:5}
.invalid-feedback{display:none; margin-top:.375rem; font-size:.875rem; color:var(--bs-danger-text,#b02a37)}
:root[data-bs-theme="dark"] .invalid-feedback{color:#ea868f}
.field.is-invalid .invalid-feedback{display:flex; align-items:center; gap:.375rem}
.field.is-invalid .form-control, .field.is-invalid .input-group-text, .field.is-invalid .btn-addon{border-color:var(--bs-danger)}
.field.is-invalid .form-control:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}
.form-text{margin-top:.375rem; font-size:.875rem; color:var(--bs-secondary-color); display:flex; align-items:center; gap:.375rem}
.form-text.text-warn{color:var(--warn-color)}
:root:not([data-bs-theme="dark"]) .form-text.text-warn{color:#8a5a00}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.625rem; padding:.625rem 1rem; font:inherit; font-weight:700;
  line-height:1.5; border:1px solid transparent; border-radius:.375rem; cursor:pointer; text-decoration:none;
  transition:color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.btn-primary{color:#fff; background:var(--bs-primary); border-color:var(--bs-primary)}
.btn-primary:hover{background:var(--bs-primary-hover); border-color:var(--bs-primary-hover); color:#fff}
.btn-primary:active{background:var(--bs-primary-active); border-color:var(--bs-primary-active)}
.btn-primary:focus-visible{outline:0; box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb),.4)}
.btn-primary:disabled{opacity:.75; cursor:progress}
.btn-lg{font-size:1.17rem; padding:.7rem 1rem}   /* 18.7px bold = WCAG "large text" (white on brand orange = 3.4:1) */
.w-100{width:100%}
.spinner{width:1.1em; height:1.1em; border:.18em solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.alert, .callout{display:flex; gap:.625rem; align-items:flex-start; padding:.75rem 1rem; margin-bottom:1rem; border:1px solid; border-radius:.375rem; font-size:.9375rem}
.alert-danger{background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger-color)}
.alert-info{background:var(--info-bg); border-color:var(--info-border); color:var(--info-color)}
.alert .icon, .callout .icon{margin-top:.15rem}
.callout{border-width:1px 1px 1px 5px; background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-color)}
.callout a{color:inherit; font-weight:700}
.callout strong{font-weight:700}

.signup-line{margin-top:1.25rem; text-align:center; color:var(--bs-secondary-color)}

/* ------------------------------------------------------------------ theme dropdown (AdminLTE v4 Light/Dark/Auto) */
.theme-switch{position:absolute; top:.875rem; right:.875rem; z-index:20}
.btn-theme{
  display:inline-flex; align-items:center; gap:.375rem; padding:.375rem .625rem; font:inherit; font-size:.9375rem; color:var(--bs-body-color);
  background:var(--card-bg); border:1px solid var(--border); border-radius:.375rem; cursor:pointer; box-shadow:var(--shadow-card);
}
.btn-theme:hover{border-color:var(--input-border)}
.dropdown-menu{
  position:absolute; right:0; top:calc(100% + .375rem); min-width:10rem; margin:0; padding:.375rem; list-style:none;
  background:var(--menu-bg); border:1px solid var(--border); border-radius:.5rem; box-shadow:0 .5rem 1.5rem rgba(0,0,0,.18);
}
.dropdown-item{
  display:flex; align-items:center; gap:.625rem; width:100%; padding:.4rem .625rem; font:inherit; color:var(--bs-body-color);
  background:none; border:0; border-radius:.375rem; cursor:pointer; text-align:left;
}
.dropdown-item:hover, .dropdown-item:focus-visible{background:var(--menu-hover)}
.dropdown-item .check{margin-left:auto; color:var(--bs-primary); visibility:hidden}
.dropdown-item[aria-checked="true"]{font-weight:700}
.dropdown-item[aria-checked="true"] .check{visibility:visible}

/* ------------------------------------------------------------------ slider (left panel) */
.slides{display:grid}
.slide{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s}
.slide.is-active{opacity:1; visibility:visible}
.shot{margin:0 0 1.75rem; border:1px solid var(--border); border-radius:.625rem; overflow:hidden; background:#fff; box-shadow:var(--shot-shadow)}
.shot img{width:100%; aspect-ratio:1200/520; object-fit:cover; object-position:top left}
.eyebrow{display:inline-block; margin-bottom:.75rem; padding:.3em .75em; font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--badge-color); background:var(--badge-bg); border-radius:50rem}
.slide h2{font-size:clamp(1.5rem,2.2vw,2rem); line-height:1.2; font-weight:700; margin-bottom:.625rem; letter-spacing:-.01em}
.slide p{color:var(--bs-secondary-color); font-size:1.0625rem; max-width:46ch}
.slider-controls{display:flex; align-items:center; gap:1rem; margin-top:1.75rem}
.dots{display:flex; gap:.25rem}
.dot{position:relative; width:2.25rem; height:1.5rem; padding:0; background:none; border:0; cursor:pointer}
.dot::after{content:""; position:absolute; left:0; right:0; top:50%; height:4px; margin-top:-2px; border-radius:2px; background:var(--border); transition:background .2s}
.dot[aria-current="true"]::after{background:var(--bs-primary)}
.dot:hover::after{background:rgba(var(--bs-primary-rgb),.55)}
.dot[aria-current="true"]:hover::after{background:var(--bs-primary)}
.ctl-group{display:flex; gap:.5rem; margin-left:auto}
.btn-ctl{
  display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; padding:0; color:var(--bs-body-color);
  background:var(--card-bg); border:1px solid var(--input-border); border-radius:50%; cursor:pointer; transition:border-color .15s, color .15s;
}
.btn-ctl:hover{border-color:var(--bs-primary); color:var(--bs-link-color)}

/* ------------------------------------------------------------------ admin left panel */
.admin-panel{display:none; position:relative; overflow:hidden; color:#fff; border:0 !important;
  background:radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.4px) 0 0/26px 26px, linear-gradient(160deg,#2b2627 0%,#231F20 55%,#1a1718 100%)}
.admin-panel .slider-inner{position:relative; z-index:2}
.admin-orb{position:absolute; right:-9.5rem; bottom:-12rem; width:36rem; height:36rem; border-radius:50%; background:var(--bs-primary); z-index:1}
.admin-orb::after{content:""; position:absolute; inset:2.5rem; border-radius:50%; border:2px solid rgba(255,255,255,.4)}
.admin-panel .brand-logo{height:64px; margin-bottom:2.5rem}
.admin-panel h2{font-size:clamp(1.75rem,2.6vw,2.5rem); line-height:1.15; font-weight:700; margin-bottom:.875rem; letter-spacing:-.01em}
.admin-panel .lead{color:rgba(255,255,255,.82); font-size:1.125rem; max-width:34ch; margin-bottom:2rem}
.check-list{list-style:none; margin:0; padding:0; display:grid; gap:.875rem; max-width:36ch}
.check-list li{display:flex; gap:.75rem; align-items:flex-start; color:rgba(255,255,255,.9)}
.check-list .icon{color:#FF8A62; margin-top:.2rem}
@media (min-width:992px){ .admin-panel{display:flex} }

@media (max-width:420px){
  .card-body{padding:1.125rem 1.125rem 1.25rem}
  .form-panel{padding-top:4rem}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; scroll-behavior:auto !important}
  .spinner{animation-duration:1.8s}
}

/* ===== White-label client login: theme-inverted brand panel ===== */
:root{
  --page-bg:#ffffff; --side-bg:#232c3b; --side-fg:#ffffff; --side-muted:rgba(255,255,255,.78); --side-dots:rgba(255,255,255,.07);
  --disc-ring:rgba(255,255,255,.55); --card-border:#e3e6ea;
  --display:"Josefin Sans","Exo 2",system-ui,sans-serif;
}
:root[data-bs-theme="dark"]{
  --page-bg:#232c3b; --card-bg:#2c3748; --input-bg:#222b39; --addon-bg:#222b39;
  --side-bg:#ffffff; --side-fg:#231F20; --side-muted:#4a4547; --side-dots:rgba(35,31,32,.08);
  --disc-ring:rgba(35,31,32,.35); --card-border:rgba(255,255,255,.09); --border:#3d495c;
}
.form-panel{background:var(--page-bg)}
.page-client .card-outline{border-top-color:var(--bs-primary)}

.client-logo{display:flex; justify-content:center; align-items:center; min-height:64px}
.client-logo img{height:64px; width:auto; max-width:100%}
.client-logo .logo-dark{display:none}
:root[data-bs-theme="dark"] .client-logo .logo-light{display:none}
:root[data-bs-theme="dark"] .client-logo .logo-dark{display:block}
.ph-logo{display:inline-flex; align-items:center; gap:.75rem; color:var(--bs-body-color)}
.ph-mark{display:grid; place-items:center; width:54px; height:54px; border-radius:.75rem; background:#1F4E79; color:#fff; font:900 1.45rem/1 var(--display); letter-spacing:.02em}
.ph-word{display:flex; flex-direction:column; text-align:left; font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:1.05; letter-spacing:.04em; font-size:1.05rem}
.ph-word small{font-weight:700; font-size:.68rem; letter-spacing:.18em; color:var(--bs-secondary-color)}
.company-name{font-size:1.625rem; font-weight:700; line-height:1.2; text-align:center; margin-bottom:.375rem}

/* ---- brand panel ---- */
.brand-panel{
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:2.5rem;
  min-height:22rem; padding:6rem 1.5rem 3rem; color:var(--side-fg);
  background:var(--side-bg);
  
}
.wordmark{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(1.5rem,2.4vw,2.125rem); line-height:1; letter-spacing:.01em; margin:0}
.wordmark .my{text-transform:none}
.wordmark a{color:inherit; text-decoration:none}
.hero{max-width:30rem}
.hero .kicker{font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.22em; font-size:.8125rem; color:var(--bs-primary); margin-bottom:.875rem}
.hero h2{font-family:var(--display); font-weight:900; font-size:clamp(2.25rem,4.2vw,3.75rem); line-height:1.02; text-transform:uppercase; letter-spacing:-.005em; margin:0 0 1rem}
.hero h2 .line{display:block}
.swap{display:inline-grid; vertical-align:bottom}
.swap > span{grid-area:1/1; opacity:0; transform:translateY(.35em); animation:swapA 9s infinite ease-in-out}
.swap > .w-your{color:var(--bs-primary); animation-name:swapB}
.swap > .w-my{animation-name:swapA}
@keyframes swapA{0%,4%{opacity:0; transform:translateY(.35em)} 10%,42%{opacity:1; transform:none} 50%,100%{opacity:0; transform:translateY(-.35em)}}
@keyframes swapB{0%,50%{opacity:0; transform:translateY(.35em)} 58%,92%{opacity:1; transform:none} 98%,100%{opacity:0; transform:translateY(-.35em)}}
.hero p{color:var(--side-muted); font-size:1.125rem; max-width:34ch}
.brand-foot{font-size:.875rem; color:var(--side-muted)}

/* ---- the "My" disc that straddles the black / white seam ---- */
.disc{
  position:absolute; z-index:30; width:93px; height:93px; border-radius:50%; pointer-events:none;
  left:50%; bottom:0; transform:translate(-50%,50%);
}
.disc img{position:relative; z-index:2; width:100%; height:100%; border-radius:50%; box-shadow:0 .75rem 2rem rgba(240,88,39,.4)}
.disc::before,.disc::after{content:""; position:absolute; inset:0; z-index:1; border-radius:50%; border:2px solid var(--bs-primary); opacity:0; animation:ripple 3.6s infinite ease-out}
.disc::after{animation-delay:1.8s}
@keyframes ripple{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.9); opacity:0}}
.disc-ring{position:absolute; inset:-10px; z-index:1; border-radius:50%; border:2px solid var(--disc-ring)}
.page-client .form-panel{padding-bottom:5rem}

@media (min-width:992px){
  .login-layout{grid-template-columns:minmax(0,1.1fr) minmax(420px,1fr)}
  .brand-panel{order:-1; min-height:100vh; min-height:100dvh; padding:2.5rem clamp(2rem,4.5vw,4.5rem) 3rem; border:0}
  .brand-panel .hero{margin-block:auto}
  .disc{left:0; bottom:clamp(2rem,9vh,6rem); transform:translate(-50%,0); width:clamp(87px,7.95vw,122px); height:clamp(87px,7.95vw,122px)}
  .page-client .form-panel{padding-bottom:2rem}
}
@media (prefers-reduced-motion: reduce){
  .swap > .w-my{display:none}
  .swap > .w-your{animation:none; opacity:1; transform:none}
  .disc::before,.disc::after{animation:none; display:none}
}

@property --page-bg{syntax:'<color>';inherits:true;initial-value:#888}
@property --panel-bg{syntax:'<color>';inherits:true;initial-value:#888}
@property --card-bg{syntax:'<color>';inherits:true;initial-value:#888}
@property --card-footer-bg{syntax:'<color>';inherits:true;initial-value:#888}
@property --border{syntax:'<color>';inherits:true;initial-value:#888}
@property --card-border{syntax:'<color>';inherits:true;initial-value:#888}
@property --input-bg{syntax:'<color>';inherits:true;initial-value:#888}
@property --input-border{syntax:'<color>';inherits:true;initial-value:#888}
@property --addon-bg{syntax:'<color>';inherits:true;initial-value:#888}
@property --bs-body-color{syntax:'<color>';inherits:true;initial-value:#888}
@property --bs-secondary-color{syntax:'<color>';inherits:true;initial-value:#888}
@property --bs-link-color{syntax:'<color>';inherits:true;initial-value:#888}
@property --bs-link-hover{syntax:'<color>';inherits:true;initial-value:#888}
@property --side-bg{syntax:'<color>';inherits:true;initial-value:#888}
@property --side-fg{syntax:'<color>';inherits:true;initial-value:#888}
@property --side-muted{syntax:'<color>';inherits:true;initial-value:#888}
@property --disc-ring{syntax:'<color>';inherits:true;initial-value:#888}
:root{transition:--page-bg 3s ease-in-out,--panel-bg 3s ease-in-out,--card-bg 3s ease-in-out,--card-footer-bg 3s ease-in-out,--border 3s ease-in-out,--card-border 3s ease-in-out,--input-bg 3s ease-in-out,--input-border 3s ease-in-out,--addon-bg 3s ease-in-out,--bs-body-color 3s ease-in-out,--bs-secondary-color 3s ease-in-out,--bs-link-color 3s ease-in-out,--bs-link-hover 3s ease-in-out,--side-bg 3s ease-in-out,--side-fg 3s ease-in-out,--side-muted 3s ease-in-out,--disc-ring 3s ease-in-out}
@media (max-width:991.98px){.brand-panel .wordmark{display:none}}

/* ---- compact login form (makes room for the Apply now block) ---- */
.card-header{padding:.75rem 1.25rem}
.client-logo{min-height:48px}
.client-logo img{height:48px}
.card-body{padding:1rem 1.25rem 1.125rem}
.company-name{font-size:1.375rem; margin-bottom:.125rem}
.login-box-msg{font-size:.9375rem; margin:0 auto .875rem}
.field{margin-bottom:.75rem}
.form-control{height:calc(3rem + 2px); padding:.875rem .75rem}
.form-floating > .form-control:focus,.form-floating > .form-control:not(:placeholder-shown),.form-floating > .form-control:-webkit-autofill{padding-top:1.4rem; padding-bottom:.4rem}
.form-floating > label{padding:.875rem .75rem}
.btn-lg{font-size:1.125rem; padding:.55rem 1rem}
.signup-line{margin-top:.75rem; font-size:.9rem; line-height:1.4}
.card-footer{padding:.625rem 1rem; font-size:.875rem; line-height:1.45}
.login-footer{margin-top:1rem}

/* ---- Apply now ---- */
.btn-outline{color:var(--bs-link-color); background:transparent; border:2px solid var(--bs-primary)}
.btn-outline:hover{background:var(--bs-primary); border-color:var(--bs-primary); color:#fff}
.btn-outline:focus-visible{outline:0; box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb),.4)}
.btn-outline .icon{width:1.1em; height:1.1em}
.apply-kicker{font-family:var(--display); font-weight:900; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bs-secondary-color)}
.apply-q{font-weight:700; line-height:1.25}
.apply-inline{margin-top:.875rem; padding-top:.75rem; border-top:1px solid var(--border); text-align:center}
.apply-inline .apply-q{margin:.125rem 0 .5rem}
.apply-card{margin-top:.75rem; border-top:3px solid var(--card-accent-admin)}
.apply-card-in{display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; padding:.75rem 1.25rem; flex-wrap:wrap}
.apply-card .apply-q{margin:0; font-size:1.0625rem}
.apply-card .btn{padding:.5rem 1rem; white-space:nowrap}

/* single-line helper text */
.login-box-msg{font-size:.8125rem; max-width:none; margin-bottom:.75rem}
.signup-line{font-size:.6875rem; letter-spacing:-.005em; line-height:1.35; margin-top:.625rem}
.login-footer{font-size:.8125rem}
@media (max-width:420px){.signup-line{font-size:.65rem}.login-footer{font-size:.75rem}}

/* tablet + phone: theme button sits in the carrier-logo row; card moves to the very top; brand text matches the form width */
@media (max-width:991.98px){
  .page-client .form-panel{padding-top:1rem}
  .page-client .theme-switch{top:calc(1rem + 20px); right:max(calc(1rem + .625rem), calc((100% - 380px)/2 + .625rem))}
  .brand-panel{padding-inline:1rem}
  .brand-panel .hero,.brand-panel .brand-foot{width:100%; max-width:380px; margin-inline:auto}
  .brand-panel .hero p{max-width:none}
}

/* ---- v3: choose -> log in / apply ---- */
.client-logo img{height:auto; width:auto; max-height:90px; max-width:min(100%,260px); object-fit:contain}
:root.no-white-logo .client-logo .logo-dark{display:none !important}
:root.no-white-logo[data-bs-theme="dark"] .client-logo .logo-light{display:block; background:#fff; padding:.3rem .6rem; border-radius:.375rem}
.view{animation:viewIn .28s ease both}
@keyframes viewIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.choice{display:flex; align-items:center; gap:.875rem; width:100%; margin:0 0 .75rem; padding:.875rem 1rem; font:inherit; color:var(--bs-body-color); text-align:left;
  background:var(--card-bg); border:2px solid var(--input-border); border-radius:.5rem; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s}
.choice:last-child{margin-bottom:.25rem}
.choice:hover{border-color:var(--bs-primary); transform:translateY(-1px); box-shadow:0 .25rem .75rem rgba(var(--bs-primary-rgb),.18)}
.choice:focus-visible{outline:0; box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb),.4); border-color:var(--bs-primary)}
.choice-ic{display:grid; place-items:center; flex:none; width:2.5rem; height:2.5rem; border-radius:50%; color:var(--bs-body-color); background:var(--addon-bg)}
.choice-ic .icon{width:1.25rem; height:1.25rem}
.choice-tx{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.choice-tx strong{font-size:1.1875rem; font-weight:700}
.choice-tx small{font-size:.8125rem; color:var(--bs-secondary-color)}
.choice-go{margin-left:auto; color:var(--bs-secondary-color); transition:transform .15s, color .15s}
.choice:hover .choice-go{transform:translateX(3px); color:var(--bs-primary)}
.choice-apply{border-color:var(--bs-primary)}
.choice-apply .choice-ic{background:rgba(var(--bs-primary-rgb),.14); color:var(--bs-primary)}
.choice-apply strong{color:var(--bs-link-color)}
.back{display:inline-flex; align-items:center; gap:.25rem; margin:0 0 .5rem -.25rem; padding:.2rem .35rem; font:inherit; font-size:.875rem; font-weight:600; color:var(--bs-link-color); background:none; border:0; border-radius:.25rem; cursor:pointer}
.back:hover{color:var(--bs-link-hover); background:rgba(var(--bs-primary-rgb),.08)}
.apply-box{text-align:center; padding:.25rem 0 .25rem}
.apply-box .apply-q{margin:.25rem 0 1rem; font-size:1.375rem}
.brand-contact{margin-top:.5rem}
.brand-foot a{color:inherit; text-decoration:underline; text-underline-offset:.15em}
.brand-foot a:hover{color:var(--bs-primary)}
@media (prefers-reduced-motion: reduce){.view{animation:none}.choice{transition:none}}

/* logo fallback when the company has no logo uploaded */
.client-logo-text{font-weight:700; font-size:1.25rem; color:var(--bs-body-color)}
.client-logo{text-decoration:none}

/* ---- autofill: keep Username / Password white (Chrome paints saved logins yellow / blue) ---- */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:active,
.form-control:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 100px #ffffff inset !important;
  -webkit-text-fill-color:#231F20 !important;
  caret-color:#231F20;
  border-color:var(--input-border);
  transition:background-color 600000s 0s, color 600000s 0s;
}
.form-control:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 100px #ffffff inset, 0 0 0 .25rem rgba(var(--bs-primary-rgb),.28) !important;
  border-color:var(--bs-primary);
}
.form-floating > .form-control:-webkit-autofill ~ label{color:#565e64 !important; opacity:.9}
.form-control:autofill{box-shadow:0 0 0 100px #ffffff inset !important; -webkit-text-fill-color:#231F20; background-color:#ffffff !important}


/* ===== v3.1: fixed look (dark left / white right), phone fit, contact icons ===== */
:root{color-scheme:light}
.theme-switch{display:none !important}
.bf-icons,.help-icons{display:none}
.brand-foot .bf-tag{margin:0}
.ic-btn{display:inline-grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; text-decoration:none; transition:background .15s,border-color .15s,color .15s,transform .15s}
.ic-btn .icon{width:1.2rem; height:1.2rem}
.ic-btn:active{transform:scale(.94)}
.brand-foot .ic-btn{color:#fff; border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.06)}
.brand-foot .ic-btn:hover,.brand-foot .ic-btn:focus-visible{background:var(--bs-primary); border-color:var(--bs-primary); color:#fff}
.card-footer .ic-btn{width:2.25rem; height:2.25rem; color:var(--bs-primary); border:1.5px solid rgba(var(--bs-primary-rgb),.5); background:#fff}
.card-footer .ic-btn:hover,.card-footer .ic-btn:focus-visible{background:var(--bs-primary); border-color:var(--bs-primary); color:#fff}
.bf-btns,.help-icons{align-items:center; gap:.625rem}
.bf-btns{display:inline-flex}

/* phones & tablets: one screen, no scrolling (svh = visible height with the browser bars showing, so Chrome and Firefox both fit) */
@media (max-width:991.98px){
  .login-layout{min-height:100vh; min-height:100svh}
  .page-client .form-panel{padding:.75rem 1rem 3.75rem; justify-content:center}
  .brand-panel{min-height:0; gap:1rem; padding:5rem 1rem 1.5rem; flex:0 0 auto}
  .hero .kicker{margin-bottom:.4rem; font-size:.75rem}
  .hero h2{font-size:clamp(1.75rem,8vw,2.5rem); margin-bottom:.5rem}
  .hero p{font-size:1rem}
  .login-footer{margin-top:.75rem}
}
/* phones: contacts become icons, hero text is trimmed */
@media (max-width:991.98px){
  .brand-panel{gap:.75rem; padding-top:4.1rem; padding-bottom:.875rem}
  .hero{display:none}
  .page-client .form-panel{padding-top:.5rem}
  .card-header{padding:.5rem 1rem}
  .client-logo{min-height:72px}
  .client-logo img{max-height:72px}
  .card-body{padding:.75rem 1rem .875rem}
  .company-name{font-size:1.125rem; margin-bottom:0}
  .page-client .form-panel{padding-bottom:3.6rem}
  .login-footer{margin-top:.5rem; font-size:.6875rem; letter-spacing:0; white-space:nowrap}
  .signup-line{font-size:.625rem; white-space:nowrap}
  #viewLogin .login-box-msg{display:none}
  .back{margin-bottom:.25rem}
  .form-control{height:calc(2.75rem + 2px); padding-top:.75rem; padding-bottom:.75rem}
  .field{margin-bottom:.625rem}
  .btn-lg{padding:.45rem 1rem}
  .signup-line{margin-top:.5rem}
  .choice{padding:.7rem .9rem; margin-bottom:.6rem}
  .login-box-msg{margin-bottom:.6rem}
  .brand-foot{display:grid; gap:.5rem; font-size:.875rem}
  .brand-contact{display:none}
  .bf-icons{display:flex; align-items:center; justify-content:space-between; gap:1rem}
  .bf-ask{font-weight:600}
  .card-footer{display:flex; justify-content:center}
  .help-text{display:none}
  .help-icons{display:inline-flex}
  .help-label{margin-right:.25rem; font-size:.9375rem; color:var(--bs-secondary-color)}
  .card-footer{padding:.5rem 1rem}
}
/* short phone screens (landscape / small / Chrome with bars): drop the hero entirely */
@media (max-width:991.98px) and (max-height:640px){
  .hero{display:none}
  .brand-panel{padding-top:4.1rem}
}

/* ===== v3.2: contact blocks, phone icons, borderless card ===== */
.bf-email,.bf-web,.bf-phone,.bf-bottom,.card-contacts{display:none}
.brand-foot .bf-tag{margin:0 0 .5rem; font-size:.875rem}
.brand-foot .bf-email,.brand-foot .bf-web{display:block; margin:0 0 .25rem; font-size:.875rem}
.brand-foot .bf-phone{display:block; margin:.625rem 0 0; font-family:var(--display); font-weight:900; letter-spacing:.06em; font-size:1.22rem; line-height:1.1}
.brand-foot .bf-phone a{color:var(--bs-primary); text-decoration:none}
.brand-foot .bf-phone a:hover{color:#ff7a4d}
@media (max-width:991.98px){
  .bf-tag,.bf-email,.bf-web,.bf-phone,.brand-foot .bf-tag,.brand-foot .bf-email,.brand-foot .bf-web,.brand-foot .bf-phone{display:none !important}
    .card-footer,.help-text,.help-icons{display:none !important}
  .login-footer{display:none}
  .card-contacts{display:flex; justify-content:center; gap:2rem; margin-top:1rem}
  .card-contacts .ic-btn{width:3.5rem; height:3.5rem; color:var(--bs-primary); border:1.5px solid rgba(var(--bs-primary-rgb),.5); background:#fff}
  .card-contacts .ic-btn .icon{width:1.7rem; height:1.7rem}
  .page-client .form-panel{padding-bottom:3.6rem}
  .bf-bottom{display:block; margin-top:1rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.14); text-align:center; font-size:.75rem; color:var(--side-muted)}
  .bf-bottom a{color:#fff; text-decoration:none; font-weight:600; display:block; margin-bottom:.25rem}
  .bf-bottom p{margin:0}
}

/* borderless login block: only the orange top line (+ the Log in / Apply now / field borders) */
.card{border:0; border-radius:0; box-shadow:none; background:transparent}
.card.card-outline,.page-client .card-outline{border-top:0}
.card-header{border-bottom:0}
.card-footer{border-top:0; background:transparent}
@media (max-width:991.98px){
  .brand-foot{display:none !important}
  .bf-bottom{margin-top:0; padding-top:0; border-top:0}
}