<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useForm, Link } from '@inertiajs/vue3'
import AccountLayout from '@/Layouts/AccountLayout.vue'
import AppStepper from '@/@core/components/AppStepper.vue'
import ConfigOptions from '@/Components/Checkout/ConfigOptions.vue'
import type { Plan, PaymentMethod, PlanConfigGroup } from '@/types'

interface OSTemplate {
  id: number
  name: string
  description?: string
  icon: string
  category: string
}

interface OSTemplateGroup {
  name: string
  description?: string
  icon: string
  templates: OSTemplate[]
}

interface PrefilledSelection {
  option_id: number
  value_id: number | null
  quantity: number | null
  text_value: string | null
  locked_price: number
  locked_hourly_price: number | null
}

interface Props {
  plan: Plan
  paymentMethods: PaymentMethod[]
  intent: Record<string, unknown>
  stripeKey: string
  osTemplates: OSTemplate[]
  osTemplateGroups: OSTemplateGroup[]
  configGroups?: PlanConfigGroup[]
  mode?: 'standard' | 'custom'
  prefilledSelections?: PrefilledSelection[]
  setupFee?: number
}

defineOptions({ layout: AccountLayout })

const props = defineProps<Props>()

const selectedGateway = ref('stripe')
const selectedPaymentMethod = ref(props.paymentMethods?.[0]?.id || '')
const couponCode = ref('')
const couponApplied = ref(false)
const couponDiscount = ref(0)
const couponError = ref('')

// Billing cycle selection — pre-select from URL query param if present
const urlParams = new URLSearchParams(window.location.search)
const initialCycle = (urlParams.get('cycle') || 'monthly') as 'monthly' | 'quarterly' | 'semi_annual' | 'annual'
const billingCycle = ref<'monthly' | 'quarterly' | 'semi_annual' | 'annual'>(initialCycle)

const billingCycles = [
  { value: 'monthly', label: 'Monthly', months: 1, discount: 0, popular: false },
  { value: 'quarterly', label: 'Quarterly', months: 3, discount: 0.05, popular: false },
  { value: 'semi_annual', label: 'Semi-Annual', months: 6, discount: 0.10, popular: true },
  { value: 'annual', label: 'Annual', months: 12, discount: 0.15, popular: false },
] as const

// Server Configuration
const selectedOS = ref(props.osTemplates[0]?.id || null)
const authMethod = ref<'password' | 'ssh'>('password')
const sshKey = ref('')
const generatedPrivateKey = ref('')
const isGenerating = ref(false)
const expandedPanels = ref([0]) // Default to first panel (index 0) expanded

// Configurable options state — seeded from server-provided prefilledSelections (estimator deep-link)
const configSelections = ref<PrefilledSelection[]>(props.prefilledSelections ? [...props.prefilledSelections] : [])
const configTotalPrice = ref<number>(
  props.prefilledSelections?.reduce((sum, s) => sum + (s.locked_price || 0), 0) ?? 0
)

const hasConfigGroups = computed<boolean>(() => {
  return (props.configGroups ?? []).length > 0
})

const isCustomMode = computed<boolean>(() => props.mode === 'custom')

const selectedCycle = computed(() =>
  billingCycles.find(c => c.value === billingCycle.value) || billingCycles[0]
)

const monthlyPrice = computed(() => parseFloat(props.plan.price))

// Get price for the selected billing cycle from server-provided plan.prices
function getSelectedPrice(): number {
  const planPrice = props.plan.prices?.find(
    (p: { billing_cycle: string }) => p.billing_cycle === billingCycle.value
  )
  return planPrice ? parseFloat(planPrice.price) : monthlyPrice.value
}

// Calculate price with billing cycle — use server prices if available, fall back to client-side discount
const basePriceWithCycle = computed(() => {
  if (props.plan.prices && props.plan.prices.length > 0) {
    const cyclePrice = getSelectedPrice()
    return cyclePrice * selectedCycle.value.months
  }
  // Fallback: client-side discount calculation
  const monthly = monthlyPrice.value
  const cycle = selectedCycle.value
  const discountedMonthly = monthly * (1 - cycle.discount)
  return discountedMonthly * cycle.months
})

// Setup fee is non-zero only on dedicated 14th-gen plans, and only
// charged on monthly/quarterly cycles. Waived on semi-annual / annual
// per the brainstorm.
const effectiveSetupFee = computed<number>(() => {
  const fee = props.setupFee ?? 0
  if (fee <= 0) return 0
  return ['monthly', 'quarterly'].includes(billingCycle.value) ? fee : 0
})

const total = computed(() => {
  const basePrice = basePriceWithCycle.value
  return Math.max(0, basePrice - couponDiscount.value + configTotalPrice.value + effectiveSetupFee.value).toFixed(2)
})

const savingsAmount = computed(() => {
  if (selectedCycle.value.discount === 0) return 0
  const monthly = monthlyPrice.value
  const months = selectedCycle.value.months
  const regularPrice = monthly * months
  const discountedPrice = basePriceWithCycle.value
  return regularPrice - discountedPrice
})

// Pricing display with proper suffixes
const pricingSuffix = computed(() => {
  switch (billingCycle.value) {
    case 'monthly':
      return '/mo'
    case 'quarterly':
      return ' for 3 months'
    case 'semi_annual':
      return ' for 6 months'
    case 'annual':
      return '/yr'
    default:
      return ''
  }
})

const priceDisplayText = computed(() => {
  return `$${total.value}${pricingSuffix.value}`
})

const form = useForm({
  gateway: 'stripe',
  payment_method_id: props.paymentMethods?.[0]?.id || '',
  coupon_code: '',
  billing_cycle: initialCycle,
  configuration: {
    os_template_id: props.osTemplates[0]?.id || null,
    auth_method: 'password' as 'password' | 'ssh',
    ssh_key: '',
  },
  config_selections: [] as Array<{
    option_id: number
    value_id: number | null
    quantity: number | null
    text_value: string | null
    locked_price: number
    locked_hourly_price: number | null
  }>,
  is_custom_build: false,
})

