<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/Freelance/Briefs/Create.vue
//  Location: resources/js/Pages/Member/Freelance/Briefs/Create.vue
// ══════════════════════════════════════════════════════════════════

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

const props = defineProps({
    hubs: { type: Array, default: () => [] },
})

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

// ── Required skills dynamic list ─────────────────────────────
const skills = ref([''])
function addSkill()     { if (skills.value.length < 10) skills.value.push('') }
function removeSkill(i) { if (skills.value.length > 1) skills.value.splice(i, 1) }

// ── Duration presets ──────────────────────────────────────────
const durationPresets = [
    { en: '1–2 hours',  ar: '1-2 ساعة' },
    { en: 'Half a day', ar: 'نصف يوم' },
    { en: '1 day',      ar: 'يوم واحد' },
    { en: '2–3 days',   ar: '2-3 أيام' },
    { en: '1 week',     ar: 'أسبوع' },
    { en: '2–4 weeks',  ar: '2-4 أسابيع' },
    { en: 'Ongoing',    ar: 'مستمر' },
]
const durationCustom = ref(false)

// ── Timeline presets ──────────────────────────────────────────
const timelinePresets = [
    { en: 'Urgent — within 48 hours', ar: 'عاجل — خلال 48 ساعة' },
    { en: 'This week',                ar: 'هذا الأسبوع' },
    { en: 'This month',               ar: 'هذا الشهر' },
    { en: 'Flexible',                 ar: 'مرن' },
]
const timelineCustom = ref(false)

// ── Form ──────────────────────────────────────────────────────
const form = useForm({
    hub_id:            '',
    title:             '',
    description:       '',
    required_skills:   [],
    preferred_sector:  '',
    duration_estimate: '',
    timeline:          '',
    budget_min_egp:    '',
    budget_max_egp:    '',
    budget_is_visible: true,
})

function submit() {
    form.required_skills = skills.value.filter(s => s.trim() !== '')
    form.post(route('member.freelance.briefs.store'))
}

function hubColor(hub) {
    const colors = { finance: '#1D9E75', marketing: '#378ADD', sales: '#D85A30' }
    return colors[hub.slug] ?? 'var(--color-primary)'
}
function hubName(hub) { return ar.value ? hub.name_ar : hub.name_en }

function selectDuration(preset) {
    form.duration_estimate = ar.value ? preset.ar : preset.en
    durationCustom.value   = false
}

