/* =============================================
   KEZDES.PHP — Page styles
   Brand register. No border-radius anywhere.
   Bottom-border-only inputs per DESIGN.md.
   Courier Prime labels. Cormorant numbers.
============================================= */

/* ── Banner — narrow hero-style photo banner ── */
.kez-banner {
  position: relative;
  overflow: hidden;
  background: var(--color-charcoal);
  min-height: clamp(300px, 44vh, 500px);
}

.kez-banner__media {
  position: absolute;
  inset: 0;
}
.kez-banner__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: saturate(0.82) contrast(1.06);
}
.kez-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 18, 9, 0.82) 0%,
    rgba(26, 18, 9, 0.42) 55%,
    rgba(26, 18, 9, 0.18) 100%
  );
  pointer-events: none;
}
.kez-banner__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

.kez-banner__inner {
  position: absolute;
  z-index: 3;
  bottom: clamp(2.5rem, 6vh, 4rem);
  left: clamp(2rem, 7vw, 7rem);
  right: clamp(2rem, 30vw, 20rem);
  color: var(--color-chalk);
}
.kez-banner__label {
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-rust);
  margin-bottom: 1rem;
}
.kez-banner__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  font-weight: 500;
  color: var(--color-chalk);
  margin-bottom: 1rem;
}
.kez-banner__sub {
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.65;
  color: rgba(250, 246, 240, 0.82);
  max-width: 46ch;
}

/* ── Section wrapper ── */
.kez-section {
  background: var(--color-linen);
  padding: 5rem 2rem 8rem;
}
.kez-inner {
  max-width: 640px;
  margin: 0 auto;
}

/* ── Errors — top summary block ── */
.kez-errors {
  background: var(--color-rust);
  padding: 1.25rem 1.5rem;
  margin-bottom: 3rem;
}
.kez-errors__head {
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-chalk);
  margin-bottom: 0.625rem;
}
.kez-errors ul {
  margin: 0;
  padding-left: 1.25em;
  font-family: var(--font-body);
  font-size: var(--type-small);
  color: var(--color-chalk);
  line-height: 1.75;
  opacity: 0.9;
}

/* ── Progress bar ── */
.kez-progress { margin-bottom: 3.5rem; }
.kez-progress__meta {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}
.kez-progress__label,
.kez-progress__count {
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-clay);
}
.kez-progress__count { color: var(--color-soil); }
.kez-progress__track {
  height: 2px;
  background: var(--color-plaster);
  position: relative;
}
.kez-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--color-rust);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Step fieldset ── */
.kez-step { border: none; padding: 0; margin: 0; }
.kez-step__head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-clay);
}
.kez-step__num {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--color-sand);
  flex-shrink: 0;
  user-select: none;
}
.kez-step__legend {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  color: var(--color-soil);
  padding: 0;
}

/* ── Fields ── */
.kez-field { margin-bottom: 2rem; }
.kez-label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-clay);
  margin-bottom: 0.625rem;
}
.kez-label__opt {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.65;
}

/* Inputs — chalk fill makes the field area legible to non-technical users.
   Bottom border remains the primary focus indicator (brand-faithful).
   Horizontal padding added to match the visible fill area. */
.kez-input {
  display: block;
  width: 100%;
  background: var(--color-chalk);
  border: none;
  border-bottom: 1px solid var(--color-clay);
  border-radius: 0;
  padding: 0.75rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  color: var(--color-soil);
  outline: none;
  transition: border-color 0.2s ease-out, background 0.2s ease-out;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.kez-input::placeholder { color: var(--color-sand); opacity: 1; }
.kez-input:focus {
  background: var(--color-chalk);
  border-bottom: 2px solid var(--color-rust);
  padding-bottom: calc(0.75rem - 1px);
}
.kez-input--textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.65;
}

/* Per-field invalid state */
.kez-field--invalid .kez-label { color: var(--color-rust); }
.kez-field--invalid .kez-input {
  background: color-mix(in srgb, var(--color-rust) 8%, var(--color-chalk));
  border-bottom-color: var(--color-rust);
}
.kez-field-error {
  display: block;
  margin-top: 0.375rem;
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.08em;
  color: var(--color-rust);
}

/* Select with custom chevron */
.kez-select-wrap { position: relative; }
.kez-input--select { cursor: pointer; padding-right: 2.25rem; }
.kez-select-chevron {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-clay);
}

