/* Prijava rukopisa (page-posaljite-rukopis.php, inc/rukopisi-prikaz.php).
 * Boje i okviri kao kod obrasca za ispravak na profilu škole (skola.css). */

.rukopis-stranica {
  --rk-crvena: #D22D36;
  --rk-crvena-tamna: #a8222a;
  --rk-tekst: #1d1d1b;
  --rk-sivo: #5f5a54;
  --rk-rub: #EADFD2;
  --rk-pozadina: #FDFAF6;
  --rk-polje: #ffffff;
  --rk-greska: #b3261e;
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 16px 72px;
  font-family: 'Poppins', sans-serif;
  color: var(--rk-tekst);
}

.rukopis-stranica__zaglavlje { margin-bottom: 28px; }
.rukopis-stranica__nadnaslov {
  margin: 0 0 8px;
  color: var(--rk-crvena);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rukopis-stranica h1 {
  margin: 0 0 16px;
  font-family: 'PT Serif', serif;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.12;
  color: var(--rk-tekst);
}
.rukopis-stranica__uvod p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; }
.rukopis-stranica__lead { font-size: 19px !important; line-height: 1.5 !important; }
.rukopis-stranica .rukopis-stranica__napomena { margin: 16px 0 0; font-size: 14px; color: var(--rk-sivo); }

/* Oznake dijelova obrasca — ujedno i brza navigacija. */
.rukopis__koraci {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.rukopis__koraci li { flex: none; width: auto; margin: 0; padding: 0; }
.rukopis__koraci li::before { content: none !important; display: none !important; }
.rukopis__koraci li[hidden] { display: none; }
.rukopis__koraci a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--rk-rub);
  border-radius: 999px;
  background: var(--rk-polje);
  color: var(--rk-tekst);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}
.rukopis__koraci-broj {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rk-pozadina);
  color: var(--rk-crvena);
  font-weight: 600;
  font-size: 12px;
}
.rukopis__koraci a:hover { border-color: var(--rk-crvena); }

