<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/JobClub/Jobs/Create.vue
//  Location: resources/js/Pages/Member/JobClub/Jobs/Create.vue
//
//  Post a new job listing. Any member can post.
// ══════════════════════════════════════════════════════════════════

import { ref, computed }        from 'vue';
import { Head, useForm, router } from '@inertiajs/vue3';
import { useAuthStore }          from '@/Stores/useAuthStore';
import AppLayout                 from '@/Layouts/AppLayout.vue';

const props = defineProps({
    allHubs: { type: Array, required: true },
});

const authStore = useAuthStore();
const locale    = computed(() => authStore.locale);
const ar        = computed(() => locale.value === 'ar');

const form = useForm({
    hub_id:               '',
    job_title:            '',
    company_name:         '',
    industry:             '',
    location_city:        '',
    job_type:             'full_time',
    description:          '',
    required_skills:      [],
    min_experience_years: 0,
    salary_range:         '',
});

// ── Skills ────────────────────────────────────────────────────────
const skillInput = ref('');

function addSkill() {
    const s = skillInput.value.trim();
    if (s && !form.required_skills.includes(s) && form.required_skills.length < 20) {
        form.required_skills.push(s);
    }
    skillInput.value = '';
}

function removeSkill(i) { form.required_skills.splice(i, 1); }

function onSkillKey(e) {
    if (e.key === 'Enter' || e.key === ',') {
        e.preventDefault();
        addSkill();
    }
}

// ── Submit ────────────────────────────────────────────────────────
function submit() {
    form.post(route('member.jobs.store'));
}

const jobTypes = [
    { value: 'full_time',  en: 'Full Time',  ar: 'دوام كامل' },
    { value: 'part_time',  en: 'Part Time',  ar: 'دوام جزئي' },
    { value: 'contract',   en: 'Contract',   ar: 'عقد' },
    { value: 'internship', en: 'Internship', ar: 'تدريب' },
];

function hubColor(hub) { return hub.color ?? 'var(--color-primary)'; }
function hubName(hub)  { return ar.value ? hub.name_ar : hub.name_en; }
</script>

