/* =====================================================
   Unified mobile sizing for premium create/feature modals
   Loaded after page <style> blocks so these rules win.
   Targets: jobs, resume, interview, automation, networking, dataset
   ===================================================== */

@media (max-width: 768px) {
  /* ----- Shell size ----- */
  .fj-modal .modal-dialog,
  .auto-modal .modal-dialog,
  .res-modal .modal-dialog,
  .nw-modal .modal-dialog,
  .int-create-modal .modal-dialog,
  .int-modal .modal-dialog,
  .ds-modal .modal-dialog {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto !important;
    max-height: calc(100dvh - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .fj-modal .modal-dialog-centered,
  .auto-modal .modal-dialog-centered,
  .res-modal .modal-dialog-centered,
  .nw-modal .modal-dialog-centered,
  .int-create-modal .modal-dialog-centered,
  .int-modal .modal-dialog-centered,
  .ds-modal .modal-dialog-centered {
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    align-items: center;
  }

  .fj-modal .modal-dialog-scrollable,
  .auto-modal .modal-dialog-scrollable,
  .res-modal .modal-dialog-scrollable,
  .nw-modal .modal-dialog-scrollable,
  .int-create-modal .modal-dialog-scrollable,
  .int-modal .modal-dialog-scrollable,
  .ds-modal .modal-dialog-scrollable {
    max-height: calc(100dvh - 24px) !important;
  }

  .fj-modal .modal-content,
  .auto-modal .modal-content,
  .res-modal .modal-content,
  .nw-modal .modal-content,
  .int-create-modal .modal-content,
  .int-modal .modal-content,
  .ds-modal .modal-content,
  .fj-modal .modal-dialog-scrollable .modal-content,
  .auto-modal .modal-dialog-scrollable .modal-content,
  .res-modal .modal-dialog-scrollable .modal-content,
  .nw-modal .modal-dialog-scrollable .modal-content,
  .int-create-modal .modal-dialog-scrollable .modal-content,
  .int-modal .modal-dialog-scrollable .modal-content,
  .ds-modal .modal-dialog-scrollable .modal-content {
    width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    height: auto !important;
    border-radius: 20px !important;
  }

  .fj-modal .modal-header,
  .auto-modal .modal-header,
  .res-modal .modal-header,
  .nw-modal .modal-header,
  .int-create-modal .modal-header,
  .int-modal .modal-header,
  .ds-modal .modal-header {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
  }

  /* ----- Compact header ----- */
  .fj-modal-header-content,
  .auto-modal-header-content,
  .res-modal-header-content,
  .nw-modal-header-content,
  .int-create-header-content {
    padding: 16px 18px !important;
    gap: 10px !important;
  }

  .fj-modal-icon,
  .auto-modal-icon,
  .res-modal-icon,
  .nw-modal-icon,
  .int-create-modal .int-create-icon,
  .int-create-header-content .int-create-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.05rem !important;
  }

  .fj-modal .modal-title,
  .auto-modal .modal-title,
  .res-modal .modal-title,
  .nw-modal .modal-title,
  .int-create-modal .modal-title,
  .int-modal .modal-title {
    font-size: 1.1rem !important;
  }

  .fj-modal-subtitle,
  .auto-modal-subtitle,
  .res-modal-subtitle,
  .nw-modal-subtitle,
  .int-create-subtitle {
    font-size: 0.75rem !important;
    margin-top: 2px !important;
  }

  /* ----- Tighter body / section / field spacing ----- */
  .fj-modal .modal-body,
  .auto-modal .modal-body,
  .res-modal .modal-body,
  .nw-modal .modal-body,
  .int-create-modal .modal-body,
  .int-modal .modal-body,
  .ds-modal .modal-body {
    padding: 16px 16px 12px !important;
  }

  .fj-form-section,
  .auto-form-section,
  .res-form-section,
  .int-create-modal .int-form-section,
  .int-form-section {
    margin-bottom: 14px !important;
  }

  .fj-form-section:last-child,
  .auto-form-section:last-child,
  .res-form-section:last-child,
  .int-create-modal .int-form-section:last-child,
  .int-form-section:last-child {
    margin-bottom: 0 !important;
  }

  .fj-form-section-title,
  .auto-form-section-title,
  .res-form-section-title,
  .int-create-modal .int-form-section-title,
  .int-form-section-title {
    margin-bottom: 8px !important;
    font-size: 0.68rem !important;
  }

  .res-form-group,
  .auto-form-group,
  .nw-form-group,
  .int-form-group,
  .int-create-modal .int-form-group {
    margin-bottom: 12px !important;
  }

  .fj-modal .form-label,
  .auto-modal .form-label,
  .res-modal .form-label,
  .res-form-label,
  .auto-form-label,
  .nw-form-label,
  .nw-modal .form-label,
  .int-create-modal .form-label,
  .int-create-modal .int-form-label,
  .int-form-label {
    margin-bottom: 4px !important;
    font-size: 0.78rem !important;
  }

  /* Bootstrap row gutters inside these modals */
  .fj-modal .row,
  .auto-modal .row,
  .res-modal .row,
  .nw-modal .row,
  .int-create-modal .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }

  .fj-modal .row.g-3,
  .auto-modal .row.g-3,
  .res-modal .row.g-3,
  .nw-modal .row.g-3,
  .int-create-modal .row.g-3 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }

  .fj-modal .form-control,
  .fj-modal .form-select,
  .auto-modal .form-control,
  .auto-modal .form-select,
  .auto-form-input,
  .res-modal .form-control,
  .res-modal .form-select,
  .res-form-input,
  .nw-modal .form-control,
  .nw-modal .form-select,
  .nw-form-input,
  .nw-form-textarea,
  .int-create-modal .form-control,
  .int-create-modal .form-select,
  .int-create-modal .int-form-input,
  .int-create-modal .int-form-select,
  .int-form-input,
  .int-form-select {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 0 !important;
    font-size: 0.88rem !important;
  }

  .fj-modal textarea.form-control,
  .auto-modal textarea.form-control,
  .res-modal textarea.form-control,
  .nw-modal textarea.form-control,
  .nw-form-textarea,
  .int-create-modal textarea.form-control,
  .int-create-modal .int-form-textarea,
  .int-form-textarea {
    min-height: 88px !important;
  }

  /* Compact selection cards / steps */
  .int-create-modal .int-premium-steps {
    margin-bottom: 14px !important;
    padding: 12px !important;
    gap: 8px !important;
  }

  .int-create-modal .int-premium-step {
    padding: 8px 12px !important;
  }

  .nw-step-indicator {
    margin-bottom: 14px !important;
    padding: 10px 12px !important;
  }

  .nw-entity-options,
  .res-toggle-group,
  .int-create-modal .int-type-cards {
    gap: 10px !important;
  }

  .res-toggle,
  .nw-entity-option,
  .int-create-modal .int-type-card {
    padding: 14px 12px !important;
  }

  /* ----- Footer: one row, smaller buttons ----- */
  .fj-modal .modal-footer,
  .auto-modal .modal-footer,
  .res-modal .modal-footer,
  .nw-modal .modal-footer,
  .int-create-modal .modal-footer,
  .int-modal .modal-footer,
  .ds-modal .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 8px !important;
    padding: 10px 14px 12px !important;
  }

  .fj-modal .modal-footer > *,
  .auto-modal .modal-footer > *,
  .res-modal .modal-footer > *,
  .nw-modal .modal-footer > *,
  .int-create-modal .modal-footer > *,
  .int-modal .modal-footer > *,
  .ds-modal .modal-footer > * {
    margin: 0 !important;
  }

  .fj-modal .btn-cancel,
  .fj-modal .btn-submit,
  .auto-modal .auto-btn-cancel,
  .auto-modal .auto-btn-submit,
  .res-modal .res-btn-cancel,
  .res-modal .res-btn-submit,
  .nw-modal .nw-modal-btn,
  .int-create-modal .int-modal-btn,
  .int-modal .int-modal-btn,
  .ds-modal .ds-modal-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 9px 12px !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .fj-modal .btn-submit i,
  .auto-modal .auto-btn-submit i,
  .res-modal .res-btn-submit i,
  .nw-modal .nw-modal-btn i,
  .int-create-modal .int-modal-btn i,
  .int-modal .int-modal-btn i {
    font-size: 0.95rem !important;
  }
}