/* Treetop Client Forms - Public styling
   The variables below make it easy to align the form with the site look & feel. */
:root{
  --ttf-primary:#17324d;
  --ttf-primary-soft:#eaf1f6;
  --ttf-accent:#7aa65a;
  --ttf-accent-dark:#668f49;
  --ttf-text:#172033;
  --ttf-muted:#5f6f7f;
  --ttf-border:#dce5ec;
  --ttf-border-strong:#c8d5df;
  --ttf-bg:#f5f7f8;
  --ttf-card:#ffffff;
  --ttf-error:#9b1c1c;
  --ttf-error-bg:#fff1f1;
  --ttf-success:#2f6b2d;
  --ttf-success-bg:#eef8ea;
  --ttf-radius:22px;
  --ttf-shadow:0 18px 55px rgba(23,50,77,.10);
  --ttf-font:Arial,"Noto Sans Hebrew","Open Sans Hebrew",sans-serif;
}

body.treetop-public-form-page{
  margin:0;
  min-height:100vh;
  direction:rtl;
  background:
    radial-gradient(circle at 88% 0%, rgba(122,166,90,.16), transparent 34%),
    linear-gradient(180deg,#ffffff 0%,var(--ttf-bg) 100%);
  color:var(--ttf-text);
  font-family:var(--ttf-font);
}

.treetop-public-form-page::before{
  content:"";
  display:block;
  height:7px;
  background:linear-gradient(90deg,var(--ttf-accent),var(--ttf-primary));
}

.treetop-form-wrap{
  box-sizing:border-box;
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:clamp(22px,5vw,64px) clamp(14px,4vw,28px);
  direction:rtl;
  font-family:var(--ttf-font);
}

.treetop-form-card{
  position:relative;
  overflow:hidden;
  background:var(--ttf-card);
  border:1px solid rgba(23,50,77,.10);
  border-radius:var(--ttf-radius);
  box-shadow:var(--ttf-shadow);
  padding:clamp(22px,4.5vw,48px);
}

.treetop-form-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg,var(--ttf-accent),var(--ttf-primary));
}


.treetop-form-kicker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 18px;
}

.treetop-form-kicker span,
.treetop-form-guidance span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(122,166,90,.22);
  border-radius:999px;
  background:#f4faf1;
  color:#456d34;
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  padding:7px 12px;
}

.treetop-form-guidance{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:4px 0 18px;
}

.treetop-form-progress{
  position:sticky;
  top:0;
  z-index:3;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:#edf3f6;
  margin:0 0 24px;
}

.treetop-form-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--ttf-accent),var(--ttf-primary));
  transition:width .25s ease;
}

