/* .csf-wrap { max-width: 820px; margin: 0 auto; } */
.csf-wrap { max-width: fit-content; }
.csf-row { display: flex; align-items: center; }
.csf-dob { flex: 1; padding: 14px 16px; border: 2px solid #caa06b; border-radius: 6px; font-size: 18px; max-width: 220px; margin-right: 10px; }
/* .csf-btn { background: #198754; color: #fff; border: 0; border-radius: 8px; padding: 14px 22px; font-size: 18px; cursor: pointer; } */
.csf-btn { position: relative; overflow: hidden; background-color: #FFFFFF !important; font-family: "Brandon Text", Sans-serif !important; border: none !important; font-weight: 700 !important; text-transform: uppercase !important;
    fill: #333333 !important; color: #333333 !important; font-size: 14px !important; height: 100% !important; border-radius: 45px !important; padding: 5px 5px 5px 15px !important; align-items: center !important; display: flex !important; justify-content: center !important;
    width: fit-content !important; margin-left: 10px; }
.csf-btn span { margin-left: 10px; }
.csf-loading .csf-btn { opacity: .7; pointer-events: none; }
.csf-result { margin-top: 12px; font-size: 18px; }
.csf-intro { text-align: center; line-height: 1.6; margin-bottom: 18px; color: #FFFFFF; }
.csf-strong { color: #FFC72C; font-weight: 700; }
.csf-btn span { z-index: 1 !important; }

.csf-table { width: 100%; border: 1px solid #e6dccf; border-radius: 8px; overflow: hidden; }
.csf-table-head, .csf-result .csf-row{ display: grid; grid-template-columns: 1fr 180px; }
.csf-table-head { background: #FFC72C; color: #333333; font-weight: 700; }
.csf-table-head .csf-col { padding: 14px 16px; color: #333333 !important; }
.csf-row .csf-col { padding: 12px 16px; color: #333333; background: #FFFFFF; }
.csf-row.section { color: #333333; background: #FFFFFF; font-weight: 700; }
.csf-row.section .csf-col{ color: #333333 !important; }
.total .csf-col{ color: #333333 !important; }
.csf-row.total { color: #333333; background: #FFFFFF;font-weight: 700; }
.csf-col.amount { text-align: right; color: #333333; }
.csf-sub { font-size: 12px; color: #0b2159; margin-top: 6px; }
.csf-footer-note { font-size: 14px; margin-top: 12px; color: #FFFFFF; }
.csf-error { color: #b00020; }
.svg-icon {
  background: #FFC72C;
  padding: 11px 11px 6px 11px;
  border-radius: 45px;
  transition: background 0.3s ease;
}
/* Button Hover Animation */
.csf-btn::before {
  content: "";
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translate(50%, -50%) scale(0);
  width: 800px;
  height: 300px;
  background: #FFC72C;
  border-radius: 50%;
  transition: transform 0.8s ease;
  z-index: 0;
}
.csf-btn:hover::before {
  transform: translate(50%, -50%) scale(1);
}
@media (max-width: 600px) {
  .csf-table-head, .csf-row { grid-template-columns: 1fr 190px; }
  .csf-dob { font-size: 16px; max-width: 155px; }
  .csf-btn { font-size: 12px !important; padding: 5px 5px 5px 5px !important; margin-left: 0; }
  .svg-icon { padding: 8px 8px 4px 8px; }
}