/* ============================================================
   Proinstrument — Request Modal (restore "as was" premium look)
   + Keep new functionality UI:
     - files are accumulated (JS)
     - file chips with remove X
     - rejected chips dismiss
   Fixes:
     - hide honeypot "Website" field
     - restore right summary panel look
============================================================ */

:root{
  --sp-accent: #ff7a00;
  --sp-accent-2: #ff9a3d;

  --pi-accent: var(--sp-accent);
  --pi-accent-2: var(--sp-accent-2);

  --pi-text: rgba(255,255,255,.94);
  --pi-soft: rgba(255,255,255,.82);
  --pi-muted: rgba(255,255,255,.64);

  --pi-line: rgba(255,255,255,.10);
  --pi-line-2: rgba(255,255,255,.14);

  --pi-bad: rgba(255,90,90,.92);

  --r1: 14px;
  --r2: 18px;
  --r3: 24px;
  --r4: 30px;

  --shadow-deep: 0 56px 180px rgba(0,0,0,.86);
  --shadow-mid: 0 26px 90px rgba(0,0,0,.44);

  --inner-top: inset 0 1px 0 rgba(255,255,255,.08);
  --inner-bot: inset 0 -1px 0 rgba(0,0,0,.40);

  --ring: 0 0 0 3px rgba(255,122,0,.10);
}

/* ============================================================
   Base modal
============================================================ */
.pi-request-modal[hidden]{ display:none !important; }

.pi-request-modal{
  --pi-modal-scale: 1;

  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2vw, 22px);
  isolation: isolate;
}

@media (max-height: 920px){ .pi-request-modal{ --pi-modal-scale: .97; } }
@media (max-height: 860px){ .pi-request-modal{ --pi-modal-scale: .94; } }
@media (max-height: 800px){ .pi-request-modal{ --pi-modal-scale: .90; } }
@media (max-height: 740px){ .pi-request-modal{ --pi-modal-scale: .86; } }
@media (max-height: 680px){ .pi-request-modal{ --pi-modal-scale: .82; } }

.pi-request-modal__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1400px 720px at 16% 10%, rgba(255,122,0,.10), transparent 62%),
    radial-gradient(1200px 780px at 86% 18%, rgba(255,122,0,.07), transparent 64%),
    radial-gradient(1000px 820px at 50% 90%, rgba(0,0,0,.65), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.88));
  backdrop-filter: blur(18px) saturate(160%);
}

.pi-request-modal__dialog{
  position: relative;
  width: min(1060px, 100%);
  overflow: hidden;

  border-radius: var(--r4);
  border: 1px solid rgba(255,255,255,.12);

  background:
    radial-gradient(900px 520px at 18% 8%, rgba(255,122,0,.12), transparent 62%),
    radial-gradient(900px 640px at 86% 16%, rgba(255,122,0,.09), transparent 66%),
    radial-gradient(1200px 520px at 50% 120%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.04) 34%, rgba(0,0,0,.12) 100%);

  box-shadow: var(--shadow-deep), var(--inner-top);
  backdrop-filter: blur(20px) saturate(170%);

  transform-origin: top center;
  transform: translateY(14px) scale(calc(var(--pi-modal-scale) * .992));
  opacity: 0;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease;

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.pi-request-modal.is-open .pi-request-modal__dialog{
  transform: translateY(0) scale(var(--pi-modal-scale));
  opacity: 1;
}

.pi-request-modal__dialog::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--r4) + 2px);
  pointer-events:none;
  background:
    radial-gradient(820px 340px at 18% 10%, rgba(255,122,0,.24), transparent 62%),
    radial-gradient(680px 320px at 88% 18%, rgba(255,122,0,.14), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%);
  opacity: .82;

  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding: 2px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.pi-request-modal__dialog::after{
  content:"";
  position:absolute;
  left: -24%;
  right: -24%;
  top: -34%;
  height: 70%;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 28%, rgba(255,255,255,0) 100%);
  transform: rotate(-7deg);
  opacity: .40;
  filter: blur(.2px);
}

.pi-request-modal__close{
  position: absolute;
  right: 14px;
  top: 14px;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120px 60px at 25% 15%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18));
  box-shadow: 0 16px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  z-index: 10;
}
.pi-request-modal__close:hover{
  transform: translateY(-1px);
  border-color: rgba(255,122,0,.42);
  box-shadow: 0 18px 54px rgba(0,0,0,.48), var(--ring), inset 0 1px 0 rgba(255,255,255,.08);
}

body.pi-modal-open{ overflow: hidden; }

/* ============================================================
   Layout: left form + right summary (restore look)
============================================================ */
.pi-request-modal__layout{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: 16px;
  padding: clamp(16px, 2.1vw, 24px);
  position: relative;
  z-index: 3;
}