const selectedOSTemplate = computed(() =>
  props.osTemplates.find(t => t.id === selectedOS.value)
)

// Parse SPKI DER to extract RSA modulus/exponent and encode in OpenSSH wire format
function encodeOpenSSHRSA(publicKeyBuffer: ArrayBuffer): string {
  const spki = new Uint8Array(publicKeyBuffer)

  // Helper to read ASN.1 length
  function readLength(data: Uint8Array, pos: number): [number, number] {
    if (data[pos] < 0x80) return [data[pos], pos + 1]
    const numBytes = data[pos] & 0x7f
    let length = 0
    for (let i = 0; i < numBytes; i++) {
      length = (length << 8) | data[pos + 1 + i]
    }
    return [length, pos + 1 + numBytes]
  }

  // Helper to read ASN.1 INTEGER and return its bytes
  function readInteger(data: Uint8Array, pos: number): [Uint8Array, number] {
    if (data[pos] !== 0x02) throw new Error('Expected INTEGER')
    const [len, dataStart] = readLength(data, pos + 1)
    return [data.slice(dataStart, dataStart + len), dataStart + len]
  }

  let offset = 0

  // Outer SEQUENCE
  if (spki[offset] !== 0x30) throw new Error('Expected SEQUENCE')
  ;[, offset] = readLength(spki, offset + 1)

  // AlgorithmIdentifier SEQUENCE - skip it
  if (spki[offset] !== 0x30) throw new Error('Expected SEQUENCE')
  const [algLen, algDataStart] = readLength(spki, offset + 1)
  offset = algDataStart + algLen

  // BIT STRING
  if (spki[offset] !== 0x03) throw new Error('Expected BIT STRING')
  ;[, offset] = readLength(spki, offset + 1)
  offset++ // skip unused bits byte

  // RSAPublicKey SEQUENCE
  if (spki[offset] !== 0x30) throw new Error('Expected SEQUENCE')
  ;[, offset] = readLength(spki, offset + 1)

  // Read modulus (n) and exponent (e)
  const [modulusBytes, nextPos] = readInteger(spki, offset)
  const [exponentBytes] = readInteger(spki, nextPos)

  // Build OpenSSH wire format: string "ssh-rsa", mpint e, mpint n
  function encodeSSHString(data: Uint8Array): Uint8Array {
    const buf = new Uint8Array(4 + data.length)
    const view = new DataView(buf.buffer)
    view.setUint32(0, data.length)
    buf.set(data, 4)
    return buf
  }

  const keyType = new TextEncoder().encode('ssh-rsa')
  const parts = [
    encodeSSHString(keyType),
    encodeSSHString(exponentBytes),
    encodeSSHString(modulusBytes),
  ]

  const totalLen = parts.reduce((sum, p) => sum + p.length, 0)
  const wireFormat = new Uint8Array(totalLen)
  let pos = 0
  for (const part of parts) {
    wireFormat.set(part, pos)
    pos += part.length
  }

  return `ssh-rsa ${btoa(String.fromCharCode(...wireFormat))} generated@ezscale.cloud`
}

// SSH Key Generation using Web Crypto API (RSA-4096)
const generateSSHKeyPair = async (): Promise<void> => {
  isGenerating.value = true

  try {
    // Generate RSA-4096 key pair using Web Crypto API
    const keyPair = await window.crypto.subtle.generateKey(
      {
        name: 'RSASSA-PKCS1-v1_5',
        modulusLength: 4096,
        publicExponent: new Uint8Array([1, 0, 1]),
        hash: 'SHA-256',
      },
      true,
      ['sign', 'verify'],
    )

    // Export private key in PKCS#8 PEM format
    const privateKeyBuffer = await window.crypto.subtle.exportKey('pkcs8', keyPair.privateKey)
    const privateKeyBase64 = arrayBufferToBase64(privateKeyBuffer)
    const privateKeyPem = formatPEM(privateKeyBase64, 'PRIVATE KEY')

    // Export public key and convert to proper OpenSSH format
    const publicKeyBuffer = await window.crypto.subtle.exportKey('spki', keyPair.publicKey)
    const publicKeyOpenSSH = encodeOpenSSHRSA(publicKeyBuffer)

    // Set keys
    sshKey.value = publicKeyOpenSSH
    generatedPrivateKey.value = privateKeyPem
  } catch (error) {
    console.error('Failed to generate SSH key pair:', error)
    alert('Failed to generate SSH key pair. Please try again or use an existing key.')
  } finally {
    isGenerating.value = false
  }
}

const arrayBufferToBase64 = (buffer: ArrayBuffer): string => {
  const bytes = new Uint8Array(buffer)
  let binary = ''
  for (let i = 0; i < bytes.byteLength; i++) {
    binary += String.fromCharCode(bytes[i])
  }
  return btoa(binary)
}

const formatPEM = (base64: string, type: string): string => {
  const lines = base64.match(/.{1,64}/g) || []
  return `-----BEGIN ${type}-----\n${lines.join('\n')}\n-----END ${type}-----`
}

const downloadPrivateKey = (): void => {
  const blob = new Blob([generatedPrivateKey.value], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'ezscale_vps_private_key.pem'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

const applyCoupon = async (): Promise<void> => {
  couponError.value = ''
  couponApplied.value = false

  try {
    const response = await fetch('/checkout/apply-coupon', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
        'Accept': 'application/json',
      },
      body: JSON.stringify({
        code: couponCode.value,
        plan_id: props.plan.id,
      }),
    })

    const data = await response.json()

    if (data.valid) {
      couponApplied.value = true
      couponDiscount.value = data.discount
    } else {
      couponError.value = data.message || 'Invalid coupon.'
    }
  } catch {
    couponError.value = 'Failed to validate coupon.'
  }
}

