/* ============================================================
   Nordic Club UA — pages/register.css
   Сторінка register.html (реєстрація на подію).

   Підключається ПІСЛЯ pages/join.css: звідти беруться .form-panel,
   .form-grid, .form-req, .form-hint — форма на сайті одна й та сама.
   Тут лишається тільки те, чого немає більше ніде: факти про подію
   під заголовком, список подій для вибору і три стани сторінки.
   ============================================================ */

/* Поки event-register.js не підставив подію, всі три стани
   сховані. Інакше на кожному відкритті блимав би блок «подію не
   знайдено» — і зникав через частку секунди. */
[data-event-loading] [data-event-form],
[data-event-loading] [data-event-missing],
[data-event-loading] [data-event-past] {
  display: none;
}

/* ---- Факти про подію під заголовком ---- */

.register-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-block-start: 16px;
  list-style: none;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* Крапка-роздільник між фактами. Не в тексті, а в CSS: у мобільному
   стеку рядки переносяться, і зайва крапка на початку рядка
   виглядала б як помилка набору. */
/* Загальне li + li у base.css додає відступ зверху — у рядку фактів
   він зсував другий пункт («Онлайн», назву місця) нижче за перший. */
.register-facts li + li {
  margin-block-start: 0;
}

.register-facts li + li::before {
  content: '·';
  margin-inline-end: 12px;
  color: currentColor;
}

.register-form {
  margin-block-start: clamp(28px, 3.5vw, 44px);
}

.register-form .form-note {
  margin-block-start: 16px;
}

/* .form-field має display: grid, і атрибут hidden без цього правила
   не ховає поле: галочку «один лист після зустрічі» (лише для гостя за
   запрошенням) бачили всі. Те саме для рядка ціни (data-invite-hide). */
.register-form .form-field[hidden],
.register-form .form-note[hidden] { display: none; }

/* ---- Розвилка «член клубу / гість» ---- */

.register-fork {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-block-start: clamp(24px, 3vw, 36px);
}

.register-fork[hidden] { display: none; }

.register-fork__opt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: var(--c-card-bg);
  color: var(--c-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.register-fork__opt:hover,
.register-fork__opt:focus-visible,
.register-fork__opt.is-on {
  border-color: var(--gold-500);
  box-shadow: inset 0 0 0 1px var(--gold-500);
}

.register-fork__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
}

.register-fork__text {
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.register-fork__cta {
  margin-block-start: auto;
  padding-block-start: 6px;
  font-weight: 600;
}

/* Гостьова картка — не кнопка, а блок із кнопками всередині (093):
   при онлайні в ній дві дії. Одна дія (.is-single) — уся картка
   клікабельна, як раніше: кнопка розтягує свою зону на всю картку. */
.register-fork__opt--guest {
  position: relative;
  cursor: default;
}

.register-fork__opt--guest.is-single { cursor: pointer; }

.register-fork__opt--guest.is-single .register-fork__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.register-fork__opt--guest:not(.is-single):hover { border-color: var(--c-line); box-shadow: none; }
.register-fork__opt--guest.is-on { border-color: var(--gold-500); box-shadow: inset 0 0 0 1px var(--gold-500); }

.register-fork__prices {
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.register-fork__prices[hidden] { display: none; }

.register-fork__prices li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 4px;
  border-block-end: 1px dashed var(--c-line);
}

.register-fork__prices span { color: var(--c-muted); }
.register-fork__prices b { font-weight: 600; }

.register-fork__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-block-start: auto;
}

