/* Gorilla Fab Jobs — front end. Inherits theme tokens where present. */

.gfj-form,
.gfj-portal {
  --gfj-paper: var(--paper, #E4E7E6);
  --gfj-mill: var(--mill, #2B3138);
  --gfj-blue: var(--blue, #1F4D6B);
  --gfj-oxide: var(--oxide, #B4472A);
  --gfj-rule: rgba(31,77,107,.28);
}

.gfj-form { max-width:640px; padding-bottom:clamp(2.5rem,6vw,4.5rem); }

/* The last step is the one that converts. Give the submit row real space
   beneath it rather than letting it collide with whatever follows. */
.gfj-form__nav { margin-top:2rem; }
.gfj-form__step[data-step="3"] .gfj-form__nav { margin-bottom:1.5rem; }
.gfj-form__done { padding-block:clamp(2rem,5vw,3.5rem); }
.gfj-form__eyebrow { font-family:var(--mono,ui-monospace,monospace); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gfj-blue); margin:0 0 .6rem; }
.gfj-form__title { margin:0 0 .5rem; }
.gfj-form__help { color:#5a636c; margin:0 0 1.4rem; }

.gfj-drop { display:block; border:1.5px dashed var(--gfj-rule); padding:2rem 1.25rem; text-align:center; cursor:pointer; transition:border-color .2s ease, background .2s ease; }
.gfj-drop:hover, .gfj-drop:focus-within { border-color:var(--gfj-oxide); background:rgba(180,71,42,.04); }
.gfj-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.gfj-drop__label { display:block; font-weight:600; font-size:1.0625rem; }
.gfj-drop__hint { display:block; font-size:.8125rem; color:#6d767f; margin-top:.3rem; }

.gfj-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.5rem; margin:.9rem 0 1.4rem; }
.gfj-thumb { aspect-ratio:1; background:var(--gfj-mill); background-size:cover; background-position:center; display:grid; place-items:center; position:relative; }
.gfj-thumb__state { font-family:var(--mono,ui-monospace,monospace); font-size:.5625rem; letter-spacing:.08em; text-transform:uppercase; color:#E8F1FF; text-align:center; padding:.3rem; }
.gfj-thumb.is-working { animation:gfj-pulse 1.4s ease-in-out infinite; }
.gfj-thumb.is-failed { background:#7a2c1a; cursor:pointer; }
@keyframes gfj-pulse { 0%,100% { opacity:.55 } 50% { opacity:1 } }

.gfj-field { display:block; margin-bottom:1.1rem; }
.gfj-field > span, .gfj-field > legend { display:block; font-weight:600; font-size:.875rem; margin-bottom:.35rem; }
.gfj-field em { color:var(--gfj-oxide); font-style:normal; }
.gfj-field input[type=text], .gfj-field input[type=email], .gfj-field input[type=tel], .gfj-field select, .gfj-field textarea {
  width:100%; padding:.75rem .8rem; border:1.5px solid var(--gfj-rule); background:#fff; font:inherit; color:inherit;
}
.gfj-field input:focus, .gfj-field select:focus, .gfj-field textarea:focus { outline:2px solid var(--gfj-blue); outline-offset:1px; border-color:var(--gfj-blue); }
fieldset.gfj-field { border:0; padding:0; margin-bottom:1.1rem; }
.gfj-radio { display:block; padding:.35rem 0; }

/* The honeypot sits near the end of the form. Parked at left:-9999px it
   extended the document's scrollable area, which showed up as blank space
   below the footer. Clipped in place instead. */
.gfj-hp { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.gfj-btn { display:inline-block; font-family:var(--mono,ui-monospace,monospace); font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; padding:.85rem 1.4rem; border:1.5px solid var(--gfj-mill); background:transparent; color:var(--gfj-mill); cursor:pointer; text-decoration:none; }
.gfj-btn--primary { background:var(--gfj-oxide); border-color:var(--gfj-oxide); color:#fff; }
.gfj-btn--primary:hover { background:#9c3c23; border-color:#9c3c23; }
.gfj-btn--ghost:hover { background:var(--gfj-mill); color:var(--gfj-paper); }
.gfj-btn[disabled] { opacity:.6; cursor:default; }

.gfj-form__nav { display:flex; gap:.6rem; flex-wrap:wrap; }
.gfj-form__error { color:#9c3c23; font-weight:600; margin-top:1rem; }

/* Portal */
.gfj-portal { max-width:760px; margin:0 auto; padding:clamp(2rem,5vw,4rem) 1.25rem; }
.gfj-portal__ref { font-family:var(--mono,ui-monospace,monospace); font-size:.75rem; letter-spacing:.14em; color:var(--gfj-oxide); margin:0 0 .4rem; }
.gfj-portal__head h1 { margin:0 0 .4rem; }
.gfj-portal__status { font-family:var(--mono,ui-monospace,monospace); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gfj-blue); }
.gfj-portal__photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.6rem; margin:2rem 0; }
.gfj-portal__photos img { width:100%; height:100%; object-fit:cover; display:block; }

.gfj-quote-table { width:100%; border-collapse:collapse; margin:1.25rem 0; }
.gfj-quote-table td { padding:.7rem .4rem; border-bottom:1px solid var(--gfj-rule); }
.gfj-quote-table .num { text-align:right; white-space:nowrap; }
.gfj-quote-table__total td { border-top:2px solid var(--gfj-mill); border-bottom:0; font-size:1.25rem; font-weight:700; padding-top:.9rem; }

.gfj-portal__terms { font-size:.875rem; color:#5a636c; }
.gfj-portal__expiry { font-family:var(--mono,ui-monospace,monospace); font-size:.75rem; color:var(--gfj-blue); }
.gfj-portal__decide { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--gfj-rule); }
.gfj-portal__buttons { display:flex; gap:.7rem; flex-wrap:wrap; }
.gfj-portal__signed { font-family:var(--mono,ui-monospace,monospace); font-size:.8125rem; color:#2E7D5B; }

.gfj-portal__invoices ul { list-style:none; padding:0; }
.gfj-portal__invoices li { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.9rem 0; border-bottom:1px solid var(--gfj-rule); }
.gfj-paid { font-family:var(--mono,ui-monospace,monospace); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:#2E7D5B; }

.gfj-alert { padding:1rem 1.15rem; border-left:3px solid var(--gfj-blue); background:rgba(31,77,107,.07); margin:1.5rem 0; }
.gfj-alert--good { border-color:#2E7D5B; background:rgba(46,125,91,.09); }
.gfj-alert--bad { border-color:var(--gfj-oxide); background:rgba(180,71,42,.09); }

@media (prefers-reduced-motion:reduce) { .gfj-thumb.is-working { animation:none; } }