const submit = (): void => {
  // Require OS selection for VPS plans
  if (isVPS.value && !selectedOS.value) {
    return
  }

  form.gateway = selectedGateway.value
  form.payment_method_id = selectedPaymentMethod.value
  form.coupon_code = couponApplied.value ? couponCode.value : ''
  form.billing_cycle = billingCycle.value

  // Update configuration
  form.configuration.os_template_id = selectedOS.value
  form.configuration.auth_method = authMethod.value
  form.configuration.ssh_key = authMethod.value === 'ssh' ? sshKey.value : ''

  // Include configurable option selections
  form.config_selections = configSelections.value
  form.is_custom_build = isCustomMode.value

  sessionStorage.removeItem(PROGRESS_KEY)
  form.post(`/checkout/${props.plan.id}`)
}

const isVPS = computed(() => props.plan.service_type === 'vps')

// Visual stepper state
const checkoutSteps = computed(() => {
  const steps = [
    { title: 'Billing Cycle', icon: 'tabler-calendar-clock' },
    { title: 'Payment Method', icon: 'tabler-credit-card' },
  ]

  if (hasConfigGroups.value) {
    steps.splice(1, 0, { title: 'Configuration', icon: 'tabler-adjustments' })
  }

  if (isVPS.value) {
    const configIdx = hasConfigGroups.value ? 2 : 1
    steps.splice(configIdx, 0, { title: 'Server Config', icon: 'tabler-settings' })
  }

  return steps
})

const currentStepIndex = ref(0)
const sectionRefs = ref<HTMLElement[]>([])
const paymentStepIndex = computed(() => isVPS.value ? 2 : 1)

// SSH key validation
const sshKeyError = ref('')
const validateSSHKey = () => {
  if (!sshKey.value || authMethod.value !== 'ssh') {
    sshKeyError.value = ''
    return
  }

  const sshKeyPattern = /^(ssh-rsa|ssh-ed25519|ecdsa-sha2-nistp256|ecdsa-sha2-nistp384|ecdsa-sha2-nistp521)\s+[A-Za-z0-9+/=]+(\s+.+)?$/
  if (!sshKeyPattern.test(sshKey.value.trim())) {
    sshKeyError.value = 'Invalid SSH key format. Must start with ssh-rsa, ssh-ed25519, or ecdsa-sha2'
  } else {
    sshKeyError.value = ''
  }
}

// Watch SSH key changes for live validation
watch(sshKey, validateSSHKey)
watch(authMethod, validateSSHKey)

// Progress save/resume using sessionStorage
const PROGRESS_KEY = 'checkout_progress'
const saveProgress = () => {
  const progress = {
    billing_cycle: billingCycle.value,
    os_template_id: selectedOS.value,
    auth_method: authMethod.value,
    ssh_key: sshKey.value,
    timestamp: Date.now(),
  }
  sessionStorage.setItem(PROGRESS_KEY, JSON.stringify(progress))
}

const loadProgress = () => {
  try {
    const saved = sessionStorage.getItem(PROGRESS_KEY)
    if (!saved) return

    const progress = JSON.parse(saved)
    const oneHourAgo = Date.now() - (60 * 60 * 1000)

    // Only restore if less than 1 hour old
    if (progress.timestamp && progress.timestamp > oneHourAgo) {
      if (progress.billing_cycle) billingCycle.value = progress.billing_cycle
      if (progress.os_template_id) selectedOS.value = progress.os_template_id
      if (progress.auth_method) authMethod.value = progress.auth_method
      if (progress.ssh_key) sshKey.value = progress.ssh_key
    } else {
      // Clear expired progress
      sessionStorage.removeItem(PROGRESS_KEY)
    }
  } catch (e) {
    console.error('Failed to load checkout progress:', e)
  }
}

// Save progress when key fields change
watch([billingCycle, selectedOS, authMethod, sshKey], saveProgress, { deep: true })

// Intersection Observer for stepper progress
const intersectionObserver = ref<IntersectionObserver | null>(null)

onMounted(() => {
  // Load saved progress
  loadProgress()

  // Setup intersection observer for stepper
  intersectionObserver.value = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const index = sectionRefs.value.indexOf(entry.target as HTMLElement)
          if (index !== -1) currentStepIndex.value = index
        }
      })
    },
    { threshold: 0.5, rootMargin: '-100px 0px' }
  )

  // Observe sections after a short delay to ensure refs are populated
  const obs = intersectionObserver.value
  setTimeout(() => {
    sectionRefs.value.forEach(ref => {
      if (ref) obs.observe(ref)
    })
  }, 100)
})

onUnmounted(() => {
  intersectionObserver.value?.disconnect()
})
</script>

