/* =========================================================================
   hummingbird-wholesale — PAGINA DI ACCESSO E DOMANDA DI ACCESSO (wh-login.css) · 22/09/2026
   Area RISERVATA + ACCESSO. Lo carica SOLO il template di privateshop
   (modules/privateshop/views/templates/front/private_login_17.tpl) con un <link> diretto:
   quella pagina e' un template a se' e non passa dal theme.yml. Viene dopo Hummingbird,
   custom.css (ECM), ecs-ui.css, wh-base.css e apply.css (form di ecs_dealerapply).

   Riferimento visivo: la pagina di accesso del .com (dev.espressocoffeeshop.com/it/login),
   misurata il 22/09: titolo 32px/600, etichette 600 sopra i campi, campi bianchi, occhio della
   password a pillola piena attaccato al campo, pulsanti a pillola. Qui due card bianche (accesso
   | domanda) sotto la stessa testata a card del resto del sito.
   Regole del tema: i token --ecs-* (custom.css) e --wh-* (wh-base.css) non si ridefiniscono;
   i pieni con testo bianco usano --wh-fill (#d13a28, 4,8:1), non #e64b38 (3,9:1).
   apply.css e' condiviso col tema V12 dell'8.2: le differenze del 9.2 stanno qui.
   ========================================================================= */

.wh-login-page { background: var(--ecs-paper); color: var(--ecs-ink); overflow-x: hidden; }
.wh-login-page *, .wh-login-page *::before, .wh-login-page *::after { box-sizing: border-box; }

.wh-login-skip:focus { position: absolute; top: 8px; left: 8px; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: var(--wh-radius); }

/* ---- Testata: la card del .com, con logo e lingue (niente ricerca, menu, carrello) ------------- */
.wh-login-header { position: static; margin-bottom: 30px; }
.wh-login-header .ecs-header__row { justify-content: space-between; }
.wh-login-header__logo { display: flex; }
.wh-login-header .wh-logo { display: block; line-height: 0; }

.wh-login-lang__list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.wh-login-lang__pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 76px; height: 40px; padding: 0 14px;
  border: 1px solid var(--ecs-accent); border-radius: var(--wh-radius);
  background: #fff; color: var(--ecs-ink);
  font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap;
}
a.wh-login-lang__pill:hover { background: var(--ecs-accent-050); color: var(--ecs-ink); }
.wh-login-lang__pill.is-current { background: var(--wh-fill); border-color: var(--wh-fill); color: #fff; cursor: default; }

/* ---- Le due colonne -------------------------------------------------------------------------- */
.wh-login { width: 1300px; max-width: calc(100vw - 16px); margin: 0 auto; padding: 0 0 56px; }
.wh-login__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 992px) {
  .wh-login__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px; }
  /* la card della domanda finita («Richiesta ricevuta») prende il posto della domanda */
  .wh-login__col--fatto { grid-column: 2; grid-row: 1; }
}
.wh-login .wh-card { padding: 2rem 2.25rem; }
@media (max-width: 767px) { .wh-login .wh-card { padding: 1.25rem; } }

/* ---- Colonna «Accedi»: il markup e le misure del .com -------------------------------------------- */
.wh-login .page-header { margin: 0 0 .5rem; }
.wh-login .page-title-section { font-size: 32px; line-height: 1.2; font-weight: 600; margin: 0; color: var(--ecs-ink); }
.wh-login__sub { color: var(--wh-text-2); margin: 0 0 1.5rem; font-size: 15px; line-height: 1.5; }
.wh-login .form-label { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--ecs-ink); }
.wh-login .form-label.required::after { content: " *"; color: var(--wh-accent-ink); }
/* campi: stessa altezza e stesso corpo della domanda a destra (16px: niente zoom sul telefono) */
.wh-login #login_form .form-control,
.wh-login #form_forgotpassword .form-control { min-height: 46px; padding: 10px 14px; font-size: 16px; background: #fff; }
.wh-login #ecs-apply .ecs-input { font-size: 16px; }
/* occhio della password: pillola piena attaccata al campo, come sul .com */
.wh-login .password-field { flex-wrap: nowrap; }
.wh-login .password-field .form-control,
.wh-login #ecs-apply .password-field .ecs-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wh-login .wh-occhio {
  flex: 0 0 auto; min-width: 64px; margin-left: -1px;
  border-radius: 0 var(--wh-radius) var(--wh-radius) 0;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 18px;
}
.wh-login .wh-occhio .material-icons { font-size: 20px; line-height: 1; }
.wh-login__azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 1.25rem; }
.wh-login__azioni .btn { min-height: 44px; }
.wh-login__azioni .btn-basic { padding-left: 0; padding-right: 0; color: var(--wh-accent-ink); text-decoration: underline; text-underline-offset: 3px; background: transparent; border: 0; }
.wh-login__azioni .btn-basic:hover { color: var(--wh-fill-hover); }
.wh-login hr { margin: 1.75rem 0 1.25rem; border-color: var(--ecs-line); opacity: 1; }
.wh-login__nuovo .h4 { font-size: 18px; font-weight: 600; margin: 0 0 .75rem; }
.wh-login__nuovo .btn { min-height: 44px; }
.wh-login .alert ol { margin: 0; padding-left: 1.1rem; }
.wh-login #error_holder:empty, .wh-login__errori:empty { display: none; }
.wh-login #error_holder, .wh-login__errori { margin: 0 0 1rem; }
.wh-recupero .wh-login__titolo2 { margin-bottom: .5rem; }

