/* Split-screen login (form left, brand hero right) + homepage linefoot.
   This file is only linked from the login template, so page-wide rules
   below (like hiding the default footer) apply to the login page only. */

/* the login brings its own linefoot; drop the default website footer */
#wrapwrap > footer {
  display: none !important;
}

/* pin the linefoot to the real bottom of the viewport: make the whole
   wrapper a flex column and let the login page area take the free space */
#wrapwrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#wrapwrap > main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.pro-login-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pro-login-split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  flex: 1 1 auto;
}

.pro-login-hero { display: none; }

@media (min-width: 992px) {
  .pro-login-split {
    grid-template-columns: minmax(380px, 44%) 1fr;
    gap: 3vw;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 4vw;
  }

  .pro-login-hero {
    display: block;
    max-width: 620px;
    color: #C3CCD5;
  }
}

.plh-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.68rem;
  font-weight: 700;
  color: #8CA0BC;
}

.plh-rule {
  width: 40px;
  height: 2px;
  background: #5B79A0;
}

.plh-h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.6rem, 4.2vw, 3.9rem);
  line-height: 1.08;
  color: #F3F6F9;
  margin: 22px 0 18px;
}

.plh-h1 em {
  font-style: italic;
  font-weight: 500;
  color: #AFC6E4;
}

.plh-p {
  max-width: 52ch;
  font-size: 1.05rem;
  line-height: 1.62;
  color: #C3CCD5;
  margin: 0 0 34px;
}

.plh-swatches {
  display: flex;
  gap: 14px;
  margin-bottom: 34px;
}

