/* 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-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 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{
  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)}

.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)}

@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-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}
}