.rukopis__mamac { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Dijelovi */
.rukopis__dio {
  margin: 0 0 20px;
  padding: 26px 28px 10px;
  border: 1px solid var(--rk-rub);
  border-radius: 14px;
  background: var(--rk-pozadina);
  min-width: 0;
  scroll-margin-top: 90px;
}
.rukopis__dio[hidden] { display: none; }
.rukopis__dio legend {
  display: flex;
  align-items: center;
  gap: 12px;
  float: left;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  font-family: 'PT Serif', serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.rukopis__dio legend + * { clear: both; }
.rukopis__broj {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rk-crvena);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
}

/* Polja */
.rukopis__red { display: grid; gap: 0 20px; }
.rukopis__red--dva { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rukopis__red--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.rukopis__polje { position: relative; margin: 0 0 20px; min-width: 0; }
.rukopis__polje > label,
.rukopis__oznaka {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.rukopis__obavezno { color: var(--rk-crvena); }
.rukopis .rukopis__opis,
.rukopis-stranica .rukopis__opis { margin: -2px 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--rk-sivo); }

.rukopis input[type="text"],
.rukopis input[type="email"],
.rukopis input[type="tel"],
.rukopis select,
.rukopis textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid #d8cdbf;
  border-radius: 10px;
  background: var(--rk-polje);
  color: var(--rk-tekst);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: none;
}
.rukopis textarea { resize: vertical; min-height: 96px; padding-bottom: 26px; }
.rukopis select { appearance: auto; }
.rukopis input:focus,
.rukopis select:focus,
.rukopis textarea:focus {
  outline: none;
  border-color: var(--rk-crvena);
  box-shadow: 0 0 0 3px rgba(210, 45, 54, 0.14);
}

.rukopis__brojac {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 12px;
  color: var(--rk-sivo);
  pointer-events: none;
}
.rukopis__brojac.je-blizu { color: #8a6116; }
.rukopis__brojac.je-preko { color: var(--rk-greska); font-weight: 600; }
.ima-gresku .rukopis__brojac { bottom: 34px; }

/* Izbori */
.rukopis__izbor { display: grid; gap: 8px; }
.rukopis__izbor--u-redu { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.rukopis__izbor--kartice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rukopis__radio,
.rukopis__kvacica {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.45;
}
.rukopis__radio {
  padding: 11px 14px;
  border: 1px solid #d8cdbf;
  border-radius: 10px;
  background: var(--rk-polje);
}
.rukopis__izbor--u-redu .rukopis__radio { min-width: 110px; }
.rukopis__radio:hover { border-color: var(--rk-crvena); }
.rukopis__radio:has(input:checked) {
  border-color: var(--rk-crvena);
  background: #fff5f5;
  box-shadow: inset 0 0 0 1px var(--rk-crvena);
}
.rukopis__radio input,
.rukopis__kvacica input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--rk-crvena);
}
.rukopis__polje--kvacica { margin-bottom: 14px; }
.rukopis__kvacica a { color: var(--rk-crvena); }

/* Datoteke */
.rukopis__datoteka {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 118px;
  padding: 18px;
  border: 2px dashed #d8cdbf;
  border-radius: 12px;
  background: var(--rk-polje);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.rukopis__datoteka input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.rukopis__datoteka:hover,
.rukopis__datoteka.je-iznad { border-color: var(--rk-crvena); background: #fff8f7; }
.rukopis__datoteka:focus-within { border-color: var(--rk-crvena); box-shadow: 0 0 0 3px rgba(210, 45, 54, 0.14); }
.rukopis__datoteka-tekst { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14.5px; color: var(--rk-sivo); }
.rukopis__datoteka-tekst svg { color: var(--rk-crvena); }
.rukopis__datoteka-tekst strong { color: var(--rk-crvena); }
.rukopis__datoteka-ime { font-size: 14px; font-weight: 600; color: var(--rk-tekst); word-break: break-word; }
.rukopis__datoteka-ime:empty { display: none; }
.rukopis__datoteka.ima-datoteku { border-style: solid; border-color: #9cc5a1; background: #f6fbf6; }

/* Greške i poruke */
.rukopis__greska { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--rk-greska); }
.ima-gresku input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.ima-gresku select,
.ima-gresku textarea,
.ima-gresku .rukopis__datoteka { border-color: var(--rk-greska); }
.ima-gresku .rukopis__radio { border-color: #e4a9a5; }

.rukopis__poruka {
  margin: 0 0 22px;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.55;
}
.rukopis__poruka--greska { background: #fdecea; border: 1px solid #f3b8b3; color: #7a1a14; }
.rukopis__poruka--hvala { padding: 28px; background: #f1f8f2; border: 1px solid #b9dcbf; }
.rukopis__poruka--hvala h2 { margin: 0 0 10px; font-family: 'PT Serif', serif; font-size: 24px; color: #1d4d26; }
.rukopis__poruka--hvala p { margin: 0; }

/* Slanje */
.rukopis__slanje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.rukopis__slanje .rukopis__opis { margin: 0; }
.rukopis__gumb {
  padding: 14px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--rk-crvena);
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.rukopis__gumb:hover { background: var(--rk-crvena-tamna); }
.rukopis__gumb:focus-visible { outline: 3px solid rgba(210, 45, 54, 0.35); outline-offset: 2px; }
.rukopis__gumb[disabled] { opacity: 0.7; cursor: progress; }

@media (max-width: 700px) {
  .rukopis-stranica { padding-top: 24px; }
  .rukopis__dio { padding: 20px 16px 4px; border-radius: 12px; }
  .rukopis__dio legend { font-size: 19px; }
  .rukopis__red--dva,
  .rukopis__red--tri,
  .rukopis__izbor--kartice { grid-template-columns: minmax(0, 1fr); }
  .rukopis__koraci { display: none; }
  .rukopis__gumb { width: 100%; }
}