<template>
    <Head :title="ar ? 'نشر وظيفة' : 'Post a Job'" />

    <AppLayout>
        <div class="create-page">

            <!-- ══════════════════════════════════════════════════
                 BACK LINK
            ═══════════════════════════════════════════════════════ -->
            <a :href="route('member.jobs.index')" class="back-link">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M19 12H5M12 5l-7 7 7 7"/>
                </svg>
                {{ ar ? 'إعلانات الوظائف' : 'Job Listings' }}
            </a>

            <!-- ══════════════════════════════════════════════════
                 HERO BANNER
            ═══════════════════════════════════════════════════════ -->
            <div class="create-hero">
                <div class="create-hero__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
                        <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
                    </svg>
                </div>
                <div class="create-hero__text">
                    <h1 class="create-hero__title">
                        {{ ar ? 'نشر فرصة وظيفية' : 'Post a Job Opportunity' }}
                    </h1>
                    <p class="create-hero__sub">
                        {{ ar
                            ? 'الإعلان يظهر لجميع الأعضاء — المهتمون يرسلون ملفاتهم المجهولة مباشرة إليك'
                            : 'The listing goes to all members — interested ones send their anonymous CV directly to you' }}
                    </p>
                </div>
                <!-- How it works pills -->
                <div class="create-hero__steps">
                    <span class="create-hero__step">
                        <span class="create-hero__step-num">1</span>
                        {{ ar ? 'انشر الوظيفة' : 'Post the role' }}
                    </span>
                    <span class="create-hero__step-arrow">→</span>
                    <span class="create-hero__step">
                        <span class="create-hero__step-num">2</span>
                        {{ ar ? 'يتقدم الأعضاء بصورة مجهولة' : 'Members apply anonymously' }}
                    </span>
                    <span class="create-hero__step-arrow">→</span>
                    <span class="create-hero__step">
                        <span class="create-hero__step-num">3</span>
                        {{ ar ? 'وافق وتواصل' : 'Consent & connect' }}
                    </span>
                </div>
            </div>

            <!-- ══════════════════════════════════════════════════
                 FORM
            ═══════════════════════════════════════════════════════ -->
            <div class="create-form">

                <!-- ── SECTION 1: Hub ─────────────────────────── -->
                <div class="form-section">
                    <div class="form-section__header">
                        <div class="form-section__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
                            </svg>
                        </div>
                        <div>
                            <div class="form-section__title">{{ ar ? 'المجال' : 'Hub' }}</div>
                            <div class="form-section__sub">{{ ar ? 'اختر المجال الأنسب لهذا الدور' : 'Choose the most relevant hub for this role' }}</div>
                        </div>
                    </div>

                    <div class="hub-chips">
                        <button v-for="hub in allHubs"
                                :key="hub.id"
                                type="button"
                                class="hub-chip"
                                :class="{ 'hub-chip--active': form.hub_id == hub.id }"
                                :style="form.hub_id == hub.id
                                    ? `border-color:${hubColor(hub)};color:${hubColor(hub)};background:${hubColor(hub)}15`
                                    : ''"
                                @click="form.hub_id = hub.id">
                            <span class="hub-chip__dot"
                                  :style="{ background: hubColor(hub) }"></span>
                            {{ hubName(hub) }}
                        </button>
                    </div>
                    <div v-if="form.errors.hub_id" class="form-error">{{ form.errors.hub_id }}</div>
                </div>

                <!-- ── SECTION 2: Role Details ────────────────── -->
                <div class="form-section">
                    <div class="form-section__header">
                        <div class="form-section__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                            </svg>
                        </div>
                        <div>
                            <div class="form-section__title">{{ ar ? 'تفاصيل الدور' : 'Role Details' }}</div>
                            <div class="form-section__sub">{{ ar ? 'المسمى الوظيفي والشركة والموقع' : 'Job title, company, and location' }}</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">{{ ar ? 'المسمى الوظيفي' : 'Job Title' }} <span class="form-required">*</span></label>
                            <input v-model="form.job_title"
                                   class="form-input"
                                   :class="{ 'form-input--error': form.errors.job_title }"
                                   :placeholder="ar ? 'مثال: محلل مالي أول' : 'e.g. Senior Financial Analyst'" />
                            <div v-if="form.errors.job_title" class="form-error">{{ form.errors.job_title }}</div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">{{ ar ? 'اسم الشركة' : 'Company Name' }} <span class="form-required">*</span></label>
                            <input v-model="form.company_name"
                                   class="form-input"
                                   :class="{ 'form-input--error': form.errors.company_name }"
                                   :placeholder="ar ? 'اسم شركتك' : 'Your company name'" />
                            <div v-if="form.errors.company_name" class="form-error">{{ form.errors.company_name }}</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">{{ ar ? 'القطاع' : 'Industry' }} <span class="form-required">*</span></label>
                            <input v-model="form.industry"
                                   class="form-input"
                                   :placeholder="ar ? 'مثال: تصنيع، خدمات مالية' : 'e.g. Manufacturing, Financial Services'" />
                        </div>

                        <div class="form-group">
                            <label class="form-label">{{ ar ? 'المدينة' : 'City' }}</label>
                            <input v-model="form.location_city"
                                   class="form-input"
                                   :placeholder="ar ? 'القاهرة، دبي...' : 'Cairo, Dubai...'" />
                        </div>
                    </div>

                    <!-- Job type -->
                    <div class="form-group">
                        <label class="form-label">{{ ar ? 'نوع الوظيفة' : 'Job Type' }} <span class="form-required">*</span></label>
                        <div class="type-chips">
                            <button v-for="jt in jobTypes"
                                    :key="jt.value"
                                    type="button"
                                    class="type-chip"
                                    :class="{ 'type-chip--active': form.job_type === jt.value }"
                                    @click="form.job_type = jt.value">
                                {{ ar ? jt.ar : jt.en }}
                            </button>
                        </div>
                    </div>
                </div>

                <!-- ── SECTION 3: Requirements ────────────────── -->
                <div class="form-section">
                    <div class="form-section__header">
                        <div class="form-section__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                            </svg>
                        </div>
                        <div>
                            <div class="form-section__title">{{ ar ? 'المتطلبات' : 'Requirements' }}</div>
                            <div class="form-section__sub">{{ ar ? 'الخبرة والمهارات والراتب' : 'Experience, skills, and compensation' }}</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">{{ ar ? 'الخبرة المطلوبة (سنوات)' : 'Min Experience (years)' }}</label>
                            <input v-model.number="form.min_experience_years"
                                   type="number" min="0" max="30"
                                   class="form-input" />
                        </div>

                        <div class="form-group">
                            <label class="form-label">{{ ar ? 'نطاق الراتب' : 'Salary Range' }} <span class="form-optional">({{ ar ? 'اختياري' : 'optional' }})</span></label>
                            <input v-model="form.salary_range"
                                   class="form-input"
                                   :placeholder="ar ? 'مثال: 15,000–20,000 ج.م' : 'e.g. 15,000–20,000 EGP'" />
                        </div>
                    </div>

                    <!-- Skills -->
                    <div class="form-group">
                        <label class="form-label">{{ ar ? 'المهارات المطلوبة' : 'Required Skills' }} <span class="form-optional">({{ ar ? 'حتى 20' : 'up to 20' }})</span></label>
                        <div class="skill-field" :class="{ 'skill-field--has-chips': form.required_skills.length }">
                            <!-- Existing chips inside the field -->
                            <span v-for="(s, i) in form.required_skills"
                                  :key="i"
                                  class="skill-chip">
                                {{ s }}
                                <button type="button" @click="removeSkill(i)" class="skill-remove">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                                    </svg>
                                </button>
                            </span>
                            <!-- Input -->
                            <input v-model="skillInput"
                                   class="skill-input"
                                   :placeholder="form.required_skills.length === 0
                                       ? (ar ? 'اكتب مهارة واضغط Enter أو فاصلة' : 'Type a skill and press Enter or comma')
                                       : ''"
                                   @keydown="onSkillKey" />
                        </div>
                        <p class="form-hint">
                            {{ ar ? 'اضغط Enter أو فاصلة بعد كل مهارة' : 'Press Enter or comma after each skill' }}
                        </p>
                    </div>
                </div>

                <!-- ── SECTION 4: Description ──────────────────── -->
                <div class="form-section">
                    <div class="form-section__header">
                        <div class="form-section__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="17" y1="10" x2="3" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="17" y1="18" x2="3" y2="18"/>
                            </svg>
                        </div>
                        <div>
                            <div class="form-section__title">{{ ar ? 'وصف الوظيفة' : 'Job Description' }}</div>
                            <div class="form-section__sub">{{ ar ? 'صف الدور والمسؤوليات بوضوح' : 'Describe the role and responsibilities clearly' }}</div>
                        </div>
                    </div>

                    <div class="form-group" style="margin-bottom:0">
                        <textarea v-model="form.description"
                                  class="form-input form-textarea"
                                  rows="6"
                                  :class="{ 'form-input--error': form.errors.description }"
                                  :placeholder="ar
                                      ? 'اكتب وصفاً واضحاً للدور، المسؤوليات، وما تبحث عنه في المرشح المثالي...'
                                      : 'Write a clear description of the role, responsibilities, and what you\'re looking for in the ideal candidate...'" />
                        <div v-if="form.errors.description" class="form-error">{{ form.errors.description }}</div>
                    </div>
                </div>

                <!-- ── SUBMIT ──────────────────────────────────── -->
                <div class="submit-area">
                    <button type="button"
                            class="submit-btn"
                            :disabled="form.processing"
                            @click="submit">
                        <svg v-if="!form.processing" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
                        </svg>
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="spin">
                            <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
                        </svg>
                        {{ form.processing
                            ? (ar ? 'جاري النشر...' : 'Publishing...')
                            : (ar ? 'نشر الوظيفة' : 'Publish Listing') }}
                    </button>
                    <p class="submit-note">
                        {{ ar
                            ? 'الإعلان سيظهر فور النشر لجميع أعضاء المجال المختار'
                            : 'The listing will be visible immediately to all members in the selected hub' }}
                    </p>
                </div>

            </div><!-- /create-form -->
        </div><!-- /create-page -->
    </AppLayout>
