/* =========================================================================
   Trädfällning Göteborg  |  Steg 4 av 4, mobiloptimering
   Delad fil. Laddas av index.html.
   Identisk med Sthlm-versionen 2026-07-26. Ändra här, inte i sidan.

   OMFATTNING
   Allt nedan ligger under html.ts-steg4-mobil. Den klassen sätts av
   steg4-mobil.js och bara när viewporten är 767 px eller smalare vid
   den första monteringen av steg 4. Desktop får aldrig klassen och är
   därmed helt orörd, utan att vi behöver dubbla grindar.

   Vi använder medvetet INTE en media query här. När JS väl har byggt om
   fälten till flytande etiketter måste stilen följa med även om telefonen
   vrids till liggande läge, där bredden passerar 767 px. Grinden ligger
   i JS, en gång, vid monteringen.
   ========================================================================= */

/* ---- 2. Flytande etiketter ------------------------------------------- */

/* .form-fields är flex column med gap 0.75rem, så wrappen ska inte
   lägga på egen marginal. */
.ts-steg4-mobil .ts-fl {
  position: relative;
  margin: 0;
}

.ts-steg4-mobil .ts-fl .form-input {
  width: 100%;
  height: 58px;
  /* Plats för etiketten ovanför värdet. Ersätter .form-input padding. */
  padding: 22px 1.25rem 8px;
  /* 16px hindrar iOS från att zooma in vid fokus. Sajtens 0.95rem gör det. */
  font-size: 16px;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, background .15s ease;
}

.ts-steg4-mobil .ts-fl .form-input:focus {
  outline: none;
  border-color: var(--green-700, #245A00);
  background: var(--white, #ffffff);
}

.ts-steg4-mobil .ts-fl__label {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  line-height: 1;
  color: var(--neutral-500, #6b6b6b);
  pointer-events: none;
  transition: top .16s ease, font-size .16s ease, color .16s ease;
}

/* Etiketten flyttar upp när fältet har fokus eller ett värde */
.ts-steg4-mobil .ts-fl.is-filled .ts-fl__label,
.ts-steg4-mobil .ts-fl.is-focused .ts-fl__label {
  top: 12px;
  transform: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-700, #245A00);
}

/* Autofyll ska inte måla fältet blått i Safari och Chrome, och etiketten
   ska ligga uppe direkt när webbläsaren fyllt i fältet. */
.ts-steg4-mobil .ts-fl .form-input:-webkit-autofill,
.ts-steg4-mobil .ts-fl .form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--neutral-900, #1a1a1a);
  -webkit-box-shadow: 0 0 0 1000px var(--green-50, #f1f8ec) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ---- 3. Adressfältet dolt -------------------------------------------- */

.ts-steg4-mobil .ts-hidden {
  display: none !important;
}

/* ---- 4. RUT-raden under knappen -------------------------------------- */

.ts-steg4-mobil .ts-rut-note {
  margin-top: 0.75rem;
  padding: 10px 12px;
  background: var(--green-50, #f1f8ec);
  border: 1px solid var(--green-100, #e4f2d9);
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--green-800, #163600);
}

.ts-steg4-mobil .ts-rut-note span {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: var(--neutral-500, #6b6b6b);
}

/* ---- 5. Felläge ------------------------------------------------------ */

.ts-steg4-mobil .ts-fl.has-error .form-input {
  border: 1.5px solid #C1272D;
  background: #FCF0F0;
}

.ts-steg4-mobil .ts-fl.has-error .ts-fl__label {
  color: #C1272D;
}

.ts-steg4-mobil .ts-fl__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 600;
  color: #C1272D;
}

.ts-steg4-mobil .ts-fl__error::before {
  content: "\26A0";
  flex-shrink: 0;
  line-height: 1.3;
}

/* Sista fältet ska aldrig kunna hamna bakom tangentbordet */
.ts-steg4-mobil #leadForm {
  padding-bottom: 24px;
}

@supports (padding: max(0px)) {
  .ts-steg4-mobil #leadForm {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ts-steg4-mobil .ts-fl__label,
  .ts-steg4-mobil .ts-fl .form-input {
    transition: none;
  }
}