/* =================================================================
   Claimspot – claim-form.css
   08 · Žalos registracijos sekcija (#zalos-forma).
   Naudoja tik esamus tokenus iš styles.css :root – jokių naujų
   spalvų sistemos sluoksnių, jokių !important, jokių inline stilių.
   ================================================================= */

/* ---------------- kortelė ---------------- */
.claim-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 4% 0%, rgba(45,107,255,.16), transparent 70%),
    radial-gradient(55% 50% at 100% 100%, rgba(56,189,248,.12), transparent 70%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.claim-card::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.5), transparent);
}

.claim-grid { display: grid; grid-template-columns: 1fr; }

@media (min-width: 960px) {
  .claim-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .claim-intro { border-right: 1px solid var(--line); }
}

/* ---------------- kairysis stulpelis ---------------- */
.claim-intro { padding: clamp(1.5rem, 4vw, 2.75rem); }

.claim-title {
  margin-top: 1.1rem;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
}
.claim-lead {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: 1.7;
}

.claim-points { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: grid; gap: 1.5rem; }
.claim-point { display: flex; gap: .9rem; align-items: flex-start; }
.claim-point__ic {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--sky);
  background: rgba(45,107,255,.13);
  border: 1px solid rgba(56,189,248,.18);
}
.claim-point__body { display: block; min-width: 0; }
.claim-point__t { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.claim-point__d { display: block; margin-top: .35rem; font-size: .9rem; color: var(--muted); line-height: 1.6; }

/* ---------------- dešinysis stulpelis ---------------- */
.claim-formwrap {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: rgba(10,14,28,.35);
}
.claim-form-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.claim-form-hint { margin-top: .4rem; font-size: .85rem; color: var(--faint); }

.claim-form { margin-top: 1.75rem; }

.claim-field { margin-bottom: 1.15rem; min-width: 0; }
.claim-label { display: block; margin-bottom: .45rem; font-size: .88rem; font-weight: 600; }
.claim-req { margin-left: .2em; color: var(--sky); }

.claim-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.claim-amount { display: grid; grid-template-columns: 1fr 110px; gap: .6rem; }

@media (max-width: 560px) {
  .claim-row { grid-template-columns: 1fr; }
  .claim-amount { grid-template-columns: 1fr; }
}

/* ---------------- laukai ---------------- */
.claim-input, .claim-select {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .8rem .95rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.claim-input::placeholder { color: var(--faint); }
.claim-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.claim-input:focus, .claim-select:focus {
  outline: none;
  background: #0F1730;
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 3px rgba(45,107,255,.16);
}

.claim-select {
  appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'><path d='M1 1l5 5 5-5' stroke='%239AA4C2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right .85rem center;
}
.claim-select:focus { background-color: #0F1730; }
.claim-select option { background: var(--surface2); color: var(--ink); }

.claim-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(12%) saturate(600%) hue-rotate(185deg);
  cursor: pointer;
}

.claim-hint { display: block; margin-top: .4rem; font-size: .8rem; color: var(--faint); line-height: 1.5; }

/* klaidos – gintarinis rėmelis, dingsta pradėjus taisyti */
.claim-error { display: none; margin-top: .35rem; font-size: .8rem; color: #FBBF24; }
.claim-field.is-invalid .claim-error { display: block; }
.claim-field.is-invalid .claim-input,
.claim-field.is-invalid .claim-select,
.claim-field.is-invalid .claim-drop { border-color: rgba(245,158,11,.6); }
.claim-field.is-invalid .claim-consent input { outline: 2px solid rgba(245,158,11,.6); outline-offset: 3px; }

/* ---------------- priedai ---------------- */
.claim-fileinput { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }

.claim-drop {
  display: flex; align-items: center; gap: .9rem;
  width: 100%; text-align: left;
  padding: 1rem;
  background: rgba(10,14,28,.4);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.claim-drop:hover, .claim-drop.over { border-color: rgba(56,189,248,.55); background: rgba(45,107,255,.08); }
.claim-drop__ic {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: var(--sky);
  background: rgba(45,107,255,.13);
  border: 1px solid rgba(56,189,248,.18);
}
.claim-drop__body { display: block; min-width: 0; }
.claim-drop__t { display: block; font-size: .92rem; font-weight: 600; line-height: 1.4; }
.claim-drop__d { display: block; margin-top: .25rem; font-size: .78rem; color: var(--faint); line-height: 1.5; }

.claim-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.claim-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  max-width: 100%;
  padding: .35rem .5rem .35rem .7rem;
  font-size: .8rem;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.claim-chip__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claim-chip__s { color: var(--faint); flex: none; }
.claim-chip__x {
  flex: none; width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%; color: var(--muted);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.claim-chip__x:hover { color: #FCA5A5; background: rgba(255,255,255,.07); }

/* ---------------- sutikimas ---------------- */
.claim-consent { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.claim-consent input {
  flex: none; width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--brand); cursor: pointer;
}
.claim-consent span { font-size: .85rem; color: var(--muted); line-height: 1.55; }
.claim-consent a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }

/* botų gaudyklė */
.claim-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------- veiksmų juosta ---------------- */
.claim-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: 1.6rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.claim-reply { display: inline-flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--muted); }
.claim-reply__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}
.claim-form.is-sending { opacity: .65; pointer-events: none; }

.claim-formerror {
  margin-top: 1rem; padding: .8rem .95rem;
  font-size: .85rem; color: #FBBF24; line-height: 1.55;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 12px;
}
.claim-formerror[hidden] { display: none; }

/* ---------------- sėkmės būsena ---------------- */
.claim-done[hidden] { display: none; }
.claim-done__ic {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--success);
  background: rgba(34,197,94,.13);
}
.claim-done__t {
  margin-top: var(--s-3);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);   /* buvo 1.5rem – per silpna */
  font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  color: var(--ink);
}
.claim-done__lead {
  margin-top: var(--s-2); max-width: 48ch;
  font-size: var(--fs-body); color: var(--muted); line-height: 1.65;
}

/* Uzklausos numeris – svarbiausia informacija ekrane, todel atskiras
   elementas, o ne sakinio viduryje paskandintas tekstas. */
.claim-done__ref {
  margin-top: var(--s-3);
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.30);
  border-radius: var(--radius-sm);
}
.claim-done__ref[hidden] { display: none; }
.claim-done__ref-k {
  font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.claim-done__ref b {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 1.15rem; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

.claim-next { margin-top: 1.75rem; display: grid; gap: 1.1rem; }
.claim-next li { display: flex; gap: .85rem; align-items: flex-start; }
.claim-next__n {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--sky);
  background: rgba(45,107,255,.13);
  border: 1px solid rgba(56,189,248,.18);
}
.claim-next__body { display: block; min-width: 0; }
.claim-next__t { display: block; font-size: .95rem; font-weight: 700; }
.claim-next__d { display: block; margin-top: .25rem; font-size: .85rem; color: var(--muted); line-height: 1.6; }


/* ---------------- judesio mažinimas ---------------- */
@media (prefers-reduced-motion: reduce) {
  .claim-card, .claim-input, .claim-select, .claim-drop, .claim-chip__x {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   KLAIDU SANTRAUKA
   Rodoma formos virsuje po nepavykusio siuntimo. Fokusas keliauja
   cia, o ne i pirma bloga lauka – taip vartotojas is karto mato,
   kiek klaidu yra. Inline klaidos prie lauku lieka: jos rodo, KUR.
   --------------------------------------------------------------- */
.claim-summary {
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid rgba(239, 68, 68, .45);
  border-left: 3px solid #EF4444;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, .07);
}
.claim-summary:focus { outline: 2px solid var(--sky); outline-offset: 3px; }
.claim-summary__t {
  margin: 0 0 var(--s-1);
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: var(--fs-sm); color: var(--ink);
}
.claim-summary__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.claim-summary__list a {
  display: inline-block; padding: 4px 0;
  font-size: var(--fs-cap); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(239, 68, 68, .55);
}
.claim-summary__list a:hover,
.claim-summary__list a:focus-visible { color: var(--ink); text-decoration-color: #EF4444; }

/* Lauku grupes. <fieldset> pridetas del semantikos (ekrano skaitytuvas
   praneša grupes pavadinima kiekvienam laukui), todel bruksniuko ir
   vidiniu tarpu is narsykles nereikia – ju atsisakom. */
.claim-group { border: 0; margin: 0 0 var(--s-1); padding: 0; min-width: 0; }
.claim-legend {
  padding: 0; margin-bottom: var(--s-2);
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}

/* telefonas liko vienas eiluteje - grid poros nebereikia */
.claim-field-solo > .claim-field { margin: 0; }


/* Sekmes blokas: aiskus, atskiras ekranas, o ne pastraipa formos vietoje.
   Anksciau jis buvo tokio pat svorio kaip aplinkinis tekstas, todel
   nebuvo akivaizdu, kad uzklausa jau pateikta. */
.claim-done {
  padding: var(--s-5) var(--s-4);
  border: 1px solid rgba(34,197,94,.30);
  border-left: 3px solid var(--success);
  border-radius: var(--radius);
  background: rgba(34,197,94,.05);
}
.claim-done:focus { outline: 2px solid var(--sky); outline-offset: 3px; }
.claim-done__ic { width: 64px; height: 64px; }

/* "Kas vyksta toliau" atskiriame linija – tai jau kita informacijos pakopa */
.claim-next {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.claim-next__h {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--faint);
}