function selectTimeline(preset) {
    form.timeline        = ar.value ? preset.ar : preset.en
    timelineCustom.value = false
}
</script>

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

            <!-- ══ BACK LINK ══════════════════════════════════════ -->
            <Link :href="route('member.freelance.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 ? 'المساعدة والكسب' : 'Help & Earn' }}
            </Link>

            <!-- ══ 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">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="16" y1="13" x2="8" y2="13"/>
                        <line x1="16" y1="17" x2="8" y2="17"/>
                        <polyline points="10 9 9 9 8 9"/>
                    </svg>
                </div>
                <div class="create-hero__text">
                    <h1 class="create-hero__title">
                        {{ ar ? 'نشر طلب خدمة' : 'Post a Service Brief' }}
                    </h1>
                    <p class="create-hero__sub">
                        {{ ar
                            ? 'صف ما تحتاجه. المستقلون المناسبون سيرون طلبك ويبدون اهتمامهم. لا تُشارَك بياناتك حتى تُوافق.'
                            : 'Describe what you need. Matching freelancers will see your brief and express interest. Your details are never shared until you consent.' }}
                    </p>
                </div>
                <div class="create-hero__steps">
                    <span class="create-hero__step">
                        <span class="create-hero__step-num">1</span>
                        {{ ar ? 'انشر طلبك' : 'Post your brief' }}
                    </span>
                    <span class="create-hero__step-arrow">→</span>
                    <span class="create-hero__step">
                        <span class="create-hero__step-num">2</span>
                        {{ ar ? 'يبدي المستقلون اهتمامهم' : 'Freelancers express interest' }}
                    </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 ═══════════════════════════════════════════ -->
            <form @submit.prevent="submit" 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 brief' }}</div>
                        </div>
                    </div>

                    <div class="hub-chips">
                        <button
                            v-for="hub in hubs"
                            :key="hub.id"
                            type="button"
                            class="hub-chip"
                            :class="{ 'hub-chip--active': String(form.hub_id) === String(hub.id) }"
                            :style="String(form.hub_id) === String(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: What You Need ───────────────── -->
                <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">
                                <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
                            </svg>
                        </div>
                        <div>
                            <div class="form-section__title">{{ ar ? 'ماذا تحتاج؟' : 'What Do You Need?' }}</div>
                            <div class="form-section__sub">{{ ar ? 'العنوان والوصف التفصيلي للعمل المطلوب' : 'A clear title and full description of the work' }}</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            {{ ar ? 'عنوان الطلب' : 'Brief Title' }}
                            <span class="form-required">*</span>
                        </label>
                        <input
                            v-model="form.title"
                            type="text"
                            class="form-input"
                            :class="{ 'form-input--error': form.errors.title }"
                            :placeholder="ar
                                ? 'مثال: أحتاج شخصاً لمراجعة نموذج التسعير لدينا'
                                : 'e.g. Need someone to review our pricing model'"
                            maxlength="120"
                        />
                        <p class="form-hint">{{ form.title.length }}/120</p>
                        <div v-if="form.errors.title" class="form-error">{{ form.errors.title }}</div>
                    </div>

                    <div class="form-group" style="margin-bottom:0">
                        <label class="form-label">
                            {{ ar ? 'الوصف الكامل' : 'Full Description' }}
                            <span class="form-required">*</span>
                        </label>
                        <p class="form-hint" style="margin-bottom:6px">
                            {{ ar
                                ? 'كلما أعطيت تفاصيل أكثر، كان التطابق أفضل. أضف السياق وشكل النتيجة المطلوبة وأي قيود.'
                                : 'The more detail you give, the better the match. Include context, what the deliverable looks like, and any constraints.' }}
                        </p>
                        <textarea
                            v-model="form.description"
                            class="form-input form-textarea"
                            :class="{ 'form-input--error': form.errors.description }"
                            rows="6"
                            maxlength="1000"
                            :placeholder="ar
                                ? 'صف العمل بالتفصيل — ما لديك، ما تحتاجه، كيف تبدو النتيجة الناجحة…'
                                : 'Describe the work in detail — what you have, what you need, what success looks like…'"
                        ></textarea>
                        <p class="form-hint">{{ form.description.length }}/1000</p>
                        <div v-if="form.errors.description" class="form-error">{{ form.errors.description }}</div>
                    </div>
                </div>

                <!-- ── SECTION 3: Skills & Sector ─────────────── -->
                <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 ? 'المهارات والقطاع' : 'Skills & Sector' }}</div>
                            <div class="form-section__sub">{{ ar ? 'المهارات والخبرة القطاعية المطلوبة — كلاهما اختياري' : 'Skills and sector experience you are looking for — both optional' }}</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            {{ ar ? 'المهارات المطلوبة' : 'Skills You Are Looking For' }}
                            <span class="form-optional">({{ ar ? 'حتى 10' : 'up to 10' }})</span>
                        </label>
                        <div class="services-list">
                            <div v-for="(skill, i) in skills" :key="i" class="service-row">
                                <input
                                    v-model="skills[i]"
                                    type="text"
                                    class="form-input"
                                    :placeholder="ar ? 'مثال: النمذجة المالية' : 'e.g. Financial modelling'"
                                    maxlength="80"
                                />
                                <button
                                    v-if="skills.length > 1"
                                    type="button"
                                    class="service-remove"
                                    @click="removeSkill(i)"
                                >
                                    <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>
                            </div>
                        </div>
                        <button
                            v-if="skills.length < 10"
                            type="button"
                            class="add-service-btn"
                            @click="addSkill"
                        >
                            + {{ ar ? 'إضافة مهارة' : 'Add Skill' }}
                        </button>
                    </div>

                    <div class="form-group" style="margin-bottom:0">
                        <label class="form-label">
                            {{ ar ? 'الخلفية القطاعية المفضلة' : 'Preferred Sector Background' }}
                            <span class="form-optional">({{ ar ? 'اختياري' : 'optional' }})</span>
                        </label>
                        <input
                            v-model="form.preferred_sector"
                            type="text"
                            class="form-input"
                            :placeholder="ar ? 'مثال: سلع استهلاكية، عقارات، رعاية صحية…' : 'e.g. FMCG, Real Estate, Healthcare…'"
                            maxlength="80"
                        />
                    </div>
                </div>

                <!-- ── SECTION 4: Duration & Timeline ─────────── -->
                <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">
                                <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                            </svg>
                        </div>
                        <div>
                            <div class="form-section__title">{{ ar ? 'المدة والجدول الزمني' : 'Duration & Timeline' }}</div>
                            <div class="form-section__sub">{{ ar ? 'كم من الوقت يستغرق العمل ومتى تحتاجه' : 'How long the work takes and when you need it done' }}</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <!-- Duration -->
                        <div class="form-group">
                            <label class="form-label">{{ ar ? 'المدة التقديرية' : 'Estimated Duration' }}</label>
                            <div class="type-chips">
                                <button
                                    v-for="preset in durationPresets"
                                    :key="preset.en"
                                    type="button"
                                    class="type-chip"
                                    :class="{ 'type-chip--active': form.duration_estimate === (ar ? preset.ar : preset.en) && !durationCustom }"
                                    @click="selectDuration(preset)"
                                >{{ ar ? preset.ar : preset.en }}</button>
                                <button
                                    type="button"
                                    class="type-chip"
                                    :class="{ 'type-chip--active': durationCustom }"
                                    @click="durationCustom = true; form.duration_estimate = ''"
                                >{{ ar ? 'أخرى…' : 'Other…' }}</button>
                            </div>
                            <input
                                v-if="durationCustom"
                                v-model="form.duration_estimate"
                                type="text"
                                class="form-input"
                                style="margin-top:8px"
                                :placeholder="ar ? 'صف المدة…' : 'Describe duration…'"
                                maxlength="50"
                            />
                        </div>

                        <!-- Timeline -->
                        <div class="form-group">
                            <label class="form-label">{{ ar ? 'متى تحتاجه؟' : 'When Do You Need It?' }}</label>
                            <div class="type-chips">
                                <button
                                    v-for="preset in timelinePresets"
                                    :key="preset.en"
                                    type="button"
                                    class="type-chip"
                                    :class="{ 'type-chip--active': form.timeline === (ar ? preset.ar : preset.en) && !timelineCustom }"
                                    @click="selectTimeline(preset)"
                                >{{ ar ? preset.ar : preset.en }}</button>
                                <button
                                    type="button"
                                    class="type-chip"
                                    :class="{ 'type-chip--active': timelineCustom }"
                                    @click="timelineCustom = true; form.timeline = ''"
                                >{{ ar ? 'أخرى…' : 'Other…' }}</button>
                            </div>
                            <input
                                v-if="timelineCustom"
                                v-model="form.timeline"
                                type="text"
                                class="form-input"
                                style="margin-top:8px"
                                :placeholder="ar ? 'صف الجدول الزمني…' : 'Describe timeline…'"
                                maxlength="100"
                            />
                        </div>
                    </div>
                </div>

                <!-- ── SECTION 5: Budget ───────────────────────── -->
                <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="12" y1="1" x2="12" y2="23"/>
                                <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                            </svg>
                        </div>
                        <div>
                            <div class="form-section__title">{{ ar ? 'الميزانية' : 'Budget' }}</div>
                            <div class="form-section__sub">{{ ar ? 'نطاق الميزانية — اختياري، يساعد المستقلين على تحديد مناسبتهم' : 'Budget range — optional, helps freelancers self-select' }}</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            {{ ar ? 'نطاق الميزانية (جنيه)' : 'Budget Range (EGP)' }}
                            <span class="form-optional">({{ ar ? 'اختياري' : 'optional' }})</span>
                        </label>
                        <div class="rate-row">
                            <input
                                v-model="form.budget_min_egp"
                                type="number"
                                class="form-input"
                                :placeholder="ar ? 'الحد الأدنى' : 'Min'"
                                min="0"
                            />
                            <span class="rate-sep">–</span>
                            <input
                                v-model="form.budget_max_egp"
                                type="number"
                                class="form-input"
                                :placeholder="ar ? 'الحد الأقصى' : 'Max'"
                                min="0"
                            />
                        </div>
                        <div v-if="form.errors.budget_max_egp" class="form-error">{{ form.errors.budget_max_egp }}</div>
                        <label class="check-label">
                            <input v-model="form.budget_is_visible" type="checkbox" class="check-input" />
                            {{ ar ? 'عرض الميزانية على الطلب' : 'Show budget on the brief' }}
                        </label>
                    </div>

                    <!-- Privacy note inside this section -->
                    <div class="privacy-note">
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;margin-top:1px">
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                        </svg>
                        <p>
                            {{ ar
                                ? 'لن يظهر اسمك أو معلومات الاتصال الخاصة بك على الطلب أبداً. تُشارَك فقط بعد موافقة صريحة منك ومن المستقل.'
                                : 'Your name and contact information are never shown on the brief. They are only shared after you and the freelancer both explicitly consent.' }}
                        </p>
                    </div>
                </div>

                <!-- ── SUBMIT ──────────────────────────────────── -->
                <div class="submit-area">
                    <button
                        type="submit"
                        class="submit-btn"
                        :disabled="form.processing"
                    >
                        <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 ? 'جارٍ النشر…' : 'Posting…')
                            : (ar ? 'نشر الطلب' : 'Post Brief') }}
                    </button>
                    <p class="submit-note">
                        {{ ar
                            ? 'سيظهر طلبك فور النشر للمستقلين في المجال المختار'
                            : 'Your brief will be visible immediately to freelancers in the selected hub' }}
                    </p>
                </div>

            </form>
        </div>
    </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;
}

