/* PHANTASM'27 — MOBILE REGISTRATION / STEP 4
   Clean, touch-friendly registration form on phones.
   Desktop/tablet remain untouched.
*/

@media (max-width: 768px) {
  html, body, #root {
    overflow-x: hidden !important;
  }

  /* Main registration surface */
  .Formcontainer {
    width: min(calc(100% - 24px), 640px) !important;
    max-width: 640px !important;
    margin: 1rem auto 2.5rem !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    background: linear-gradient(155deg, rgba(217,164,65,.055), rgba(10,7,5,.94)) !important;
    border: 1px solid rgba(217,164,65,.18) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.24) !important;
  }

  .Formcontainer form,
  .Formcontainer .form,
  .Formcontainer .form-grid,
  .Formcontainer .fields,
  .Formcontainer .form-content {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* One field per row on phones. */
  .Formcontainer form,
  .Formcontainer .form-grid,
  .Formcontainer .fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .9rem !important;
  }

  .Formcontainer .form-group,
  .Formcontainer .field,
  .Formcontainer .form-field,
  .Formcontainer .input-group,
  .Formcontainer label {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* If a row contains two fields, stack them rather than squeezing them. */
  .Formcontainer .row,
  .Formcontainer .form-row,
  .Formcontainer [class*='row'] {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .9rem !important;
  }

  .Formcontainer label,
  .Formcontainer .form-label,
  .Formcontainer .field-label {
    display: block !important;
    margin: 0 0 .35rem !important;
    color: #e7d8b6 !important;
    font-family: 'Source Sans 3', Arial, sans-serif !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    letter-spacing: .045em !important;
    line-height: 1.35 !important;
  }

  .Formcontainer input,
  .Formcontainer select,
  .Formcontainer textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: .72rem .8rem !important;
    box-sizing: border-box !important;
    border-radius: 9px !important;
    border: 1px solid rgba(217,164,65,.22) !important;
    background: rgba(8,6,4,.76) !important;
    color: #f3e6c8 !important;
    font-family: 'Source Sans 3', Arial, sans-serif !important;
    font-size: .84rem !important;
    line-height: 1.35 !important;
    outline: none !important;
  }

  .Formcontainer textarea {
    min-height: 96px !important;
    resize: vertical !important;
  }

  .Formcontainer input:focus,
  .Formcontainer select:focus,
  .Formcontainer textarea:focus {
    border-color: rgba(217,164,65,.72) !important;
    box-shadow: 0 0 0 3px rgba(217,164,65,.12) !important;
    background: rgba(14,10,7,.92) !important;
  }

  .Formcontainer input::placeholder,
  .Formcontainer textarea::placeholder {
    color: rgba(205,191,158,.48) !important;
  }

  /* Section headings inside the form */
  .Formcontainer h1,
  .Formcontainer h2,
  .Formcontainer h3,
  .Formcontainer h4 {
    margin: 0 0 .75rem !important;
    color: #f0dfbd !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    line-height: 1.05 !important;
  }

  .Formcontainer h1 { font-size: 1.85rem !important; }
  .Formcontainer h2 { font-size: 1.45rem !important; }
  .Formcontainer h3 { font-size: 1.15rem !important; }

  .Formcontainer p,
  .Formcontainer .helper,
  .Formcontainer .hint,
  .Formcontainer small {
    color: #bcae90 !important;
    font-family: 'Source Sans 3', Arial, sans-serif !important;
    font-size: .73rem !important;
    line-height: 1.5 !important;
  }

  /* Event-selection controls */
  .event-select-modal {
    width: min(calc(100% - 24px), 640px) !important;
    max-width: 640px !important;
    max-height: 88vh !important;
    margin: auto !important;
    padding: 1rem !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    background: linear-gradient(160deg, rgba(17,12,8,.98), rgba(9,7,5,.98)) !important;
    border: 1px solid rgba(217,164,65,.22) !important;
  }

  .event-chip {
    min-height: 44px !important;
    padding: .6rem .8rem !important;
    border-radius: 10px !important;
    font-size: .75rem !important;
  }

  /* Keep payment area compact and readable. */
  .Formcontainer [class*='payment'],
  .Formcontainer [class*='amount'],
  .Formcontainer [class*='summary'] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Primary submit */
  .Formcontainer button[type='submit'],
  .Formcontainer input[type='submit'],
  .Formcontainer .submit-btn,
  .Formcontainer .register-btn,
  .Formcontainer button[class*='register'] {
    width: 100% !important;
    min-height: 48px !important;
    margin-top: .35rem !important;
    padding: .78rem 1rem !important;
    border-radius: 10px !important;
    border: 1px solid #d9a441 !important;
    background: linear-gradient(180deg,#f0cf8b,#d9a441) !important;
    color: #241703 !important;
    -webkit-text-fill-color: #241703 !important;
    font-family: 'Source Sans 3', Arial, sans-serif !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    box-shadow: 0 8px 22px rgba(217,164,65,.15) !important;
  }

  .Formcontainer button[type='submit']:active,
  .Formcontainer input[type='submit']:active,
  .Formcontainer .submit-btn:active,
  .Formcontainer .register-btn:active {
    transform: translateY(1px) !important;
  }

  /* File upload */
  .Formcontainer input[type='file'] {
    min-height: 48px !important;
    padding: .45rem !important;
    font-size: .72rem !important;
  }

  /* Error / validation copy */
  .Formcontainer .error,
  .Formcontainer .field-error,
  .Formcontainer [class*='error'] {
    margin-top: .3rem !important;
    color: #e5a89a !important;
    font-size: .7rem !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 430px) {
  .Formcontainer {
    width: calc(100% - 16px) !important;
    margin-top: .75rem !important;
    padding: .8rem !important;
    border-radius: 14px !important;
  }

  .Formcontainer input,
  .Formcontainer select,
  .Formcontainer textarea {
    font-size: .8rem !important;
  }

  .Formcontainer h1 { font-size: 1.6rem !important; }
  .Formcontainer h2 { font-size: 1.28rem !important; }
}