import { StyleSheet } from 'react-native';

export const PaymentStyle = StyleSheet.create({
  container: {
    flex: 1,
    width: '95%',
    margin: 'auto',
    marginTop: 5,
    gap: 10,
  },
  card: {
    padding: 20,
    width: '95%',
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
    gap: 10,
  },
  cardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  title: {
    width: '60%',
    fontSize: 18,
    fontFamily: 'GolosText-Bold',
  },
  badge: {
    backgroundColor: '#4CAF50',
    color: '#fff',
    fontSize: 12,
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 5,
    overflow: 'hidden',
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  infoTitle: {
    fontWeight: '500',
    fontSize: 14,
    color: '#979797',
  },
  text: {
    color: '#28A7E8',
    fontWeight: '500',
    fontSize: 16,
  },
  select: {
    backgroundColor: '#FFFFFF',
    height: 25,
    width: 25,
    borderWidth: 1,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    position: 'absolute',
    // bottom: 70,
    left: 20,
    right: 20,
    height: 56,
    borderRadius: 8,
    justifyContent: 'center',
    backgroundColor: '#28A7E8',
    zIndex: 10,
  },
  modalBtn: {
    height: 56,
    width: '100%',
    margin: 'auto',
    borderRadius: 8,
    justifyContent: 'center',
    backgroundColor: '#28A7E8',
  },
  btnText: {
    color: '#fff',
    fontSize: 20,
    textAlign: 'center',
  },
  containerMethod: {
    width: '95%',
    alignSelf: 'center',
    marginTop: 10,
  },
  cardMethod: {
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
  },
  planeContainer: {
    alignItems: 'center',
    marginBottom: 20,
  },
  planeIcon: {
    position: 'absolute',
    top: 10,
    left: 85,
  },
  infoCard: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    paddingLeft: 20,
    paddingRight: 20,
    marginBottom: 20,
  },
  info: {
    marginBottom: 15,
    gap: 5,
  },
  titleMethod: {
    color: '#1D1D1D',
    fontSize: 18,
    fontWeight: '500',
  },
  textMethod: {
    color: '#555555',
    fontSize: 16,
    fontWeight: '400',
  },
  receiptCard: {
    borderRadius: 10,
    padding: 16,
    marginBottom: 15,
    gap: 8,
  },

  rowBetween: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },

  rowRight: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },

  itemName: {
    fontSize: 17,
    fontFamily: 'GolosText-Bold',
    color: '#333',
  },

  weight: {
    fontSize: 16,
    color: '#777',
  },

  track: {
    fontSize: 15,
    color: '#666',
    textAlign: 'right',
    marginTop: 2,
  },

  price: {
    fontSize: 15,
    fontWeight: '500',
    color: '#444',
  },

  total: {
    fontSize: 16,
    fontFamily: 'GolosText-Bold',
    color: '#1D1D1D',
  },

  paymentCard: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    shadowOpacity: 0.3,
    shadowRadius: 6,
    shadowOffset: { width: 0, height: 2 },
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    width: '90%',
    maxHeight: '80%',
    backgroundColor: '#fff',
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
  },
  content: {
    padding: 10,
    margin: 'auto',
    justifyContent: 'center',
    alignItems: 'center',
    gap: 10,
    marginBottom: 20,
  },
  circle: {
    backgroundColor: '#28A7E8',
    width: 60,
    height: 60,
    borderRadius: 120,
    justifyContent: 'center',
    alignItems: 'center',
  },
  titleModal: {
    fontSize: 16,
    fontWeight: '500',
  },
  closeBtn: {
    padding: 5,
    width: 30,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#0000000D',
    borderRadius: 50,
    shadowColor: '#FFFFFF40',
    shadowOpacity: 0.3,
    shadowRadius: 6,
    shadowOffset: { width: 0, height: 2 },
  },
  divider: {
    width: '100%',
    height: 1,
    backgroundColor: '#E0E0E0',
    marginBottom: 10,
    marginHorizontal: 0,
  },
  status: {
    color: '#00000099',
    fontSize: 16,
    fontWeight: '500',
  },
  label: {
    fontSize: 12,
    fontWeight: '500',
    color: '#28A7E8',
    marginBottom: 5,
  },
  errorText: {
    color: 'red',
    fontSize: 12,
  },
  input: {
    borderWidth: 1,
    borderColor: '#D8DADC',
    borderRadius: 12,
    padding: 15,
    fontSize: 16,
    fontWeight: '400',
    backgroundColor: '#FFFFFF',
    color: '#000000',
  },
});