.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: 16px;
}

.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: 140px; }

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

/* ── Hub chips ───────────────────────────────────────────────────── */
.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;
}

/* ── Type / preset chips ─────────────────────────────────────────── */
.type-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.type-chip {
    padding: 6px 12px;
    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 / services list ──────────────────────────────────────── */
.services-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.service-row .form-input { flex: 1; }

.service-remove {
    width: 32px;
    height: 38px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.service-remove:hover {
    border-color: #e53e3e;
    color: #e53e3e;
}

.add-service-btn {
    align-self: flex-start;
    padding: 7px 14px;
    border: 1px dashed var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    font-family: inherit;
    transition: background var(--transition-fast);
}

.add-service-btn:hover { background: rgba(29, 158, 117, 0.06); }

/* ── Rate / budget row ───────────────────────────────────────────── */
.rate-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rate-row .form-input { flex: 1; }

.rate-sep {
    color: var(--color-text-muted);
    font-weight: 700;
    flex-shrink: 0;
}

.check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-secondary);
    cursor: pointer;
    margin-top: 8px;
}

.check-input {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

/* ── Privacy note ────────────────────────────────────────────────── */
.privacy-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    color: var(--color-text-muted);
}

.privacy-note p {
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
    color: var(--color-text-secondary);
}

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

@media (max-width: 519px) {
    .form-row { grid-template-columns: 1fr; }
}
</style>