<template>
  <div>
    <div class="mb-4">
      <Link href="/plans" class="text-primary text-body-2 text-decoration-none">&larr; Back to Plans</Link>
    </div>

    <div class="text-h4 font-weight-bold mb-6">
      <template v-if="isCustomMode">
        Build Your Own {{ plan.service_type === 'vps' ? 'VPS' : plan.service_type === 'game' ? 'Game Server' : plan.service_type === 'mysql' ? 'MySQL' : plan.name }}
      </template>
      <template v-else>
        Checkout
      </template>
    </div>

    <VRow>
      <!-- Order Summary (Sticky Sidebar) -->
      <VCol cols="12" lg="4" order="2" order-lg="1">
        <div class="sticky-sidebar-wrapper">
          <VCard elevation="2" class="summary-card mb-4">
            <VCardTitle class="text-h6">Order Summary</VCardTitle>
            <VCardText>
              <div class="d-flex justify-space-between text-body-2 mb-2">
                <span class="text-medium-emphasis">{{ plan.name }}</span>
                <span class="font-weight-medium">${{ monthlyPrice.toFixed(2) }}/mo</span>
              </div>
              <div class="d-flex justify-space-between text-body-2 text-medium-emphasis mb-2">
                <span>Billing Cycle</span>
                <span class="text-capitalize">{{ selectedCycle.label }} ({{ selectedCycle.months }} {{ selectedCycle.months === 1 ? 'month' : 'months' }})</span>
              </div>
              <div v-if="selectedCycle.discount > 0" class="d-flex justify-space-between text-body-2 mb-2">
                <span class="text-medium-emphasis">Cycle Discount ({{ (selectedCycle.discount * 100).toFixed(0) }}%)</span>
                <span class="font-weight-medium text-success">-${{ savingsAmount.toFixed(2) }}</span>
              </div>
              <div class="d-flex justify-space-between text-body-2 mb-2">
                <span class="text-medium-emphasis">Subtotal</span>
                <span class="font-weight-medium">${{ basePriceWithCycle.toFixed(2) }}</span>
              </div>
              <div v-if="couponApplied" class="d-flex justify-space-between text-body-2 text-success mb-2">
                <span>Discount</span>
                <span>-${{ couponDiscount.toFixed(2) }}</span>
              </div>
              <div
                v-if="configTotalPrice > 0"
                class="d-flex justify-space-between text-body-2 mb-2"
              >
                <span class="text-medium-emphasis">Config Options</span>
                <span class="font-weight-medium">+${{ configTotalPrice.toFixed(2) }}</span>
              </div>
              <VDivider class="my-4" />
              <div class="d-flex justify-space-between text-h6 font-weight-bold mb-3">
                <span>Total</span>
                <span class="text-primary animated-price">{{ priceDisplayText }}</span>
              </div>
              <VDivider class="my-3" />
              <div class="d-flex align-center text-caption text-medium-emphasis">
                <VIcon icon="tabler-clock" size="16" class="me-2" />
                <span>Estimated deployment: 5-10 minutes</span>
              </div>
            </VCardText>
          </VCard>

          <!-- Configuration Preview -->
          <VCard v-if="isVPS && selectedOSTemplate" elevation="1" class="config-preview">
            <VCardTitle class="text-subtitle-1">Configuration</VCardTitle>
            <VCardText>
              <div class="d-flex align-center mb-3">
                <VIcon :icon="selectedOSTemplate.icon" size="32" class="me-3 text-primary os-icon" />
                <div>
                  <div class="text-body-2 font-weight-medium">{{ selectedOSTemplate.name }}</div>
                  <div class="text-caption text-medium-emphasis">Operating System</div>
                </div>
              </div>
              <div class="d-flex align-center">
                <VIcon :icon="authMethod === 'ssh' ? 'tabler-key' : 'tabler-lock'" size="28" class="me-3 text-primary" />
                <div>
                  <div class="text-body-2 font-weight-medium">{{ authMethod === 'ssh' ? 'SSH Key Authentication' : 'Password Authentication' }}</div>
                  <div class="text-caption text-medium-emphasis">{{ authMethod === 'ssh' ? 'Secure key-based access' : 'Auto-generated password' }}</div>
                </div>
              </div>
            </VCardText>
          </VCard>
        </div>
      </VCol>

      <!-- Checkout Form -->
      <VCol cols="12" lg="8" order="1" order-lg="2">
        <!-- Progress Stepper -->
        <div class="mb-6 stepper-container">
          <AppStepper
            v-model:current-step="currentStepIndex"
            :items="checkoutSteps"
            :direction="$vuetify.display.mdAndUp ? 'horizontal' : 'vertical'"
            align="center"
            class="checkout-progress-stepper"
            :is-active-step-valid="true"
          />
        </div>

        <VForm @submit.prevent="submit">
          <!-- Billing Cycle Selection -->
          <VCard ref="el => sectionRefs[0] = el" class="mb-6 billing-cycle-card" elevation="2" role="region" aria-labelledby="billing-cycle-heading">
            <VCardTitle id="billing-cycle-heading" class="d-flex align-center">
              <VIcon icon="tabler-calendar-clock" size="22" class="me-2 text-primary" />
              <span class="text-h6">Select Billing Cycle</span>
            </VCardTitle>
            <VCardText>
              <VRow class="billing-cycles">
                <VCol
                  v-for="cycle in billingCycles"
                  :key="cycle.value"
                  cols="12"
                  sm="6"
                  md="3"
                >
                  <div
                    class="billing-cycle-option"
                    :class="{
                      'billing-cycle-option--selected': billingCycle === cycle.value,
                      'billing-cycle-option--popular': cycle.popular
                    }"
                    @click="billingCycle = cycle.value"
                  >
                    <div v-if="cycle.popular" class="popular-badge">
                      <VChip color="primary" size="x-small" label>
                        BEST VALUE
                      </VChip>
                    </div>

                    <div class="billing-cycle-label">{{ cycle.label }}</div>
                    <div class="billing-cycle-price">
                      ${{ (monthlyPrice * (1 - cycle.discount) * cycle.months).toFixed(2) }}
                    </div>
                    <div class="billing-cycle-per-month">
                      <template v-if="cycle.value === 'monthly'">
                        per month
                      </template>
                      <template v-else>
                        ${{ (monthlyPrice * (1 - cycle.discount)).toFixed(2) }}/mo • {{ cycle.months }} months
                      </template>
                    </div>

                    <div v-if="cycle.discount > 0" class="billing-cycle-savings">
                      Save {{ (cycle.discount * 100).toFixed(0) }}%
                    </div>
                    <div v-else class="billing-cycle-no-discount">
                      Standard rate
                    </div>

                    <div v-if="billingCycle === cycle.value" class="billing-cycle-check">
                      <VIcon icon="tabler-circle-check" size="28" color="primary" />
                    </div>
                  </div>
                </VCol>
              </VRow>

              <VAlert
                v-if="savingsAmount > 0"
                type="success"
                variant="tonal"
                density="comfortable"
                class="mt-4"
              >
                <div class="text-body-2">
                  <VIcon icon="tabler-piggy-bank" size="20" class="me-2" />
                  You're saving <strong>${{ savingsAmount.toFixed(2) }}</strong> with {{ selectedCycle.label }} billing!
                </div>
              </VAlert>
            </VCardText>
          </VCard>

          <!-- Configurable Options -->
          <VExpandTransition>
            <VCard
              v-if="hasConfigGroups"
              class="mb-6"
              elevation="2"
            >
              <VCardTitle class="d-flex align-center">
                <VIcon
                  icon="tabler-adjustments"
                  size="22"
                  class="me-2 text-primary"
                />
                <span class="text-h6">{{ isCustomMode ? 'Configure Your Server' : 'Configuration Options' }}</span>
              </VCardTitle>
              <VCardText>
                <ConfigOptions
                  v-model="configSelections"
                  :config-groups="configGroups ?? []"
                  :billing-cycle="billingCycle"
                  @update:total-price="(price: number) => configTotalPrice = price"
                />
              </VCardText>
            </VCard>
          </VExpandTransition>

          <!-- Server Configuration (VPS Only) -->
          <VExpandTransition>
            <VCard v-if="isVPS" ref="el => sectionRefs[1] = el" class="mb-6 server-config-card" elevation="3" role="region" aria-labelledby="server-config-heading">
              <VCardTitle id="server-config-heading" class="d-flex align-center pa-5">
                <VIcon icon="tabler-settings" size="24" class="me-2 text-primary" />
                <span class="text-h6">Server Configuration</span>
              </VCardTitle>
              <VCardText class="pa-5">
                <!-- Server Specifications -->
                <div class="mb-7">
                  <label class="text-subtitle-1 font-weight-bold d-flex align-center mb-4">
                    <VIcon icon="tabler-server" size="22" class="me-2 text-primary" />
                    Server Specifications
                  </label>

                  <VRow class="spec-grid">
                    <VCol v-if="plan.features?.cpu" cols="6" sm="3">
                      <div class="spec-card">
                        <VIcon icon="tabler-cpu" size="32" class="spec-icon mb-2" color="primary" />
                        <div class="spec-label">CPU</div>
                        <div class="spec-value">{{ plan.features.cpu }}</div>
                      </div>
                    </VCol>
                    <VCol v-if="plan.features?.ram" cols="6" sm="3">
                      <div class="spec-card">
                        <VIcon icon="tabler-cpu" size="32" class="spec-icon mb-2" color="primary" />
                        <div class="spec-label">RAM</div>
                        <div class="spec-value">{{ plan.features.ram }}</div>
                      </div>
                    </VCol>
                    <VCol v-if="plan.features?.storage" cols="6" sm="3">
                      <div class="spec-card">
                        <VIcon icon="tabler-device-floppy" size="32" class="spec-icon mb-2" color="primary" />
                        <div class="spec-label">Storage</div>
                        <div class="spec-value">{{ plan.features.storage }}</div>
                      </div>
                    </VCol>
                    <VCol v-if="plan.features?.bandwidth" cols="6" sm="3">
                      <div class="spec-card">
                        <VIcon icon="tabler-gauge" size="32" class="spec-icon mb-2" color="primary" />
                        <div class="spec-label">Bandwidth</div>
                        <div class="spec-value">{{ plan.features.bandwidth }}</div>
                      </div>
                    </VCol>
                  </VRow>

                  <VRow class="mt-4">
                    <VCol cols="12" sm="6">
                      <div class="spec-card-inline">
                        <VIcon icon="tabler-network" size="24" class="me-3" color="success" />
                        <div>
                          <div class="spec-label-inline">IPv4 Address</div>
                          <div class="spec-value-inline">1 IPv4 Included</div>
                        </div>
                      </div>
                    </VCol>
                    <VCol cols="12" sm="6">
                      <div class="spec-card-inline">
                        <VIcon icon="tabler-network" size="24" class="me-3" color="info" />
                        <div>
                          <div class="spec-label-inline">IPv6 Subnet</div>
                          <div class="spec-value-inline">/64 IPv6 Included</div>
                        </div>
                      </div>
                    </VCol>
                  </VRow>
                </div>

                <VDivider class="my-6" />

                <!-- Operating System Selection -->
                <div class="mb-7">
                  <label class="text-subtitle-1 font-weight-bold d-flex align-center mb-4">
                    <VIcon icon="tabler-brand-ubuntu" size="22" class="me-2 text-primary" />
                    Choose Your Operating System
                  </label>

                  <!-- OS Template Groups (Accordion) -->
                  <VExpansionPanels v-if="osTemplateGroups && osTemplateGroups.length > 0" v-model="expandedPanels" multiple class="os-expansion-panels">
                    <VExpansionPanel
                      v-for="(group, index) in osTemplateGroups"
                      :key="index"
                      :value="index"
                      class="os-group-panel"
                    >
                      <VExpansionPanelTitle class="os-group-header">
                        <div class="d-flex align-center">
                          <VIcon :icon="group.icon" size="32" class="me-3 os-group-icon" />
                          <div>
                            <div class="os-group-name">{{ group.name }}</div>
                            <div v-if="group.description" class="os-group-description">{{ group.description }}</div>
                          </div>
                        </div>
                      </VExpansionPanelTitle>
                      <VExpansionPanelText>
                        <div class="os-grid">
                          <div
                            v-for="os in group.templates"
                            :key="os.id"
                            class="os-card"
                            :class="{ 'os-card--selected': selectedOS === os.id }"
                            @click="selectedOS = os.id"
                          >
                            <div class="os-card__icon">
                              <VIcon :icon="os.icon" size="40" />
                            </div>
                            <div class="os-card__content">
                              <div class="os-card__name">{{ os.name }}</div>
                              <div v-if="os.description" class="os-card__description">{{ os.description }}</div>
                            </div>
                            <div v-if="selectedOS === os.id" class="os-card__check">
                              <VIcon icon="tabler-circle-check" size="24" color="primary" />
                            </div>
                          </div>
                        </div>
                      </VExpansionPanelText>
                    </VExpansionPanel>
                  </VExpansionPanels>

                  <!-- Fallback if no templates -->
                  <VAlert v-else type="warning" variant="tonal" density="comfortable">
                    <div class="text-body-2">
                      <VIcon icon="tabler-alert-triangle" size="20" class="me-2" />
                      Operating system templates are currently unavailable. Please contact support.
                    </div>
                  </VAlert>
                </div>

                <VDivider class="my-6" />

                <!-- Authentication Method -->
                <div>
                  <label class="text-subtitle-1 font-weight-bold d-flex align-center mb-4">
                    <VIcon icon="tabler-shield-lock" size="22" class="me-2 text-primary" />
                    Authentication Method
                  </label>

                  <VBtnToggle
                    v-model="authMethod"
                    mandatory
                    divided
                    variant="outlined"
                    color="primary"
                    class="mb-4 auth-toggle"
                  >
                    <VBtn value="password" size="large" class="flex-1-1 text-none">
                      <VIcon icon="tabler-lock" start size="20" />
                      Auto-Generated Password
                    </VBtn>
                    <VBtn value="ssh" size="large" class="flex-1-1 text-none">
                      <VIcon icon="tabler-key" start size="20" />
                      SSH Key
                    </VBtn>
                  </VBtnToggle>

                  <!-- Password Info -->
                  <VExpandTransition>
                    <VAlert
                      v-if="authMethod === 'password'"
                      type="info"
                      variant="tonal"
                      density="comfortable"
                      class="mb-0"
                    >
                      <div class="text-body-2">
                        <VIcon icon="tabler-info-circle" size="20" class="me-2" />
                        A secure random password will be automatically generated and emailed to you after your server is provisioned.
                      </div>
                    </VAlert>
                  </VExpandTransition>

                  <!-- SSH Key Input -->
                  <VExpandTransition>
                    <div v-if="authMethod === 'ssh'" class="ssh-section">
                      <!-- Generate Key Button -->
                      <div class="d-flex gap-3 mb-4">
                        <VBtn
                          variant="outlined"
                          color="primary"
                          prepend-icon="tabler-wand"
                          :loading="isGenerating"
                          @click="generateSSHKeyPair"
                        >
                          Generate SSH Key Pair
                        </VBtn>
                        <VBtn
                          v-if="generatedPrivateKey"
                          variant="tonal"
                          color="success"
                          prepend-icon="tabler-download"
                          @click="downloadPrivateKey"
                        >
                          Download Private Key
                        </VBtn>
                      </div>

                      <!-- Warning for Generated Keys -->
                      <VAlert
                        v-if="generatedPrivateKey"
                        type="warning"
                        variant="tonal"
                        density="comfortable"
                        class="mb-4"
                      >
                        <div class="text-body-2">
                          <VIcon icon="tabler-alert-triangle" size="20" class="me-2" />
                          <strong>Important:</strong> Download and save your private key now! It will not be shown again. Keep it secure and never share it.
                        </div>
                      </VAlert>

                      <!-- SSH Key Textarea -->
                      <VTextarea
                        v-model="sshKey"
                        label="SSH Public Key"
                        placeholder="ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC... user@hostname"
                        rows="5"
                        persistent-placeholder
                        :error-messages="sshKeyError"
                        class="ssh-key-input mb-2"
                      />

                      <div v-if="!sshKeyError" class="text-caption text-medium-emphasis">
                        <VIcon icon="tabler-info-circle" size="16" />
                        Paste your SSH public key or generate a new RSA-4096 key above. Starts with <code class="text-primary">ssh-rsa</code>, <code class="text-primary">ssh-ed25519</code>, or <code class="text-primary">ecdsa-sha2</code>.
                      </div>
                    </div>
                  </VExpandTransition>
                </div>
              </VCardText>
            </VCard>
          </VExpandTransition>

          <!-- Payment Gateway -->
          <VCard :ref="el => sectionRefs[paymentStepIndex] = el" class="mb-6" elevation="2" role="region" aria-labelledby="payment-method-heading">
            <VCardTitle id="payment-method-heading" class="text-h6">Payment Method</VCardTitle>
            <VCardText>
              <VRadioGroup v-model="selectedGateway" hide-details>
                <VRadio value="stripe">
                  <template #label>
                    <div class="d-flex align-center">
                      <VIcon icon="tabler-credit-card" size="20" class="me-2" />
                      Credit / Debit Card (Stripe)
                    </div>
                  </template>
                </VRadio>
                <VRadio value="paypal">
                  <template #label>
                    <div class="d-flex align-center">
                      <VIcon icon="tabler-brand-paypal" size="20" class="me-2" />
                      PayPal
                    </div>
                  </template>
                </VRadio>
              </VRadioGroup>

              <!-- Saved Payment Methods (Stripe) -->
              <div v-if="selectedGateway === 'stripe' && paymentMethods.length > 0" class="mt-4">
                <VSelect
                  v-model="selectedPaymentMethod"
                  label="Select Card"
                  :items="paymentMethods.map(pm => ({
                    title: `${pm.brand} ending in ${pm.last_four} (${pm.exp_month}/${pm.exp_year})${pm.is_default ? ' - Default' : ''}`,
                    value: pm.id,
                  }))"
                />
              </div>

              <div v-if="selectedGateway === 'stripe' && paymentMethods.length === 0" class="mt-4">
                <VAlert type="warning" variant="tonal" density="compact">
                  <div class="text-body-2">
                    You have no saved payment methods.
                    <Link href="/billing/payment-methods" class="text-primary text-decoration-none font-weight-medium">Add one first</Link>.
                  </div>
                </VAlert>
              </div>
            </VCardText>
          </VCard>

          <!-- Coupon -->
          <VCard class="mb-6" elevation="2">
            <VCardTitle class="text-h6">Coupon Code</VCardTitle>
            <VCardText>
              <div class="d-flex gap-3">
                <VTextField
                  v-model="couponCode"
                  placeholder="Enter coupon code"
                  :disabled="couponApplied"
                  hide-details
                  density="comfortable"
                  class="flex-grow-1"
                >
                  <template #prepend-inner>
                    <VIcon icon="tabler-ticket" size="20" />
                  </template>
                </VTextField>
                <VBtn
                  variant="outlined"
                  color="primary"
                  :disabled="!couponCode || couponApplied"
                  @click="applyCoupon"
                >
                  {{ couponApplied ? 'Applied' : 'Apply' }}
                </VBtn>
              </div>
              <div v-if="couponError" class="text-body-2 text-error mt-2">{{ couponError }}</div>
              <div v-if="couponApplied" class="text-body-2 text-success mt-2">
                <VIcon icon="tabler-circle-check" size="16" />
                Coupon applied successfully!
              </div>
            </VCardText>
          </VCard>

          <!-- Errors -->
          <VAlert
            v-if="form.errors && Object.keys(form.errors).length"
            type="error"
            variant="tonal"
            class="mb-6"
          >
            <ul class="ps-4 mb-0">
              <li v-for="(error, field) in form.errors" :key="field">{{ error }}</li>
            </ul>
          </VAlert>

          <!-- Submit -->
          <VBtn
            type="submit"
            block
            size="x-large"
            color="primary"
            :loading="form.processing"
            :disabled="form.processing || (selectedGateway === 'stripe' && !selectedPaymentMethod) || (authMethod === 'ssh' && !!sshKeyError) || (isVPS && !selectedOS)"
            class="checkout-btn"
            aria-label="Complete checkout order"
          >
            <VIcon icon="tabler-lock" start size="20" />
            <span v-if="form.processing">Processing Order...</span>
            <span v-else>COMPLETE ORDER — {{ priceDisplayText }}</span>
          </VBtn>

          <div class="text-center text-caption text-medium-emphasis mt-3">
            <VIcon icon="tabler-shield-check" size="16" />
            Secure checkout powered by Stripe. Your payment information is encrypted.
          </div>
        </VForm>
      </VCol>
    </VRow>
  </div>