/* ---- Colonna «Richiedi un account» (form di ecs_dealerapply) ---------------------------------- */
#new-private-account { position: relative; }
#new-private-account:focus, #private-back:focus { outline: none; }
.wh-login__titolo2 { font-size: 28px; line-height: 1.2; font-weight: 600; margin: 0 0 .75rem; color: var(--ecs-ink); }
.wh-login .ecs-intro { font-size: 15px; }
.wh-login .ecs-intro--tempi { color: var(--wh-text-2); font-size: 14px; }
.wh-login .ecs-deviazione a { color: var(--wh-accent-ink); }
/* le etichette della domanda come quelle dell'accesso */
.wh-login #ecs-apply .ecs-etichetta { font-size: 15px; }
.wh-login #ecs-apply .ecs-obb { color: var(--wh-accent-ink); }
/* Le due tendine di Attività condividono la riga: le etichette possono
   occupare più righe, ma i controlli devono partire alla stessa altezza. */
@media (min-width: 992px) {
  .wh-login #ecs-apply .ecs-passo[data-passo="2"] .ecs-campo[data-tipo="select"] {
    display: flex;
    flex-direction: column;
  }
  .wh-login #ecs-apply .ecs-passo[data-passo="2"] .ecs-campo[data-tipo="select"] > .ecs-etichetta {
    flex-grow: 1;
  }
}
/* i campi di accesso portati da apply.js nel terzo passo: il nostro markup, niente colonne di Bootstrap */
.wh-login #ecs-apply .wh-accesso-campo { margin: 0; min-width: 0; }
.wh-login #ecs-apply .ecs-campo.form-error .ecs-input,
.wh-login #ecs-apply .ecs-campo--errore .ecs-input { border-color: #b3261e; }
.wh-login #ecs-apply .wh-data { display: flex; gap: 8px; }
.wh-login #ecs-apply .wh-radio { display: flex; gap: 18px; }
/* il pulsante d'invio (spostato da apply.js dentro il terzo passo) e' gia' a pillola */
.wh-login #ecs-apply .ecs-azioni .btn { min-height: 44px; }
/* la domanda in corso: velo con la rotellina sopra la card */
#gif_loader { position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgba(255, 255, 255, .72); }
#gif_loader::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 4px solid var(--ecs-line); border-top-color: var(--wh-fill); border-radius: 50%;
  animation: wh-gira .8s linear infinite;
}
@keyframes wh-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #gif_loader::after { animation-duration: 2.4s; } }

.wh-login__col--fatto .btn { min-height: 44px; }

/* ---- Piede: la fascia del .com, sottile, senza link a pagine chiuse ----------------------------- */
.wh-login-foot { background: var(--wh-fill); color: #fff; padding: 22px 16px; font-size: 14px; line-height: 1.5; text-align: center; }
.wh-login-foot__inner { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.wh-login-foot p { margin: 0; color: #fff; }
.wh-login-foot a { color: #fff; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.wh-login-foot a:hover { color: #fff; text-decoration-thickness: 2px; }
.wh-login-foot :focus-visible { outline-color: #fff; }

/* ---- Telefono e tablet stretto ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .wh-login-header { margin-bottom: 16px; }
  .wh-login-header .ecs-header__row { flex-wrap: wrap; justify-content: center; gap: 12px; padding: 14px 12px; }
  .wh-login-header__logo { flex: 1 1 100%; justify-content: center; }
  /* il logo qui ha la riga tutta per se': piu' grande dei 28px della testata del negozio */
  .wh-login-header.wh-header .wh-logo img { height: 36px; }
  .wh-login-lang { flex: 1 1 100%; }
  .wh-login-lang__list { justify-content: center; gap: 6px; }
  .wh-login-lang__pill { min-width: 0; height: 34px; padding: 0 10px; font-size: 13px; }
  .wh-login .page-title-section { font-size: 28px; }
  .wh-login__titolo2 { font-size: 24px; }
  .wh-login__azioni { flex-direction: column-reverse; align-items: stretch; }
  .wh-login__azioni .btn-primary, .wh-login__azioni .btn-outline-primary { width: 100%; }
  .wh-login__azioni .btn-basic { align-self: center; }
}

/* Qualification comes before company details; never let layout styles reveal hidden fields. */
.wh-login #ecs-apply .ecs-campo[hidden],
.wh-login #ecs-apply [data-profile-message][hidden],
.wh-login #ecs-apply .ecs-azioni[hidden] { display: none !important; }
.wh-login .wh-eligibility { line-height: 1.5; }
.wh-login .wh-consumer-link { margin: 0 0 24px; font-size: 14px; color: var(--wh-text-2); }
.wh-login .wh-consumer-link p { margin: 0 0 4px; }
.wh-login .wh-consumer-link a { color: var(--wh-accent-ink); font-weight: 600; }
.wh-login #ecs-apply .wh-profile-message { grid-column: 1 / -1; margin: 0; }