/* ============================================
   CREATE POSITION PAGE - Page-specific overrides
   Shared form rules live in form-page.css
   ============================================ */

@layer components {
  .create-position-page {
    position: relative;
    padding-block: var(--space-2xl);
    max-inline-size: 1100px;
    margin-inline: auto;
    overflow: hidden;
    --orb-1-size: 500px;
    --orb-2-size: 400px;
    --orb-2-left: -100px;

    /* Select dropdown styling (page-specific) */
    .form-group select {
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='gray' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right var(--space-sm) center;
      padding-inline-end: var(--space-xl);
    }

    /* Allow wrapping on smaller viewports */
    .form-row {
      flex-wrap: wrap;
    }

    /* Currency picker + amount sit on one line; the amount grows, the
       currency select stays at its content width. */
    .salary-input-group {
      display: flex;
      gap: var(--space-sm);

      #salary-currency {
        flex: 0 0 auto;
        inline-size: auto;
      }

      #salary-range {
        flex: 1 1 auto;
        min-inline-size: 0;
      }
    }
  }
}