body {
      margin: 0;
      padding: 0;
      font-family: 'Orbitron', sans-serif;
      background-color: #505959;
      color: rgb(169, 252, 252);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: start;
      height: 100vh;
      padding-top: 40px;
    }
#voiceSelect {
  font-family: 'Orbitron', sans-serif;
  padding: 8px 12px;
  font-size: 16px;
  border: 2px solid rgb(223, 223, 223);
  border-radius: 6px;
  background-color: #111;
  color: rgb(223, 223, 223);
  cursor: pointer;
  transition: border-color 0.3s ease;
  min-width: 200px;
}

#voiceSelect:hover, #voiceSelect:focus {
  border-color: #0aa;
  outline: none;
}


    .container1 {
      background: #12151ade;
      padding: 30px;
      border: 1px solid rgb(45, 109, 109);
      border-radius: 10px;
      box-shadow: 1 3 30px rgb(2, 2, 2);
      text-align: center;
      width: 90%;
      max-width: 500px;
      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
      top: 50px;
    }

    h1 { font-size: 28px; margin-bottom: 10px; }
    .goal { font-size: 18px; margin-bottom: 20px; }

    .input-group {
      margin: 15px 0;
      text-align: left;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input {
      padding: 10px;
      font-family: 'Orbitron', sans-serif;
      font-size: 16px;
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #0ff;
      background-color: #000;
      color: #0ff;
      box-shadow: 0 4px 5px -2px rgba(2, 2, 2, 0.8);
    }

    button {
      margin-top: 15px;
      padding: 12px 20px;
      background-color: rgb(165, 255, 255);
      color: #000;
      font-family: 'Orbitron', sans-serif;
      font-weight: bold;
      font-size: 16px;
      border: none;
      cursor: pointer;
      width: 100%;
      
    }

    .wallet-info, .tx-history {
  margin-top: 20px;
  font-size: 14px;
  word-break: break-all;
}

.tx-history {
  display: none; 
}

.tx-history ul {
  list-style: none;
  padding: 0;
}

.tx-link {
  text-decoration: none;
  font-family: 'Orbitron', sans-serif;
}

.tx-link:hover {
  text-decoration: underline;
}
body.dark-mode .tx-link {
  color: #fff; 
}

body.light-mode .tx-link {
  color: #000; 
}


    .address-box {
      margin-top: 20px;
      word-break: break-all;
      background: #222;
      padding: 10px;
      border-radius: 6px;
      font-size: 14px;
      box-shadow: 0 4px 5px -2px rgba(2, 2, 2, 0.8);
    }

    .copy-btn, .qr-btn {
      margin-top: 10px;
      padding: 10px;
      background-color: rgb(165, 255, 255);
      color: #000;
      font-weight: bold;
      border: none;
      cursor: pointer;
      width: 48%;
      margin-right: 2%;
    }

    .qr-btn { margin-right: 0; }

    .qr-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  overflow: hidden; /* Prevent scroll */
}


.qr-popup.active {
  display: flex;
}

.qr-popup-content {
  background: #111;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 15px #0ff;
  max-width: 90vw;
  width: 320px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.qr-popup img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.close-qr {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 33px;
  color: #0ff;
  cursor: pointer;
}

.fundraiser-info {
  max-width: 80vw;
  width: 600px;
  background-color: #111;
  border: 1px solid rgb(117, 117, 117);
  padding: 20px;
  border-radius: 10px;
  margin: 10px 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgb(190, 190, 190);
  text-align: center;
  box-shadow: 2px 6px 0 rgba(0, 0, 0, 0.2);
 
}

body.light-mode #donateBtn {
  background-color: #fff;    
  color: #000;                 
  border: 1px solid #000;     
}
#donateBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 120px; 
  height: 44px;
  padding: 0 16px;
  background-color: #0ff; 
  border: none;
  border-radius: 8px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
  box-shadow: 0 4px 5px -2px rgba(2, 2, 2, 0.8);
}