.plh-swatches span {
  width: 68px;
  height: 50px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.plh-swatches .s0 { background: linear-gradient(160deg, #3A4756, #2A3542); }
.plh-swatches .s1 { background: linear-gradient(160deg, #7A6A58, #5C4F42); }
.plh-swatches .s2 { background: linear-gradient(160deg, #2A3446, #1D2636); }
.plh-swatches .s3 { background: linear-gradient(160deg, #5F7059, #47543F); }
.plh-swatches .s4 { background: linear-gradient(160deg, #202634, #161C28); }
.plh-swatches .s5 { background: linear-gradient(160deg, #6F5D4B, #52443A); }

.plh-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 478px;
  margin-bottom: 10px;
}

.plh-line {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  height: 2px;
  background: rgba(90, 130, 180, 0.45);
}

.plh-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0D1626;
  border: 2px solid rgba(120, 140, 165, 0.6);
  font-size: 0.95rem;
}

.plh-node.on {
  border-color: #5D9CDE;
  box-shadow: 0 0 0 4px rgba(93, 156, 222, 0.16);
}

/* ---- flow animation: same rhythm as the homepage hero (9s, 1.5s steps) ---- */

@keyframes plhFlowStep {
  0%   { transform: scale(1);    filter: brightness(.58) saturate(.92); opacity: .72; }
  5%   { transform: scale(1.2);  filter: brightness(1.08) saturate(1.05); opacity: 1; }
  16%  { transform: scale(1.2);  filter: brightness(1.08) saturate(1.05); opacity: 1; }
  24%  { transform: scale(1);    filter: brightness(.58) saturate(.92); opacity: .72; }
  100% { transform: scale(1);    filter: brightness(.58) saturate(.92); opacity: .72; }
}

@keyframes plhFlowNode {
  0%   { border-color: rgba(180,200,225,.4); box-shadow: none; transform: scale(1); }
  5%   { border-color: #3aa6e0; box-shadow: 0 0 0 6px rgba(58,166,224,.18); transform: scale(1.14); }
  16%  { border-color: #3aa6e0; box-shadow: 0 0 0 6px rgba(58,166,224,.18); transform: scale(1.14); }
  24%  { border-color: rgba(180,200,225,.4); box-shadow: none; transform: scale(1); }
  100% { border-color: rgba(180,200,225,.4); box-shadow: none; transform: scale(1); }
}

@keyframes plhFlowLine {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.plh-swatches span {
  animation: plhFlowStep 9s ease-in-out infinite;
  will-change: transform, filter;
}

.plh-swatches .s0 { animation-delay: 0s; }
.plh-swatches .s1 { animation-delay: 1.5s; }
.plh-swatches .s2 { animation-delay: 3s; }
.plh-swatches .s3 { animation-delay: 4.5s; }
.plh-swatches .s4 { animation-delay: 6s; }
.plh-swatches .s5 { animation-delay: 7.5s; }

.plh-node {
  animation: plhFlowNode 9s ease-in-out infinite;
}

/* .plh-line is the first span inside the track, nodes are spans 2..7 */
.plh-track .plh-node:nth-of-type(2) { animation-delay: 0s; }
.plh-track .plh-node:nth-of-type(3) { animation-delay: 1.5s; }
.plh-track .plh-node:nth-of-type(4) { animation-delay: 3s; }
.plh-track .plh-node:nth-of-type(5) { animation-delay: 4.5s; }
.plh-track .plh-node:nth-of-type(6) { animation-delay: 6s; }
.plh-track .plh-node:nth-of-type(7) { animation-delay: 7.5s; }

.plh-line {
  background: linear-gradient(90deg, rgba(58,166,224,.2), #3aa6e0, rgba(58,166,224,.2));
  background-size: 220% 100%;
  animation: plhFlowLine 9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .plh-swatches span, .plh-node, .plh-line { animation: none; }
  .plh-swatches span { filter: none; opacity: 1; }
}

.plh-labels {
  display: flex;
  justify-content: space-between;
  max-width: 478px;
}

.plh-labels span {
  flex: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.6rem;
  font-weight: 700;
  color: #8CA0BC;
}

/* ---- linefoot: same look as the PROsolutions homepage footer ---- */

.linefoot {
  background: #161a20;
  color: #9aa3ad;
  padding: 22px 0;
}

.linefoot .wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.linefoot .lf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 0.85rem;
}

.linefoot .lfbrand {
  font-family: "Playfair Display", Georgia, serif;
  color: #fff;
  font-size: 1.02rem;
}

.linefoot .lfbrand em {
  font-style: italic;
  color: #c8b999;
}

.linefoot a {
  color: #c2c8cf;
  text-decoration: none;
}

.linefoot a:hover {
  color: #fff;
}

.linefoot .sep {
  color: #555d67;
}

.linefoot .lfleg {
  color: #717a84;
  margin-left: auto;
  font-size: 0.78rem;
}

@media (max-width: 860px) {
  .linefoot .lfleg {
    margin-left: 0;
    width: 100%;
  }
}

/* ── Brand accent (2026-08-23) ────────────────────────────────────────────
   --ps-accent is set on .pro-login-page from the host, so erp.prohome.online
   is terracotta and erp.proarchidex.online is slate blue while both remain the
   same Odoo. The fallback is the PROsolutions grey, so nothing depends on the
   variable being there. */
.pro-login-page .plh-rule { background: var(--ps-accent, #8a929a); opacity: 1; }
.pro-login-page .plh-eyebrow { color: var(--ps-accent, #8a929a); }
.pro-login-page .plh-h1 em { color: var(--ps-accent, #8a929a); }
.pro-login-page .plh-node.on { border-color: var(--ps-accent, #8a929a); }
/* Odoo's own frontend bundle defines .btn-primary too, and it loads after this file,
   so a plain `.pro-login-page .btn-primary` lost and the sign-in button stayed Odoo
   blue on a terracotta page. Match its specificity rather than reaching for
   !important, which the next person then has to fight as well. */
.pro-login-page .oe_website_login_container .btn.btn-primary,
.pro-login-page form .btn.btn-primary,
.pro-login-page .btn.btn-primary {
  background-color: var(--ps-accent, #8a929a);
  border-color: var(--ps-accent, #8a929a);
  color: #fff;
  font-weight: 600;
}
.pro-login-page .btn.btn-primary:hover,
.pro-login-page .btn.btn-primary:focus,
.pro-login-page .btn.btn-primary:active {
  background-color: var(--ps-accent, #8a929a);
  border-color: var(--ps-accent, #8a929a);
  filter: brightness(1.07);
}
/* the login card itself carries a hairline of the brand, so the page reads as one */
.pro-login-page .oe_website_login_container { border-top: 3px solid var(--ps-accent, #8a929a); }
.pro-login-page a { color: var(--ps-accent, #8a929a); }
.pro-login-page .form-control:focus,
.pro-login-page .form-select:focus {
  border-color: var(--ps-accent, #8a929a);
  box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .06);
}

/* the sign-up questionnaire (prosolutions_auth) */
.pro-login-page .ps-help { font-size: 12.5px; color: #6b7077; margin: -6px 0 14px; }
.pro-login-page .ps-uid-note { font-size: 12.5px; margin-top: 6px; min-height: 1.1em; }
.pro-login-page .ps-uid-note.ok { color: #2e7d4f; }
.pro-login-page .ps-uid-note.bad { color: #a8321f; }
.pro-login-page .ps-uid-note.busy { color: #6b7077; }
.ps-biz[hidden] { display: none; }

/* ── The hero needs its own dark ground (2026-08-23) ──────────────────────
   Every colour in this panel — #F3F6F9 headline, #C3CCD5 body, the swatch
   borders at rgba(255,255,255,.14) — was written for a dark background, and
   the page it actually renders on is white. The result was a headline you
   could barely read. Give the panel the ground it was designed for rather
   than repainting nine rules for a light one: it is also the brand's own
   hero treatment, and it keeps the form column on white where the Odoo
   form controls belong. */
@media (min-width: 992px) {
  .pro-login-hero {
    background: radial-gradient(120% 130% at 78% 18%,
                  color-mix(in srgb, var(--ps-accent, #8a929a) 22%, #1b222b) 0%,
                  #12161c 62%);
    border-radius: 16px;
    padding: 46px 44px 44px;
    box-shadow: 0 24px 60px rgba(12, 16, 22, .22);
  }
  /* the eyebrow and rule follow the brand, on a ground that can carry them */
  .pro-login-hero .plh-eyebrow { color: var(--ps-accent, #8ca0bc); }
  .pro-login-hero .plh-rule { background: var(--ps-accent, #5b79a0); }
  .pro-login-hero .plh-h1 em { color: var(--ps-accent, #afc6e4); }
}
/* Older engines without color-mix still get a dark panel, just without the tint. */
@supports not (background: color-mix(in srgb, red 20%, blue)) {
  @media (min-width: 992px) { .pro-login-hero { background: #12161c; } }
}