/* AthletiGo, הרשמה לשיעור ניסיון בצור הדסה.
   ---------------------------------------------------------------------------
   Loaded after assets/zur.css and only on /zur-hadassah/, so it inherits that
   file's palette from :root and adds nothing to it. Same cream page, same
   white cards, same one orange.

   No font-family is declared anywhere below except to say `inherit`. The page
   already runs on Heebo, the controls are the only elements a browser would
   otherwise style with its own face, and a second declaration here would be a
   second place to keep in step with the rest of the page.
   --------------------------------------------------------------------------- */

/* ===== the surface every card in this block shares ====================== */
.atg-card{
  background:var(--zur-card);
  border:1px solid var(--zur-line);
  border-radius:18px;
  box-shadow:var(--zur-shadow);
  padding:clamp(18px,3.4vw,26px);
}
.atg-card + .atg-card{margin-top:14px}

.atg-card-h{
  margin:0 0 14px;
  font-size:clamp(17px,2.8vw,20px);
  font-weight:700;
  color:var(--zur-ink);
}

/* ===== the block itself ================================================= */
.atg-trial{padding-top:clamp(18px,3vh,30px)}

.atg-trial-card{
  border:2px solid var(--zur-orange);
  padding:0;
  overflow:hidden;
}

/* the thin line above the heading, and the only tinted surface in the block */
.atg-trial-banner{
  margin:0;
  padding:9px 16px;
  background:#FFF1E6;
  border-bottom:1px solid #ffdcc2;
  color:var(--zur-orange-d);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.01em;
  text-align:center;
}

.atg-trial-body{padding:clamp(18px,3.4vw,26px)}

.atg-trial-h{
  margin:0 0 6px;
  font-size:clamp(21px,3.8vw,28px);
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.015em;
  color:var(--zur-ink);
}
.atg-trial-lead{margin:0 0 4px;color:var(--zur-body);font-size:clamp(15px,2.5vw,16.5px)}
.atg-trial-when{margin:0 0 16px;color:var(--zur-ink);font-size:14.5px;font-weight:700}

/* ===== one group per row, and what opens under it ======================
   The row is a <summary> and the panel under it is the same .zur-acc body
   the rest of the page uses, so the animation, the one-at-a-time rule and
   the arrow all come from assets/zur.js and assets/zur.css. What is left
   here is the line itself and what the panel holds.

   Name, hour, ages, in that order and in one run, with only the arrow pushed
   to the far end. The ages are the one part allowed to lose characters, so a
   long line never becomes a second line and the three rows stay the same
   height as each other. */
.atg-trial-rows{margin:0 0 18px}

/* the box comes from .zur-acc-item; this only sets the line inside it */
.atg-row{
  align-items:baseline;
  gap:8px;
  padding:14px 16px;
  font-size:16px;
  font-weight:400;
  color:var(--zur-ink);
}
.atg-row-item.on{border-color:var(--zur-orange)}

