/**
 * Postcard — ekran RSVP.
 *
 * Eksport 1920×1906: pasiaste tło, mata w kratę (poziome pasy atramentu
 * na ciemnym pasie) i kremowa karta 1078 px z formularzem. Opcje wyboru
 * to podkreślone linie tekstu — zaznaczenie pogrubia tekst i linię.
 * Telefon wg eksportu 393×1035.
 */

body.rsvp-page {
  background-color: var(--c-stripe);
  background-image: var(--stripes);
  background-size: var(--stripes-size);
  background-position: var(--stripes-pos);
}

/* === Mata i karta ============================================ */

.rsvp-mat {
  width: min(1134px, calc(100% - 24px));
  margin: 152px auto 166px;
  padding: 26px 28px 27px;
  background-color: var(--c-stripe-dark);
  background-image: repeating-linear-gradient(180deg,
      var(--c-ink) 0 27px,
      transparent 27px 63px,
      var(--c-ink) 63px 70px,
      transparent 70px 76px,
      var(--c-ink) 76px 83px,
      transparent 83px 119px);
}

.rsvp-card {
  position: relative;
  padding: 74px 0 90px;
}

.rsvp-card__clip {
  position: absolute;
  left: 7%; top: -103px; width: 115px;
  transform: rotate(-6deg);
}

/* === Nagłówek karty ========================================== */

.rsvp-head {
  position: relative;
  width: 70%;
  margin-bottom: 80px;
}

.rsvp-head__title {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: .14em;
  text-align: center;
}

.rsvp-head__intro {
  margin: 34px auto 0;
  max-width: 520px;
  font-size: 27px;
  line-height: 45px;
  text-align: center;
}

.rsvp-head__date {
  margin-top: 22px;
  font-size: 38px;
  text-align: center;
}

.rsvp-card__stamp {
  position: absolute;
  right: 53px; top: 55px; width: 205px;
}

/* === Formularz =============================================== */

.rsvp-form {
  width: min(553px, calc(100% - 48px));
  margin: 0 auto;
}

.rsvp-form .group-head {
  margin: 64px 0 26px;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: .12em;
  text-align: center;
}

.rsvp-form .group-head:first-child { margin-top: 0; }

/* Margines siedzi na fieldsecie, nie na legendzie — górny margines
   legendy przeglądarka ignoruje i grupa klei się do pola wyżej. */
.rsvp-form fieldset {
  margin: 64px 0 0;
  padding: 0;
  border: 0;
}

/* Etykieta nad polem */
.f-label {
  display: block;
  margin: 34px 0 0;
  font-size: 25px;
  text-align: center;
}

/* Opcja-wiersz: tekst nad linią. Wiersze mają oddech (margines) jak
   w eksporcie 1920×1906, a zaznaczenie oprócz pogrubienia dostaje
   atramentową podlewkę — na dotyku widać, co się kliknęło. */
.choice {
  display: block;
  position: relative;
  margin: 18px 0;
  padding: 12px 10px 10px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--c-ink) 55%, transparent);
  border-radius: 3px 3px 0 0;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
  transition: background-color .2s ease;
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice:has(input:checked) {
  background-color: color-mix(in srgb, var(--c-ink) 10%, transparent);
  font-weight: 600;
  border-bottom-color: var(--c-ink);
  border-bottom-width: 2.5px;
}

.choice:has(input:focus-visible) {
  outline: 2px dashed var(--c-ink);
  outline-offset: 4px;
}

/* Pole tekstowe podkreślone linią */
.f-input {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 4px 12px;
  border: 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--c-ink) 55%, transparent);
  background: transparent;
  font-family: var(--font-body);
  font-size: 25px;
  text-align: center;
  color: var(--c-ink);
  border-radius: 0;
}

.f-input::placeholder { color: color-mix(in srgb, var(--c-ink) 45%, transparent); }

.f-input:focus {
  outline: none;
  border-bottom-color: var(--c-ink);
  border-bottom-width: 2.5px;
}

select.f-input { text-align: center; text-align-last: center; }

/* Pole-pułapka na boty */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* === Wysyłka ================================================= */

.rsvp-submit {
  display: block;
  width: 100%;
  margin-top: 82px;
  padding: 9px 10px 11px;
  border: 0;
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--font-body);
  font-size: 24px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.rsvp-submit:disabled { opacity: .6; cursor: wait; }

.form-status {
  min-height: 30px;
  margin-top: 22px;
  font-size: 20px;
  text-align: center;
}

.form-status[data-state="ok"]    { color: var(--c-ink); font-weight: 600; }
.form-status[data-state="error"] { color: #8C2B2B; }

/* Strzałka powrotu na pocztówkę */
.rsvp-back {
  position: absolute;
  left: 26px; top: 20px;
  font-size: 30px;
  text-decoration: none;
  color: var(--c-ink);
  opacity: .75;
}
.rsvp-back:hover { opacity: 1; }

/* === Telefon (≤740 px): eksport 393×1035 ===================== */

@media (max-width: 740px) {

  .rsvp-mat {
    width: calc(100% - 14px);
    margin: 74px auto 64px;
    padding: 13px;
    background-image: repeating-linear-gradient(180deg,
        var(--c-ink) 0 14px,
        transparent 14px 33px,
        var(--c-ink) 33px 37px,
        transparent 37px 40px,
        var(--c-ink) 40px 44px,
        transparent 44px 67px);
  }

  .rsvp-card { padding: 28px 0 36px; }

  .rsvp-card__clip { left: 8%; top: -52px; width: 48px; }

  .rsvp-head { width: 100%; margin-bottom: 36px; }
  .rsvp-head__title { font-size: 20px; }
  .rsvp-head__intro {
    margin-top: 6px;
    max-width: 240px;
    font-size: 17px;
    line-height: 29px;
  }
  .rsvp-head__date { margin-top: 14px; font-size: 24px; }

  .rsvp-card__stamp { right: 18px; top: 12px; width: 72px; }

  .rsvp-form { width: min(320px, calc(100% - 30px)); }
  .rsvp-form fieldset { margin-top: 38px; }
  .rsvp-form .group-head { margin: 38px 0 10px; font-size: 18px; }

  .f-label { margin-top: 20px; font-size: 17px; }
  .choice { margin: 12px 0; padding: 9px 8px 7px; font-size: 17px; }
  .f-input { margin-top: 10px; padding: 6px 4px 8px; font-size: 17px; }

  .rsvp-submit { margin-top: 44px; padding: 6px 10px 8px; font-size: 17px; }
  .form-status { font-size: 15px; margin-top: 12px; min-height: 20px; }
  .rsvp-card { padding-bottom: 20px; }

  .rsvp-back { left: 12px; top: 8px; font-size: 24px; }
}