/* =========================================
   PSC - Client Registration (account.php)
   File: psc_register-client.css
   ========================================= */

/* ----- Page header ----- */
body.psc-theme.client-side.account-page #content {
  margin-bottom: 0px !important;  /* spazio tra titolo e primo blocco (Informazioni di contatto) */
}

body.psc-theme.client-side #content > h1{
  line-height: 1.15;
  margin: 18px 0 6px;
}

body.psc-theme.client-side #content > p{
  margin: 0 0 45px;
  color: var(--color-text-secondary, #6b7280);
  font-size: 14px;
}

/* ----- Table container (neutralize legacy width="800") ----- */
body.psc-theme.client-side #content table.padded{
  width: 100% !important;
  max-width: 980px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0; /* spacing handled by grid gap */
}

body.psc-theme.client-side #content table.padded tbody{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;   /* spazio tra colonne */
  row-gap: 20px;      /* ← spazio verticale tra righe */
  align-items: start;
}

body.psc-theme.client-side #content table.padded tr{
  display: contents;
}

/* Reset cell styling */
body.psc-theme.client-side #content table.padded td{
  padding: 0 !important;
  border: none !important;
  vertical-align: top;
  min-width: 0;
}

/* Default: any non "client-required" cell spans full width */
body.psc-theme.client-side #content table.padded td:not(.client-required){
  grid-column: 1 / -1;
}

/* Section header blocks are usually inside td[colspan] */
body.psc-theme.client-side #content table.padded td[colspan]{
  grid-column: 1 / -1;
}

/* ----- Section headers (Informazioni di contatto / Preferenze / Credenziali) ----- */
body.psc-theme.client-side #content table.padded .form-header{
  margin-bottom: 6px;
}

body.psc-theme.client-side #content table.padded h3{
  font-size: 14px;
  font-weight: 700;
  margin: 18px 0 10px;
}

body.psc-theme.client-side #content table.padded hr{
  border: none;
  border-top: 1px solid var(--color-border-subtle, rgba(15,23,42,.10));
  margin: 18px 0 10px;
}

/* Rimuove linea solo al primo blocco */
body.psc-theme.client-side 
#content table.padded tr:first-of-type td[colspan="2"]{
  border-top: none !important;
}


/* Ensure headers inside colspan behave as full width */
body.psc-theme.client-side #content table.padded td[colspan] .form-header,
body.psc-theme.client-side #content table.padded td[colspan] h3,
body.psc-theme.client-side #content table.padded td[colspan] hr{
  grid-column: 1 / -1;
}

/* ----- Custom fields (2-column) ----- */
body.psc-theme.client-side #content table.padded td.client-required{
  grid-column: auto; /* allow the grid to place it in col 1 or 2 */
}

/* Label as field wrapper */
body.psc-theme.client-side #content table.padded td.client-required label{
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;   
    width: 100%;
    margin: 0;
}


body.psc-theme.client-side #content table.padded textarea{
  height: auto;
  min-height: 90px;
  resize: vertical;
}

/* Focus */
body.psc-theme.client-side #content table.padded input:focus,
body.psc-theme.client-side #content table.padded select:focus,
body.psc-theme.client-side #content table.padded textarea:focus{
  border-color: var(--color-border-focus, rgba(22,163,74,.55));
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* Errors */
body.psc-theme.client-side #content table.padded .error{
  color: var(--color-text-danger, #b91c1c);
  font-size: 12px;
  margin-top: 6px;
}

/* ----- Classic 2-td rows (Preferences / Access credentials) -----
   They are now full width because td:not(.client-required) spans full width.
   Add small spacing so label/value look clean.
*/
body.psc-theme.client-side #content table.padded tr > td:not(.client-required){
  margin-top: 0;
}

/* Improve the classic label cell readability (often has fixed width inline) */
body.psc-theme.client-side #content table.padded td[width="180"]{
  color: var(--color-text-secondary, #6b7280);
  font-size: 12px;
  font-weight: 600;
  padding-top: 10px !important;
}

/* ----- Bottom buttons ----- */
body.psc-theme.client-side #content p[style*="text-align: center"]{
  max-width: 980px;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 0 10px;
}

body.psc-theme.client-side #content p[style*="text-align: center"] input[type="submit"],
body.psc-theme.client-side #content p[style*="text-align: center"] input[type="button"]{
  width: 100%;
  height: 42px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Register (primary) */
body.psc-theme.client-side #content p[style*="text-align: center"] input[type="submit"]{
  background: var(--color-bg-button-primary, #15803d);
  color: var(--color-text-button-primary, #fff);
}

/* Cancel (secondary/ghost) */
body.psc-theme.client-side #content p[style*="text-align: center"] input[type="button"]{
  background: var(--color-bg-surface-muted, rgba(15,23,42,.04));
  color: var(--color-text-link, #1d4ed8);
  border-color: var(--color-border-subtle, rgba(15,23,42,.12));
}

/* Ogni field deve poter restringersi dentro la grid */
body.psc-theme.client-side #content table.padded td.client-required{
  min-width: 0;
}

body.psc-theme.client-side #content table.padded td.client-required label{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
}

/* Gli input non devono mai superare la colonna */
body.psc-theme.client-side #content table.padded td.client-required input,
body.psc-theme.client-side #content table.padded td.client-required select,
body.psc-theme.client-side #content table.padded td.client-required textarea{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  display: block;
}

body.psc-theme.client-side #content table.padded td.client-required label{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
}

body.psc-theme.client-side #content table.padded td.client-required label br{
  display: none !important;
}

body.psc-theme.client-side #content table.padded td.client-required input,
body.psc-theme.client-side #content table.padded td.client-required select,
body.psc-theme.client-side #content table.padded td.client-required textarea{
  display: block !important;
  flex: none !important;
}

