/* Request form for the services that end in a quote.
   Loads after check.css and reuses its tokens, buttons and error style. */

.gid2-services{max-width:560px}
.gid2-services-alt{font-size:13px;color:var(--text-muted,#6b8070);
  background:#f4f8f5;border:1px solid var(--border-subtle,#eef3f0);border-radius:9px;
  padding:10px 12px;margin:0 0 20px;line-height:1.5}
.gid2-services-alt a{color:var(--green,#1a6b3c);font-weight:650}

/* A display rule beats the hidden attribute, so every element this file gives a
   display value to must restate hidden. Omitting it is how the v1 diaspora modal
   and the v2 check form both stayed on screen after they were meant to close. */
.gid2-request-form[hidden]{display:none}
.gid2-request-done[hidden]{display:none}
.gid2-service-panel[hidden]{display:none}
.gid2-error[hidden]{display:none}
.gid2-step[hidden]{display:none}
.gid2-progress[hidden]{display:none}
.gid2-stepnav .gid2-btn[hidden]{display:none}

.gid2-request-form{display:flex;flex-direction:column;gap:4px}

/* ---- wizard progress ----
   Rendered by services.js; without the script the list stays hidden and the
   form reads top to bottom as one page. */

.gid2-progress{display:flex;gap:4px;list-style:none;margin:0 0 24px;padding:0}
.gid2-progress-step{display:flex;flex-direction:column;align-items:center;gap:5px;
  flex:1;min-width:0;position:relative}
.gid2-progress-dot{display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;flex:none;
  font-size:12px;font-weight:700;
  background:#fff;border:1.5px solid var(--border-default,#dfe8e2);
  color:var(--text-muted,#6b8070);transition:background .15s ease,border-color .15s ease}
.gid2-progress-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted,#6b8070);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The line between the dots: drawn behind, interrupted by each dot's own fill. */
.gid2-progress-step + .gid2-progress-step::before{content:"";position:absolute;
  top:13px;right:calc(50% + 17px);width:calc(100% - 34px);height:1.5px;
  background:var(--border-default,#dfe8e2)}
.gid2-progress-step.is-current .gid2-progress-dot{background:var(--green,#1a6b3c);
  border-color:var(--green,#1a6b3c);color:#fff}
.gid2-progress-step.is-current .gid2-progress-label{color:var(--green,#1a6b3c)}
.gid2-progress-step.is-done .gid2-progress-dot{background:var(--green-lite,#e8f2ec);
  border-color:var(--border-strong,#cfe3d6);color:var(--green,#1a6b3c)}
.gid2-progress-step.is-done + .gid2-progress-step::before{background:var(--border-strong,#cfe3d6)}
.gid2-progress-step.is-current + .gid2-progress-step::before,
.gid2-progress-step.is-done + .gid2-progress-step.is-current::before{background:var(--border-strong,#cfe3d6)}

.gid2-fieldset{border:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:8px}
.gid2-legend{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted,#6b8070);padding:0;margin:0 0 4px}

/* ---- service picker ---- */

.gid2-service-picker{display:grid;grid-template-columns:1fr;gap:10px}
.gid2-service-option{display:flex;gap:12px;align-items:flex-start;
  background:#fff;border:1.5px solid var(--border-default,#dfe8e2);border-radius:12px;
  padding:14px 15px;cursor:pointer;transition:border-color .12s ease,background .12s ease}
.gid2-service-option:hover{border-color:var(--border-strong,#cfe3d6);background:#fbfdfc}
/* The radio still carries the state and the keyboard focus; the card is the
   visible control. Clipped rather than display:none so it stays focusable. */
.gid2-service-option input[type=radio]{position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}
/* :has is well supported in every browser this ships to; the fallback is simply
   the unhighlighted card, which is still perfectly usable. */
.gid2-service-option:has(input:checked){border-color:var(--green,#1a6b3c);background:#f2f8f4}
.gid2-service-option:has(input:focus-visible){outline:2px solid var(--gold,#f1b434);outline-offset:2px}

/* The icon tile: a tinted square on every card equally, per-item colour carried
   by the mark, never by a coloured edge. */
.gid2-service-ic{display:flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;border-radius:11px;background:var(--green-lite,#e8f2ec);
  color:var(--green,#1a6b3c)}
.gid2-service-ic svg{width:22px;height:22px}
.gid2-service-option:has(input:checked) .gid2-service-ic{background:var(--green,#1a6b3c);color:#fff}

.gid2-service-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.gid2-service-name{font-size:14.5px;font-weight:650;color:#12211a;line-height:1.3}
.gid2-service-summary{font-size:12.5px;color:var(--text-muted,#6b8070);line-height:1.45}
.gid2-service-meta{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8c9cb2;margin-top:2px}

/* ---- panels ---- */

.gid2-service-panel{display:block;margin-top:6px;padding-top:18px;
  border-top:1px solid var(--border-subtle,#eef3f0)}

.gid2-hint{font-size:12.5px;color:var(--text-muted,#6b8070);margin:0;line-height:1.5}
.gid2-optional{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#8c9cb2;
  background:#f1f5f2;border-radius:4px;padding:2px 5px;margin-left:6px;vertical-align:1px}

.gid2-text-in{width:100%;padding:12px 13px;font-family:inherit;font-size:15px;
  border:1.5px solid var(--border-default,#dfe8e2);border-radius:10px;background:#fff;color:#12211a}
.gid2-text-in:focus{outline:none;border-color:var(--green,#1a6b3c)}
textarea.gid2-text-in{resize:vertical;min-height:74px;line-height:1.5}

/* ---- uploads ---- */

.gid2-upload{display:flex;flex-direction:column;gap:5px;
  background:#fbfdfc;border:1px solid var(--border-subtle,#eef3f0);border-radius:10px;
  padding:12px 13px}
.gid2-file{font-size:13px;color:var(--text-body,#41564a);width:100%}
/* The default control is unreadable at mobile widths, so the button is restyled
   while the input itself stays a real file input. */
.gid2-file::file-selector-button{font-family:inherit;font-size:13px;font-weight:650;
  color:var(--green,#1a6b3c);background:#eef5f0;border:1px solid var(--border-strong,#cfe3d6);
  border-radius:8px;padding:8px 12px;margin-right:10px;cursor:pointer}
.gid2-file::file-selector-button:hover{background:#e4efe8}
.gid2-file:focus-visible{outline:2px solid var(--gold,#f1b434);outline-offset:2px}

/* ---- consent ---- */

.gid2-consent{background:#f4f8f5;border:1px solid var(--border-subtle,#eef3f0);
  border-radius:11px;padding:14px 15px;margin-bottom:22px}
.gid2-check{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;
  color:var(--text-body,#41564a);line-height:1.45;cursor:pointer}
.gid2-check input[type=checkbox]{margin:2px 0 0;flex:none;accent-color:var(--green,#1a6b3c);
  width:16px;height:16px}

.gid2-actions{margin:0 0 10px}
.gid2-btn[disabled]{opacity:.6;cursor:progress}

/* ---- step navigation ----
   Back sits left, Continue right; on the first step Continue stands alone and
   still lands on the right. */
.gid2-stepnav{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.gid2-stepnav[hidden]{display:none}
.gid2-stepnav .gid2-btn--primary{margin-left:auto}
/* Without the script both nav buttons stay hidden and the stepnav rows collapse
   to nothing but the final submit. */
.gid2-wizard .gid2-service-panel{border-top:none;padding-top:0;margin-top:0}

/* ---- registration price ---- */

/* A tinted surface, hairline-bordered on all sides equally — per-item colour
   never rides a single edge. */
.gid2-reg-price{background:var(--green-lite,#e8f2ec);
  border:1px solid var(--border-strong,#cfe3d6);border-radius:11px;
  padding:14px 15px;margin:0 0 16px}
.gid2-reg-price-line{font-size:14.5px;color:#12211a;line-height:1.55;margin:0 0 8px}
.gid2-reg-price-line strong{font-size:17px;color:var(--green,#1a6b3c)}
.gid2-reg-price .gid2-hint{margin:0}

/* ---- confirmation ---- */

.gid2-request-done{display:block;background:#f4f8f5;
  border:1px solid var(--border-default,#dfe8e2);
  border-radius:12px;padding:22px 20px}
.gid2-done-title{font-size:19px;font-weight:700;color:#12211a;margin:0 0 10px;line-height:1.25}
.gid2-done-ref{font-size:14px;color:var(--text-body,#41564a);margin:0 0 12px}
.gid2-done-ref code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:15px;
  font-weight:700;background:#12211a;color:#fff;padding:5px 9px;border-radius:5px;
  letter-spacing:.06em;display:inline-block;margin-left:4px}
.gid2-done-body{font-size:14px;color:var(--text-body,#41564a);line-height:1.6;margin:0 0 12px}

@media (min-width:560px){
  .gid2-service-picker{grid-template-columns:1fr 1fr}
  .gid2-service-option{flex-direction:column;gap:10px;padding:16px}
  .gid2-done-title{font-size:21px}
  .gid2-progress-label{font-size:11px}
}