import { StyleSheet, Platform } from 'react-native';

// ─── Design tokens (mirrors checkout.css CSS variables) ──────────────────────

export const COLORS = {
  primary:        '#0ea5e9',
  primaryDark:    '#0284c7',
  primaryLight:   '#e0f2fe',
  success:        '#10b981',
  warning:        '#f59e0b',
  error:          '#ef4444',
  // Light theme
  text:           '#1e293b',
  textMuted:      '#64748b',
  textFaint:      '#94a3b8',
  bg:             '#ffffff',
  bgSubtle:       '#f8fafc',
  border:         '#e2e8f0',
  // Dark theme
  textDark:       '#f1f5f9',
  textMutedDark:  '#94a3b8',
  textFaintDark:  '#64748b',
  bgDark:         '#1e293b',
  bgSubtleDark:   '#0f172a',
  borderDark:     '#334155',
} as const;

export const FONTS = {
  mono: Platform.OS === 'ios' ? 'Courier New' : 'monospace',
  system: Platform.OS === 'ios' ? 'System' : 'Roboto',
} as const;

// ─── Shared stylesheet ────────────────────────────────────────────────────────

export const styles = StyleSheet.create({

  // ── Root container ──────────────────────────────────────────────────────────
  container: {
    backgroundColor: COLORS.bg,
    borderRadius: 16,
    overflow: 'hidden',
    width: '100%',
    maxWidth: 480,
    alignSelf: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.12,
    shadowRadius: 16,
    elevation: 8,
  },
  containerDark: {
    backgroundColor: COLORS.bgDark,
  },

  // ── Widget header ───────────────────────────────────────────────────────────
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
    backgroundColor: COLORS.bg,
  },
  headerDark: {
    backgroundColor: COLORS.bgDark,
    borderBottomColor: COLORS.borderDark,
  },
  headerBrand: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  headerIcon: {
    fontSize: 18,
    color: COLORS.primary,
    marginRight: 6,
  },
  headerTitle: {
    fontSize: 15,
    fontWeight: '600',
    color: COLORS.text,
    letterSpacing: -0.2,
  },
  headerTitleDark: {
    color: COLORS.textDark,
  },
  headerLogoImg: {
    height: 28,
    width: 120,
    maxWidth: 140,
  },
  headerBannerSlot: {
    paddingHorizontal: 16,
    paddingTop: 8,
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
    backgroundColor: COLORS.bgSubtle,
  },
  headerBannerSlotDark: {
    borderBottomColor: COLORS.borderDark,
    backgroundColor: COLORS.bgSubtleDark,
  },

  // ── Progress dots ───────────────────────────────────────────────────────────
  progress: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  progressDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: COLORS.border,
  },
  progressDotActive: {
    backgroundColor: COLORS.primary,
  },
  progressLine: {
    width: 20,
    height: 2,
    borderRadius: 1,
    backgroundColor: COLORS.border,
  },
  progressLineActive: {
    backgroundColor: COLORS.primary,
  },

  // ── Step header (shared by Map + Form steps) ────────────────────────────────
  stepHeader: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 10,
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
  },
  stepHeaderDark: {
    borderBottomColor: COLORS.borderDark,
  },
  stepBadge: {
    width: 26,
    height: 26,
    borderRadius: 13,
    backgroundColor: COLORS.primary,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 1,
  },
  stepBadgeText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: '700',
  },
  stepText: {
    flex: 1,
    gap: 2,
  },
  stepTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: COLORS.text,
    lineHeight: 18,
  },
  stepSub: {
    fontSize: 12,
    color: COLORS.textMuted,
    lineHeight: 17,
  },

  // ── Back button ─────────────────────────────────────────────────────────────
  backBtn: {
    width: 34,
    height: 34,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: COLORS.border,
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: -4,
  },
  backBtnDark: {
    borderColor: COLORS.borderDark,
  },
  backBtnText: {
    fontSize: 18,
    color: COLORS.text,
    lineHeight: 22,
  },
  backBtnTextDark: {
    color: COLORS.textDark,
  },

  // ── Map wrapper ─────────────────────────────────────────────────────────────
  mapWrapper: {
    flex: 1,
  },

  // ── DigiPin badge overlay ───────────────────────────────────────────────────
  digipinBadge: {
    position: 'absolute',
    top: 10,
    left: 10,
    zIndex: 10,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    backgroundColor: COLORS.bg,
    borderWidth: 1.5,
    borderColor: COLORS.primaryLight,
    borderRadius: 100,
    paddingVertical: 5,
    paddingLeft: 8,
    paddingRight: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.12,
    shadowRadius: 4,
    elevation: 4,
  },
  digipinBadgeDark: {
    backgroundColor: COLORS.bgDark,
    borderColor: 'rgba(14,165,233,0.35)',
  },
  digipinLabel: {
    fontSize: 10,
    fontWeight: '700',
    textTransform: 'uppercase',
    letterSpacing: 1,
    color: COLORS.textMuted,
  },
  digipinLabelDark: {
    color: COLORS.textMutedDark,
  },
  digipinCode: {
    fontSize: 13,
    fontWeight: '700',
    color: COLORS.primary,
    letterSpacing: 0.5,
    fontFamily: FONTS.mono,
  },

  // ── Out-of-India notice ─────────────────────────────────────────────────────
  mapNotice: {
    position: 'absolute',
    bottom: 12,
    alignSelf: 'center',
    backgroundColor: 'rgba(30,41,59,0.85)',
    borderRadius: 100,
    paddingVertical: 6,
    paddingHorizontal: 14,
  },
  mapNoticeText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: '500',
  },

  // ── Locate-me button ────────────────────────────────────────────────────────
  locateBtn: {
    position: 'absolute',
    top: 10,
    right: 10,
    zIndex: 10,
    width: 40,
    height: 40,
    borderRadius: 8,
    backgroundColor: COLORS.bg,
    borderWidth: 1,
    borderColor: COLORS.border,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 3,
  },
  locateBtnDark: {
    backgroundColor: COLORS.bgDark,
    borderColor: COLORS.borderDark,
  },

  // ── Geo error toast ─────────────────────────────────────────────────────────
  geoError: {
    position: 'absolute',
    top: 60,
    left: 10,
    right: 10,
    zIndex: 20,
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 8,
    backgroundColor: '#fff',
    borderWidth: 1.5,
    borderColor: COLORS.error,
    borderRadius: 8,
    padding: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 6,
  },
  geoErrorText: {
    flex: 1,
    fontSize: 12,
    color: COLORS.error,
    lineHeight: 16,
  },
  geoErrorDismiss: {
    paddingHorizontal: 4,
  },
  geoErrorDismissText: {
    fontSize: 16,
    color: COLORS.error,
    lineHeight: 18,
    opacity: 0.8,
  },

  // ── Coordinates strip ───────────────────────────────────────────────────────
  coordsStrip: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 6,
    backgroundColor: COLORS.bgSubtle,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
  },
  coordsStripDark: {
    backgroundColor: COLORS.bgSubtleDark,
    borderBottomColor: COLORS.borderDark,
  },
  coordsText: {
    fontSize: 11,
    color: COLORS.textFaint,
    fontFamily: FONTS.mono,
  },
  coordsTextDark: {
    color: COLORS.textFaintDark,
  },

  // ── Map actions bar ─────────────────────────────────────────────────────────
  mapActions: {
    padding: 12,
    paddingHorizontal: 16,
    gap: 6,
    backgroundColor: COLORS.bg,
  },
  mapActionsDark: {
    backgroundColor: COLORS.bgDark,
  },
  mapHint: {
    textAlign: 'center',
    fontSize: 11,
    color: COLORS.textMuted,
  },
  mapHintDark: {
    color: COLORS.textMutedDark,
  },

  // ── Buttons ─────────────────────────────────────────────────────────────────
  btnPrimary: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 6,
    paddingVertical: 14,
    paddingHorizontal: 18,
    backgroundColor: COLORS.primary,
    borderRadius: 8,
    minHeight: 48,
    shadowColor: COLORS.primary,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 3,
  },
  btnPrimaryText: {
    color: '#fff',
    fontSize: 15,
    fontWeight: '600',
    letterSpacing: -0.1,
  },
  btnGhost: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 6,
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 8,
    borderWidth: 1.5,
    borderColor: COLORS.border,
    minHeight: 44,
  },
  btnGhostDark: {
    borderColor: COLORS.borderDark,
  },
  btnGhostText: {
    color: COLORS.textMuted,
    fontSize: 14,
    fontWeight: '600',
  },
  btnGhostTextDark: {
    color: COLORS.textMutedDark,
  },
  btnSecondary: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 6,
    paddingVertical: 8,
    paddingHorizontal: 14,
    borderRadius: 8,
    backgroundColor: COLORS.bgSubtle,
    borderWidth: 1.5,
    borderColor: COLORS.border,
    minHeight: 36,
  },
  btnSecondaryText: {
    color: COLORS.text,
    fontSize: 12,
    fontWeight: '600',
  },
  btnDisabled: {
    opacity: 0.45,
  },

  // ── DigiPin reference strip (form step) ────────────────────────────────────
  formDigipinStrip: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingHorizontal: 16,
    paddingVertical: 10,
    backgroundColor: COLORS.primaryLight,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(14,165,233,0.2)',
  },
  formDigipinStripDark: {
    backgroundColor: 'rgba(14,165,233,0.12)',
    borderBottomColor: 'rgba(14,165,233,0.2)',
  },
  formDigipinStripIcon: {
    fontSize: 14,
    color: COLORS.primary,
  },
  formDigipinStripLabel: {
    fontSize: 10,
    fontWeight: '700',
    textTransform: 'uppercase',
    letterSpacing: 1,
    color: COLORS.textMuted,
  },
  formDigipinStripCode: {
    fontSize: 13,
    fontWeight: '700',
    color: COLORS.primary,
    letterSpacing: 0.6,
    fontFamily: FONTS.mono,
  },

  // ── Loading state ───────────────────────────────────────────────────────────
  loadingState: {
    alignItems: 'center',
    justifyContent: 'center',
    gap: 12,
    paddingVertical: 48,
    paddingHorizontal: 16,
  },
  loadingText: {
    fontSize: 13,
    color: COLORS.textMuted,
    textAlign: 'center',
  },
  loadingTextDark: {
    color: COLORS.textMutedDark,
  },

  // ── Error state ─────────────────────────────────────────────────────────────
  errorState: {
    alignItems: 'center',
    gap: 8,
    paddingVertical: 32,
    paddingHorizontal: 16,
  },
  errorIcon: {
    fontSize: 28,
    color: COLORS.warning,
  },
  errorMsg: {
    fontSize: 13,
    color: COLORS.textMuted,
    textAlign: 'center',
    maxWidth: 280,
    lineHeight: 18,
  },
  errorMsgDark: {
    color: COLORS.textMutedDark,
  },

  // ── Pincode serviceability warning ───────────────────────────────────────────
  pincodeBanner: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 10,
    marginHorizontal: 16,
    marginBottom: 12,
    padding: 12,
    borderRadius: 8,
    backgroundColor: 'rgba(245, 158, 11, 0.12)',
    borderWidth: 1,
    borderColor: 'rgba(245, 158, 11, 0.45)',
  },
  pincodeBannerWarning: {
    backgroundColor: 'rgba(245, 158, 11, 0.12)',
    borderColor: 'rgba(245, 158, 11, 0.45)',
  },
  pincodeBannerDark: {
    backgroundColor: 'rgba(245, 158, 11, 0.15)',
    borderColor: 'rgba(245, 158, 11, 0.35)',
  },
  pincodeBannerError: {
    backgroundColor: 'rgba(239, 68, 68, 0.1)',
    borderColor: 'rgba(239, 68, 68, 0.38)',
  },
  pincodeBannerErrorDark: {
    backgroundColor: 'rgba(239, 68, 68, 0.14)',
    borderColor: 'rgba(239, 68, 68, 0.34)',
  },
  pincodeBannerInfo: {
    backgroundColor: 'rgba(14, 165, 233, 0.09)',
    borderColor: 'rgba(14, 165, 233, 0.28)',
  },
  pincodeBannerInfoDark: {
    backgroundColor: 'rgba(14, 165, 233, 0.13)',
    borderColor: 'rgba(14, 165, 233, 0.26)',
  },
  pincodeBannerIcon: {
    width: 18,
    height: 18,
    borderRadius: 9,
    textAlign: 'center',
    fontSize: 16,
    lineHeight: 20,
    fontWeight: '700',
  },
  pincodeBannerTitle: {
    fontSize: 13,
    fontWeight: '600',
    color: COLORS.text,
    marginBottom: 4,
  },
  pincodeBannerTitleDark: {
    color: COLORS.textDark,
  },
  pincodeBannerBody: {
    fontSize: 12,
    color: COLORS.textMuted,
    lineHeight: 17,
  },
  pincodeBannerBodyDark: {
    color: COLORS.textMutedDark,
  },

  // ── Form sections ───────────────────────────────────────────────────────────
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingHorizontal: 16,
    paddingTop: 12,
    paddingBottom: 10,
  },
  sectionHeaderIcon: {
    fontSize: 14,
  },
  sectionHeaderText: {
    fontSize: 12,
    fontWeight: '600',
    color: COLORS.textMuted,
    textTransform: 'uppercase',
    letterSpacing: 0.8,
  },
  sectionHeaderTextDark: {
    color: COLORS.textMutedDark,
  },
  sectionHeaderCompact: {
    paddingTop: 10,
    paddingBottom: 8,
  },
  sectionHeaderTextCompact: {
    fontSize: 11,
    letterSpacing: 1,
  },
  sectionDivider: {
    height: 1,
    backgroundColor: COLORS.border,
    marginBottom: 0,
  },
  sectionDividerDark: {
    backgroundColor: COLORS.borderDark,
  },

  // ── Auto-filled rows ────────────────────────────────────────────────────────
  autoGrid: {
    paddingHorizontal: 8,
    paddingBottom: 12,
  },
  autoRow: {
    paddingHorizontal: 8,
    paddingVertical: 8,
    borderRadius: 8,
  },
  autoRowLabel: {
    fontSize: 10,
    fontWeight: '600',
    textTransform: 'uppercase',
    letterSpacing: 0.8,
    color: COLORS.textFaint,
    marginBottom: 2,
  },
  autoRowLabelDark: {
    color: COLORS.textFaintDark,
  },
  autoRowValue: {
    fontSize: 13,
    fontWeight: '500',
    color: COLORS.text,
  },
  autoRowValueDark: {
    color: COLORS.textDark,
  },
  autoRowValuePincode: {
    fontSize: 14,
    fontWeight: '700',
    color: COLORS.primary,
    fontFamily: FONTS.mono,
  },
  autoRowsRow: {
    flexDirection: 'row',
    gap: 0,
  },
  autoRowHalf: {
    flex: 1,
  },

  // ── Locality selector ───────────────────────────────────────────────────────
  localitySelector: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 6,
    paddingHorizontal: 10,
    borderWidth: 1.5,
    borderColor: COLORS.border,
    borderRadius: 8,
    backgroundColor: COLORS.bg,
    marginTop: 2,
  },
  localitySelectorDark: {
    borderColor: COLORS.borderDark,
    backgroundColor: COLORS.bgDark,
  },
  localitySelectorText: {
    fontSize: 13,
    fontWeight: '500',
    color: COLORS.text,
    flex: 1,
  },
  localitySelectorTextDark: {
    color: COLORS.textDark,
  },
  localitySelectorArrow: {
    fontSize: 12,
    color: COLORS.textMuted,
    marginLeft: 4,
  },

  // ── Locality picker modal ───────────────────────────────────────────────────
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-end',
  },
  modalSheet: {
    backgroundColor: COLORS.bg,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingTop: 8,
    paddingBottom: 32,
    maxHeight: '60%',
  },
  modalSheetDark: {
    backgroundColor: COLORS.bgDark,
  },
  modalHandle: {
    width: 40,
    height: 4,
    borderRadius: 2,
    backgroundColor: COLORS.border,
    alignSelf: 'center',
    marginBottom: 12,
  },
  modalTitle: {
    fontSize: 15,
    fontWeight: '600',
    color: COLORS.text,
    paddingHorizontal: 20,
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
  },
  modalTitleDark: {
    color: COLORS.textDark,
    borderBottomColor: COLORS.borderDark,
  },
  modalOption: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 14,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: COLORS.border,
  },
  modalOptionDark: {
    borderBottomColor: COLORS.borderDark,
  },
  modalOptionSelected: {
    backgroundColor: COLORS.primaryLight,
  },
  modalOptionText: {
    fontSize: 14,
    color: COLORS.text,
  },
  modalOptionTextDark: {
    color: COLORS.textDark,
  },
  modalOptionTextSelected: {
    color: COLORS.primary,
    fontWeight: '600',
  },
  modalOptionCheckmark: {
    fontSize: 14,
    color: COLORS.primary,
    fontWeight: '700',
  },

  // ── Address label picker ────────────────────────────────────────────────────
  labelPicker: {
    flexDirection: 'row',
    gap: 6,
    paddingHorizontal: 16,
    paddingBottom: 12,
  },
  labelPickerOption: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 6,
    minHeight: 44,
    paddingVertical: 0,
    paddingHorizontal: 12,
    borderWidth: 1,
    borderColor: COLORS.border,
    borderRadius: 999,
    backgroundColor: COLORS.bgSubtle,
  },
  labelPickerOptionDark: {
    borderColor: COLORS.borderDark,
    backgroundColor: COLORS.bgSubtleDark,
  },
  labelPickerOptionActive: {
    borderColor: 'transparent',
    backgroundColor: COLORS.primaryLight,
  },
  labelPickerOptionActiveDark: {
    borderColor: 'transparent',
    backgroundColor: '#0c4a6e33',
  },
  labelPickerText: {
    fontSize: 13,
    fontWeight: '500',
    color: COLORS.textMuted,
  },
  labelPickerTextDark: {
    color: COLORS.textMutedDark,
  },
  labelPickerTextActive: {
    color: COLORS.primary,
    fontWeight: '600',
  },
  labelTextField: {
    paddingHorizontal: 16,
    paddingBottom: 12,
  },

  // ── Manual fields ───────────────────────────────────────────────────────────
  fieldsGrid: {
    paddingHorizontal: 16,
    paddingTop: 8,
    paddingBottom: 16,
    gap: 12,
  },
  fieldRow: {
    flexDirection: 'row',
    gap: 12,
  },
  field: {
    flex: 1,
    gap: 4,
  },
  fieldFull: {
    gap: 4,
  },
  fieldLabel: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  fieldLabelText: {
    fontSize: 12,
    fontWeight: '600',
    color: COLORS.textMuted,
  },
  fieldLabelTextDark: {
    color: COLORS.textMutedDark,
  },
  fieldRequired: {
    fontSize: 14,
    color: COLORS.error,
    lineHeight: 16,
  },
  fieldOptional: {
    fontSize: 10,
    fontWeight: '400',
    color: COLORS.textFaint,
  },
  fieldOptionalDark: {
    color: COLORS.textFaintDark,
  },
  fieldInput: {
    paddingVertical: 9,
    paddingHorizontal: 11,
    fontSize: 14,
    color: COLORS.text,
    backgroundColor: COLORS.bg,
    borderWidth: 1.5,
    borderColor: COLORS.border,
    borderRadius: 8,
    minHeight: 42,
  },
  fieldInputDark: {
    color: COLORS.textDark,
    backgroundColor: COLORS.bgDark,
    borderColor: COLORS.borderDark,
  },
  fieldInputFocused: {
    borderColor: COLORS.primary,
  },

  // ── Form actions ────────────────────────────────────────────────────────────
  formActions: {
    flexDirection: 'row',
    gap: 8,
    padding: 12,
    paddingHorizontal: 16,
    borderTopWidth: 1,
    borderTopColor: COLORS.border,
    backgroundColor: COLORS.bg,
  },
  formActionsDark: {
    backgroundColor: COLORS.bgDark,
    borderTopColor: COLORS.borderDark,
  },

  // ── Success screen ──────────────────────────────────────────────────────────
  successScreen: {
    alignItems: 'center',
    gap: 12,
    paddingVertical: 32,
    paddingHorizontal: 20,
  },
  successIcon: {
    fontSize: 48,
  },
  successTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: COLORS.text,
    letterSpacing: -0.2,
    textAlign: 'center',
  },
  successTitleDark: {
    color: COLORS.textDark,
  },
  successAddress: {
    fontSize: 13,
    color: COLORS.textMuted,
    textAlign: 'center',
    maxWidth: 300,
    lineHeight: 19,
  },
  successAddressDark: {
    color: COLORS.textMutedDark,
  },
  successDigipinBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    paddingVertical: 5,
    paddingLeft: 8,
    paddingRight: 12,
    borderRadius: 100,
    borderWidth: 1.5,
    borderColor: COLORS.primaryLight,
    backgroundColor: COLORS.bg,
  },
  successDigipinBadgeDark: {
    borderColor: 'rgba(14,165,233,0.35)',
    backgroundColor: COLORS.bgDark,
  },

  codBanner: {
    alignSelf: 'stretch',
    marginHorizontal: 16,
    marginTop: 4,
    marginBottom: 8,
    padding: 14,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: COLORS.border,
    backgroundColor: COLORS.bgSubtle,
    gap: 6,
  },
  codBannerDark: {
    borderColor: COLORS.borderDark,
    backgroundColor: 'rgba(255,255,255,0.04)',
  },
  codBannerTitle: {
    fontSize: 12,
    fontWeight: '700',
    letterSpacing: 0.4,
    textTransform: 'uppercase',
    color: COLORS.textMuted,
  },
  codBannerTitleDark: {
    color: COLORS.textMutedDark,
  },
  codBannerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
  },
  codBannerMuted: {
    fontSize: 13,
    color: COLORS.textMuted,
    lineHeight: 18,
    flex: 1,
  },
  codBannerMutedDark: {
    color: COLORS.textMutedDark,
  },
  codBannerOk: {
    fontSize: 13,
    color: COLORS.success,
    fontWeight: '600',
  },
  codBannerOkDark: {
    color: '#34d399',
  },
  codBannerWarn: {
    fontSize: 13,
    color: COLORS.warning,
  },
  codBannerWarnDark: {
    color: '#fbbf24',
  },

  // ── Footer ──────────────────────────────────────────────────────────────────
  footer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 4,
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderTopWidth: 1,
    borderTopColor: COLORS.border,
    backgroundColor: COLORS.bgSubtle,
  },
  footerDark: {
    backgroundColor: COLORS.bgSubtleDark,
    borderTopColor: COLORS.borderDark,
  },
  footerText: {
    fontSize: 11,
    color: COLORS.textFaint,
  },
  footerTextDark: {
    color: COLORS.textFaintDark,
  },
  footerLink: {
    fontSize: 11,
    color: COLORS.primary,
    fontWeight: '500',
  },

  // ── Search bar ──────────────────────────────────────────────────────────────
  searchBar: {
    paddingHorizontal: 12,
    paddingTop: 10,
    paddingBottom: 6,
    backgroundColor: COLORS.bg,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
  },
  searchBarDark: {
    backgroundColor: COLORS.bgDark,
    borderBottomColor: COLORS.borderDark,
  },
  searchInputWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: COLORS.bgSubtle,
    borderWidth: 1.5,
    borderColor: COLORS.border,
    borderRadius: 8,
    paddingHorizontal: 10,
  },
  searchInputWrapDark: {
    backgroundColor: COLORS.bgSubtleDark,
    borderColor: COLORS.borderDark,
  },
  searchInput: {
    flex: 1,
    paddingVertical: 9,
    fontSize: 13,
    color: COLORS.text,
  },
  searchInputDark: {
    color: COLORS.textDark,
  },
  searchSpinner: {
    marginLeft: 6,
  },
  searchError: {
    marginTop: 4,
    marginLeft: 2,
    fontSize: 11,
    color: COLORS.error,
  },
  searchDropdown: {
    maxHeight: 220,
    borderWidth: 1.5,
    borderColor: COLORS.border,
    borderRadius: 8,
    marginTop: 4,
    backgroundColor: COLORS.bg,
  },
  searchDropdownDark: {
    borderColor: COLORS.borderDark,
    backgroundColor: COLORS.bgDark,
  },
  searchSuggestion: {
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: COLORS.border,
  },
  searchSuggestionDark: {
    borderBottomColor: COLORS.borderDark,
  },
  searchSuggestionName: {
    fontSize: 13,
    fontWeight: '500',
    color: COLORS.text,
  },
  searchSuggestionSub: {
    fontSize: 11,
    color: COLORS.textMuted,
    marginTop: 1,
  },
  searchHint: {
    marginTop: 5,
    marginLeft: 2,
    fontSize: 11,
    color: COLORS.textFaint,
  },
  searchHintChip: {
    fontSize: 10,
    fontWeight: '700',
    color: COLORS.primary,
  },

  // ── Address card meta row ───────────────────────────────────────────────────
  addrCardMeta: {
    flexDirection: 'row' as const,
    flexWrap: 'wrap' as const,
    alignItems: 'center',
    gap: 6,
    marginTop: 8,
  },

  // ── "Saved at [Brand]" chip ─────────────────────────────────────────────────
  brandChip: {
    flexDirection: 'row' as const,
    alignItems: 'center',
    gap: 4,
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 20,
    backgroundColor: COLORS.primaryLight,
    borderWidth: 1,
    borderColor: COLORS.primary + '4D', // 30% opacity
    maxWidth: 140,
  },
  brandChipText: {
    fontSize: 11,
    fontWeight: '500' as const,
    color: COLORS.primary,
  },
  brandChipDark: {
    backgroundColor: COLORS.primaryDark + '26', // ~15% opacity
    borderColor: COLORS.primary + '55',
  },

  // ── Generic text helpers ────────────────────────────────────────────────────
  textLight: {
    color: COLORS.textDark,
  },
  textMutedStyle: {
    color: COLORS.textMuted,
  },
  textMutedDarkStyle: {
    color: COLORS.textMutedDark,
  },
  textFaintStyle: {
    color: COLORS.textFaint,
  },
  textFaintDarkStyle: {
    color: COLORS.textFaintDark,
  },
});