/* ── Package picker — editorial list ── */
.kez-pkg { margin-top: 0.5rem; }
.kez-pkg__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--color-plaster);
  cursor: pointer;
}
.kez-pkg__item:first-child { border-top: 1px solid var(--color-plaster); }
.kez-pkg__radio {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-rust);
  cursor: pointer;
  margin: 0;
}
.kez-pkg__content { flex: 1; min-width: 0; }
.kez-pkg__name {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-body-lg);
  color: var(--color-soil);
  transition: color 0.15s ease-out;
}
.kez-pkg__item:has(.kez-pkg__radio:checked) .kez-pkg__name { color: var(--color-rust); }
.kez-pkg__sub {
  display: block;
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-clay);
  margin-top: 0.2rem;
}
.kez-pkg__price {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-soil);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s ease-out;
}
.kez-pkg__item:has(.kez-pkg__radio:checked) .kez-pkg__price { color: var(--color-rust); }

/* ── Nav buttons ── */
.kez-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-plaster);
}
.kez-nav__back {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-clay);
  cursor: pointer;
  transition: color 0.2s ease-out;
}
.kez-nav__back:hover { color: var(--color-soil); }

/* ── Success ── */
.kez-success { padding: 4rem 0; }
.kez-success__label {
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-rust);
  margin-bottom: 1rem;
}
.kez-success__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--color-soil);
  margin-bottom: 1.5rem;
}
.kez-success__body {
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.65;
  color: var(--color-clay);
  max-width: 44ch;
  margin-bottom: 2.5rem;
}

/* ── Dynamic list (websites / colors) ── */
.kez-dynlist { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.kez-dynlist__row { display: flex; align-items: center; gap: 0.625rem; }
.kez-dynlist__input { flex: 1; }
.kez-dynlist__remove {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-clay);
  cursor: pointer;
}
.kez-dynlist__remove:hover { color: var(--color-rust); }
.kez-dynlist__add {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-rust);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kez-dynlist__add:hover { color: var(--color-soil); }

/* ── Color picker ── */
.kez-dynlist--colors {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.kez-dynlist--colors .kez-dynlist__row {
  position: relative;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  gap: 0;
}
.kez-input--color {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 2px solid var(--color-plaster);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  transition: border-color 0.15s ease-out, transform 0.15s ease-out;
  display: block;
}
.kez-input--color:hover,
.kez-input--color:focus-visible {
  border-color: var(--color-clay);
  transform: scale(1.1);
  outline: none;
}
.kez-input--color::-webkit-color-swatch-wrapper { padding: 3px; border-radius: 50%; overflow: hidden; }
.kez-input--color::-webkit-color-swatch { border: none; border-radius: 50%; }
.kez-dynlist--colors .kez-dynlist__remove {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--color-plaster);
  border: none;
  font-size: 0.7rem;
  line-height: 1.125rem;
  text-align: center;
  padding: 0;
  color: var(--color-clay);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
.kez-dynlist--colors .kez-dynlist__row:hover .kez-dynlist__remove { opacity: 1; }
.kez-dynlist--colors .kez-dynlist__remove:hover { color: var(--color-rust); background: var(--color-linen); }

/* ── File upload area ── */
.kez-file { margin-bottom: 0.875rem; }
.kez-file__area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 2.25rem 1.5rem;
  border: 1px dashed var(--color-clay);
  background: var(--color-chalk);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease-out;
}
.kez-file__area:hover { border-color: var(--color-rust); }
.kez-file__icon {
  font-size: 1.5rem;
  color: var(--color-clay);
  line-height: 1;
  display: block;
  margin-bottom: 0.25rem;
}
.kez-file__text {
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  color: var(--color-soil);
  font-weight: 500;
}
.kez-file__hint {
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-clay);
}
.kez-file__input { display: none; }
.kez-file__name {
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.08em;
  color: var(--color-rust);
  margin-top: 0.5rem;
}

/* ── No-logo checkbox ── */
.kez-nologoch {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-clay);
  cursor: pointer;
}
.kez-nologoch input { accent-color: var(--color-rust); cursor: pointer; }