</template>

<style scoped>
/* Progress Stepper */
.stepper-container {
  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.03) 0%, rgba(var(--v-theme-surface), 1) 100%);
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(115, 103, 240, 0.08);
  animation: fadeInDown 0.5s ease-out;
}

.checkout-progress-stepper {
  margin: 0;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Billing Cycle Selection */
.billing-cycle-card {
  border-top: 3px solid rgb(var(--v-theme-primary));
  background: linear-gradient(180deg, rgba(var(--v-theme-primary), 0.02) 0%, rgba(var(--v-theme-surface), 1) 15%);
  animation: fadeIn 0.6s ease-out 0.1s both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.billing-cycles {
  margin: 0;
}

.billing-cycle-option {
  position: relative;
  padding: 1.5rem 1rem;
  border: 2px solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(var(--v-theme-surface), 1);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.billing-cycle-option:hover {
  border-color: rgba(var(--v-theme-primary), 0.5);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(115, 103, 240, 0.2);
}

.billing-cycle-option--selected {
  border-color: rgb(var(--v-theme-primary));
  border-width: 2px;
  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.08) 0%, rgba(var(--v-theme-primary), 0.04) 100%);
  box-shadow: 0 4px 16px rgba(115, 103, 240, 0.25);
}

.billing-cycle-option--popular {
  border-color: rgba(var(--v-theme-primary), 0.4);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.billing-cycle-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(var(--v-theme-on-surface), 0.7);
  margin-bottom: 0.5rem;
}

.billing-cycle-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(var(--v-theme-primary));
  margin-bottom: 0.25rem;
}

