/* ==========================================================================
   home-hero-tray/tray.css — LIVE on index.html since 2026-09-21
   The homepage hero's audit field, after "Get free audit": Option 07 "Tray",
   picked from /doctor/hero-next-k8m.html.

   The row the visitor typed their website into stays exactly as it was. A
   pale second drawer opens beneath it INSIDE the same field — name, and a
   mandatory 10-digit mobile behind a "+91" plate — and the blue button
   travels down into it. Everything below is dormant until the first submit
   adds .tr-open to the form; at rest the page is byte-for-byte unchanged.

   Material: the first screen's own law — flat planes of the blue ramp,
   1px edges, no shadow, no glow. The "+91" plate IS the page's .capfix,
   so it is drawn by the same rules as "https://www.".

   Specificity: the live field is dressed by ~12 layers of
   `html body .screen .hero form.capture … !important`. Every rule here
   names form#auditForm, which out-ranks all of them without touching them.

   UNDO: delete the two lines that load tray.css and tray.js in index.html.
   ========================================================================== */

html body div.screen main.hero form#auditForm.tr-open{
  flex-wrap: wrap !important;
  align-items: center !important;
  overflow: clip !important;        /* clip, never hidden: a hidden box scrolls itself on focus */
}

/* the quiet mark where the button used to be */
html body div.screen main.hero form#auditForm .tr-ok{
  flex: none; display: flex; align-items: center; align-self: stretch;
  padding: 0 14px 0 6px;
}
.tr-ok svg, .tr-done svg{ display: block; }
.tr-ok circle, .tr-done circle{ fill: #0760C6; }
.tr-ok path, .tr-done path{ fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the drawer: a tier of the same object, edge to edge ---------- */
html body div.screen main.hero form#auditForm .tr-tray{
  order: 9; box-sizing: border-box;
  flex: 0 0 calc(100% + 12px) !important; width: calc(100% + 12px) !important;
  margin: 6px -6px -6px !important;
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  background: #F2F6FC;
  border-top: 1px solid #D7E2F3;
  text-align: left;
}
html body div.screen main.hero form#auditForm .tr-field{
  flex: 1 1 0; min-width: 0; box-sizing: border-box;
  display: flex; align-items: center; height: 54px; margin: 0; padding: 4px;
  background: #FFFFFF; border: 1px solid #D7E2F3; border-radius: 8px;
  cursor: text; transition: border-color .2s ease;
}
html body div.screen main.hero form#auditForm .tr-field:focus-within{ border-color: #0A66C2; }
html body div.screen main.hero form#auditForm .tr-tray :is(input, .capfix){
  height: 44px !important; min-height: 0 !important;
}
html body div.screen main.hero form#auditForm .tr-tray input{
  flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; margin: 0 !important;
  padding: 0 12px !important; border: 0 !important; background: transparent !important;
  box-shadow: none !important; outline: none !important;
  font-size: 16px !important; color: #031D40 !important;
}
html body div.screen main.hero form#auditForm .tr-tray .capfix{
  flex: none !important; padding: 0 12px !important; font-size: 13px !important; border-radius: 5px !important;
}
html body div.screen main.hero form#auditForm .tr-tray button.tr-go{
  flex: 0 0 auto !important; height: 54px !important; margin: 0 !important;
  position: relative; overflow: clip;
}
.tr-lbl{ display: inline-block; }

/* ---------- done ---------- */
html body div.screen main.hero form#auditForm .tr-done{
  flex: 1 1 auto; display: flex; align-items: flex-start; gap: 12px;
  padding: 6px 6px 6px 4px; text-align: left;
}
.tr-done svg{ flex: none; margin-top: 1px; }
.tr-done b{ display: block; font-size: 16px; font-weight: 800; letter-spacing: -.015em; color: #0E1E35; line-height: 1.3; }
.tr-done span{ display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: #505C6C; }
.tr-done span strong{ font-weight: 700; color: #21416D; white-space: nowrap; }

/* ---------- the quiet line under the field doubles as the helper line ---------- */
html body div.screen main.hero p#auditNote.tr-say{ color: #0B3B7A !important; font-weight: 650 !important; }

/* ---------- the button's flight ---------- */
.tr-fly{
  position: absolute; z-index: 6; pointer-events: none; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: clip;
}

/* ---------- phones: the drawer stacks ---------- */
@media (max-width: 620px){
  html body div.screen main.hero form#auditForm .tr-tray{ flex-direction: column; align-items: stretch; }
  html body div.screen main.hero form#auditForm .tr-field{ flex: none; width: 100%; }
  html body div.screen main.hero form#auditForm .tr-tray button.tr-go{ width: 100% !important; flex: none !important; }
  html body div.screen main.hero form#auditForm .tr-ok{ padding: 0 10px 0 4px; }
}