/* ==========================================================================
   VOYZ — Authentication surfaces (login + agency sign-up)

   Reference: soft-light system UI. A pale field with a faint grid, one
   floating shell with generous radii, layered diffuse shadows, and controls
   that respond immediately but travel calmly.

   The frosting is deliberate and confined to two elements (the shell and the
   media caption). It is not applied to cards, inputs or buttons, where it
   would only cost contrast.
   ========================================================================== */

.auth{
  --auth-radius: 28px;
  --auth-inner: 18px;
  --field-radius: 14px;
  --shell-max: 1120px;

  position:relative;isolation:isolate;
  /* The site header sits above this, so subtract its height. */
  min-height:calc(100dvh - 72px);
  display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(11,87,164,.10), transparent 65%),
    radial-gradient(55% 45% at 92% 100%, rgba(18,184,204,.12), transparent 62%),
    #eef1f5;
  overflow:clip;
}
/* The faint drafting grid from the reference — decorative, low contrast. */
.auth::before{
  content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(16,31,48,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,31,48,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 40%, transparent 100%);
}

/* ---------- The shell ---------- */
.auth-shell{
  width:min(100%,var(--shell-max));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(12px,1.6vw,18px);
  padding:clamp(12px,1.6vw,18px);
  border-radius:var(--auth-radius);
  border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:
    0 32px 70px -28px rgba(16,31,48,.30),
    0 8px 24px -12px rgba(16,31,48,.14),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.auth-shell.is-single{grid-template-columns:minmax(0,1fr);max-width:520px}

/* ---------- Form panel ---------- */
.auth-panel{
  padding:clamp(24px,3vw,40px) clamp(20px,3vw,40px);
  border-radius:var(--auth-inner);
  background:#fff;
  box-shadow:0 1px 2px rgba(16,31,48,.05);
  display:flex;flex-direction:column;justify-content:center;
}
.auth-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:clamp(20px,3vh,32px);
}
.auth-back{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px 7px 9px;
  border-radius:var(--r-full);border:1px solid var(--line);
  color:var(--ink-2);font-size:13px;font-weight:var(--fw-label);
  transition:border-color var(--dur-2) var(--ease-ios-soft),background var(--dur-2) var(--ease-ios-soft),color var(--dur-2) var(--ease-ios-soft);
}
.auth-back:hover{border-color:var(--line-strong);background:var(--surface-2);color:var(--ink)}
.auth-back svg{width:15px;height:15px}
[dir=rtl] .auth-back{padding:7px 9px 7px 13px}
[dir=rtl] .auth-back svg{transform:scaleX(-1)}

.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.auth-brand .voyz-logo-mark{height:34px}
.auth-brand .voyz-logo-word{height:20px}

.auth-head h1{
  margin:0;font-size:clamp(26px,2.6vw,34px);line-height:1.15;
  font-weight:var(--fw-display);letter-spacing:var(--track-h2);color:var(--ink);
}
.auth-head p{margin:10px 0 0;max-width:44ch;color:var(--muted);font-size:15px;line-height:1.6}
.auth-form{margin-top:clamp(22px,3vh,30px);display:flex;flex-direction:column;gap:16px}

/* ---------- Fields ---------- */
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-grid .col-2{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f>label{font-size:13px;font-weight:var(--fw-label);color:var(--ink-2)}
.f.req>label::after{content:"*";margin-inline-start:4px;color:var(--danger)}
.f-control{
  position:relative;display:flex;align-items:center;
  border:1px solid var(--line-strong);border-radius:var(--field-radius);
  background:var(--surface-2);
  transition:border-color var(--dur-2) var(--ease-ios-soft),background var(--dur-2) var(--ease-ios-soft),box-shadow var(--dur-2) var(--ease-ios-soft);
}
.f-control:hover{border-color:var(--ink-2)}
.f-control:focus-within{
  border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 4px rgba(11,87,164,.14);
}
.f-control>svg,.f-control>i>svg{
  width:18px;height:18px;flex:0 0 auto;
  margin-inline-start:14px;color:var(--muted);pointer-events:none;
}
.f-control input,.f-control select,.f-control textarea{
  width:100%;min-height:50px;padding:12px 14px;
  border:0;background:transparent;outline:none;
  color:var(--ink);font-size:15px;font-family:inherit;
}
.f-control select{appearance:none;cursor:pointer;padding-inline-end:38px}
.f-control:has(select)::after{
  content:"";position:absolute;inset-inline-end:16px;
  width:8px;height:8px;border:solid var(--muted);border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg) translateY(-2px);pointer-events:none;
}
.f-control input::placeholder{color:var(--muted);opacity:.85}
.f-control.is-invalid{border-color:var(--danger);background:var(--danger-050)}
.f-hint{color:var(--muted);font-size:12.5px;line-height:1.5;display:flex;gap:6px;align-items:flex-start}
.f-hint svg{width:13px;height:13px;flex:0 0 auto;margin-top:3px}
.f-error{margin:0;padding:0;list-style:none;color:var(--danger);font-size:12.5px;font-weight:var(--fw-medium)}