.atg-row-name{flex:0 0 auto;font-weight:700;white-space:nowrap}
.atg-row-time{flex:0 0 auto;font-weight:700;color:var(--zur-orange-d);white-space:nowrap}
.atg-row-ages{
  flex:0 1 auto;
  min-width:0;
  color:var(--zur-body);
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== the panel ======================================================= */
/* the shared rule puts padding on every paragraph; here the padding belongs
   to the panel, so that the tinted ground reaches the edges of the card */
.atg-row-item .zur-acc-body p{padding:0}
.atg-row-body{
  padding:16px clamp(16px,2.4vw,20px) 18px;
  background:#FBF7F2;
  border-block-start:1px solid var(--zur-line);
}
.atg-row-desc{
  margin:0;
  color:var(--zur-ink);
  font-size:14.5px;
  line-height:1.7;
}

.atg-facts{display:grid;gap:11px;margin:15px 0 16px}
.atg-fact{display:flex;gap:10px;align-items:flex-start}
.atg-fact-icon{flex:0 0 auto;display:flex;color:var(--zur-orange);margin-block-start:2px}
.atg-fact-txt{min-width:0}
.atg-fact-l{display:block;color:var(--zur-body);font-size:12.5px;line-height:1.4}
.atg-fact-v{
  display:block;
  color:var(--zur-ink);
  font-size:14.5px;
  font-weight:700;
  line-height:1.45;
}

.atg-row-cta{margin:0}
.atg-row-cta .zur-btn{width:100%;padding-inline:20px}
.atg-row-note{
  margin:10px 0 0;
  text-align:center;
  color:var(--zur-body);
  font-size:13px;
  line-height:1.6;
}

.atg-trial-cta{margin:0}
.atg-trial-cta .zur-btn{width:100%;padding-inline:20px}

/* ===== the form ========================================================= */
.atg-form{margin-top:14px}

.atg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.atg-grid + .atg-grid{margin-top:12px}
@media (max-width:560px){
  .atg-grid{grid-template-columns:1fr}
}

.atg-fld label{
  display:block;
  font-size:14.5px;
  font-weight:700;
  margin:0 0 6px;
  color:var(--zur-ink);
}
.atg-opt{font-weight:400;color:var(--zur-body);font-size:13px}
.atg-hint{margin:6px 0 0;font-size:13px;color:var(--zur-body)}

.atg-fld input,
.atg-fld select,
.atg-fld textarea{
  width:100%;
  box-sizing:border-box;
  background:#fff;
  border:1px solid var(--zur-line);
  border-radius:10px;
  padding:12px 14px;
  /* inherited, so the controls read as the page rather than as the browser */
  font-family:inherit;
  /* 16px is what keeps iOS from zooming the page on focus */
  font-size:16px;
  line-height:1.45;
  color:var(--zur-ink);
}
.atg-fld textarea{resize:vertical;min-height:64px}
.atg-fld input:focus,
.atg-fld select:focus,
.atg-fld textarea:focus{
  outline:2px solid var(--zur-orange);
  outline-offset:1px;
  border-color:var(--zur-orange);
}
.atg-fld input.bad,
.atg-fld select.bad,
.atg-fld textarea.bad{border-color:#c0392b}

.atg-note-line{
  margin:0 0 14px;
  color:var(--zur-body);
  font-size:14.5px;
  line-height:1.5;
}

/* ===== a health question ================================================ */
.atg-q{padding:14px 0;border-block-end:1px solid var(--zur-line)}
.atg-q:first-of-type{padding-block-start:0}
.atg-q-l{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--zur-ink);line-height:1.4}

.atg-yn{display:flex;gap:8px}
.atg-yn-opt{position:relative;flex:0 0 auto}
.atg-yn-opt input{
  position:absolute;
  inset-inline-start:0;
  inset-block-start:0;
  width:100%;height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.atg-yn-opt span{
  display:block;
  min-width:74px;
  text-align:center;
  padding:10px 18px;
  border:1px solid var(--zur-line);
  border-radius:999px;
  background:#fff;
  color:var(--zur-ink);
  font-size:15px;
  font-weight:700;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
/* the answered state is the page's orange, never a dark fill */
.atg-yn-opt input:checked + span{
  background:var(--zur-orange);
  border-color:var(--zur-orange);
  color:#fff;
}
.atg-yn-opt input:focus-visible + span{outline:2px solid var(--zur-ink);outline-offset:2px}

.atg-q-note{margin-top:12px}
.atg-emerg{margin-top:18px}
.atg-emerg .atg-q-l{margin-bottom:12px}

/* ===== the declaration =================================================== */
.atg-decl{
  margin:18px 0 14px;
  max-height:170px;
  overflow-y:auto;
  background:#FBF7F2;
  border:1px solid var(--zur-line);
  border-radius:12px;
  padding:14px 16px;
  -webkit-overflow-scrolling:touch;
}
.atg-decl ul{margin:0;padding-inline-start:18px}
.atg-decl li{
  margin:0 0 8px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--zur-ink);
}
.atg-decl li:last-child{margin-bottom:0}
.atg-decl:focus-visible{outline:2px solid var(--zur-orange);outline-offset:2px}

.atg-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  font-size:15px;
  line-height:1.5;
  color:var(--zur-ink);
  font-weight:700;
}
.atg-check input{
  flex:0 0 auto;
  width:20px;height:20px;
  margin:1px 0 0;
  accent-color:var(--zur-orange);
}

/* ===== the signature ==================================================== */
.atg-sign{position:relative}
.atg-pad{
  display:block;
  width:100%;
  height:200px;
  background:#fff;
  border:2px dashed var(--zur-line);
  border-radius:12px;
  /* without this a finger scrolls the page instead of drawing */
  touch-action:none;
  cursor:crosshair;
}
.atg-pad.on{border-style:solid;border-color:var(--zur-orange)}
.atg-pad-hint{
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:0;
  inset-inline-end:0;
  margin:0;
  transform:translateY(-50%);
  text-align:center;
  color:#b9b1a6;
  font-size:15px;
  pointer-events:none;
}
.atg-sign-tools{margin:10px 0 0}
.atg-clear{
  background:#fff;
  border:1px solid var(--zur-line);
  border-radius:999px;
  padding:9px 18px;
  cursor:pointer;
  font-family:inherit;
  font-size:14.5px;
  font-weight:700;
  color:var(--zur-ink);
  transition:border-color .2s ease,color .2s ease;
}
.atg-clear:hover{border-color:var(--zur-orange);color:var(--zur-orange-d)}

.atg-stamp{
  margin:12px 0 0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--zur-body);
}

/* ===== errors and the send button ======================================= */
.atg-err{
  margin:14px 0 0;
  background:#fff4f2;
  border:1px solid #f3c9c1;
  border-radius:12px;
  padding:12px 14px;
  color:#a03323;
  font-size:14.5px;
  line-height:1.6;
}
.atg-err ul{margin:0;padding-inline-start:18px}