.treetop-form-card h1{
  margin:0 0 12px;
  color:var(--ttf-primary);
  font-size:clamp(28px,4vw,42px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.02em;
}

.treetop-form-desc{
  max-width:760px;
  margin:0 0 28px;
  color:var(--ttf-muted);
  font-size:17px;
  line-height:1.8;
}

.treetop-form-desc p{margin:0 0 10px}.treetop-form-desc p:last-child{margin-bottom:0}

.treetop-success,
.treetop-form-notice.success{
  border:1px solid #cfe8c8;
  background:var(--ttf-success-bg);
  color:var(--ttf-success);
  border-radius:16px;
  padding:14px 16px;
  margin:18px 0 22px;
  font-size:15px;
  line-height:1.65;
}

.treetop-form-notice.error{
  border:1px solid #f2c4c4;
  background:var(--ttf-error-bg);
  color:var(--ttf-error);
  border-radius:16px;
  padding:14px 16px;
  margin:18px 0 22px;
  font-size:15px;
  line-height:1.65;
}

.treetop-form{
  display:grid;
  gap:22px;
}

.treetop-field{
  display:grid;
  gap:9px;
}

.treetop-label{
  display:block;
  color:var(--ttf-primary);
  font-size:16px;
  line-height:1.45;
  font-weight:700;
}

.treetop-label .req{color:#c05621;margin-inline-start:4px}

.treetop-help{
  margin:0;
  color:var(--ttf-muted);
  font-size:14px;
  line-height:1.6;
}

.treetop-field input[type=text],
.treetop-field input[type=email],
.treetop-field input[type=tel],
.treetop-field input[type=number],
.treetop-field input[type=date],
.treetop-field textarea,
.treetop-field select{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--ttf-border-strong);
  border-radius:15px;
  background:#fff;
  color:var(--ttf-text);
  padding:14px 16px;
  font-size:16px;
  line-height:1.45;
  font-family:inherit;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.treetop-field input::placeholder,
.treetop-field textarea::placeholder{color:#99a6b2}

.treetop-field textarea{min-height:126px;resize:vertical}

.treetop-field input:focus,
.treetop-field textarea:focus,
.treetop-field select:focus{
  outline:none;
  border-color:var(--ttf-accent);
  box-shadow:0 0 0 4px rgba(122,166,90,.17);
  background:#fff;
}

.treetop-options{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:11px;
}

.treetop-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:48px;
  box-sizing:border-box;
  border:1px solid var(--ttf-border);
  border-radius:15px;
  padding:12px 13px;
  background:#fbfcfd;
  color:var(--ttf-text);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.treetop-option:hover,
.treetop-option.is-selected{
  border-color:rgba(122,166,90,.55);
  background:#ffffff;
  box-shadow:0 10px 22px rgba(23,50,77,.06);
  transform:translateY(-1px);
}

.treetop-option input{margin-top:4px;accent-color:var(--ttf-accent);inline-size:18px;block-size:18px;flex:0 0 auto}
.treetop-option.is-selected{background:#f4faf1;box-shadow:0 10px 22px rgba(23,50,77,.06)}
.treetop-option span{line-height:1.55}

.treetop-section-title{
  position:relative;
  margin:18px 0 0;
  padding:20px 0 0;
  border-top:1px solid var(--ttf-border);
  color:var(--ttf-primary);
  font-size:23px;
  line-height:1.35;
  font-weight:800;
}

.treetop-section-title::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin-top:10px;
  border-radius:999px;
  background:var(--ttf-accent);
}

.treetop-submit{
  justify-self:start;
  min-width:190px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--ttf-accent),var(--ttf-accent-dark));
  color:#fff;
  font-family:inherit;
  font-size:17px;
  font-weight:800;
  padding:15px 30px;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  box-shadow:0 12px 26px rgba(122,166,90,.28);
}

.treetop-submit:hover,
.treetop-submit:focus{
  transform:translateY(-1px);
  filter:saturate(1.05);
  box-shadow:0 16px 32px rgba(122,166,90,.34);
}

.treetop-submit:focus{outline:3px solid rgba(122,166,90,.26);outline-offset:3px}

.treetop-signature-box{
  border:1px solid var(--ttf-border-strong);
  border-radius:16px;
  background:#fff;
  padding:10px;
}

.treetop-signature-box canvas{
  width:100%;
  height:180px;
  display:block;
  border-radius:12px;
  background:linear-gradient(#fff,#fff),repeating-linear-gradient(0deg,transparent,transparent 31px,#edf2f7 32px);
  touch-action:none;
}

.treetop-clear-signature{
  margin-top:9px;
  border:1px solid var(--ttf-border-strong);
  background:#fff;
  color:var(--ttf-primary);
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  font-family:inherit;
}

.treetop-clear-signature:hover{border-color:var(--ttf-accent)}


.treetop-field.is-filled .treetop-label::after{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-inline-start:8px;
  border-radius:999px;
  background:#eef8ea;
  color:var(--ttf-success);
  font-size:12px;
}

.treetop-form.is-submitting .treetop-submit{
  opacity:.72;
  pointer-events:none;
}

.treetop-form.is-submitting .treetop-submit::after{
  content:"...";
}

@media(max-width:640px){
  body.treetop-public-form-page::before{height:5px}
  .treetop-form-wrap{padding:14px 10px 28px}
  .treetop-form-card{border-radius:18px;padding:22px 16px}
  
.treetop-form-kicker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 18px;
}

.treetop-form-kicker span,
.treetop-form-guidance span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(122,166,90,.22);
  border-radius:999px;
  background:#f4faf1;
  color:#456d34;
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  padding:7px 12px;
}

.treetop-form-guidance{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:4px 0 18px;
}

.treetop-form-progress{
  position:sticky;
  top:0;
  z-index:3;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:#edf3f6;
  margin:0 0 24px;
}

.treetop-form-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--ttf-accent),var(--ttf-primary));
  transition:width .25s ease;
}

.treetop-form-card h1{font-size:26px}
  .treetop-form-desc{font-size:15.5px;line-height:1.75;margin-bottom:22px}
  .treetop-form{gap:18px}
  .treetop-options{grid-template-columns:1fr}
  .treetop-submit{width:100%;justify-self:stretch}
}

/* v1.1.9 - polished customer-facing form UX */
.treetop-form-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.98)) padding-box,
    linear-gradient(135deg,rgba(122,166,90,.42),rgba(23,50,77,.18)) border-box;
  border:1px solid transparent;
}

.treetop-form-card h1{
  max-width:760px;
}

.treetop-form-desc{
  background:#f8fafc;
  border:1px solid #e4edf2;
  border-radius:18px;
  padding:16px 18px;
}

.treetop-form{
  counter-reset:ttf-field;
}

.treetop-field{
  position:relative;
  border:1px solid rgba(220,229,236,.92);
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#fbfcfd);
  padding:18px 18px 16px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease;
}

.treetop-field:not(.treetop-field-signature)::before{
  counter-increment:ttf-field;
  content:counter(ttf-field);
  position:absolute;
  inset-block-start:17px;
  inset-inline-end:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:#eef5ea;
  color:#557842;
  font-size:12px;
  font-weight:800;
}

