/* ============================================
   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;
        }
    }
}