.billing-cycle-per-month {
  font-size: 0.875rem;
  color: rgba(var(--v-theme-on-surface), 0.6);
  margin-bottom: 0.5rem;
}

.billing-cycle-savings {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--v-theme-success));
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.billing-cycle-no-discount {
  font-size: 0.75rem;
  color: rgba(var(--v-theme-on-surface), 0.5);
}

.billing-cycle-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  animation: checkBounce 0.3s ease;
}

/* Sticky Sidebar Wrapper */
.sticky-sidebar-wrapper {
  position: sticky;
  top: 88px;
  align-self: flex-start;
}

/* Card Enhancements */
.summary-card {
  background: linear-gradient(135deg, rgba(var(--v-theme-surface), 1) 0%, rgba(var(--v-theme-surface), 0.95) 100%);
  box-shadow: 0 4px 20px rgba(115, 103, 240, 0.12) !important;
}

.config-preview {
  background: linear-gradient(135deg, rgba(var(--v-theme-surface), 1) 0%, rgba(var(--v-theme-surface), 0.95) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(115, 103, 240, 0.1) !important;
}

.config-preview .os-icon {
  filter: drop-shadow(0 2px 4px rgba(115, 103, 240, 0.3));
}

/* Animated Price Display */
.animated-price {
  background: linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, rgba(var(--v-theme-primary), 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: priceGlow 2s ease-in-out infinite;
}

@keyframes priceGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.server-config-card {
  border-top: 3px solid rgb(var(--v-theme-primary));
  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.02) 0%, rgba(var(--v-theme-surface), 1) 20%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeIn 0.6s ease-out 0.2s both;
}

.server-config-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(115, 103, 240, 0.22) !important;
}

