/*
 * ============================================================================
 * FORM COMPACT PATCH - TIGHTER SPACING - ADD TO END OF reskin.css
 * ============================================================================
 */

/* Form card body - reduce overall padding */
.nl-hero .card-body,
.card.card-border .card-body {
  padding: 1rem 1.25rem 0.875rem !important;
}

/* Form row gaps - MUCH tighter spacing between input rows */
.card-body .row.g-2,
#form-step-1.row.g-2 {
  --bs-gutter-y: 0.375rem !important;
  --bs-gutter-x: 0.5rem !important;
  row-gap: 0.375rem !important;
}

/* Individual columns in form */
#form-step-1 .col-6 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Individual form inputs - smaller padding */
.nl-hero .form-control,
.nl-hero .form-select,
.card.card-border .form-control,
.card.card-border .form-select {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  margin-bottom: 0 !important;
}

/* Confirmation section - tighter */
.confirmation-section {
  padding: 0.625rem 0.875rem !important;
  margin: 0.375rem 0 !important;
}

/* Column containing confirmation section */
#form-step-1 .col-12:has(.confirmation-section) {
  margin-top: 0.25rem !important;
  padding-top: 0 !important;
}

.confirmation-checkboxes {
  gap: 0.25rem !important;
}

.confirmation-item {
  gap: 0.5rem !important;
  padding: 0.125rem 0 !important;
}

.confirmation-item label {
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
}

.confirmation-item input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  margin-top: 1px !important;
}

/* Verification wrapper - more compact */
#verify-wrapper {
  padding: 0.625rem !important;
  margin-top: 0.375rem !important;
  margin-bottom: 0.25rem !important;
  border-radius: 8px !important;
}

#verify-wrapper p {
  font-size: 0.7rem !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.4 !important;
}

/* Verification code input */
#verification-code,
.code-input {
  padding: 0.5rem 0.75rem !important;
  font-size: 1rem !important;
  margin-bottom: 0.375rem !important;
}

#verify-section {
  margin-bottom: 0.375rem !important;
}

/* Submit button */
#submit-form,
.card-body button[type="submit"],
.card-body .btn-primary {
  padding: 0.6875rem 1.25rem !important;
  font-size: 0.9375rem !important;
  margin-top: 0.125rem !important;
  margin-bottom: 0.375rem !important;
}

/* Button container */
.card-body .d-grid {
  margin-top: 0 !important;
}

.card-body .mb-1.col-md-12.mt-2 {
  margin-top: 0.125rem !important;
}

/* Trust badges */
.card-body img[src*="badges"] {
  max-height: 22px !important;
  margin: 0.375rem 0.2rem 0.25rem !important;
}

/* Disclosure text */
.dtxt {
  font-size: 0.6rem !important;
  margin-top: 0.375rem !important;
  line-height: 1.35 !important;
}

/* Error text area */
#error-text {
  margin-top: 0.125rem !important;
  margin-bottom: 0.125rem !important;
  font-size: 0.8rem !important;
}

/* Form header */
.top-form-header {
  padding: 1rem 1.25rem 0.875rem !important;
  font-size: 1.25rem !important;
}

.top-form-header .mute-text {
  font-size: 0.75rem !important;
  margin-top: 0.125rem !important;
}

/* ============================================================================
   MOBILE - Even more compact
   ============================================================================ */

@media (max-width: 768px) {
  
  .nl-hero .card-body,
  .card.card-border .card-body {
    padding: 0.875rem 0.875rem 0.75rem !important;
  }
  
  .card-body .row.g-2,
  #form-step-1.row.g-2 {
    --bs-gutter-y: 0.3125rem !important;
    row-gap: 0.3125rem !important;
  }
  
  .nl-hero .form-control,
  .nl-hero .form-select,
  .card.card-border .form-control,
  .card.card-border .form-select {
    padding: 0.5rem 0.625rem !important;
    font-size: 16px !important; /* Prevents iOS zoom */
  }
  
  .confirmation-section {
    padding: 0.5rem 0.75rem !important;
    margin: 0.3125rem 0 !important;
  }
  
  .confirmation-checkboxes {
    gap: 0.1875rem !important;
  }
  
  .confirmation-item label {
    font-size: 0.75rem !important;
  }
  
  #verify-wrapper {
    padding: 0.5rem !important;
    margin-top: 0.3125rem !important;
  }
  
  #verify-wrapper p {
    font-size: 0.65rem !important;
  }
  
  #submit-form,
  .card-body button[type="submit"],
  .card-body .btn-primary {
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  .top-form-header {
    padding: 0.875rem 1rem 0.75rem !important;
    font-size: 1.125rem !important;
  }
  
  .card-body img[src*="badges"] {
    max-height: 20px !important;
  }
  
  .dtxt {
    font-size: 0.5625rem !important;
  }
}