/* Password reveal */
.pw-toggle{
  width:40px;height:40px;margin-inline-end:6px;flex:0 0 auto;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background var(--dur-1) var(--ease-ios-soft),color var(--dur-1) var(--ease-ios-soft);
}
.pw-toggle:hover{background:rgba(16,31,48,.06);color:var(--ink)}
.pw-toggle svg{width:17px;height:17px}

/* Upload */
.f-file{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px;border:1px dashed var(--line-strong);border-radius:var(--field-radius);
  background:var(--surface-2);
  transition:border-color var(--dur-2) var(--ease-ios-soft),background var(--dur-2) var(--ease-ios-soft);
}
.f-file:hover{border-color:var(--accent);background:var(--accent-050)}
.f-file:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(11,87,164,.14)}

/* Consent */
.auth-consent{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.auth-consent input[type=checkbox]{
  width:22px;height:22px;flex:0 0 22px;margin:1px 0 0;
  border-radius:7px;accent-color:var(--brand);cursor:pointer;
}
.auth-consent span{display:flex;flex-direction:column;gap:3px}
.auth-consent b{font-size:13.5px;font-weight:var(--fw-medium);color:var(--ink)}
.auth-consent small{color:var(--muted);font-size:12.5px;line-height:1.5}

/* ---------- Actions ---------- */
.auth-submit{width:100%;min-height:52px;border-radius:var(--field-radius);font-size:15.5px}
.auth-note{
  display:flex;align-items:flex-start;gap:8px;
  color:var(--muted);font-size:12.5px;line-height:1.55;
}
.auth-note svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--brand)}
.auth-switch{
  margin-top:6px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;color:var(--muted);flex-wrap:wrap;
}
.auth-switch a{color:var(--brand);font-weight:var(--fw-label)}
.auth-switch a:hover{text-decoration:underline}

.auth-alert{
  padding:13px 15px;display:flex;align-items:flex-start;gap:10px;
  border:1px solid #e6b3ae;border-radius:var(--field-radius);
  background:var(--danger-050);color:#7c211d;font-size:13.5px;line-height:1.5;
}
.auth-alert svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--danger)}

/* ---------- Media panel ---------- */
.auth-media{
  position:relative;overflow:hidden;
  border-radius:var(--auth-inner);
  min-height:420px;
  display:flex;align-items:flex-end;
  isolation:isolate;
}
.auth-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.auth-media::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,18,34,.05) 0%,rgba(6,18,34,.55) 62%,rgba(6,18,34,.86) 100%);
}
.auth-media-copy{padding:clamp(20px,2.4vw,30px);color:#fff;width:100%}
.auth-media-copy h2{
  margin:0 0 10px;font-size:clamp(22px,2vw,29px);line-height:1.25;
  font-weight:var(--fw-display);color:#fff;letter-spacing:var(--track-h2);
}
.auth-media-copy p{margin:0;max-width:34ch;color:rgba(255,255,255,.86);font-size:14px;line-height:1.65}
.auth-points{
  margin:18px 0 0;padding:12px 14px;list-style:none;
  display:flex;flex-direction:column;gap:9px;
  border-radius:16px;border:1px solid rgba(255,255,255,.28);
  /* Blurring a dark gradient turns muddy; a light veil keeps it legible. */
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(140%) brightness(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(140%) brightness(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.auth-points li{display:flex;align-items:center;gap:9px;color:#fff;font-size:13px;font-weight:var(--fw-medium)}
.auth-points svg{width:16px;height:16px;flex:0 0 auto;color:#8fe9f5}

/* ---------- Steps ---------- */
.auth-steps{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.auth-steps span{height:4px;flex:1;border-radius:var(--r-full);background:var(--surface-3)}
.auth-steps span.on{background:var(--brand)}
.auth-steps small{color:var(--muted);font-size:12px;font-weight:var(--fw-label);white-space:nowrap}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .auth-shell{grid-template-columns:minmax(0,1fr)}
  .auth-media{order:-1;min-height:210px}
  .auth-media-copy p,.auth-points{display:none}
  .auth-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .auth{padding:0;background:#fff;min-height:0}
  .auth::before{display:none}
  .auth-shell{
    border:0;border-radius:0;background:transparent;padding:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
    grid-template-rows:auto 1fr;
  }
  .auth-panel{border-radius:0;box-shadow:none;padding:22px 18px 32px}
  .auth-media{border-radius:0;min-height:150px}
}
@media (prefers-reduced-motion:reduce){
  .auth-back,.f-control,.f-file,.pw-toggle{transition:none}
}

/* GPS is one readable value with an optional browser-assisted locator. */
.gps-control{display:flex;align-items:stretch;gap:10px}
.gps-control .f-control{flex:1;min-width:0}
.gps-locate{flex:0 0 auto;min-height:50px;white-space:nowrap}
.gps-locate:disabled{cursor:wait}
@media(max-width:560px){
  .gps-control{flex-direction:column}
  .gps-locate{width:100%}
}