/* OS Expansion Panels */
.os-expansion-panels {
  border-radius: 12px;
  overflow: hidden;
}

.os-group-panel {
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  background: rgba(var(--v-theme-surface), 1);
  margin-bottom: 0.75rem;
  border-radius: 12px !important;
  overflow: hidden;
}

.os-group-header {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.03) 0%, rgba(var(--v-theme-surface), 1) 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.os-group-header:hover {
  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.06) 0%, rgba(var(--v-theme-surface), 1) 100%);
}

.os-group-icon {
  color: rgb(var(--v-theme-primary));
  filter: drop-shadow(0 2px 4px rgba(115, 103, 240, 0.2));
}

.os-group-name {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(var(--v-theme-on-surface));
  margin-bottom: 0.125rem;
}

.os-group-description {
  font-size: 0.8rem;
  color: rgba(var(--v-theme-on-surface), 0.6);
  line-height: 1.3;
}

/* OS Cards Grid */
.os-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1rem 0 0.5rem;
}

.os-card {
  position: relative;
  padding: 1.25rem;
  border: 2px solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(var(--v-theme-surface), 1);
  overflow: hidden;
}

.os-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--v-theme-primary), 0.1), transparent);
  transition: left 0.6s ease;
}

.os-card:hover::before {
  left: 100%;
}

