/* 2-step conversational form styles */
:root{--tlcf-brand:#ad101e;--tlcf-heading:#152340}
.tlcf-wrapper{max-width:760px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;line-height:1.45;padding:28px}
.tlcf-fullscreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1000px 600px at 110% -10%, rgba(173,16,30,.05), transparent 60%), radial-gradient(800px 500px at -10% 110%, rgba(21,35,64,.06), transparent 60%)}
.tlcf-stage{width:100%;position:relative}
.tlcf-topbar{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.tlcf-logo{height:42px;object-fit:contain}
.tlcf-progress{flex:1;height:6px;background:#eee;border-radius:6px;overflow:hidden}
.tlcf-progress-bar{height:6px;width:0;background:var(--tlcf-brand);transition:width .25s ease}
.tlcf-intro,.tlcf-role,.tlcf-step,.tlcf-thanks{display:none;animation:fadeUp .35s ease both}
.tlcf-intro.is-active,.tlcf-role.is-active,.tlcf-step.is-active,.tlcf-thanks.is-active{display:block}
h1,h2{color:var(--tlcf-heading);margin:0 0 10px}
.tlcf-sub{color:#4a5568;margin-bottom:16px}
.tlcf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tlcf-field--full{grid-column:1/-1}
label{display:block;font-weight:600;margin-bottom:8px;color:#1f2937}
.tlcf-input, .tlcf-group{display:block}
.tlcf-input{width:100%;padding:14px 12px;border:1px solid #d7d7d7;border-radius:12px;font-size:16px;transition:box-shadow .2s,border-color .2s}
.tlcf-input:focus{outline:none;border-color:var(--tlcf-brand);box-shadow:0 0 0 3px rgba(173,16,30,.15)}
.tlcf-group .tlcf-check{display:flex;align-items:center;gap:8px;margin:8px 0}
.tlcf-actions{display:flex;gap:12px;margin-top:16px}
.tlcf-actions .tlcf-next,.tlcf-actions .tlcf-back,.tlcf-submit,.tlcf-start,.tlcf-home,.tlcf-role-client,.tlcf-role-shopper{padding:12px 16px;border-radius:12px;border:0;background:var(--tlcf-brand);color:#fff;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.tlcf-actions .tlcf-back{background:#e0e0e0;color:#111}

/* Role gate */
.tlcf-role{max-width:560px;margin:0 auto}
.tlcf-sub.tlcf-sub--role{margin-bottom:14px}

/* Stack the two choices vertically (modern card buttons) */
.tlcf-actions--split{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.tlcf-actions--split > button{width:100%}

.tlcf-role-client,
.tlcf-role-shopper{
  background:#ffffff;
  color:var(--tlcf-heading);
  border:1px solid #e5e7eb;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  padding:16px 18px;
  border-radius:16px;
  text-align:left;
  justify-content:flex-start;
  align-items:flex-start;
  flex-direction:column;
  gap:6px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.tlcf-role-shopper{
  background:rgba(173,16,30,.04);
  border-color:rgba(173,16,30,.22);
}

.tlcf-role-title{font-size:16px;font-weight:800;letter-spacing:.2px}
.tlcf-role-desc{font-size:13px;font-weight:600;color:#6b7280}

.tlcf-role-client:hover,
.tlcf-role-shopper:hover{
  border-color:rgba(0,0,0,.12);
  transform:translateY(-1px);
}

/* Make the shopper option feel like the primary action */
.tlcf-role-shopper{
  border-color:rgba(173,16,30,.35);
  box-shadow:0 10px 26px rgba(173,16,30,.10);
}
.tlcf-role-shopper:focus,
.tlcf-role-client:focus{outline:none;box-shadow:0 0 0 4px rgba(173,16,30,.12), 0 10px 26px rgba(0,0,0,.06)}
.req{color:#e11}
.has-error .tlcf-input, .has-error .tlcf-group{outline:2px solid #ad101e;outline-offset:2px}
.enter{animation:fadeUp .35s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Confetti */
.tlcf-confetti{position:absolute;inset:-20px 0 0 0;pointer-events:none}
.tlcf-confetti span{position:absolute;top:-10px;width:8px;height:12px;background:var(--tlcf-brand);opacity:.9;border-radius:2px;animation:fall 1.8s linear forwards}
.tlcf-confetti span:nth-child(3n){background:#ffd166}
.tlcf-confetti span:nth-child(5n){background:#06d6a0}
@keyframes fall{to{transform:translateY(120vh) rotate(260deg);opacity:0}}

/* Thank-you button adjustments from v3 */
.tlcf-home { margin-top: 24px; }
.tlcf-home:hover { background: var(--tlcf-brand); }

/* Mobile */
@media (max-width: 640px){
  .tlcf-grid{grid-template-columns:1fr}
}


/* Role selection left-aligned */
.tlcf-actions--split button {
  text-align: left;
  align-items: flex-start;
}
.tlcf-role-title {
  text-align: left;
}


/* === Left-align Choose Your Path step (full block) === */
.tlcf-role {
  align-items: flex-start !important;
  text-align: left !important;
}

.tlcf-role h2,
.tlcf-role .tlcf-sub {
  text-align: left !important;
}

.tlcf-actions--split {
  width: 100%;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.tlcf-actions--split button {
  width: 100%;
  margin-left: 0;
  text-align: left !important;
}