/* AthletiGo intake form. One stylesheet for all three places it appears:
   the /start/ page, the dialog on the home and training documents, and the
   dialog on product pages.

   Product pages load none of the document stylesheets, so everything the form
   needs is declared here rather than inherited. The token values are the same
   ones home-new.css and training-new.css use, so on those pages redeclaring
   them changes nothing. */

.intake,.intake-dialog{
  --void:#050506;--ink:#0b0b0d;--ink-2:#101013;
  --orange:#FF6F20;--orange-2:#C9541F;--ember:#ff9450;--deep:#2b1004;
  --cream:#FBF3EA;--muted:#8d8880;--line:rgba(251,243,234,.10);
}

/* The documents define .btn themselves; a product page does not. Scoped to
   the form so the page's own buttons are never touched. */
.intake .btn{
  display:inline-block;background:var(--orange);color:var(--deep);font-weight:700;
  font-size:clamp(15px,1.5vw,17px);padding:clamp(12px,1.5vw,17px) clamp(24px,3vw,38px);
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;text-align:center;
  font-family:inherit;line-height:1.2;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.intake .btn:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(255,111,32,.35)}
.intake .btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--line)}
.intake .btn.ghost:hover{border-color:var(--orange);box-shadow:none;transform:none}
.intake .btn[disabled]{opacity:.55;pointer-events:none}
.intake .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The UA rule for [hidden] is only display:none, so any author display rule
   beats it. .fld below sets display:grid, which would leave the conditional
   health field on screen permanently. Restate it with weight. */
[hidden]{display:none !important}

.intake{padding:clamp(36px,6vh,64px) 0 clamp(60px,10vh,110px)}
.intake .eyebrow{font-size:clamp(15px,1.7vw,19px);letter-spacing:.22em;color:var(--orange-2);margin:0 0 18px}
.intake .h2{font-size:clamp(26px,4.4vw,44px);line-height:1.08;font-weight:900;letter-spacing:-.025em;
  margin:0 0 14px;max-width:20ch}
.intake .intake-lead{color:var(--muted);font-weight:200;margin:0 0 clamp(26px,4vw,40px);
  font-size:clamp(15px,1.8vw,17.5px);max-width:52ch}

/* fields */
.intake-form{display:grid;gap:clamp(20px,3vw,28px)}
.fld{display:grid;gap:10px;border:0;padding:0;margin:0;min-width:0}
.fld > label,.fld legend{font-size:clamp(15px,1.8vw,17px);font-weight:500;color:var(--cream);padding:0}
.fld.sub{margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
.opt-tag{font-size:12px;letter-spacing:.1em;color:var(--muted);font-weight:300;margin-inline-start:8px}
.hint{margin:0;font-size:13.5px;color:var(--muted);font-weight:200}

/* every text-like control, whatever its type. Listing types by hand missed
   input[type=tel] when the phone field was added, and it fell through to
   Astra's white default. */
#intake input:not([type=radio]):not([type=checkbox]),#intake textarea{
  width:100%;box-sizing:border-box;background:var(--ink-2);color:var(--cream);
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  font-family:inherit;font-size:16px;font-weight:300;line-height:1.5;
  transition:border-color .2s ease,box-shadow .2s ease}
textarea{resize:vertical}
#intake ::placeholder{color:var(--muted);opacity:1}
/* Astra's own :focus rule repaints form controls white with slate text
   (--ast-form-input-focus-text #475569), which is unreadable on this page.
   Scoped by #intake so it outranks that without !important. */
#intake input:focus,#intake textarea:focus{
  background:var(--ink-2);color:var(--cream);
  border-color:var(--orange-2);outline:none;
  box-shadow:0 0 0 3px rgba(201,84,31,.22)}
#intake .intake-msg,#intake .intake-msg:focus{background:var(--ink);color:var(--cream)}

/* radio pills */
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:10px 20px;font-size:15px;color:var(--cream);
  transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.opt input:checked + span{border-color:var(--orange-2);background:rgba(201,84,31,.14);color:var(--cream)}
.opt input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px}
.opt:hover span{border-color:rgba(201,84,31,.55)}

/* consent */
.consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-size:15px;color:var(--muted);font-weight:200}
.consent input{margin:3px 0 0;width:18px;height:18px;accent-color:var(--orange-2);flex:0 0 auto}

.err{margin:0;color:#ff8f6b;font-size:15px}

/* review screen */
.intake-msg{min-height:150px;font-size:16px;line-height:1.7;background:var(--ink);
  border-radius:16px;padding:18px 18px}
.intake-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(22px,3vw,30px)}