</template>

<style scoped>
.create-page {
    padding: 16px 16px 120px;
    max-width: 1250px;
    margin: 0 auto;
}

/* ── Back link ──────────────────────────────────────────────────── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color var(--transition-fast);
}

.back-link:hover { color: var(--color-primary); }

[dir="rtl"] .back-link svg { transform: scaleX(-1); }

/* ══════════════════════════════════════════════════════════════
   HERO BANNER
══════════════════════════════════════════════════════════════ */
.create-hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    border-top: 3px solid var(--color-primary);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.create-hero__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(29, 158, 117, 0.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.create-hero__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.create-hero__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin: 0;
}

.create-hero__sub {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.create-hero__steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--color-border);
}

.create-hero__step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.create-hero__step-num {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(29, 158, 117, 0.12);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.create-hero__step-arrow {
    font-size: 12px;
    color: var(--color-text-muted);
    opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════════
   FORM — sections
══════════════════════════════════════════════════════════════ */
.create-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    border-inline-start: 3px solid var(--color-primary);
    padding: 18px 18px 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Section header */
.form-section__header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.form-section__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: rgba(29, 158, 117, 0.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.form-section__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.form-section__sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ── Form primitives ────────────────────────────────────────────── */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 4px;
}

.form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.form-required { color: var(--color-primary); }
.form-optional  { color: var(--color-text-muted); font-weight: 400; }

.form-input {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--color-text-primary);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    font-family: inherit;
    box-sizing: border-box;
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.1);
}

