.pc-calculator-container {
  margin: 20px 0;
}

.pc-solution-section {
  margin-bottom: 30px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.pc-solution-section h2 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 20px;
  color: #333;
}

.pc-solution-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background-color: #ffffff;
}

.pc-solution-table th,
.pc-solution-table td {
    padding: 10px;
    border: 1px solid #CAE5FF;
    text-align: center;
}

.pc-solution-table th {
  font-weight: bold;
}

/* Set fixed column widths */
/* First column: 80% */
.pc-solution-table th:first-child,
.pc-solution-table td:first-child {
    width: 80%;
    min-width: 250px;
    max-width: 100%;
}

/* Second column: 20% */
.pc-solution-table th:nth-child(2),
.pc-solution-table td:nth-child(2) {
    width: 20%;
    min-width: 120px;
    max-width: 100%;
}

.pc-payment-networks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pc-payment-networks img {
  /* width: auto;
  height: 24px;
  object-fit: contain;
  border-radius: 5px; */
  width: 70px;
  height: 40px;
  object-fit: scale-down;
  background: white;
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pc-solution-table td {
  vertical-align: middle;
}

#payment-solutions {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next row */
  gap: 10px; /* Space between buttons */
  margin: auto; /* Center the container */
}

#payment-solutions button {
  width: calc(50% - 5px); /* Ensure each button is 50% minus half the gap */
  padding: 15px;
  font-size: 16px;
  box-sizing: border-box; /* Include padding and borders in the width */
  text-align: center;
}

#payment-methods {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next row */
  gap: 10px; /* Space between buttons */
  margin: auto; /* Center the container */
}

#payment-methods button {
  width: calc(50% - 5px); /* Ensure each button is 50% minus half the gap */
  padding: 15px;
  font-size: 16px;
  box-sizing: border-box; /* Include padding and borders in the width */
  text-align: center;
}

.solution-btn {
  width: 50%;
  background-color: #DFF0FF;
  padding: 25px;
}
.method-btn {
  width: 50%;
  background-color: #DFF0FF;
  padding: 25px;
}
.active-solution-btn {
  width: 50%;
  background-color: #007FFF;
  color: #ffffff;
  box-shadow: 0px 28px 8px 0px rgba(0, 0, 0, 0.00), 0px 18px 7px 0px rgba(0, 0, 0, 0.01), 0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px 0px rgba(0, 0, 0, 0.09), 0px 1px 2px 0px rgba(0, 0, 0, 0.10);
}
.active-solution-btn, .active-method-btn {
  width: 50%;
  background-color: #007FFF;
  color: #ffffff;
  box-shadow: 0px 28px 8px 0px rgba(0, 0, 0, 0.00), 0px 18px 7px 0px rgba(0, 0, 0, 0.01), 0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px 0px rgba(0, 0, 0, 0.09), 0px 1px 2px 0px rgba(0, 0, 0, 0.10);
}

.transaction-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #f5faff;
border-radius: 10px;
font-family: Arial, sans-serif;
max-width: 600px;
margin: 20px auto;
}

.left-column {
text-align: left;
/*display: flex;*/
flex-direction: column;
gap: 10px;
}

.right-column {
text-align: right;
/*display: flex;*/
flex-direction: column;
gap: 10px;
}

.card-icons {
display: flex;
/*gap: 10px;*/
justify-content: flex-start;
flex-wrap: wrap;
width: 80%;
font-size: 14px;
}

.card-icons img {
/* width: auto; */
/* height: 16px; */
margin-right: 5px;
width: 70px;
height: 30px;
object-fit: scale-down;
background: white;
border-radius: 8px;
padding: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fee-details p {
margin: 0;
font-size: 20px;
font-weight: bold;
color: #172b4d;
}

.fee-details span {
font-size: 14px;
color: #6b778c;
}

.rate {
background-color: #2dcad9;
color: white;
border-radius: 20px;
padding: 5px 15px;
font-size: 14px;
font-weight: bold;
display: inline-block;
text-align: right;
}

.net-amount p {
margin: 0;
font-size: 20px;
font-weight: bold;
color: #172b4d;
}

.net-amount span {
font-size: 14px;
color: #6b778c;
}

#foreignCardCheckbox {
  width: 16px; /* Adjust the size if needed */
  height: 16px; /* Match the width for a square checkbox */
  border: 1px solid #CAE5FF; /* Set the border color */
  border-radius: 0; /* Remove rounded corners */
  appearance: none; /* Remove default checkbox styling */
  outline: none; /* Remove the default focus outline */
  cursor: pointer; /* Show pointer cursor on hover */
  position: relative;
  background-color: #FFFFFF;
  border-radius: 2px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
}

#foreignCardCheckbox:checked {
  background-color: #007FFF; /* Ensure the border matches the checked state */
}

#foreignCardCheckbox:checked::after {
  content: "✓"; /* Unicode for a checkmark */
  color: white; /* Color of the checkmark */
  font-size: 12px; /* Adjust the size of the checkmark */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for centering */
}

.method-label {
  border: 1px solid #007FFF;
  padding: 1px 20px;
  color: #007FFF;
  border-radius: 25px;
  font-weight: bold;
  margin-bottom: 3px;
}