.treetop-field:focus-within{
  border-color:rgba(122,166,90,.58);
  box-shadow:0 14px 34px rgba(23,50,77,.08);
  transform:translateY(-1px);
}

.treetop-field.is-filled{
  border-color:rgba(122,166,90,.34);
  background:linear-gradient(180deg,#fff,#fbfdf9);
}

.treetop-label{
  padding-inline-end:34px;
  font-size:16.5px;
}

.treetop-field input[type=text],
.treetop-field input[type=email],
.treetop-field input[type=tel],
.treetop-field input[type=number],
.treetop-field input[type=date],
.treetop-field textarea,
.treetop-field select{
  border-radius:13px;
  background:#ffffff;
  min-height:50px;
}

.treetop-options{
  gap:12px;
}

.treetop-option{
  border-radius:14px;
  background:#ffffff;
}

.treetop-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  border-top:0;
  margin:26px 0 2px;
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(122,166,90,.14),rgba(23,50,77,.06));
}

.treetop-section-title::before{
  content:"";
  width:10px;
  height:34px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--ttf-accent),var(--ttf-primary));
  flex:0 0 auto;
}

.treetop-section-title::after{display:none}

.treetop-submit{
  margin-top:8px;
  justify-self:stretch;
  width:100%;
  max-width:360px;
  margin-inline-start:auto;
  margin-inline-end:auto;
  font-size:18px;
  padding:17px 34px;
}

.treetop-submit::before{
  content:"✓ ";
}

.treetop-form-progress{
  box-shadow:inset 0 0 0 1px rgba(23,50,77,.05);
}

@media(max-width:640px){
  .treetop-field{padding:16px 14px 15px;border-radius:16px}
  .treetop-field:not(.treetop-field-signature)::before{inset-inline-end:14px;inset-block-start:15px}
  .treetop-label{padding-inline-end:32px;font-size:15.8px}
  .treetop-section-title{padding:15px 14px;font-size:20px}
  .treetop-submit{max-width:none}
}

/* v1.2.0 - typography and visual polish */
.treetop-form-wrap,
.treetop-form-wrap *,
.treetop-public-form-page,
.treetop-public-form-page *{
  font-family:var(--ttf-font) !important;
}

.treetop-form-card h1,
.treetop-section-title,
.treetop-label{
  font-family:inherit !important;
  letter-spacing:0;
}

.treetop-form-card h1{
  font-weight:600;
  color:var(--ttf-primary);
}

.treetop-section-title{
  font-weight:600;
}

.treetop-field{
  box-shadow:0 8px 24px rgba(23,50,77,.035);
}

.treetop-field:hover{
  border-color:rgba(122,166,90,.42);
  box-shadow:0 12px 30px rgba(23,50,77,.06);
}

.treetop-label{
  font-weight:600;
  color:#182c43;
}

.treetop-field input[type=text],
.treetop-field input[type=email],
.treetop-field input[type=tel],
.treetop-field input[type=number],
.treetop-field input[type=date],
.treetop-field textarea,
.treetop-field select{
  border-color:#d8e3ea;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.treetop-field input:focus,
.treetop-field textarea:focus,
.treetop-field select:focus{
  border-color:var(--ttf-accent);
  box-shadow:0 0 0 4px rgba(122,166,90,.13);
}

.treetop-option{
  border-color:#dce5ec;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.treetop-option:hover{
  border-color:rgba(122,166,90,.52);
  background:#fbfdf9;
  box-shadow:0 8px 20px rgba(23,50,77,.045);
}

.treetop-option:has(input:checked){
  border-color:rgba(122,166,90,.75);
  background:#f4faf1;
  box-shadow:0 0 0 3px rgba(122,166,90,.10);
}

.treetop-submit{
  font-family:inherit !important;
  font-weight:600;
  border-radius:999px;
  background:linear-gradient(135deg,var(--ttf-accent),var(--ttf-primary));
  box-shadow:0 14px 30px rgba(23,50,77,.16);
}

.treetop-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(23,50,77,.20);
}


/* v1.2.2 - keep form section headings compact and isolated from theme H2 styles */
.treetop-form-wrap .treetop-section-title{
  font-family:inherit !important;
  display:flex !important;
  align-items:center;
  gap:10px;
  margin:24px 0 10px !important;
  padding:12px 14px !important;
  border:1px solid rgba(23,50,77,.08) !important;
  border-radius:14px !important;
  background:rgba(122,166,90,.08) !important;
  color:var(--ttf-primary) !important;
  font-size:18px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}

.treetop-form-wrap .treetop-section-title::before{
  content:"";
  width:6px;
  height:24px;
  border-radius:999px;
  background:var(--ttf-accent);
  flex:0 0 auto;
}

.treetop-form-wrap .treetop-section-title::after{
  display:none !important;
  content:none !important;
}

@media(max-width:640px){
  .treetop-form-wrap .treetop-section-title{
    font-size:16.5px !important;
    padding:11px 12px !important;
    margin:20px 0 8px !important;
  }
}