/* =========================================================
   AstraShilp — forms
   The callback popup (home page) and the states both forms
   share: field errors, sending, received, not sent. Field and
   chip styling follows the connect page's form exactly.
   ========================================================= */

/* ---------- shared ---------- */
form[hidden], .fx-done[hidden], .fx-note[hidden] { display: none !important; }

.fx-err {
  margin: calc(8 * var(--u, 1px)) 0 0; font-size: calc(12.5 * var(--u, 1px)); line-height: 1.45; font-weight: 400;
  letter-spacing: .01em; color: #ff9b9b;
}
.fx-err:empty { display: none; }
.fx-wrap.is-invalid .field,
.fx-wrap.is-invalid .fx { border-color: rgba(255, 120, 120, .62); }
.fx-wrap.is-invalid .chip span,
.fx-wrap.is-invalid .fx-chip span { border-color: rgba(255, 120, 120, .45); }

.fx-hint { margin: calc(8 * var(--u, 1px)) 0 0; font-size: calc(12.5 * var(--u, 1px)); line-height: 1.45; color: #aab6c6; }
.fx-hint button {
  font: inherit; color: #7fdcff; background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: calc(2 * var(--u, 1px)); cursor: pointer;
}

.field__lab em, .fx__lab em, .choice-group__h em {
  font-style: normal; margin-left: .7em; font-size: calc(9.5 * var(--u, 1px));
  letter-spacing: .14em; color: #5e6a7b;
}

/* a real <select> in the connect form's field box, drawn like the old
   placeholder: grey until chosen, same chevron */
.field select, .fx select {
  display: block; width: 100%; margin-top: calc(9 * var(--u, 1px)); padding: 0 calc(30 * var(--u, 1px)) 0 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa6b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right center / calc(20 * var(--u, 1px)) calc(20 * var(--u, 1px));
  border: 0; outline: 0; border-radius: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  color: #eef3fa; font-family: inherit; font-size: calc(15 * var(--u, 1px)); font-weight: 300; line-height: 1.4;
}
.field select:invalid, .fx select.is-empty { color: #5e6a7b; }
.field select option, .fx select option { background: #0b1320; color: #eef3fa; }

/* bots fill every field; people never see this one */
.fx-hp { position: absolute !important; left: calc(-10000 * var(--u, 1px)); top: auto; width: calc(1 * var(--u, 1px)); height: calc(1 * var(--u, 1px)); overflow: hidden; }

.fx-status { margin: calc(18 * var(--u, 1px)) 0 0; text-align: center; font-size: calc(14 * var(--u, 1px)); line-height: 1.6; color: #aab6c6; }
.fx-status:empty { display: none; }
.fx-status[data-kind="error"] { color: #ffb4b4; }
.fx-status a { color: #7fdcff; text-decoration: underline; text-underline-offset: calc(2 * var(--u, 1px)); }
form[aria-busy="true"] [type="submit"] { opacity: .72; cursor: progress; }

.fx-done { text-align: center; padding: calc(8 * var(--u, 1px)) 0 calc(4 * var(--u, 1px)); outline: none; }
.fx-done--page { max-width: calc(560 * var(--u, 1px)); margin: calc(38 * var(--u, 1px)) auto 0; }
.fx-done__ic {
  display: inline-grid; place-items: center; width: calc(58 * var(--u, 1px)); height: calc(58 * var(--u, 1px)); border-radius: 50%;
  border: calc(1 * var(--u, 1px)) solid rgba(54, 212, 255, .55);
  box-shadow: 0 0 0 calc(6 * var(--u, 1px)) rgba(54, 212, 255, .06), 0 0 calc(30 * var(--u, 1px)) calc(-6 * var(--u, 1px)) rgba(54, 212, 255, .7);
}
.fx-done__ic svg { width: calc(26 * var(--u, 1px)); height: calc(26 * var(--u, 1px)); fill: none; stroke: #7fe3ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-done__h { margin-top: calc(20 * var(--u, 1px)); font-size: clamp(calc(22 * var(--u, 1px)), 2.4vw, calc(30 * var(--u, 1px))); font-weight: 300; color: #eef3fa; }
.fx-done__p { margin: calc(12 * var(--u, 1px)) auto 0; max-width: 30em; font-size: calc(15 * var(--u, 1px)); font-weight: 300; line-height: 1.7; color: #aab6c6; }
.fx-done__p span { color: #eef3fa; }
.fx-done__ref { margin-top: calc(14 * var(--u, 1px)); font-size: calc(12 * var(--u, 1px)); letter-spacing: .16em; text-transform: uppercase; color: #7f8ca0; }
.fx-done__ref b { margin-left: .5em; font-weight: 500; letter-spacing: .08em; color: #cfe9ff; }
.fx-done__btn {
  margin-top: calc(26 * var(--u, 1px)); padding: calc(14 * var(--u, 1px)) calc(34 * var(--u, 1px)); border-radius: calc(4 * var(--u, 1px)); cursor: pointer;
  background: rgba(255, 255, 255, .02); border: calc(1 * var(--u, 1px)) solid rgba(160, 180, 210, .3);
  color: #e9eef5; font-family: inherit; font-size: calc(12.5 * var(--u, 1px)); font-weight: 500; letter-spacing: .2em;
  transition: border-color .2s ease, background .2s ease;
}
.fx-done__btn:hover { border-color: rgba(54, 212, 255, .6); background: rgba(54, 212, 255, .05); }

/* ---------- the callback popup ---------- */
.cb {
  width: min(calc(680 * var(--u, 1px)), calc(100vw - calc(32 * var(--u, 1px)))); max-width: none;
  max-height: calc(100vh - calc(32 * var(--u, 1px))); max-height: calc(100dvh - calc(32 * var(--u, 1px)));
  margin: auto; padding: 0; border: 0; background: transparent; color: #d4dbe6; overflow: visible;
}
.cb::backdrop { background: rgba(1, 4, 10, .74); -webkit-backdrop-filter: blur(calc(6 * var(--u, 1px))); backdrop-filter: blur(calc(6 * var(--u, 1px))); }
html:has(.cb[open]) { overflow: hidden; }
.cb__panel:has(.fx-done:not([hidden])) .cb__lede { display: none; }

.cb__panel {
  position: relative;
  max-height: calc(100vh - calc(32 * var(--u, 1px))); max-height: calc(100dvh - calc(32 * var(--u, 1px)));
  overflow: auto; overscroll-behavior: contain;
  padding: clamp(calc(28 * var(--u, 1px)), 4vw, calc(46 * var(--u, 1px)));
  border: calc(1 * var(--u, 1px)) solid rgba(120, 150, 190, .24); border-radius: calc(10 * var(--u, 1px));
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(31, 120, 234, .16), transparent 62%),
    linear-gradient(180deg, #081221 0%, #050a14 100%);
  box-shadow: 0 calc(40 * var(--u, 1px)) calc(90 * var(--u, 1px)) calc(-24 * var(--u, 1px)) rgba(0, 0, 0, .85), 0 0 calc(70 * var(--u, 1px)) calc(-34 * var(--u, 1px)) rgba(54, 212, 255, .4);
  font-family: 'Montserrat', system-ui, sans-serif;
}
.cb[open] .cb__panel { animation: cb-in .34s cubic-bezier(.2, .8, .2, 1); }
@keyframes cb-in { from { opacity: 0; transform: translateY(calc(16 * var(--u, 1px))) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cb[open] .cb__panel { animation: none; } }

.cb__close {
  position: absolute; top: calc(14 * var(--u, 1px)); right: calc(14 * var(--u, 1px)); width: calc(40 * var(--u, 1px)); height: calc(40 * var(--u, 1px));
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: calc(1 * var(--u, 1px)) solid rgba(160, 180, 210, .22); background: rgba(255, 255, 255, .02);
  color: #c9d3e0; font-size: calc(24 * var(--u, 1px)); line-height: 1; font-family: inherit;
  transition: border-color .2s ease, color .2s ease;
}
.cb__close:hover { border-color: rgba(54, 212, 255, .6); color: #fff; }

.cb__eyebrow { font-size: calc(12 * var(--u, 1px)); letter-spacing: .42em; font-weight: 500; color: #36d4ff; padding-right: calc(48 * var(--u, 1px)); }
.cb__rule {
  display: block; position: relative; width: calc(120 * var(--u, 1px)); height: calc(1 * var(--u, 1px)); margin-top: calc(14 * var(--u, 1px));
  background: linear-gradient(90deg, transparent, #36d4ff, transparent);
  box-shadow: 0 0 calc(14 * var(--u, 1px)) rgba(54, 212, 255, .6);
}
.cb__rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(34 * var(--u, 1px)); height: calc(3 * var(--u, 1px));
  transform: translate(-50%, -50%); background: #bdecff; border-radius: calc(3 * var(--u, 1px));
  box-shadow: 0 0 calc(12 * var(--u, 1px)) calc(3 * var(--u, 1px)) rgba(120, 220, 255, .9);
}
.cb__title { margin-top: calc(20 * var(--u, 1px)); font-size: clamp(calc(25 * var(--u, 1px)), 3vw, calc(36 * var(--u, 1px))); font-weight: 300; line-height: 1.16; color: #eef2f8; outline: none; }
.cb__lede { margin-top: calc(12 * var(--u, 1px)); max-width: 34em; font-size: calc(15 * var(--u, 1px)); font-weight: 300; line-height: 1.65; color: #a7b2c1; }
.cb__form { margin-top: calc(28 * var(--u, 1px)); }

.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u, 1px)); }
.fx-wrap--full { grid-column: 1 / -1; }
.fx {
  display: block; padding: calc(12 * var(--u, 1px)) calc(16 * var(--u, 1px)); cursor: text;
  border: calc(1 * var(--u, 1px)) solid rgba(255, 255, 255, .16); border-radius: calc(5 * var(--u, 1px)); background: rgba(255, 255, 255, .012);
  transition: border-color .2s ease;
}
.fx:focus-within { border-color: rgba(120, 180, 255, .55); }
.fx__lab { display: block; font-size: calc(11 * var(--u, 1px)); font-weight: 500; letter-spacing: .16em; color: #8b97a7; text-transform: uppercase; }
.fx input, .fx textarea {
  display: block; width: 100%; margin-top: calc(8 * var(--u, 1px)); padding: 0; border: 0; outline: 0; background: transparent;
  color: #eef3fa; font-family: inherit; font-size: calc(15 * var(--u, 1px)); font-weight: 300; line-height: 1.4;
}
.fx input::placeholder, .fx textarea::placeholder { color: #5e6a7b; }
.fx textarea { resize: vertical; min-height: calc(72 * var(--u, 1px)); line-height: 1.5; }
.fx input[type="date"] { color-scheme: dark; min-height: calc(21 * var(--u, 1px)); }
.fx input[type="date"]:invalid, .fx input[type="date"].is-empty { color: #5e6a7b; }

.fx-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.fx-group legend { padding: 0; }
.fx-chips { margin-top: calc(12 * var(--u, 1px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u, 1px)); }
.fx-chip { position: relative; cursor: pointer; }
.fx-chip input { position: absolute; opacity: 0; width: calc(1 * var(--u, 1px)); height: calc(1 * var(--u, 1px)); }
.fx-chip span {
  display: flex; flex-direction: column; gap: calc(3 * var(--u, 1px)); height: 100%;
  padding: calc(11 * var(--u, 1px)) calc(14 * var(--u, 1px)); border-radius: calc(8 * var(--u, 1px));
  border: calc(1 * var(--u, 1px)) solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .012);
  font-size: calc(14 * var(--u, 1px)); font-weight: 400; color: #cfd8e5;
  transition: border-color .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
}
.fx-chip small { font-size: calc(11.5 * var(--u, 1px)); font-weight: 300; color: #8b97a7; white-space: nowrap; }
.fx-chip:hover span { border-color: rgba(120, 180, 255, .5); color: #eef3fa; }
.fx-chip input:checked + span {
  border-color: #36d4ff; color: #eafaff; background: rgba(54, 212, 255, .08);
  box-shadow: 0 0 0 calc(1 * var(--u, 1px)) rgba(54, 212, 255, .3), 0 calc(8 * var(--u, 1px)) calc(26 * var(--u, 1px)) calc(-14 * var(--u, 1px)) rgba(54, 212, 255, .9);
}
.fx-chip input:focus-visible + span { outline: calc(2 * var(--u, 1px)) solid rgba(120, 180, 255, .85); outline-offset: calc(2 * var(--u, 1px)); }
.fx-chip input:disabled + span { opacity: .35; cursor: not-allowed; }
.fx-note { margin: calc(10 * var(--u, 1px)) 0 0; font-size: calc(12.5 * var(--u, 1px)); color: #aab6c6; }

.cb__submit {
  width: 100%; margin-top: calc(26 * var(--u, 1px)); padding: calc(17 * var(--u, 1px)) calc(24 * var(--u, 1px));
  display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u, 1px));
  border: 0; border-radius: calc(5 * var(--u, 1px)); cursor: pointer;
  background: linear-gradient(90deg, #1c4ed8 0%, #2f7bf0 100%);
  box-shadow: 0 calc(6 * var(--u, 1px)) calc(28 * var(--u, 1px)) rgba(28, 78, 216, .45); transition: box-shadow .25s ease;
  color: #fff; font-family: inherit; font-size: calc(13.5 * var(--u, 1px)); font-weight: 500; letter-spacing: .2em;
}
.cb__submit:hover { box-shadow: 0 calc(8 * var(--u, 1px)) calc(38 * var(--u, 1px)) rgba(48, 100, 235, .7); }
.cb__arr { font-size: calc(17 * var(--u, 1px)); }
.cb__fine { margin-top: calc(14 * var(--u, 1px)); text-align: center; font-size: calc(12 * var(--u, 1px)); font-weight: 300; color: #6f7c8f; }

@media (max-width: 640px) {
  .fx-chips { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cb { width: calc(100vw - calc(20 * var(--u, 1px))); max-height: calc(100vh - calc(20 * var(--u, 1px))); max-height: calc(100dvh - calc(20 * var(--u, 1px))); }
  .cb__panel { padding: calc(26 * var(--u, 1px)) calc(18 * var(--u, 1px)) calc(22 * var(--u, 1px)); max-height: calc(100vh - calc(20 * var(--u, 1px))); max-height: calc(100dvh - calc(20 * var(--u, 1px))); }
  .fx-grid { grid-template-columns: 1fr; gap: calc(14 * var(--u, 1px)); }
  .cb__title { font-size: calc(25 * var(--u, 1px)); }
}