body.psc-theme.client-side #content table.padded tr,
body.psc-theme.client-side #content table.padded td{
  height: auto !important;
}

body.psc-theme.client-side #content table.padded td.client-required label{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 6px;
  line-height: 1.2;
}

body.psc-theme.client-side #content table.padded td.client-required label br{
  display: none !important;
}

body.psc-theme.client-side.account-page #content table.padded em p{
  color: var(--color-neutri-700, #595959) !important;
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 12px !important;
  margin-top: 6px !important;
  display: inline-block !important;
}

body.psc-theme.client-side.account-page #content input[type="tel"],
body.psc-theme.client-side.account-page #content input[type="text"],
body.psc-theme.client-side.account-page #content input[type="password"] {
    width: 100% !important;
}

body.psc-theme.client-side 
#content table.padded td[colspan] h3{
  position: relative;
  padding-top: 24px;
  margin-top: 24px;
}

body.psc-theme.client-side 
#content table.padded td[colspan] h3::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0,0,0,.12);
}

/* Toglie la linea SOLO nel primo blocco (Informazioni di contatto) */
body.psc-theme.client-side 
#content table.padded td[colspan] .form-header h3::before{
  content: none !important;
  display: none !important;
}

/* Linea sopra i bottoni */
body.psc-theme.client-side.account-page 
#content form > p{
  position: relative;
  margin-top: 40px;   /* spazio sopra linea */
  padding-top: 32px;  /* spazio tra linea e bottoni */
}

body.psc-theme.client-side.account-page 
#content form > p::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0,0,0,.12);
}

/* --- Password fields affiancati --- */

/* il td che contiene l'input passwd1 va in colonna 1 */
body.psc-theme.client-side #content table.padded td:has(input[name="passwd1"]){
  grid-column: 1;
}

/* il td che contiene l'input passwd2 va in colonna 2 */
body.psc-theme.client-side #content table.padded td:has(input[name="passwd2"]){
  grid-column: 2;
}

/* nascondi i td label a sinistra (Create a Password / Confirm...) perché li gestiamo noi come label sopra input */
body.psc-theme.client-side #content table.padded td[width="180"]:has(+ td input[name="passwd1"]),
body.psc-theme.client-side #content table.padded td[width="180"]:has(+ td input[name="passwd2"]){
  display: none !important;
}

/* label sopra input dentro il td input (creiamo un titolo via CSS) */
body.psc-theme.client-side #content table.padded td:has(input[name="passwd1"])::before{
  content: "Inserisci una password:";
  display: block;
  margin-bottom: 16px;
  color: var(--color-text-secondary, #6b7280);
  font-size: 12px;
  font-weight: 600;
}

body.psc-theme.client-side #content table.padded td:has(input[name="passwd2"])::before{
  content: "Conferma nuova Password:";
  display: block;
  margin-bottom: 16px;
  color: var(--color-text-secondary, #6b7280);
  font-size: 12px;
  font-weight: 600;
}

/* input full width coerente */
body.psc-theme.client-side #content table.padded input[name="passwd1"],
body.psc-theme.client-side #content table.padded input[name="passwd2"]{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

body.psc-theme.client-side.account-page #content > form{
  position: relative;
  z-index: 0;
}

/* background che esce a tutta larghezza viewport */
body.psc-theme.client-side.account-page #content > form::before{
  content: "";
  position: absolute;
  top: -24px;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--color-bg-surface-highlight);
  z-index: -1;
}

/* 1) Il form diventa il riferimento per la banda */
body.psc-theme.client-side.account-page #content > form{
  position: relative;
  z-index: 0;
  margin: 0;                  /* evita margini che creano “fasce” */
}

/* 2) Banda full-width esattamente dentro l’area del form */
/*body.psc-theme.client-side.account-page #content > form::before{
  content: "";
  position: absolute;
  inset: 0;                   
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--color-bg-surface-muted, #F5F7FA);
  z-index: -1;
}*/

body.psc-theme.client-side.account-page #content > hr{
  display: none !important;
}

body.psc-theme.client-side.account-page div{
  font-size: 12px !important;
}

/* ---------------------------
   FORM
---------------------------- */
body.psc-theme.client-side.account-page #content > form{
  margin: 0 !important;
  padding-bottom: 105px !important;  /* scegli tu: 40/60/80 */
  position: relative;
  z-index: 0;
}
/* ---------------------------
   FINE FORM
---------------------------- */





/* ----- Mobile ----- */
@media (max-width: 860px){
      /* 1) griglia a 1 colonna */
  body.psc-theme.client-side.account-page #content table.padded tbody{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  /* 2) qualsiasi cella forzata su colonna 2 torna “auto” */
  body.psc-theme.client-side.account-page #content table.padded tbody > *{
    grid-column: auto !important;
  }

  /* 3) i blocchi full-width restano full-width anche in 1 colonna */
  body.psc-theme.client-side.account-page #content table.padded td[colspan]{
    grid-column: 1 / -1 !important;
  }

  /* 4) i due campi password non devono più stare affiancati */
  body.psc-theme.client-side.account-page #content table.padded td:has(input[name="passwd1"]),
  body.psc-theme.client-side.account-page #content table.padded td:has(input[name="passwd2"]){
    grid-column: 1 / -1 !important;
  }

  /* 5) bottoni a colonna (se vuoi) */
  body.psc-theme.client-side.account-page #content form > p{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.psc-theme.client-side.account-page 
button.action-button {
  margin-left: 0 !important;
  margin-top: 12px !important;
}

  body.psc-theme.client-side #content{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.psc-theme.client-side #content table.padded tbody{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.psc-theme.client-side #content p[style*="text-align: center"]{
    grid-template-columns: 1fr;
  }
}