checkout.css

.checkout-section {
  padding: 5px;
  width: 50%;
  margin: auto;
  margin-top: 150px;
  margin-bottom: 50px;
}

.checkout-container {
  background-color: #eecfcc;
  padding: 50px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.checkout-container a {
  text-decoration: none;
  color: #121212;
}

.checkout-container h2,
.checkout-container h3 {
  margin-bottom: 20px;
  color: #000;
}

.checkout-form .form-group {
  margin-bottom: 20px;
}

.checkout-form label {
  display: block;
  margin-bottom: 5px;
  color: #000;
}

.checkout-form input,
.checkout-form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 5px;
  background-color: #f5eceb;
  color: #000;
}

.checkout-form input:focus,
.checkout-form select:focus {
  outline: none;
  border-color: #f73167;
}

.payment-info {
  margin-top: 20px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f73167;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.btn:hover {
  background-color: #cf2956;
}

/* Specific styles for the checkout page */
#payment-method {
  margin-top: 10px;
}

#credit-card-info {
  display: none;
}

/* Show credit card info if payment method is credit card */
.checkout-form select#payment-method:valid {
  display: block;
}