.atg-submit-line{margin:16px 0 0}
.atg-submit{width:100%}
.atg-submit[disabled]{opacity:.6;cursor:progress}

/* ===== the screen that says it worked ==================================
   Cream underneath, white cards on top, and one green button that is the
   only thing on the screen you can press. The floating button takes itself
   away for good at this point, so nothing competes with it. */
.atg-done{margin-top:14px}

/* 1. the confirmation */
.atg-ok{text-align:center;padding:4px 0 20px}
.atg-ok-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#E7F4EC;
  color:var(--zur-green);
  margin-bottom:14px;
}
.atg-ok-h{
  margin:0 0 8px;
  font-size:clamp(21px,3.6vw,26px);
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--zur-ink);
}
.atg-ok-l{
  margin:0;
  color:var(--zur-body);
  font-size:clamp(15px,2.5vw,16.5px);
  line-height:1.65;
}

/* 2. where and when */
.atg-meet-row{display:flex;gap:12px;align-items:flex-start;padding:13px 0}
.atg-meet-row:first-child{padding-block-start:0}
.atg-meet-row:last-child{padding-block-end:0}
.atg-meet-row + .atg-meet-row{border-block-start:1px solid var(--zur-line)}
.atg-meet-icon{flex:0 0 auto;display:flex;color:var(--zur-orange);margin-block-start:1px}
.atg-meet-txt{flex:1 1 auto;min-width:0}
.atg-meet-txt b{
  display:block;
  font-weight:700;
  font-size:15.5px;
  line-height:1.45;
  color:var(--zur-ink);
}
.atg-meet-note{
  display:block;
  margin-block-start:3px;
  color:var(--zur-body);
  font-size:14px;
  line-height:1.55;
}

/* 3. what to bring */
.atg-kit-h{
  margin:0 0 8px;
  font-size:14px;
  font-weight:700;
  color:var(--zur-body);
}
.atg-kit ul{
  margin:0;
  padding-inline-start:18px;
  color:var(--zur-ink);
  font-size:15px;
  line-height:1.85;
}

/* 4. the invitation, and the one button on the screen */
.atg-invite{margin-block-start:24px;text-align:center}
.atg-invite-l{
  margin:0 0 12px;
  color:var(--zur-ink);
  font-size:15.5px;
  font-weight:700;
  line-height:1.55;
}
/* the selector carries an extra class on purpose: assets/zur.css sets
   .zur a{color:inherit}, which is more specific than a bare .atg-wa and was
   painting this button's label charcoal on green */
.zur a.atg-wa{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  text-decoration:none;
  background:var(--zur-green);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:16px 24px;
  font-family:inherit;
  font-weight:700;
  font-size:clamp(16px,2.5vw,18px);
  box-shadow:0 8px 22px rgba(47,125,79,.3);
  transition:background .2s ease,transform .2s cubic-bezier(.2,.8,.2,1);
}
.zur a.atg-wa:hover{background:#276843;transform:translateY(-2px);color:#fff}
.zur a.atg-wa:focus-visible{outline:3px solid var(--zur-ink);outline-offset:3px}
.atg-wa-note{
  margin:10px 0 0;
  text-align:center;
  color:var(--zur-body);
  font-size:13.5px;
}

/* 5. the last word */
.atg-signoff{
  margin:24px 0 0;
  text-align:center;
  color:var(--zur-body);
  font-size:14.5px;
  line-height:1.75;
}

/* ===== the price block =================================================== */
.atg-pricing{padding-top:clamp(14px,2.4vh,22px)}
.atg-prices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){
  .atg-prices{grid-template-columns:1fr}
}
.atg-price{
  position:relative;
  border:1px solid var(--zur-line);
  border-radius:14px;
  padding:18px 16px 16px;
  text-align:center;
  background:#fff;
}
.atg-price.best{border-color:var(--zur-orange)}
.atg-price-tag{
  position:absolute;
  inset-block-start:-10px;
  inset-inline-start:50%;
  transform:translateX(50%);
  background:var(--zur-orange);
  color:#fff;
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  padding:3px 12px;
  white-space:nowrap;
}
.atg-price-n{
  display:block;
  font-size:clamp(30px,6vw,40px);
  font-weight:900;
  line-height:1.05;
  color:var(--zur-orange);
}
.atg-price-n span{font-size:.55em;margin-inline-start:2px}
.atg-price-per{display:block;margin-top:2px;color:var(--zur-body);font-size:13.5px}
.atg-price-l{display:block;margin-top:8px;color:var(--zur-ink);font-size:15px;font-weight:700}
.atg-price-terms{margin:14px 0 0;color:var(--zur-body);font-size:14.5px}
.atg-price-family{margin:6px 0 0;color:var(--zur-ink);font-size:14.5px;font-weight:700}