.register-fork__btn {
  margin: 0;
  padding: 6px 0 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.register-fork__btn[hidden] { display: none; }

/* Без золотого тексту: на світлій темі він майже не читається. */
.register-fork__btn:hover,
.register-fork__btn.is-on {
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.register-fork__btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

/* ---- Перемикач «Очно / Онлайн» у формі (093) ---- */

.register-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-block-end: 20px;
}

.register-mode[hidden] { display: none; }

.register-mode__opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.register-mode__opt[aria-pressed="true"] {
  border-color: var(--gold-500);
  box-shadow: inset 0 0 0 1px var(--gold-500);
}

.register-mode__name { font-weight: 600; }

.register-mode__price {
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

.register-mode__price:empty { display: none; }

/* ---- Стани «подію не вибрано» та «подія минула» ---- */

.register-missing,
.register-past {
  margin-block-start: clamp(24px, 3vw, 36px);
}

.register-missing > p,
.register-past > p {
  color: var(--c-muted);
  max-width: 62ch;
}

.event-picks {
  display: grid;
  gap: 10px;
  margin-block: 20px;
  list-style: none;
  padding: 0;
}

.event-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 16px 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: var(--c-card-bg);
  color: var(--c-text);
  text-decoration: none;
  transition:
    border-color var(--t-fast) var(--ease-ui),
    transform var(--t-fast) var(--ease-ui);
}

.event-pick:hover {
  border-color: var(--gold-500);
  transform: translateY(-1px);
}

.event-pick__title {
  font-weight: 500;
}

.event-pick__when {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* ---- «Запроси друга»: хто запрошує ---- */

/* .invite-banner переїхав у pages/join.css (072): той самий банер
   тепер і на join.html, а register.html підключає join.css першим. */

/* ---- «Як ви бажаєте оплатити?» після реєстрації (084) ---- */

.pay-choice {
  margin-block: 22px 8px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--c-line);
}

.pay-choice__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
}

.pay-choice__opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.pay-opt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: var(--c-card-bg);
  color: var(--c-text);
  text-decoration: none;
}

a.pay-opt:hover,
a.pay-opt:focus-visible {
  border-color: var(--gold-500);
}

.pay-opt--main {
  border-color: var(--gold-500);
  box-shadow: inset 0 0 0 1px var(--gold-500);
}

.pay-opt__title { font-weight: 600; }

.pay-opt__price {
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.pay-opt__btn,
.pay-opt__go {
  margin-block-start: auto;
  align-self: flex-start;
}

.pay-opt__go { padding-block-start: 6px; font-weight: 600; }

.pay-opt__terms {
  margin: 6px 0 0;
  font-size: var(--fs-xs, 12px);
  opacity: .75;
}
.pay-opt__terms a { color: inherit; text-decoration: underline; }

.pay-opt__err {
  margin: 4px 0 0;
  color: var(--c-danger, #b42318);
  font-size: var(--fs-sm);
}

/* ---- Стисле підтвердження (forms.js → .form-success--compact) ----
   Форма вже в рамці (.form-panel), тож своєї рамки й жовтого тла в
   підтвердження немає — інакше рамка в рамці. Галочка, заголовок,
   що далі, головна кнопка; відповіді згорнуті. */
.form-result:has(.form-success--compact) {
  margin-block-start: 0;
}

.form-success--compact {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(8px, 2vw, 16px) 0 0;
  border: 0;
  background: none;
  text-align: center;
}

.form-success--compact:focus {
  outline: none;
}

.form-success__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  color: var(--c-accent-text);
}

.form-success__mark svg {
  width: 26px;
  height: 26px;
}

.form-success--compact .form-success__title {
  margin-block-start: 4px;
  font-size: var(--fs-h3);
}

.form-success--compact .form-success__text {
  margin: 0;
  max-width: 46ch;
  color: var(--c-muted);
}

.form-success--compact .form-success__link {
  margin-block-start: 8px;
}

/* «Ваші відповіді» — тонка лінія зверху, згорнуто. */
.form-success__details {
  justify-self: stretch;
  margin-block-start: 20px;
  border-block-start: 1px solid var(--c-line);
  text-align: start;
}

.form-success__details > summary {
  padding-block: 14px;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-align: center;
  cursor: pointer;
  list-style: none;
}

.form-success__details > summary::-webkit-details-marker {
  display: none;
}

.form-success__details > summary::after {
  content: " ↓";
}

.form-success__details[open] > summary::after {
  content: " ↑";
}

.form-success__details .form-success__summary {
  margin: 0;
  padding-block: 0 8px;
  border: 0;
}

.form-success--compact .form-note {
  margin: 0;
  padding-block: 8px 4px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* Після реєстрації рядок про ціну й посилання під формою лише
   повторює сказане в підтвердженні. */
.register-form:has(.form-success--compact) > .form-note {
  display: none;
}

/* Сусідні поля в рядку — по низу: довгий підпис («Місто / kommune
   проживання в Норвегії») переноситься на два рядки, і поле під ним
   стояло нижче за сусіднє. */
.register-form .form-grid .form-field {
  align-content: end;
}