.os-card:hover {
  border-color: rgba(var(--v-theme-primary), 0.5);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(115, 103, 240, 0.15);
}

.os-card--selected {
  border-color: rgb(var(--v-theme-primary));
  border-width: 2px;
  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.08) 0%, rgba(var(--v-theme-primary), 0.04) 100%);
  box-shadow: 0 4px 16px rgba(115, 103, 240, 0.2);
}

.os-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.1) 0%, rgba(var(--v-theme-primary), 0.05) 100%);
  color: rgb(var(--v-theme-primary));
  transition: all 0.3s ease;
}

.os-card:hover .os-card__icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.15) 0%, rgba(var(--v-theme-primary), 0.08) 100%);
}

.os-card--selected .os-card__icon {
  background: linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, rgba(var(--v-theme-primary), 0.8) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(115, 103, 240, 0.4);
}

.os-card__content {
  text-align: center;
}

.os-card__name {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  color: rgb(var(--v-theme-on-surface));
}

.os-card__description {
  font-size: 0.75rem;
  color: rgba(var(--v-theme-on-surface), 0.6);
  line-height: 1.4;
}

.os-card__check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  animation: checkBounce 0.3s ease;
}

@keyframes checkBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Auth Toggle */
.auth-toggle {
  width: 100%;
}

.auth-toggle :deep(.v-btn) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

/* SSH Section */
.ssh-section code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(var(--v-theme-primary), 0.1);
  font-size: 0.85em;
}

.ssh-key-input :deep(textarea) {
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.3px;
}

/* Server Spec Cards */
.spec-grid {
  margin: 0;
}

.spec-card {
  position: relative;
  text-align: center;
  padding: 1.25rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.05) 0%, rgba(var(--v-theme-surface), 1) 100%);
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.spec-card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--v-theme-primary), 0.15) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.spec-card:hover::after {
  width: 200%;
  height: 200%;
}

.spec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(115, 103, 240, 0.15);
  border-color: rgba(var(--v-theme-primary), 0.4);
}

.spec-icon {
  filter: drop-shadow(0 2px 4px rgba(115, 103, 240, 0.2));
}

.spec-label {
  font-size: 0.75rem;
  color: rgba(var(--v-theme-on-surface), 0.6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.spec-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgb(var(--v-theme-on-surface));
}

.spec-card-inline {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(var(--v-theme-surface), 0.5);
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  transition: all 0.2s ease;
}

.spec-card-inline:hover {
  background: rgba(var(--v-theme-primary), 0.03);
  border-color: rgba(var(--v-theme-primary), 0.2);
}

.spec-label-inline {
  font-size: 0.75rem;
  color: rgba(var(--v-theme-on-surface), 0.6);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.spec-value-inline {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--v-theme-on-surface));
}

.ip-cost-badge {
  animation: fadeInScale 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Checkout Button */
.checkout-btn {
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, rgba(var(--v-theme-primary), 0.85) 100%);
  box-shadow: 0 6px 20px rgba(115, 103, 240, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.checkout-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: left 0.5s;
}

.checkout-btn:hover::before {
  left: 100%;
}

.checkout-btn:hover {
  box-shadow: 0 8px 28px rgba(115, 103, 240, 0.5);
  transform: translateY(-3px);
}

.checkout-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(115, 103, 240, 0.35);
}

/* Smooth transitions */
.v-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.v-expand-transition-enter-active,
.v-expand-transition-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive adjustments */
@media (max-width: 1280px) {
  /* Disable sticky on tablets and mobile */
  .sticky-sidebar-wrapper {
    position: static;
  }
}

@media (max-width: 960px) {
  .stepper-container {
    padding: 1rem;
  }

  .os-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .billing-cycle-option {
    min-height: 140px;
    padding: 1rem 0.75rem;
  }

  .server-config-card {
    padding: 1rem;
  }
}

@media (max-width: 600px) {
  .stepper-container {
    padding: 0.75rem;
  }

  .os-grid {
    grid-template-columns: 1fr 1fr;
  }

  .os-card {
    padding: 1rem;
  }

  .os-card__icon {
    width: 48px;
    height: 48px;
  }

  .billing-cycle-option {
    min-height: 130px;
    padding: 0.75rem 0.5rem;
  }

  .billing-cycle-price {
    font-size: 1.25rem;
  }

  .spec-card {
    padding: 1rem;
  }

  .summary-card,
  .config-preview {
    margin-bottom: 1rem;
  }
}

/* Ensure z-index layering for spec cards */
.spec-card {
  isolation: isolate;
}

.spec-card > * {
  position: relative;
  z-index: 1;
}
</style>