.form-input--error { border-color: #e53e3e; }
.form-textarea { resize: vertical; min-height: 130px; }

.form-error { font-size: 11px; color: #e53e3e; margin-top: 2px; }

.form-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════
   HUB CHIPS — with colored dot
══════════════════════════════════════════════════════════════ */
.hub-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hub-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.hub-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.hub-chip--active {
    font-weight: 600;
}

.hub-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   JOB TYPE CHIPS
══════════════════════════════════════════════════════════════ */
.type-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.type-chip {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.type-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.type-chip--active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(29, 158, 117, 0.08);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   SKILLS — chips inside the input field
══════════════════════════════════════════════════════════════ */
.skill-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 7px 10px;
    min-height: 42px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: text;
}

.skill-field:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.1);
}

.skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(29, 158, 117, 0.1);
    border: 1px solid rgba(29, 158, 117, 0.25);
    border-radius: 20px;
    padding: 3px 8px 3px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary);
    white-space: nowrap;
}

.skill-remove {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.skill-remove:hover { opacity: 1; }

.skill-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--color-text-primary);
    font-family: inherit;
    flex: 1;
    min-width: 140px;
}

.skill-input::placeholder { color: var(--color-text-muted); }

/* ══════════════════════════════════════════════════════════════
   SUBMIT
══════════════════════════════════════════════════════════════ */
.submit-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.submit-btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-button);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}

.submit-btn:hover:not(:disabled) {
    background: var(--color-primary-light);
    box-shadow: 0 4px 16px rgba(29, 158, 117, 0.35);
}

.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.submit-note {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .create-page { padding: 24px 32px 60px; }

    .create-hero {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 16px;
    }

    .create-hero__icon { margin-top: 2px; }

    .create-hero__text {
        flex: 1;
        min-width: 0;
    }

    .create-hero__steps {
        width: 100%;
        padding-top: 12px;
    }

    .submit-btn {
        max-width: 320px;
        align-self: flex-start;
    }

    .submit-area {
        align-items: flex-start;
    }

    .submit-note { text-align: start; }
}

/* Mobile: form-row collapses to single column below 520px */
@media (max-width: 519px) {
    .form-row { grid-template-columns: 1fr; }
}
</style>