/* ── GDPR consent checkboxes ── */
.kez-field--gdpr { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-plaster); }
.kez-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  cursor: pointer;
}
.kez-check__input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2em;
  accent-color: var(--color-rust);
  cursor: pointer;
}
.kez-check__text {
  font-family: var(--font-body);
  font-size: var(--type-small);
  line-height: 1.65;
  color: var(--color-clay);
}
.kez-check__text a { color: var(--color-soil); text-underline-offset: 3px; }
.kez-check__text a:hover { color: var(--color-rust); }
.kez-field--invalid .kez-check__input { outline: 2px solid var(--color-rust); outline-offset: 1px; }
.kez-field--invalid .kez-check__text { color: var(--color-rust); }

/* ── JS wizard — step visibility ── */
.js .kez-step { display: none; }
.js .kez-step.is-active { display: block; animation: kez-in 0.25s ease-out both; }
.js .kez-form--errors .kez-step { display: block; animation: none; }
.js .kez-form--errors + .kez-progress { display: none; }

@keyframes kez-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Room rows ── */
.kez-rooms { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 0.75rem; }
.kez-room {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.kez-room__fields {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.625rem;
  align-items: center;
}
.kez-room__beds {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.kez-room__bed-count {
  width: 5rem;
  text-align: center;
}
.kez-room__bed-label {
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-clay);
  white-space: nowrap;
}
.kez-room__remove {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-clay);
  cursor: pointer;
}
.kez-room__remove:hover { color: var(--color-rust); }
.kez-room__remove-placeholder { width: 2rem; flex-shrink: 0; }

/* ── Extras catalog (Part A) ── */
.kez-catalog { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.kez-catalog__row {
  display: grid;
  grid-template-columns: 1fr 7rem 10rem auto;
  gap: 0.5rem;
  align-items: center;
}
.kez-catalog__price { text-align: right; }
.kez-catalog__unit-wrap { min-width: 0; }
.kez-catalog__remove {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-clay);
  cursor: pointer;
}
.kez-catalog__remove:hover { color: var(--color-rust); }
.kez-catalog__remove-placeholder { width: 2rem; flex-shrink: 0; }

/* ── Radio group (inline options) ── */
.kez-radio-group { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.kez-radio {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  cursor: pointer;
  padding: 0.8125rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid var(--color-plaster);
  background: var(--color-chalk);
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
.kez-radio:has(.kez-radio__input:checked) {
  border-color: var(--color-rust);
  background: color-mix(in oklch, var(--color-rust) 8%, var(--color-chalk));
}
.kez-radio__input {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-sand);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  margin: 0;
  transition: border-color 0.15s ease-out;
}
.kez-radio__input:checked {
  border-color: var(--color-rust);
}
.kez-radio__input::after {
  content: '';
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-rust);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease-out;
}
.kez-radio__input:checked::after {
  transform: translate(-50%, -50%) scale(1);
}
.kez-radio__label {
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  color: var(--color-soil);
}

/* ── Field hint text ── */
.kez-field-hint {
  font-family: var(--font-body);
  font-size: var(--type-small);
  color: var(--color-clay);
  line-height: 1.55;
  margin-bottom: 0.875rem;
  margin-top: -0.25rem;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .kez-banner { min-height: clamp(260px, 38vh, 360px); }
  .kez-banner__inner { left: 1.25rem; right: 1.25rem; bottom: 2rem; }
  .kez-section { padding: 2.5rem 1.25rem 4rem; }
  .kez-progress { margin-bottom: 2.5rem; }

  /* Package: show price at reduced size instead of hiding — context matters in a form */
  .kez-pkg__item { flex-wrap: wrap; row-gap: 0.25rem; }
  .kez-pkg__price { font-size: 1rem; flex-basis: 100%; text-align: left; padding-left: calc(1rem + 1rem); padding-bottom: 0.375rem; }

  /* Room rows: keep name + bed count on one line — reduce input width to give name more room */
  .kez-room__bed-count { width: 3.75rem; }

  /* Catalog rows: name | price | × on row 1; unit dropdown full-width on row 2 */
  .kez-catalog__row { grid-template-columns: 1fr 5rem auto; row-gap: 0.375rem; }
  .kez-catalog__name { grid-column: 1; grid-row: 1; }
  .kez-catalog__price { grid-column: 2; grid-row: 1; text-align: right; }
  .kez-catalog__remove,
  .kez-catalog__remove-placeholder { grid-column: 3; grid-row: 1; align-self: center; }
  .kez-catalog__unit-wrap { grid-column: 1 / -1; grid-row: 2; }

  /* Back button: 44px minimum tap target */
  .kez-nav__back { padding: 0.75rem 0; min-height: 44px; display: flex; align-items: center; }
}