@media (max-width: 980px){
  .pi-request-modal__layout{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.pi-request-left,
.pi-request-right{
  min-width: 0;
}

/* ============================================================
   Left header
============================================================ */
.pi-request-head{
  margin-bottom: 12px;
  padding-right: 58px;
}

.pi-request-title{
  margin: 0 0 10px;
  font-family: "Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .01em;
  color: rgba(255,255,255,.96);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.06;
}

.pi-request-subtitle{
  margin: 0;
  color: rgba(255,255,255,.76);
  line-height: 1.55;
  font-size: 14px;
  max-width: 72ch;
}

/* ============================================================
   Form surface
============================================================ */
.pi-request-form{ margin: 0; }

.pi-request-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 14px;

  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);

  background:
    radial-gradient(1100px 420px at 18% 0%, rgba(255,122,0,.06), transparent 62%),
    radial-gradient(1100px 420px at 88% 10%, rgba(255,122,0,.04), transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.18));

  box-shadow: 0 26px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05), var(--inner-bot);
}

@media (max-width: 760px){
  .pi-request-grid{
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 12px;
  }
}

.pi-field{
  display: grid;
  gap: 8px;
  min-width: 0;
}

.pi-field--wide{ grid-column: 1 / -1; }

.pi-field label{
  font-size: 12.5px;
  letter-spacing: .05em;
  color: rgba(255,255,255,.74);
}

.pi-req{ color: var(--pi-accent); font-weight: 900; }

/* Honeypot MUST be hidden */
.pi-hp{
  position: absolute !important;
  left: -99999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Inputs: bright white */
.pi-request-modal .pi-field input,
.pi-request-modal .pi-field textarea{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);

  background:
    radial-gradient(180px 60px at 18% 12%, rgba(255,255,255,.08), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18));

  padding: 12px 14px;
  outline: none;

  color: #FFFFFF !important;
  caret-color: #FFFFFF !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.40),
    0 16px 44px rgba(0,0,0,.28);

  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.pi-request-modal .pi-field input::placeholder,
.pi-request-modal .pi-field textarea::placeholder{
  color: rgba(255,255,255,.44) !important;
}

.pi-request-modal .pi-field textarea{
  min-height: 90px;
  resize: none;
}

.pi-request-modal .pi-field input:focus,
.pi-request-modal .pi-field textarea:focus{
  border-color: rgba(255,122,0,.64);
  box-shadow: 0 0 0 3px rgba(255,122,0,.14), 0 22px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.09);
}

.pi-request-modal .pi-field input:-webkit-autofill,
.pi-request-modal .pi-field textarea:-webkit-autofill{
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #FFFFFF !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow:
    0 0 0px 1000px rgba(0,0,0,.18) inset,
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.40),
    0 16px 44px rgba(0,0,0,.28) !important;
}

.pi-field.is-invalid input,
.pi-field.is-invalid textarea{
  border-color: rgba(255,90,90,.55);
  box-shadow: 0 0 0 3px rgba(255,90,90,.12);
}

.pi-field__error{
  min-height: 16px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,160,160,.92);
}

/* ============================================================
   File block (restore look + chips support)
============================================================ */
.pi-file{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(220px 70px at 18% 12%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    rgba(0,0,0,.12);
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--inner-bot);
}

.pi-file__input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pi-file__ui{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center; /* restore like before */
}

.pi-file__info{ min-width: 0; }

.pi-file__name{
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 1.35;
  min-width: 0;
}

.pi-file__sub{
  margin-top: 6px;
  font-size: 12px;
  opacity: .72;
  color: rgba(255,255,255,.70);
}

.pi-file__meta{
  margin-top: 10px;
  font-size: 12px;
  opacity: .70;
  color: rgba(255,255,255,.70);
}

/* Chips (new) — keep premium and not break layout */
.pi-file-empty{
  opacity: .80;
}

.pi-file-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.pi-file-pills--rejected{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.pi-file-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(180px 60px at 18% 12%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    rgba(0,0,0,.14);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.pi-file-pill__name{
  color: rgba(255,255,255,.92);
  font-size: 12.5px;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pi-file-pill__size{
  color: rgba(255,255,255,.62);
  font-size: 12px;
  white-space: nowrap;
}

.pi-file-pill__x{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.90);
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.pi-file-pill__x:hover{
  transform: translateY(-1px);
  border-color: rgba(255,122,0,.42);
  box-shadow: var(--ring);
  background: rgba(255,122,0,.08);
}

.pi-file-pill--bad{
  border-color: rgba(255,90,90,.30);
  background:
    radial-gradient(180px 60px at 18% 12%, rgba(255,90,90,.08), rgba(255,255,255,0) 62%),
    rgba(0,0,0,.14);
}

.pi-file-pill--bad .pi-file-pill__size{
  color: rgba(255,170,170,.92);
}

.pi-file-pill--bad .pi-file-pill__x:hover{
  border-color: rgba(255,90,90,.55);
  box-shadow: 0 0 0 3px rgba(255,90,90,.12);
  background: rgba(255,90,90,.10);
}

/* File button (premium) */
.pi-file__btn{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);

  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(255,122,0,.60);
  background:
    radial-gradient(180px 60px at 20% 15%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.22));
  color: rgba(255,255,255,.96);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 16px 50px rgba(0,0,0,.42);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}

.pi-file__btn::before{
  content:"";
  position:absolute;
  inset:-40% -20%;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 32%,
    rgba(255,255,255,0) 60%);
  transform: translateX(-18%);
  opacity: 0;
  transition: opacity .18s ease, transform .25s ease;
  pointer-events:none;
}

