/* signup.css — layout 2-col de /criar-conta/
 *
 * Origem: extraído do <style> inline em templates/crontex_ui/signup.html
 * de produção (SSH em 35.199.88.222) e migrado para arquivo dedicado.
 *
 * Carregamento: incluído via {% block auth_extra_css %} em signup.html
 * (escopado pelo wrapper <section class="auth-card" data-flow="signup">).
 *
 * Refs: ADR-0001 §7, KI-UI-SIGNUP-CSS-PERDIDO, KI-UI-AUTH-CSS-REPLICATION,
 *       cicatrização do regressão pós-03aecd4 + cde40ba.
 *
 * Nota: o override de largura/padding do .auth-card (980px !important)
 *       NÃO entra aqui — já é coberto por .auth-card[data-flow="signup"]
 *       em auth.css. Esta folha cuida do layout interno (grid, cards,
 *       footer, honeypot).
 */

	    /* Validacao basica de preenchimento — fora do fluxo visual (honeypot anti-bot). */
	    .crx-hp-field{
	      position: absolute;
	      left: -10000px;
	      top: auto;
	      width: 1px;
	      height: 1px;
	      overflow: hidden;
	    }
		    .signup-grid{
		      display:grid;
		      grid-template-columns: repeat(2, minmax(0, 1fr));
		      gap:18px;
		      align-items:stretch;
		      margin-top:12px;
		    }
		    .signup-grid > div{ min-width:0; }
			    @media (max-width: 860px){
			      .signup-grid{ grid-template-columns:minmax(0, 1fr); }
			    }
		    @media (max-width: 520px){
		      /* Mobile: conteúdo centralizado (sem “colar” na esquerda) */
		      .signup-grid{ justify-items:center; }
		      .signup-grid > div{
		        width:100%;
		        margin-left:auto;
		        margin-right:auto;
		      }
	      .plan-grid,
	      .plan-card,
	      .plan-card-inner,
	      .signup-form-fields,
	      form[data-signup-flow] .input{
	        width:100%;
	        max-width:100%;
	      }
	      .signup-footer{
	        justify-items:center;
	        text-align:center;
	      }
	      /* Precisa vencer regras base declaradas depois no CSS. */
	      .signup-footer .btn{ justify-self:center !important; }
	      .signup-footer a.inline{ justify-self:center !important; }
	    }
		    .signup-form-col{
		      display:flex;
		      flex-direction:column;
		    }
        /* Alinhamento vertical: inputs (coluna da direita) = altura exata dos cards (coluna da esquerda) */
        .signup-grid{
          --plan-gap: 10px;
          --plan-card-h: 124px;
          --plan-stack-h: calc(3 * var(--plan-card-h) + 2 * var(--plan-gap));
        }
        .plans-sub{ min-height: 32px; }
	        .plan-grid{
	          gap: var(--plan-gap);
	          height: var(--plan-stack-h);
	          grid-auto-rows: var(--plan-card-h);
	          min-width:0;
	        }
        .plan-card-inner{
          height:100%;
          display:flex;
          flex-direction:column;
          justify-content:space-between;
        }
	        .signup-form-fields{
	          height: var(--plan-stack-h);
	          display:flex;
	          flex-direction:column;
	          justify-content:space-between;
	          min-width:0;
	        }
        .signup-form-fields .input{ margin-top:0 !important; }
        .signup-form-col.is-create-only .signup-form-fields{
          height:auto;
          justify-content:flex-start;
          gap:18px;
        }
		    .signup-footer{
		      display:grid;
		      grid-template-columns: 1fr 1fr;
		      gap:18px;
		      align-items:center;
		      margin-top:18px;
		    }
        .signup-bottom-space{
          height:150px;
          display:flex;
          align-items:center; /* centralizado vertical */
          justify-content:center; /* centralizado horizontal */
        }
	        .signup-legal{
	          display:block;
	          width:100%;
	          margin:0;
	          padding:0 12px;
	          text-align:center;
	          color:var(--c-muted-text);
	          font-size:12px;
	          line-height:1.35;
	        }
	        .signup-legal a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
	        .signup-legal-link{ white-space:nowrap; }
		    .signup-footer a.inline{
		      justify-self:start;
		      display:inline-flex;
		      align-items:center;
		      height:var(--control-h);
		    }
		    .signup-footer .btn{
		      justify-self:center;
		      width:min(420px, 100%);
		    }
			    @media (max-width: 860px){
			      .signup-footer{
			        grid-template-columns:1fr;
			        gap:12px;
			        justify-items:center;
			        text-align:center;
			      }
			      .signup-footer .btn{
			        order:1;
			        justify-self:stretch;
			        width:100%;
			      }
			      .signup-footer a.inline{
			        order:2;
			        justify-self:center;
			      }
			    }

	    form[data-signup-flow] .input{
	      transition: border-color .18s ease, box-shadow .18s ease;
	    }
	    form[data-signup-flow] .input.is-focused{
      border-color: rgba(var(--c-accent-rgb), .48);
      box-shadow:
        0 0 0 1px rgba(var(--c-accent-rgb), .22),
        0 0 18px rgba(var(--c-accent-rgb), .14);
    }
	    @media (prefers-reduced-motion: reduce){
	      form[data-signup-flow] .input{ transition:none !important; }
	    }

	    /* planos */
	    .plans-title{
	      font-weight:800;
	      font-size:16px;
	      color:var(--c-navy-dark);
	      text-align:center;
	      margin:0 0 6px 0;
	    }
	    .plans-sub{ color:var(--c-muted-text); font-size:12px; text-align:center; margin:0 0 10px 0; }
	    .plan-grid{
	      display:grid;
	      grid-template-columns:1fr;
	      gap:var(--plan-gap);
	    }
	    .plan-card{
	      position:relative;
	      display:block;
	      cursor:pointer;
	    }
	    .plan-card input{
	      position:absolute;
	      opacity:0;
	      pointer-events:none;
	    }
	    .plan-card-inner{
	      border:1px solid var(--c-line);
	      background:#fff;
	      border-radius:14px;
	      padding:12px 12px;
	      box-shadow:0 8px 18px rgba(6,27,66,.06);
        /* O tamanho é controlado por `grid-auto-rows` acima (alinhamento). */
	    }
	    .plan-card input:checked + .plan-card-inner{
	      border-color: rgba(var(--c-accent-rgb), .88);
        background: rgba(var(--c-accent-rgb), .04);
	      box-shadow:
	        0 0 0 1px rgba(var(--c-accent-rgb), .18),
	        0 14px 28px rgba(var(--c-accent-rgb), .08);
	    }
      .plan-card.is-disabled{
        cursor:not-allowed;
      }
      .plan-card.is-disabled .plan-card-inner{
        opacity:.72;
        background:#f8fafc;
        box-shadow:none;
      }
	    .plan-head{
	      display:flex;
	      align-items:center;
	      justify-content:space-between;
	      gap:8px;
	      margin-bottom:6px;
	    }
	    .plan-name{ font-weight:800; }
	    .plan-badge{
	      font-size:11px;
	      font-weight:800;
	      padding:3px 8px;
	      border-radius:999px;
	      border:1px solid rgba(6,27,66,.12);
	      background:#f1f5f9;
	      color:#334155;
	      white-space:nowrap;
	    }
      .plan-check{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:22px;
        height:22px;
        border-radius:999px;
        border:1px solid rgba(6,27,66,.14);
        color:rgba(6,27,66,.35);
        background:#fff;
        flex:0 0 auto;
      }
      .plan-card input:checked + .plan-card-inner .plan-check{
        border-color: rgba(var(--c-accent-rgb), .60);
        background: rgba(var(--c-accent-rgb), .10);
        color: rgb(var(--c-accent-rgb));
      }
      .plan-card.is-disabled .plan-check{
        opacity:.45;
      }
	    .plan-price{
	      font-size:18px;
	      font-weight:900;
	      margin:2px 0 6px;
	      color:#0f172a;
	    }
	    .plan-price .muted{ font-size:12px; font-weight:600; }
	    .plan-feats{
	      margin:0;
	      padding-left:18px;
	      color:var(--c-muted-text);
	      font-size:12px;
	    }