@media (max-width:560px){
  .intake-actions{flex-direction:column-reverse;align-items:stretch}
  .intake-actions .btn{width:100%;box-sizing:border-box}
  .intake-form .btn{justify-self:stretch;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .btn,.opt span,input,textarea{transition:none}
  .btn:hover{transform:none}
}

/* per-field error, used by the phone field */
.fld-err{margin:0;font-size:13.5px;color:#ff8f6b}
#intake input.is-bad,#intake input.is-bad:focus{border-color:#ff8f6b;
  box-shadow:0 0 0 3px rgba(255,143,107,.18)}

/* ---------------------------------------------------------------------
   Dialog. Native <dialog> opened with showModal(), so the backdrop, the
   Escape key and the focus trap are the browser's own.
   --------------------------------------------------------------------- */
.intake-dialog{
  width:min(680px,calc(100vw - 32px));
  max-height:min(88vh,900px);
  /* Centring a modal dialog is a user-agent default, and the hand-built
     product pages reset dialog margins, which pins it to a corner. Stated
     here so it holds wherever the dialog is used. */
  margin:auto;
  padding:0;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--void);
  color:var(--cream);
  overflow:auto;
  overscroll-behavior:contain;
  /* the documents set direction on body; a dialog is in the top layer */
  direction:rtl;
  font-family:"Heebo",system-ui,sans-serif;
}
.intake-dialog::backdrop{background:rgba(3,3,4,.72);backdrop-filter:blur(3px)}
.intake-dialog .intake{padding:clamp(22px,3.5vw,34px) 0 clamp(26px,4vw,40px)}
.intake-dialog .wrap{max-width:none;padding:0 clamp(20px,4vw,34px)}
.intake-dialog .intake .h2{font-size:clamp(22px,3.2vw,30px);margin-bottom:12px}

/* ---------------------------------------------------------------------
   The heading is one sentence and it should stay on one line.

   The sentence is about 16.2 times the font size wide, so the size is
   tied to the width of the text column rather than to the viewport:
   container query units measure the .wrap content box, which is exactly
   the room the words have. 5.9cqw leaves roughly five percent of slack
   at every width from 320 up.

   max-width was 20ch, which forced the break at 1440 even though there
   was room, so it is cleared here.

   Wrapped in @supports so a browser without container queries keeps the
   old wrapping heading rather than overflowing its box.
   --------------------------------------------------------------------- */
@supports (font-size: 1cqw) {
  /* width:100% because inline-size containment makes a box size as if it had
     no contents, and the dialog's .wrap has no width of its own; without this
     it collapsed from 678px to 596px and took the text column with it. */
  .intake .wrap{container-type:inline-size;width:100%}
  .intake .h2{
    white-space:nowrap;
    max-width:none;
    font-size:min(42px,5.9cqw);
  }
  .intake-dialog .intake .h2{font-size:min(30px,5.9cqw)}
}

/* Cream, stated outright. Nothing tints or gradients this heading. */
.intake .h2{color:#FBF3EA}
.intake-dialog[open]{animation:atg-pop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes atg-pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.intake-close{
  position:sticky;top:0;float:inline-end;
  z-index:2;
  margin:10px 10px -10px 10px;
  width:40px;height:40px;
  display:grid;place-items:center;
  background:var(--ink-2);color:var(--cream);
  border:1px solid var(--line);border-radius:999px;
  font-size:24px;line-height:1;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.intake-close:hover{border-color:var(--orange);color:var(--orange)}
.intake-close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* the page must not scroll behind the dialog */
/* The Dream Machine product page sets scroll-snap-type:y mandatory and
   scroll-behavior:smooth on <html> at phone widths. Snapping still moves the
   page under an overflow:hidden root, and the smooth behaviour turns the
   restore into an animation that has not finished by the time the person
   looks. Both are switched off for as long as the dialog is up. */
html.atg-locked,html.atg-locked body{
  overflow:hidden;
  scroll-snap-type:none !important;
  scroll-behavior:auto !important;
  overscroll-behavior:none;
}

@media (max-width:560px){
  .intake-dialog{
    width:100vw;max-width:100vw;max-height:100svh;height:100svh;
    margin:0;border:0;border-radius:0;
  }
}
@media (prefers-reduced-motion:reduce){
  .intake-dialog[open]{animation:none}
}

/* ---------------------------------------------------------------------
   "מתלבט? נעזור לך לבחור" on product pages.

   A second path for someone who is unsure, not a rival to the buy button.
   Ghost styling, never orange at rest, and a size below the primary so the
   hierarchy is obvious: the purchase stays the loud thing on the page.
   --------------------------------------------------------------------- */
.atg-choose-help{
  --line:rgba(251,243,234,.10);
  --cream:#FBF3EA;
  --muted:#8d8880;
  --orange:#FF6F20;
  display:inline-block;
  margin:14px 0 0;
  padding:11px 22px;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  font-family:"Heebo",system-ui,sans-serif;
  font-size:14.5px;
  font-weight:400;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.atg-choose-help:hover,.atg-choose-help:focus-visible{
  color:var(--cream);
  border-color:rgba(251,243,234,.28);
}
.atg-choose-help:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Inside the buy row it is the last item, and it takes a whole line of its
   own so it reads as a step below the purchase, not a choice beside it.
   order:99 keeps it after the button whatever the source order is, and the
   flex-basis is what forces the wrap. Six products style .ph-buy-row six
   slightly different ways, so these carry !important to survive all of them. */
.ph-buy-row{flex-wrap:wrap !important}
.ph-buy-row > .atg-choose-wrap{
  order:99;
  flex:0 0 100% !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0;
  text-align:center;
}
.ph-buy-row > .atg-choose-wrap > .atg-choose-help{margin-top:12px}

/* On phones some of those rows switch to a column, where a percentage
   flex-basis is read against the height instead. Let the content size it. */
@media (max-width:900px){
  .ph-buy-row > .atg-choose-wrap{flex:0 0 auto !important}
  .ph-buy-row > .atg-choose-wrap > .atg-choose-help{margin-top:10px;font-size:14px}
}

/* the WooCommerce fallback, on the one product with no custom design */
p.atg-choose-wrap{margin:0;padding:0}