.pi-file__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,146,45,.82);
  box-shadow: 0 18px 60px rgba(0,0,0,.52), var(--ring);
}

.pi-file__btn:hover::before{
  opacity: .85;
  transform: translateX(12%);
}

/* ============================================================
   Right summary (restore like before)
============================================================ */
.pi-summary{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(620px 260px at 18% 10%, rgba(255,122,0,.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.16));
  box-shadow: var(--shadow-mid), inset 0 1px 0 rgba(255,255,255,.05), var(--inner-bot);
  padding: 16px;
}

.pi-summary__title{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}

.pi-summary__rows{
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.pi-summary__row{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  padding: 10px 12px;

  display: grid;
  gap: 6px;
}

.pi-summary__label{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
  color: rgba(255,255,255,.72);
}

.pi-summary__value{
  font-size: 13.5px;
  color: rgba(255,255,255,.90);
  line-height: 1.45;
}

.pi-summary__block{
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.pi-summary__block-title{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .72;
  color: rgba(255,255,255,.72);
  margin-bottom: 8px;
  font-weight: 900;
}

.pi-summary__block-text{
  font-size: 13.5px;
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}

/* Submit button in right panel */
.pi-request-submit{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);

  width: 100%;
  min-height: 56px;
  margin-top: 14px;

  border-radius: 18px;
  border: 1px solid rgba(255,122,0,.66);

  background:
    radial-gradient(260px 120px at 18% 12%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
    radial-gradient(900px 260px at 22% 0%, rgba(255,122,0,.14), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.26));

  color: rgba(255,255,255,.96);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12.5px;

  cursor: pointer;

  box-shadow: 0 40px 150px rgba(0,0,0,.74), 0 0 0 1px rgba(255,122,0,.10) inset;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

.pi-request-submit::before{
  content:"";
  position:absolute;
  inset:-40% -20%;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 32%,
    rgba(255,255,255,0) 60%);
  transform: translateX(-18%);
  opacity: 0;
  transition: opacity .18s ease, transform .25s ease;
  pointer-events:none;
}

.pi-request-submit:hover{
  transform: translateY(-1px);
  border-color: rgba(255,146,45,.86);
  box-shadow: 0 52px 190px rgba(0,0,0,.84), 0 0 0 3px rgba(255,122,0,.10);
  filter: saturate(1.03);
}

.pi-request-submit:hover::before{
  opacity: .85;
  transform: translateX(12%);
}

.pi-request-submit.is-loading{
  opacity: .92;
  cursor: progress;
}

.pi-request-submit__loader{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.92);
  display: none;
  animation: piSpin .85s linear infinite;
}

.pi-request-submit.is-loading .pi-request-submit__loader{
  display: inline-block;
}

@keyframes piSpin{ from{ transform: rotate(0) } to{ transform: rotate(360deg) } }

.pi-request-legal{
  margin-top: 10px;
  font-size: 12px;
  opacity: .70;
  line-height: 1.55;
  color: rgba(255,255,255,.66);
}

.pi-request-result{
  margin-top: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(260px 120px at 18% 10%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    rgba(0,0,0,.22);
  padding: 12px 14px;
  color: rgba(255,255,255,.88);
  line-height: 1.55;
  box-shadow: 0 20px 60px rgba(0,0,0,.38);
}

.pi-request-result.is-success{ border-color: rgba(255,122,0,.35); }
.pi-request-result.is-error{ border-color: rgba(255,90,90,.35); }

/* Tightening for very short heights (still no scroll) */
@media (max-height: 760px){
  .pi-request-modal__layout{ padding: 16px; gap: 12px; }
  .pi-request-grid{ padding: 14px; gap: 12px; }
  .pi-request-modal .pi-field textarea{ min-height: 76px; }
  .pi-request-submit{ min-height: 52px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .pi-request-modal__dialog{ transition:none; }
  .pi-file__btn,
  .pi-request-submit,
  .pi-file-pill__x{ transition:none; }
  .pi-file__btn::before,
  .pi-request-submit::before{ transition:none; }
}