<div class="bg-orange-50 rounded-xl p-4 border border-orange-200">
    <div class="flex items-start gap-3">
        <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
            <i class="fas fa-home text-orange-500 text-sm"></i>
        </div>
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 flex-wrap">
                <p class="font-semibold text-gray-800">{{ $alamat->nama_penerima }}</p>
                <span class="text-gray-400 text-sm">{{ $alamat->no_hp }}</span>
                @if($alamat->alamat_utama)
                    <span class="px-2 py-0.5 bg-orange-500 text-white text-xs rounded-full font-medium">Utama</span>
                @endif
            </div>
            <p class="text-sm text-gray-600 mt-1">{{ $alamat->alamat_lengkap }}</p>
            <p class="text-xs text-gray-400 mt-0.5">
                {{ $alamat->village?->name }}, {{ $alamat->district?->name }},
                {{ $alamat->city?->name }}, {{ $alamat->province?->name }}
                @if($alamat->kode_pos) – {{ $alamat->kode_pos }} @endif
            </p>
        </div>
    </div>
</div>