.exchange-rate-calculator-container {
  max-width: 1000px; 
  border-radius: 25px;
  margin: 20px auto;
  background-color: #0D1B3E;
  color: #fff;
  padding: 60px 80px; 
}

.exchange-rate-calculator-container .thb-state,
.exchange-rate-calculator-container.active .chi-state {
  display: none !important;
}

.exchange-rate-calculator-container.active .thb-state {
  display: inline-block !important;
}

.exchange-rate-calculator-container .exchange-box { 
  background-color: #fff;
  padding: 30px 10px;
  border-radius: 25px;
  text-align: center;
  color: #222;
}

.exchange-rate-calculator-container .exchange-title {
  font-size: 36px; line-height: 1;
  margin-bottom: 0px;
  color: #FFF;
  text-align: center;
}

.exchange-rate-calculator-container .exchange-subtitle {
  font-size: 26px;
  font-weight: normal;
  color: #ddd;
  margin-bottom: 30px;
  text-align: center;
}

.exchange-rate-calculator-container .exchange-toggle-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.exchange-rate-calculator-container .exchange-toggle {
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  flex: 1;
  width: 50%;
  border-radius: 10px 0px 0px 10px;
  background-color: #f0f0f0;
  color: #333;
  transition: all 0.2s ease-in-out;
}

.exchange-rate-calculator-container .exchange-toggle:last-child {
 
  border-radius: 0px 10px 10px 0px; 
}

.exchange-rate-calculator-container .exchange-toggle.active {
  background-color: #d62800;
  color: #fff;
}

.exchange-rate-calculator-container .exchange-form-fields {
  width: 100%;

  display: flex; 
  justify-content: space-around;
  vertical-align: middle;
  margin-bottom: 20px;
  gap: 20px; 
}

.exchange-rate-calculator-container .exchange-field {
  flex: 1;
  text-align: center;
  margin-bottom: 10px;
}


.exchange-rate-calculator-container .exchange-field img { 
   display: inline-block; 
  justify-content: flex-start;
  vertical-align: middle;
  max-width: 60px; margin: 15px;
}

.exchange-rate-calculator-container label {
 display: inline-block;  
  font-weight: bold;
  font-size: 26px;
}

.exchange-rate-calculator-container .exchange-field input {
 
  max-width: 180px;
  text-align: center;
  padding: 15px;
  color: #666;
  border-radius: 10px;
  border: 1 solid #ddd;
  background: #FFF;
  font-size: 20px;
}

.exchange-rate-calculator-container .exchange-field input:disabled {
  background-color: #fff;   
  border: none; 
  font-size: 22px; font-weight: 600;
}


.exchange-rate-calculator-container .exchange-rate-info {
  font-size: 16px;
  margin-bottom: 30px;
}

.exchange-rate-calculator-container .exchange-note {
  color: #555;
  margin-top: 8px;
}

.exchange-rate-calculator-container .exchange-actions {
  text-align: center;
}

.exchange-rate-calculator-container .exchange-actions button {
  margin: 0 10px;
}

.exchange-rate-calculator-container .exchange-calculate-reset-btn {
  display: none;
}

.exchange-rate-calculator-container .exchange-calculate-btn {
  padding: 10px 30px;
  font-size: 16px;
  background-color: #d62800;
  border: none;
  color: white;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.exchange-rate-calculator-container .exchange-calculate-btn.submit {
  padding: 20px;
  font-size: 16px;
  color: #ccc;
  background-color: #fff;
}
.exchange-rate-calculator-container .exchange-calculate-btn.submit:hover {
  background-color: #fff;
  opacity: 0.7;
}

.exchange-rate-calculator-container h4,
.exchange-rate-calculator-container h5 { color: #0D1B3E; }

.exchange-rate-calculator-container h5 span { color: #d62800; }

.exchange-rate-calculator-container .exchange-calculate-btn.reset {
  background-color: #666;
}
  
.exchange-rate-calculator-container .exchange-calculate-btn:hover {
  background-color: #aa1f00;
}

.exchange-rate-calculator-container .exchange-rate-total {
  display: none;
  font-size: 26px;
  color: #333;
  text-align: center;
}

@media (max-width: 569px) {
    .estimate-service-fee-container .custom-tabs { display:block; font-size: 16px;  }
    
.estimate-service-fee-container .custom-tab {
    padding: 5px; margin-bottom: 5px;  
}
    
 .estimate-service-fee-container h3 ,
 .exchange-rate-calculator-container .exchange-title
 { font-size: 24px; line-height: 1.3;}
 
 .exchange-rate-calculator-container label ,
 .exchange-rate-calculator-container .exchange-subtitle ,
 .exchange-rate-calculator-container .exchange-field input { font-size: 16px;  padding: 0px; }
 
.exchange-rate-calculator-container .exchange-field { padding: 5px;}

  .exchange-rate-calculator-container .exchange-form-fields { margin-bottom: 5px;}
.exchange-rate-calculator-container .exchange-field button {
    display: none; }
}