<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/Freelance/Profiles/Create.vue
//  Location: resources/js/Pages/Member/Freelance/Profiles/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: () => [] },
    myProfile: { type: Object, default: null },
})

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

// ── Services dynamic list ─────────────────────────────────────
const services = ref([''])
function addService()     { if (services.value.length < 10) services.value.push('') }
function removeService(i) { if (services.value.length > 1)  services.value.splice(i, 1) }

// ── Form ──────────────────────────────────────────────────────
const form = useForm({
    hub_id:           '',
    headline:         '',
    description:      '',
    services:         [],
    sector_expertise: [],
    experience_level: '',
    availability:     '',
    rate_min_egp:     '',
    rate_max_egp:     '',
    rate_is_visible:  true,
    linkedin_url:     '',
})

function submit() {
    form.services = services.value.filter(s => s.trim() !== '')
    form.post(route('member.freelance.profile.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 }

const experienceLevels = [
    { value: 'student',   en: 'Student',            ar: 'طالب' },
    { value: 'fresh',     en: 'Fresh Graduate',      ar: 'خريج حديث' },
    { value: 'junior',    en: 'Junior (1–3 yrs)',    ar: 'مبتدئ (1-3 سنوات)' },
    { value: 'mid',       en: 'Mid-Level (3–5 yrs)', ar: 'متوسط (3-5 سنوات)' },
    { value: 'senior',    en: 'Senior (5–10 yrs)',   ar: 'خبير (5-10 سنوات)' },
    { value: 'senior_10', en: '10–15 Years',         ar: '10-15 سنة' },
    { value: 'senior_15', en: '15–20 Years',         ar: '15-20 سنة' },
    { value: 'senior_20', en: '20+ Years',           ar: 'أكثر من 20 سنة' },
]

const availabilityOptions = [
    { value: 'weekends',    en: 'Weekends only',        ar: 'الإجازات فقط' },
    { value: 'evenings',    en: 'Evenings after work',  ar: 'المساءات بعد العمل' },
    { value: 'full',        en: 'Fully available',      ar: 'متفرغ كامل' },
    { value: 'unavailable', en: 'Unavailable now',      ar: 'غير متاح الآن' },
]
</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="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                        <circle cx="12" cy="7" r="4"/>
                    </svg>
                </div>
                <div class="create-hero__text">
                    <h1 class="create-hero__title">
                        {{ ar ? 'إنشاء ملفك المهني' : 'Create Your Profile' }}
                    </h1>
                    <p class="create-hero__sub">
                        {{ ar
                            ? 'ملفك الشخصي هو كيف يجدك الأعضاء الآخرون ويتواصلون معك. كن محدداً في ما تقدمه.'
                            : 'Your profile is how other members find and hire you. Be specific about what you offer.' }}
                    </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 ? 'أنشئ ملفك' : 'Build your profile' }}
                    </span>
                    <span class="create-hero__step-arrow">→</span>
                    <span class="create-hero__step">
                        <span class="create-hero__step-num">2</span>
                        {{ ar ? 'يتواصل معك الأعضاء' : 'Members reach out' }}
                    </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 ? 'المجال المهني' : 'Professional Hub' }}</div>
                            <div class="form-section__sub">{{ ar ? 'اختر المجال الذي تقدم فيه خدماتك' : 'Choose the hub that matches your expertise' }}</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: Profile Identity ───────────────── -->
                <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 ? 'هويتك المهنية' : 'Profile Identity' }}</div>
                            <div class="form-section__sub">{{ ar ? 'العنوان المهني ووصف خدماتك' : 'Your headline and a description of what you offer' }}</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            {{ ar ? 'العنوان المهني' : 'Professional Headline' }}
                            <span class="form-required">*</span>
                        </label>
                        <input
                            v-model="form.headline"
                            class="form-input"
                            :class="{ 'form-input--error': form.errors.headline }"
                            :placeholder="ar ? 'مثال: النمذجة المالية ودراسات الجدوى' : 'e.g. Financial Modelling & Feasibility Studies'"
                            maxlength="120"
                        />
                        <p class="form-hint">{{ form.headline.length }}/120</p>
                        <div v-if="form.errors.headline" class="form-error">{{ form.errors.headline }}</div>
                    </div>

                    <div class="form-group" style="margin-bottom:0">
                        <label class="form-label">
                            {{ ar ? 'نبذة عن خدماتك' : 'About Your Services' }}
                            <span class="form-required">*</span>
                        </label>
                        <textarea
                            v-model="form.description"
                            class="form-input form-textarea"
                            :class="{ 'form-input--error': form.errors.description }"
                            rows="5"
                            maxlength="1000"
                            :placeholder="ar
                                ? 'صف ما تفعله وخبرتك ونوع العمل الذي تبحث عنه…'
                                : 'Describe what you do, your experience, and the type of work you are looking for…'"
                        ></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: Specific Services ──────────────── -->
                <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 ? 'الخدمات المحددة' : 'Specific Services' }}</div>
                            <div class="form-section__sub">{{ ar ? 'أضف حتى 10 خدمات محددة تقدمها' : 'Add up to 10 specific services you offer' }}</div>
                        </div>
                    </div>

                    <div class="services-list">
                        <div v-for="(service, i) in services" :key="i" class="service-row">
                            <input
                                v-model="services[i]"
                                type="text"
                                class="form-input"
                                :placeholder="ar ? 'مثال: نمذجة التدفق النقدي' : 'e.g. Cash flow modelling'"
                                maxlength="80"
                            />
                            <button
                                v-if="services.length > 1"
                                type="button"
                                class="service-remove"
                                @click="removeService(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="services.length < 10"
                        type="button"
                        class="add-service-btn"
                        @click="addService"
                    >
                        + {{ ar ? 'إضافة خدمة' : 'Add Service' }}
                    </button>
                    <div v-if="form.errors.services" class="form-error">{{ form.errors.services }}</div>
                </div>

                <!-- ── SECTION 4: Experience & Availability ───────── -->
                <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 ? 'الخبرة والتوفر' : 'Experience & Availability' }}</div>
                            <div class="form-section__sub">{{ ar ? 'مستوى خبرتك ومدى توفرك لقبول أعمال جديدة' : 'Your experience level and how available you are for new work' }}</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">
                                {{ ar ? 'مستوى الخبرة' : 'Experience Level' }}
                                <span class="form-required">*</span>
                            </label>
                            <div class="type-chips">
                                <button
                                    v-for="lvl in experienceLevels"
                                    :key="lvl.value"
                                    type="button"
                                    class="type-chip"
                                    :class="{ 'type-chip--active': form.experience_level === lvl.value }"
                                    @click="form.experience_level = lvl.value"
                                >{{ ar ? lvl.ar : lvl.en }}</button>
                            </div>
                            <div v-if="form.errors.experience_level" class="form-error">{{ form.errors.experience_level }}</div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">
                                {{ ar ? 'التوفر' : 'Availability' }}
                                <span class="form-required">*</span>
                            </label>
                            <div class="type-chips">
                                <button
                                    v-for="opt in availabilityOptions"
                                    :key="opt.value"
                                    type="button"
                                    class="type-chip"
                                    :class="{ 'type-chip--active': form.availability === opt.value }"
                                    @click="form.availability = opt.value"
                                >{{ ar ? opt.ar : opt.en }}</button>
                            </div>
                            <div v-if="form.errors.availability" class="form-error">{{ form.errors.availability }}</div>
                        </div>
                    </div>
                </div>

                <!-- ── SECTION 5: Rate & LinkedIn ─────────────────── -->
                <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 ? 'الأجر والتواصل' : 'Rate & Trust Signals' }}</div>
                            <div class="form-section__sub">{{ ar ? 'نطاق الأجر اليومي ورابط LinkedIn — كلاهما اختياري' : 'Day rate range and LinkedIn link — both optional' }}</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">
                                {{ ar ? 'الأجر اليومي (جنيه)' : 'Day Rate (EGP)' }}
                                <span class="form-optional">({{ ar ? 'اختياري' : 'optional' }})</span>
                            </label>
                            <div class="rate-row">
                                <input v-model="form.rate_min_egp" type="number" class="form-input" :placeholder="ar ? 'الأدنى' : 'Min'" min="0" />
                                <span class="rate-sep">–</span>
                                <input v-model="form.rate_max_egp" type="number" class="form-input" :placeholder="ar ? 'الأقصى' : 'Max'" min="0" />
                            </div>
                            <label class="check-label">
                                <input v-model="form.rate_is_visible" type="checkbox" class="check-input" />
                                {{ ar ? 'عرض الأجر على ملفي' : 'Show rate on my profile' }}
                            </label>
                            <div v-if="form.errors.rate_max_egp" class="form-error">{{ form.errors.rate_max_egp }}</div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">
                                {{ ar ? 'رابط LinkedIn' : 'LinkedIn URL' }}
                                <span class="form-optional">({{ ar ? 'اختياري' : 'optional' }})</span>
                            </label>
                            <input
                                v-model="form.linkedin_url"
                                type="url"
                                class="form-input"
                                placeholder="https://www.linkedin.com/in/your-name"
                            />
                            <p class="form-hint">
                                {{ ar
                                    ? 'يبني الثقة قبل أن تحصل على تقييمات'
                                    : 'Builds trust before you have any reviews' }}
                            </p>
                            <div v-if="form.errors.linkedin_url" class="form-error">{{ form.errors.linkedin_url }}</div>
                        </div>
                    </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 ? 'جارٍ الحفظ…' : 'Saving…')
                            : (ar ? 'إنشاء الملف الشخصي' : 'Create Profile') }}
                    </button>
                    <p class="submit-note">
                        {{ ar
                            ? 'ملفك سيظهر فور النشر لأعضاء المجال المختار'
                            : 'Your profile will be visible immediately to members 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: 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: 120px; }

.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 ───────────────────────────────────────────────────── */
.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 / option chips ─────────────────────────────────────────── */
.type-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.type-chip {
    padding: 6px 14px;
    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;
}

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

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