#fw-section-image-208dc69f-781e-4738-99fe-1a102c74732a {
--color-primary: #e73e40;
--color-primary-rgb: 231, 62, 64;
--color-background: #e73e40;
--color-background-rgb: 231, 62, 64;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 113;
background-color: var(--color-background);
color: var(--color-on-background);

}





#fw-section-custom-html-a9e58854-256a-4a98-b757-ebb7d679be2e {

.twitch-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}
.twitch-responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
}



#fw-section-image-1706435174 {
--color-primary: #e73e40;
--color-primary-rgb: 231, 62, 64;
--color-background: #0b0b0d;
--color-background-rgb: 11, 11, 13;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-custom-html-0d529275-874e-40d8-b17e-a0fcd82e1bf9 {
--color-primary: #e73e40;
--color-primary-rgb: 231, 62, 64;
--color-background: #0b0b0d;
--color-background-rgb: 11, 11, 13;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-donations-1701908010 {
--color-primary: #e73e40;
--color-primary-rgb: 231, 62, 64;
--color-background: #0b0b0d;
--color-background-rgb: 11, 11, 13;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);
/* === Fourthwall Donations — simple, matched widths (centered on mobile) === */

/* LEFT: Thank-you card (match Dono/Bits width) */
.donations__info {
  max-width: 500px;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #121217, #0d0d10 60%);
  border: 1px solid #ffffff22;
  border-radius: 20px;
  padding: 16px 18px;
  margin: 0 auto 16px;
  text-align: center;
}

/* Apply the horizontal nudge ONLY on desktop */
@media (min-width: 980px){
  .donations__info { transform: translateX(-29px); }
}

/* Left heading accent */
.donations__header h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: .5px;
  text-align: center;
  color: #E73E40 !important;
}

/* Left blurb text */
.donations__text { margin: 0; text-align: center; }
.donations__text p {
  margin: 0;
  color: #b3b3b8;
  font-size: 14.5px;
  line-height: 1.45;
}

/* RIGHT: Form container (match Alerts width) */
#donation,
.donation-section,
.donation-form {
  max-width: 560px;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #121217, #0d0d10 60%);
  border: 1px solid #ffffff22;
  border-radius: 20px;
  padding: 24px !important;
  margin: 0 auto 16px !important;
  text-align: center;
  box-shadow: none !important;
}

/* Ensure both boxes center nicely on smaller screens */
@media (max-width: 979.98px){
  .donations__info,
  #donation, .donation-section, .donation-form {
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important; /* just in case */
  }
}

/* Inputs / selects / textarea */
#donation input[type="text"],
#donation input[type="number"],
#donation input[type="email"],
#donation textarea,
#donation select,
.donation-section input[type="text"],
.donation-section input[type="number"],
.donation-section input[type="email"],
.donation-section textarea,
.donation-section select,
.donation-form input[type="text"],
.donation-form input[type="number"],
.donation-form input[type="email"],
.donation-form textarea,
.donation-form select {
  width: 100%;
  background: #1a1a22;
  color: #f6f6f7;
  border: 1px solid #ffffff22;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14.5px;
  margin: 0 0 12px;
  outline: 0;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

#donation textarea,
.donation-section textarea,
.donation-form textarea { min-height: 110px; resize: vertical; }

#donation input::placeholder,
#donation textarea::placeholder,
.donation-section input::placeholder,
.donation-section textarea::placeholder,
.donation-form input::placeholder,
.donation-form textarea::placeholder { color: #9da0a8; }

#donation input:focus, #donation textarea:focus, #donation select:focus,
.donation-section input:focus, .donation-section textarea:focus, .donation-section select:focus,
.donation-form input:focus, .donation-form textarea:focus, .donation-form select:focus {
  border-color: #ffffff44;
  box-shadow: 0 0 0 3px rgba(255,255,255,.07);
}

/* Amount chips */
#donation .amounts button, #donation .amounts [data-amount],
.donation-section .amounts button, .donation-section .amounts [data-amount],
.donation-form .amounts button, .donation-form .amounts [data-amount] {
  background: #1a1a22;
  color: #f6f6f7;
  border: 1px solid #ffffff22;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 4px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s;
}
#donation .amounts button:hover, #donation .amounts [data-amount]:hover,
.donation-section .amounts button:hover, .donation-section .amounts [data-amount]:hover,
.donation-form .amounts button:hover, .donation-form .amounts [data-amount]:hover {
  transform: translateY(-1px);
  border-color: #ffffff44;
}

/* Submit button accent */
#donation button[type="submit"],
#donation .donate-button,
#donation .btn-primary,
.donation-section button[type="submit"],
.donation-section .donate-button,
.donation-section .btn-primary,
.donation-form button[type="submit"],
.donation-form .donate-button,
.donation-form .btn-primary {
  width: 100%;
  background: #E73E40 !important;
  color: #fff !important;
  font-weight: 800;
  padding: 14px 20px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  box-shadow: none !important;
  transition: transform .15s;
}
#donation button[type="submit"]:hover,
#donation .donate-button:hover,
#donation .btn-primary:hover,
.donation-section button[type="submit"]:hover,
.donation-section .donate-button:hover,
.donation-section .btn-primary:hover,
.donation-form button[type="submit"]:hover,
.donation-form .donate-button:hover,
.donation-form .btn-primary:hover {
  transform: translateY(-1px);
}

}
#fw-section-custom-html-656375ba-9e83-41d1-88d6-3bbaaf055c84 {
--color-primary: #e73e40;
--color-primary-rgb: 231, 62, 64;
--color-background: #0b0b0d;
--color-background-rgb: 11, 11, 13;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);

}