/* Custom styles for My WooCommerce Plugin */

/* M-PESA Online Payment Icon */
.my-woocommerce-plugin-payment-icon.mpesa-online {
  background-image: url('path-to-mpesa-online-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}

/* M-PESA Online Settings Page */
.my-woocommerce-plugin-settings-page.mpesa-online {
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

/* Transaction Data Table */
.my-woocommerce-plugin-transaction-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.my-woocommerce-plugin-transaction-table th,
.my-woocommerce-plugin-transaction-table td {
  padding: 12px;
  border: 1px solid #ddd;
  font-size: 14px;
}

.my-woocommerce-plugin-transaction-table th {
  background-color: #f5f5f5;
  font-weight: bold;
  text-align: left;
  color: #333;
}

.my-woocommerce-plugin-transaction-table td {
  text-align: left;
  color: #666;
}

.my-woocommerce-plugin-transaction-table .no-data {
  text-align: center;
  font-style: italic;
  color: #999;
}

/* M-PESA Online Payment Icon Styling in Checkout */
li.wc_payment_method.payment_method_mpesa_online img {
  max-width: 50px; /* Adjust the width as needed */
  height: auto; /* Maintain aspect ratio */
}

/* Success and Error Messages */
#valid-msg {
  color: #00c900;
  font-weight: bold;
}

.hide {
  display: none;
}

#error-msg {
  color: red;
  font-weight: bold;
}