body.light-mode #donateBtn {
  background-color: #fff;     
  color: #000;                
  border: 1px solid #000;     
}

.donate-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

:root {
  --loader-color: #000; 
}

body.light-mode #donateBtn:disabled {
  background-color: #fff !important;  
  border: 1px solid #000 !important; 
  color: #000 !important;             
  opacity: 1 !important;              
  cursor: not-allowed !important;
}


.loader {
  display: inline-block;
  width: 28px;
  height: 28px;
  position: relative;
  vertical-align: middle;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: transparent; 
}

.inner.one {
  animation: rotate-one 1s linear infinite;
  border-bottom-color: var(--loader-color);
}

.inner.two {
  animation: rotate-two 1s linear infinite;
  border-right-color: var(--loader-color);
  animation-delay: 0.3s;
}

.inner.three {
  animation: rotate-three 1s linear infinite;
  border-top-color: var(--loader-color);
  animation-delay: 0.3s;
}

@keyframes rotate-one {
  0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
  100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}

@keyframes rotate-two {
  0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
  100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}

@keyframes rotate-three {
  0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
  100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}

#donateBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
  background-color: #0ff !important;  
  border: none !important;             
  color: #000 !important;             
}


button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.theme-toggle-icons {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 20px;
}
.theme-toggle-wrapper {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 999;
}

#themeIconBtn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

#themeIconBtn:hover {
  transform: scale(1.2);
}

#themeIconBtn svg {
  width: 28px;
  height: 28px;
}


#sunIcon {
  display: none;
}

body.light-mode #moonIcon {
  display: none;
}

body.light-mode #sunIcon {
  display: inline;
}



.switch {
  position: relative;
  display: inline-block;
  
  width: 50px;
  height: 24px;
  margin-right: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  border-radius: 24px;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: black;
  border-radius: 50%;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #0ff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

body.light-mode {
  background-color: #CDD1D1;
  color: #000;
}



body.light-mode input {
  background-color: #fff;
  color: #000;
  border: 1px solid #333;
}

body.light-mode button,
body.light-mode .copy-btn,
body.light-mode .qr-btn,
body.light-mode #donateBtn {
  background-color: #000;
  color: #fff;
}

body.light-mode .address-box {
  background-color: #eee;
  color: #000;
}

body.light-mode .fundraiser-info {
  background-color: #fafafa;
  border-color: #ccc;
  color: #333;
}

body.light-mode .qr-popup-content {
  background: #fff;
  box-shadow: 0 0 15px #000;
}

body.light-mode .close-qr {
  color: #000;
}

#appLink {
  color: white;
  text-decoration: none;
}

#appLink:hover {
  text-decoration: underline;
}

#trackerSelect {
  background-color: #000;
  color: #0ff;
  border: 1px solid #0ff;
  font-family: 'Orbitron', sans-serif;
  padding: 8px;
  font-size: 16px;
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 5px -2px rgba(2, 2, 2, 0.8);
}


body.light-mode #appLink {
  color: #000;
}

body.light-mode #trackerSelect {
  background-color: #fff;
  color: #000;
  border: 1px solid #333;
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #111;
  border: 1px solid #0ff;
  padding: 20px;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  color: #0ff;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
}

.modal-actions {
  margin-top: 20px;
}

.btn-confirm {
  background: #0ff;
  color: #000;
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  margin-right: 10px;
  cursor: pointer;
}

.btn-cancel {
  background: #333;
  color: #0ff;
  font-weight: bold;
  border: 1px solid #0ff;
  padding: 10px 20px;
  cursor: pointer;
}


body.light-mode .modal {
  background: rgba(255, 255, 255, 0.85);
}

body.light-mode .modal-content {
  background: #fff;
  border: 1px solid #000;
  color: #000;
}

body.light-mode .btn-confirm {
  background: #000;
  color: #fff;
}

body.light-mode .btn-cancel {
  background: #eee;
  color: #000;
  border: 1px solid #000;
}