body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f4f4f4;
  padding: 0px;
}

h2 {
  color: #333;
}

.donation-box {
  margin-top: 20px;
}

label {
  display: block;
  font-weight: bold;
  margin-top: 10px;
}

input,
select {
    width: 100%;
    padding: 10px 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
  background-color: #451093;
  color: white;
  border: none;
  padding: 10px;
  width: 100%;
  margin-top: 15px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #7a2af0;
}

#message {
  margin-top: 10px;
  font-weight: bold;
  color: green;
}

.twitch-link a {
  display: block;
  margin-top: 20px;
  text-decoration: none;
  color: #ff0000;
  font-weight: bold;
}

.main_outer {
  height: 100vh;
  align-items: center;
}

.box_cnt h2 {
  font-size: 22px;
  font-weight: 700;
color: black;
margin: 0px;
}

.box_cnt p{ color: #6a6a6a; font-size: 14px;}

.video_outer {
  position: relative;
  height: 100vh;
}

 .video_outer:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #00000096;
} 

label{    color: black;
    text-align: start;
    font-size: 14px;
    font-weight: 600;
    margin: 2px 0px;}

.box_cnt{ background-color: white; border-radius: 10px; padding: 15px;}


.payment-options {
    display: grid
;
    gap: 10px;
    margin: 10px 0;
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
}

.payment-option {
    padding: 5px 10px;
    border: 1px solid #c7c7c7;
    background: white;
    color: #007bff;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex
;
    align-items: center;
}

.payment-option:hover {
    background: #f2f2f2;
    color: white;
}

.payment-options input[type="radio"] {
    display: none; /* Hide default radio */
}

.payment-options input[type="radio"]:checked + label {
    background: #45109314;
    color: white;
    border: 1px solid #451093;
}


.currency-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}
.flag {
    width: 33px;
    height: 25px;
    border: 1px solid #ccc;
    position: absolute;
    left: 8px;
    top: 14px;
    object-fit: contain;
}
select {
    padding: 10px 5px 10px 45px;
    font-size: 16px;
    background-image: url(../images/arrow.svg);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ccc;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


.choose_amount input:focus-visible{ outline: none; border: 1px solid #451093;}

select:focus-visible{ outline: none; border: 1px solid #451093;}

#after_donate h3{ font-size: 22px; color: black; font-weight: 600;}
#chart {
    max-width: 380px;
    margin: 50px auto;
}

.raised_amount h4{     color: #451093;
    font-weight: 600;
    font-size: 34px;
    background-color: #4510931a;
    display: inline-block;
    padding: 5px 15px;}


    @media screen and (max-width: 1450px) {

        #after_donate h3 {
            font-size: 18px;}

        .raised_amount h4 {
            color: #451093;
            font-weight: 600;
            font-size: 22px;}
        .box_cnt h2 { font-size: 18px;}
      }

      /* Disable button styling */
button.disabled {
    background-color: #ddd; /* Light gray color */
    color: #888; /* Gray text */
    cursor: not-allowed; /* Show the "not-allowed" cursor */
}

button:not(.disabled) {
    background-color: #451093; /* Original button color */
    color: white;
    cursor: pointer; /* Normal cursor when button is enabled */
}
#validationMessage{
    color:red!important;
    font-size: 16px;
    margin-top: 10px;
}

.donate-btn:disabled {
    background-color: #ccc !important;
    cursor: not-allowed;
    color: #666;
}


.GooglePayButton--dark {
    background-color: #451093!important;
}