vorqard-ai-sdk 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vorqard-ai-sdk",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Standalone React Native SDK for VORQARD AI Health Assistant and Report Analyzer",
   "main": "src/index.js",
   "repository": {
@@ -19,7 +19,6 @@
     "react-native-linear-gradient": "*",
     "react-native-safe-area-context": "*",
     "react-native-vector-icons": "*",
-    "react-native-vision-camera": "*",
     "react-native-webrtc": "*"
   },
   "keywords": [
@@ -30,8 +29,5 @@
     "healthcare"
   ],
   "author": "VORQARD Developer",
-  "license": "Abhivorn Technologies",
-  "dependencies": {
-    "react-native-live-audio-stream": "^1.1.1"
-  }
-}
+  "license": "Abhivorn Technologies"
+}

package/src/components/ChatComponents.js

@@ -233,11 +233,11 @@ export const InputPanel = ({ value = '', onChangeText, onSend, onVoicePress, loa
               </TouchableOpacity>
             )}
 
-            {!hasText && (
-              <TouchableOpacity style={styles.iconBtn} onPress={onVoicePress} activeOpacity={0.7}>
+            {/* {!hasText && (
+              <View style={styles.iconBtn}>
                 <Ionicons name="mic" size={20} color="#94A3B8" />
-              </TouchableOpacity>
-            )}
+              </View>
+            )} */}
 
             <TouchableOpacity
               onPress={() => onSend(value)}

package/src/components/UICards.js

@@ -1,94 +1,367 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image, Linking, ScrollView } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
+// Rich card components (already built for the chat UI, reused here)
+import { SpecialtySelectionCard } from './cards/SpecialtySelectionCard';
+import { DoctorSelectionList } from './cards/DoctorCards';
+import { SlotSelectionCard } from './cards/SlotSelectionCard';
+import { BookingConfirmationCard } from './cards/BookingConfirmationCard';
+
+/**
+ * UICardContainer — renders the backend-driven ui_action payload.
+ *
+ * Interaction text conventions (sent via sendUIInteraction → DataChannel):
+ *   specialty_cards      →  opt.id            e.g. "Cardiology"
+ *   doctor_cards         →  "doctor:<id>"     e.g. "doctor:5"
+ *   provider_selection   →  "doctor:<id>"     VORQARD tap
+ *                        →  "nearby:<id>"     Nearby tap
+ *   nearby_details       →  navigation via Linking (no DataChannel)
+ *   slot_cards (slot)    →  opt.label         e.g. "10:30"
+ *   slot_cards (date)    →  "date:YYYY-MM-DD" from date picker
+ *   payment_card         →  opt.id            "cash" | "upi" | "card"
+ *   booking_success      →  no interaction
+ */
 export const UICardContainer = ({ action, onAction }) => {
   if (!action) return null;
 
   switch (action.type) {
+
+    // ── Phase 3/4: existing cards ─────────────────────────────────────────────
+
+    case 'specialty_cards':
+      return (
+        <SpecialtySelectionCard
+          options={action.items}
+          onOptionPress={(opt) => onAction(opt.id)}
+        />
+      );
+
+    case 'doctor_cards':
+      return (
+        <DoctorSelectionList
+          options={action.items}
+          onOptionPress={(opt) => onAction(`doctor:${opt.id}`)}
+        />
+      );
+
+    case 'slot_cards':
+      return (
+        <SlotSelectionCard
+          doctor={action.doctor}
+          selectedDate={action.date}
+          options={action.items}
+          onOptionPress={(opt) => onAction(opt.label)}
+        />
+      );
+
+    case 'confirmation_card':
+      return (
+        <BookingConfirmationCard
+          ui={{
+            doctor: action.doctor,
+            date: action.date,
+            slot: action.slot,
+            options: action.items,
+          }}
+          onOptionPress={(opt) => onAction(opt.id)}
+        />
+      );
+
+    case 'booking_success':
+      return <BookingSuccessCard action={action} />;
+
+    // ── Phase 5: two-category provider selection ──────────────────────────────
+
+    case 'provider_selection':
+      return (
+        <ProviderSelectionCard
+          action={action}
+          onVorqardPress={(doc) => onAction(`doctor:${doc.id}`)}
+          onNearbyPress={(p) => onAction(`nearby:${p.id}`)}
+        />
+      );
+
+    case 'nearby_details':
+      return <NearbyDetailsCard action={action} />;
+
+    // ── Phase 6: payment ──────────────────────────────────────────────────────
+
+    case 'payment_card':
+      return (
+        <PaymentCard
+          action={action}
+          onMethodPress={(opt) => onAction(opt.id)}
+        />
+      );
+
+    // ── Legacy / Gemini-path cards (backwards compat) ─────────────────────────
+
     case 'selection':
-      return <SelectionCard action={action} onAction={onAction} />;
+      return <LegacySelectionCard action={action} onAction={onAction} />;
+
     case 'slot_selection':
-      return <SlotSelectionCard action={action} onAction={onAction} />;
-    case 'booking_success':
-      return <BookingSuccessCard action={action} onAction={onAction} />;
+      return <LegacySlotCard action={action} onAction={onAction} />;
+
     case 'appointments_list':
       return <AppointmentsListCard action={action} onAction={onAction} />;
+
     default:
       return null;
   }
 };
 
-const SelectionCard = ({ action, onAction }) => {
+// ── Booking success (shared by both paths) ────────────────────────────────────
+
+const BookingSuccessCard = ({ action }) => (
+  <View style={styles.successCard}>
+    <View style={styles.successIcon}>
+      <Ionicons name="checkmark-circle" size={48} color="#10B981" />
+    </View>
+    <Text style={styles.successTitle}>Booking Confirmed!</Text>
+    <View style={styles.detailRow}>
+      <Ionicons name="person-outline" size={16} color="rgba(255,255,255,0.7)" />
+      <Text style={styles.detailText}>{action.doctor}</Text>
+    </View>
+    <View style={styles.detailRow}>
+      <Ionicons name="calendar-outline" size={16} color="rgba(255,255,255,0.7)" />
+      <Text style={styles.detailText}>{action.date} at {action.slot}</Text>
+    </View>
+  </View>
+);
+
+// ── Phase 5: Provider Selection (Our Services + Nearby) ──────────────────────
+
+const ProviderSelectionCard = ({ action, onVorqardPress, onNearbyPress }) => {
+  const [tab, setTab] = useState('our_services');
+  const vorqardList = action.our_services || [];
+  const nearbyList = action.nearby || [];
+
   return (
     <View style={styles.card}>
-      <Text style={styles.title}>{action.title || 'Please Select'}</Text>
-      {action.options?.map((opt, i) => (
+      <Text style={styles.title}>{action.title || 'Find a Provider'}</Text>
+
+      {/* Tab strip */}
+      <View style={styles.tabRow}>
         <TouchableOpacity
-          key={opt.id || i}
-          style={styles.doctorItem}
-          onPress={() => onAction(opt.label || opt.name)}
+          style={[styles.tab, tab === 'our_services' && styles.tabActive]}
+          onPress={() => setTab('our_services')}
         >
-          {opt.profile_picture ? (
-            <Image source={{ uri: opt.profile_picture }} style={styles.docImg} />
-          ) : (
-            <View style={styles.docAvatar}>
-              <Ionicons name="person" size={20} color="#fff" />
-            </View>
-          )}
-          <View style={styles.docInfo}>
-            <Text style={styles.docName}>{opt.name || opt.label}</Text>
-            {opt.specialty && <Text style={styles.docSpec}>{opt.specialty}</Text>}
-            <View style={styles.docMetaRow}>
-              {opt.experience && <Text style={styles.docMeta}>{opt.experience} yrs exp</Text>}
-              {opt.consultation_fee && <Text style={styles.docMeta}> • ₹{opt.consultation_fee}</Text>}
-            </View>
-          </View>
+          <Ionicons name="shield-checkmark-outline" size={14} color={tab === 'our_services' ? '#818CF8' : 'rgba(255,255,255,0.5)'} />
+          <Text style={[styles.tabText, tab === 'our_services' && styles.tabTextActive]}>
+            Our Services ({vorqardList.length})
+          </Text>
         </TouchableOpacity>
-      ))}
+        <TouchableOpacity
+          style={[styles.tab, tab === 'nearby' && styles.tabActive]}
+          onPress={() => setTab('nearby')}
+        >
+          <Ionicons name="location-outline" size={14} color={tab === 'nearby' ? '#818CF8' : 'rgba(255,255,255,0.5)'} />
+          <Text style={[styles.tabText, tab === 'nearby' && styles.tabTextActive]}>
+            Nearby ({nearbyList.length})
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      {tab === 'our_services' ? (
+        vorqardList.length === 0 ? (
+          <Text style={styles.emptyText}>No VORQARD specialists found in this area.</Text>
+        ) : (
+          vorqardList.map((doc, i) => (
+            <TouchableOpacity key={doc.id || i} style={styles.doctorItem} onPress={() => onVorqardPress(doc)}>
+              {doc.profile_picture
+                ? <Image source={{ uri: doc.profile_picture }} style={styles.docImg} />
+                : <View style={styles.docAvatar}><Ionicons name="person" size={20} color="#fff" /></View>
+              }
+              <View style={styles.docInfo}>
+                <Text style={styles.docName}>{doc.name}</Text>
+                <Text style={styles.docSpec}>{doc.specialty}</Text>
+                <View style={styles.docMetaRow}>
+                  {doc.consultation_fee > 0 && <Text style={styles.docMeta}>₹{doc.consultation_fee}</Text>}
+                  {doc.distance != null && <Text style={styles.docMeta}> • {doc.distance} km</Text>}
+                  {doc.rating > 0 && <Text style={styles.docMeta}> • ⭐ {doc.rating}</Text>}
+                </View>
+              </View>
+              <View style={styles.bookBadge}>
+                <Text style={styles.bookBadgeText}>Book</Text>
+              </View>
+            </TouchableOpacity>
+          ))
+        )
+      ) : (
+        nearbyList.length === 0 ? (
+          <Text style={styles.emptyText}>No nearby clinics found in this area.</Text>
+        ) : (
+          nearbyList.map((p, i) => (
+            <TouchableOpacity key={p.id || i} style={styles.nearbyItem} onPress={() => onNearbyPress(p)}>
+              <View style={styles.nearbyIcon}>
+                <Ionicons name="business-outline" size={22} color="#818CF8" />
+              </View>
+              <View style={styles.docInfo}>
+                <Text style={styles.docName}>{p.name}</Text>
+                {p.address ? <Text style={styles.docSpec} numberOfLines={1}>{p.address}</Text> : null}
+                <View style={styles.docMetaRow}>
+                  {p.distance != null && <Text style={styles.docMeta}>{p.distance} km away</Text>}
+                  {p.phone ? <Text style={styles.docMeta}> • {p.phone}</Text> : null}
+                </View>
+              </View>
+              <Ionicons name="chevron-forward" size={16} color="rgba(255,255,255,0.4)" />
+            </TouchableOpacity>
+          ))
+        )
+      )}
     </View>
   );
 };
 
-const SlotSelectionCard = ({ action, onAction }) => {
+// ── Phase 5: Nearby Details (info-only, no booking) ───────────────────────────
+
+const NearbyDetailsCard = ({ action }) => {
+  const p = action.provider || {};
+  const openMaps = () => {
+    if (p.maps_url) Linking.openURL(p.maps_url).catch(() => {});
+  };
+  const callPhone = () => {
+    if (p.phone) Linking.openURL(`tel:${p.phone}`).catch(() => {});
+  };
+
   return (
-    <View style={styles.card}>
-      <Text style={styles.title}>{action.title || 'Select Time'}</Text>
-      <Text style={styles.subtitle}>{action.selected_date}</Text>
-      <View style={styles.slotGrid}>
-        {action.options?.map((opt, i) => (
-          <TouchableOpacity
-            key={opt.id || i}
-            style={styles.slotBtn}
-            onPress={() => onAction(opt.label)}
-          >
-            <Text style={styles.slotText}>{opt.label}</Text>
+    <View style={[styles.card, styles.nearbyDetailCard]}>
+      <View style={styles.nearbyDetailHeader}>
+        <Ionicons name="business" size={28} color="#818CF8" />
+        <Text style={[styles.title, { marginLeft: 10 }]}>{p.name || 'Nearby Clinic'}</Text>
+      </View>
+
+      {p.address ? (
+        <View style={styles.detailRow}>
+          <Ionicons name="location-outline" size={16} color="rgba(255,255,255,0.6)" />
+          <Text style={styles.detailText}>{p.address}</Text>
+        </View>
+      ) : null}
+
+      {p.distance != null ? (
+        <View style={styles.detailRow}>
+          <Ionicons name="navigate-outline" size={16} color="rgba(255,255,255,0.6)" />
+          <Text style={styles.detailText}>{p.distance} km away</Text>
+        </View>
+      ) : null}
+
+      {p.phone ? (
+        <View style={styles.detailRow}>
+          <Ionicons name="call-outline" size={16} color="rgba(255,255,255,0.6)" />
+          <Text style={styles.detailText}>{p.phone}</Text>
+        </View>
+      ) : null}
+
+      <View style={styles.nearbyBtnRow}>
+        {p.phone ? (
+          <TouchableOpacity style={styles.nearbyBtn} onPress={callPhone}>
+            <Ionicons name="call" size={16} color="#fff" />
+            <Text style={styles.nearbyBtnText}>Call</Text>
           </TouchableOpacity>
-        ))}
+        ) : null}
+        {p.maps_url ? (
+          <TouchableOpacity style={[styles.nearbyBtn, styles.navBtn]} onPress={openMaps}>
+            <Ionicons name="navigate" size={16} color="#fff" />
+            <Text style={styles.nearbyBtnText}>Navigate</Text>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+
+      <View style={styles.nearbyNoBookNotice}>
+        <Ionicons name="information-circle-outline" size={14} color="rgba(255,255,255,0.4)" />
+        <Text style={styles.nearbyNoBookText}>Booking not available — visit or call directly.</Text>
       </View>
     </View>
   );
 };
 
-const BookingSuccessCard = ({ action, onAction }) => {
+// ── Phase 6: Payment Card ─────────────────────────────────────────────────────
+
+const PaymentCard = ({ action, onMethodPress }) => {
+  const doc = action.doctor || {};
   return (
-    <View style={styles.successCard}>
-      <View style={styles.successIcon}>
-        <Ionicons name="checkmark-circle" size={48} color="#10B981" />
-      </View>
-      <Text style={styles.successTitle}>Booking Confirmed!</Text>
-      <View style={styles.detailRow}>
-        <Ionicons name="person-outline" size={16} color="rgba(255,255,255,0.7)" />
-        <Text style={styles.detailText}>{action.doctor}</Text>
-      </View>
-      <View style={styles.detailRow}>
-        <Ionicons name="calendar-outline" size={16} color="rgba(255,255,255,0.7)" />
-        <Text style={styles.detailText}>{action.date} at {action.slot}</Text>
+    <View style={[styles.card, styles.paymentCard]}>
+      <Text style={styles.title}>{action.title || 'Payment'}</Text>
+
+      {/* Appointment summary */}
+      <View style={styles.paymentSummary}>
+        <View style={styles.detailRow}>
+          <Ionicons name="person-outline" size={15} color="rgba(255,255,255,0.6)" />
+          <Text style={styles.detailText}>{doc.name || 'Doctor'}</Text>
+        </View>
+        <View style={styles.detailRow}>
+          <Ionicons name="calendar-outline" size={15} color="rgba(255,255,255,0.6)" />
+          <Text style={styles.detailText}>{action.date} at {action.slot}</Text>
+        </View>
+        <View style={[styles.detailRow, styles.amountRow]}>
+          <Ionicons name="cash-outline" size={15} color="#10B981" />
+          <Text style={styles.amountText}>₹{action.amount || 0}</Text>
+        </View>
       </View>
+
+      {/* Payment options */}
+      <Text style={styles.subtitle}>Choose payment method</Text>
+      {(action.items || []).map((opt, i) => (
+        <TouchableOpacity key={opt.id || i} style={styles.paymentBtn} onPress={() => onMethodPress(opt)}>
+          <Ionicons name={opt.icon || 'card-outline'} size={20} color="#818CF8" />
+          <Text style={styles.paymentBtnText}>{opt.label}</Text>
+          <Ionicons name="chevron-forward" size={16} color="rgba(255,255,255,0.4)" />
+        </TouchableOpacity>
+      ))}
     </View>
   );
 };
 
+// ── Legacy cards (kept for Gemini-routed queries) ─────────────────────────────
+
+const LegacySelectionCard = ({ action, onAction }) => (
+  <View style={styles.card}>
+    <Text style={styles.title}>{action.title || 'Please Select'}</Text>
+    {action.options?.map((opt, i) => (
+      <TouchableOpacity
+        key={opt.id || i}
+        style={styles.doctorItem}
+        onPress={() => onAction(opt.label || opt.name)}
+      >
+        {opt.profile_picture ? (
+          <Image source={{ uri: opt.profile_picture }} style={styles.docImg} />
+        ) : (
+          <View style={styles.docAvatar}>
+            <Ionicons name="person" size={20} color="#fff" />
+          </View>
+        )}
+        <View style={styles.docInfo}>
+          <Text style={styles.docName}>{opt.name || opt.label}</Text>
+          {opt.specialty && <Text style={styles.docSpec}>{opt.specialty}</Text>}
+          <View style={styles.docMetaRow}>
+            {opt.experience && <Text style={styles.docMeta}>{opt.experience} yrs exp</Text>}
+            {opt.consultation_fee && <Text style={styles.docMeta}> • ₹{opt.consultation_fee}</Text>}
+          </View>
+        </View>
+      </TouchableOpacity>
+    ))}
+  </View>
+);
+
+const LegacySlotCard = ({ action, onAction }) => (
+  <View style={styles.card}>
+    <Text style={styles.title}>{action.title || 'Select Time'}</Text>
+    <Text style={styles.subtitle}>{action.selected_date}</Text>
+    <View style={styles.slotGrid}>
+      {action.options?.map((opt, i) => (
+        <TouchableOpacity
+          key={opt.id || i}
+          style={styles.slotBtn}
+          onPress={() => onAction(opt.label)}
+        >
+          <Text style={styles.slotText}>{opt.label}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  </View>
+);
+
 const AppointmentsListCard = ({ action, onAction }) => {
   if (!action.appointments || action.appointments.length === 0) {
     return (
@@ -115,6 +388,8 @@ const AppointmentsListCard = ({ action, onAction }) => {
   );
 };
 
+// ── Styles ────────────────────────────────────────────────────────────────────
+
 const styles = StyleSheet.create({
   card: {
     backgroundColor: 'rgba(255,255,255,0.08)',
@@ -160,32 +435,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginRight: 12,
   },
-  docInfo: {
-    flex: 1,
-  },
-  docName: {
-    fontSize: 15,
-    fontWeight: 'bold',
-    color: '#fff',
-  },
-  docSpec: {
-    fontSize: 12,
-    color: '#818CF8',
-    marginTop: 2,
-  },
-  docMetaRow: {
-    flexDirection: 'row',
-    marginTop: 4,
-  },
-  docMeta: {
-    fontSize: 11,
-    color: 'rgba(255,255,255,0.5)',
-  },
-  slotGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 8,
-  },
+  docInfo: { flex: 1 },
+  docName: { fontSize: 15, fontWeight: 'bold', color: '#fff' },
+  docSpec: { fontSize: 12, color: '#818CF8', marginTop: 2 },
+  docMetaRow: { flexDirection: 'row', marginTop: 4 },
+  docMeta: { fontSize: 11, color: 'rgba(255,255,255,0.5)' },
+  slotGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
   slotBtn: {
     backgroundColor: 'rgba(99,102,241,0.2)',
     paddingVertical: 8,
@@ -194,11 +449,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'rgba(99,102,241,0.4)',
   },
-  slotText: {
-    color: '#E0E7FF',
-    fontSize: 13,
-    fontWeight: '600',
-  },
+  slotText: { color: '#E0E7FF', fontSize: 13, fontWeight: '600' },
   successCard: {
     backgroundColor: 'rgba(16,185,129,0.1)',
     borderRadius: 16,
@@ -208,15 +459,8 @@ const styles = StyleSheet.create({
     borderColor: 'rgba(16,185,129,0.3)',
     alignItems: 'center',
   },
-  successIcon: {
-    marginBottom: 8,
-  },
-  successTitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#34D399',
-    marginBottom: 16,
-  },
+  successIcon: { marginBottom: 8 },
+  successTitle: { fontSize: 18, fontWeight: 'bold', color: '#34D399', marginBottom: 16 },
   detailRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -224,10 +468,7 @@ const styles = StyleSheet.create({
     gap: 6,
     width: '100%',
   },
-  detailText: {
-    fontSize: 14,
-    color: 'rgba(255,255,255,0.8)',
-  },
+  detailText: { fontSize: 14, color: 'rgba(255,255,255,0.8)' },
   apptItem: {
     backgroundColor: 'rgba(0,0,0,0.2)',
     padding: 12,
@@ -236,4 +477,123 @@ const styles = StyleSheet.create({
     borderLeftWidth: 3,
     borderLeftColor: '#818CF8',
   },
+
+  // ── Provider Selection ────────────────────────────────────────────────────
+  tabRow: {
+    flexDirection: 'row',
+    marginBottom: 12,
+    gap: 8,
+  },
+  tab: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4,
+    paddingVertical: 8,
+    borderRadius: 10,
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+  },
+  tabActive: {
+    backgroundColor: 'rgba(99,102,241,0.2)',
+    borderColor: 'rgba(99,102,241,0.5)',
+  },
+  tabText: { fontSize: 12, color: 'rgba(255,255,255,0.5)', fontWeight: '600' },
+  tabTextActive: { color: '#818CF8' },
+  nearbyItem: {
+    flexDirection: 'row',
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    alignItems: 'center',
+    gap: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.05)',
+  },
+  nearbyIcon: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(99,102,241,0.15)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bookBadge: {
+    backgroundColor: 'rgba(99,102,241,0.3)',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: 'rgba(99,102,241,0.5)',
+  },
+  bookBadgeText: { color: '#A5B4FC', fontSize: 12, fontWeight: '700' },
+  emptyText: { color: 'rgba(255,255,255,0.4)', fontSize: 13, textAlign: 'center', marginTop: 12 },
+
+  // ── Nearby Details ────────────────────────────────────────────────────────
+  nearbyDetailCard: {
+    borderColor: 'rgba(99,102,241,0.3)',
+  },
+  nearbyDetailHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  nearbyBtnRow: {
+    flexDirection: 'row',
+    gap: 10,
+    marginTop: 14,
+  },
+  nearbyBtn: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    backgroundColor: 'rgba(99,102,241,0.25)',
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(99,102,241,0.4)',
+  },
+  navBtn: {
+    backgroundColor: 'rgba(16,185,129,0.2)',
+    borderColor: 'rgba(16,185,129,0.4)',
+  },
+  nearbyBtnText: { color: '#fff', fontSize: 14, fontWeight: '600' },
+  nearbyNoBookNotice: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+    marginTop: 12,
+  },
+  nearbyNoBookText: { color: 'rgba(255,255,255,0.35)', fontSize: 11 },
+
+  // ── Payment Card ──────────────────────────────────────────────────────────
+  paymentCard: {
+    borderColor: 'rgba(16,185,129,0.25)',
+  },
+  paymentSummary: {
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 14,
+    gap: 6,
+  },
+  amountRow: { marginTop: 4 },
+  amountText: { fontSize: 20, fontWeight: 'bold', color: '#34D399', marginLeft: 6 },
+  paymentBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    padding: 14,
+    borderRadius: 12,
+    marginTop: 8,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+  },
+  paymentBtnText: { flex: 1, color: '#fff', fontSize: 15, fontWeight: '600' },
 });