/**
 * @file
 * Donation Form Styling - Matching Cinequest Screenshots
 *
 * Clean, minimal donation form design
 */

/* Overall page background */
body.path-form .region-content {
  background: #f5f5f5;
}

/* Webform wrapper - White card container */
.donation-form {
  margin: 0 auto;
  padding: 0;
  background: #f5f5f5;
}

.donation-form .webform-wrapper {
  background: #fff;
  padding: 60px 120px;
  border: 1px solid #C4C4C4;
  border-radius: 0;
}

/* Progress Bar Styling - Circular Icons with Line */
.donation-progress {
  margin-bottom: 80px;
  padding: 40px 0 20px;
  background: transparent;
}

/* Progress tracker title - centered h2 above circles */
.progress-tracker-title {
  font-size: 48px;
  font-weight: 600;
  color: #666;
  text-align: center;
  margin: 0 0 40px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.5px;
  text-transform: none;
}

.webform-progress-tracker {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 120px;
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  margin-bottom: 60px;
}

/* Connector line between steps */
.webform-progress-tracker::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 200px);
  height: 2px;
  background: #ddd;
  z-index: 1;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
}

/* Progress marker (icon container) */
.progress-step .progress-marker {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: none;
  overflow: hidden;
}

.progress-step .progress-marker .step-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* SVG icon styling */
.progress-step .progress-marker svg.step-icon {
  width: 45px;
  height: 45px;
}

.progress-step .progress-marker .step-number-text {
  font-size: 32px;
  font-weight: 400;
  color: #ccc;
}

/* Progress text/title - HIDDEN to match screenshot */
.progress-step .progress-text {
  display: none;
}

.progress-step .progress-title {
  display: none;
}

/* Active step */
.progress-step.is-active .progress-marker {
  background: #fff;
  border-color: #737373;
  box-shadow: none;
}

/* Completed step */
.progress-step.is-complete .progress-marker {
  background: #fff;
  border-color: #ccc;
}

/* Legacy support for old template */
.progress-step .step-number {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ccc;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 400;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: none;
}

.progress-step .step-title {
  display: none; /* Hide step titles as per screenshot */
}

.progress-step.active .step-number {
  background: #fff;
  border-color: #333;
  color: #333;
  box-shadow: none;
}

.progress-step.completed .step-number {
  background: #fff;
  border-color: #ccc;
  color: #ccc;
}

/* Form Container - removed max-width constraint */
.webform-wrapper {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto;
}

/* Page Title/Heading - "Choose an Amount" */
.webform-submission-form h2.webform-page-title {
  font-size: 48px;
  font-weight: 600;
  color: #666;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.5px;
}

/* Intro Text */
.form-item-intro-text {
  margin-bottom: 25px;
  text-align: left;
  max-width: 650px;
  margin-left: 0;
  margin-right: auto;
}

.form-item-intro-text p {
  color: #999;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 15px;
  font-weight: 400;
}

.form-item-intro-text p:last-child {
  margin-bottom: 25px;
}

.form-item-intro-text em {
  font-style: normal;
  color: #999;
  font-size: 16px;
  font-weight: 400;
}

/* Hide field labels - use placeholders instead */
.form-item-donation-amount-select > label,
.form-item-custom-amount > label,
.form-item-username > label,
.form-item-password > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Checkbox for donation towards pass */
.form-item-donation-towards-pass {
  margin: 0 0 20px 0;
  text-align: left;
}

.form-item-donation-towards-pass label {
  font-size: 14px;
  color: #aaa;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.form-item-donation-towards-pass input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: 1px solid #ccc;
  margin: 0;
}

/* Donation Amount Dropdown */
.form-item-donation-amount-select {
  margin-bottom: 15px;
}

.form-item-donation-amount-select select {
  width: 100%;
  padding: 32px 36px;
  border: 1px solid #C4C4C4;
  border-radius: 4px;
  font-size: 24px;
  background: #fff;
  color: #C4C4C4;
  transition: all 0.2s;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23999" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 20px;
  cursor: pointer;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", sans-serif;
}

.form-item-donation-amount-select select:focus {
  border-color: #E31E24;
  outline: none;
  box-shadow: 0 0 0 1px #E31E24;
  color: #333;
}

.form-item-donation-amount-select select option {
  color: #333;
  font-weight: 400;
}

/* Custom Amount Field */
.form-item-custom-amount {
  margin-bottom: 35px;
}

.form-item-custom-amount input[type="text"] {
  width: 100%;
  padding: 32px 36px;
  border: 1px solid #C4C4C4;
  border-radius: 4px;
  font-size: 24px;
  background: #fff;
  color: #C4C4C4;
  transition: all 0.2s;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", sans-serif;
}

.form-item-custom-amount input::placeholder {
  color: #bbbbbb;
  font-weight: 400;
}

.form-item-custom-amount input:focus {
  border-color: #E31E24;
  outline: none;
  box-shadow: 0 0 0 1px #E31E24;
}

/* Sign-in intro and Create Account link container */
.form-item-signin-intro {
  margin-bottom: 50px;
  text-align: center;
  position: relative;
}

.form-item-signin-intro p {
  color: #ccc;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 0;
  font-weight: 300;
}

/* Create Account link - positioned top right */
.form-item-create-account-link {
  text-align: right;
  margin: 0 0 30px 0;
  position: relative;
}

.form-item-create-account-link p {
  color: #ccc;
  font-size: 13px;
  margin: 0;
  font-weight: 300;
}

.form-item-create-account-link a {
  color: #ccc;
  text-decoration: underline;
  font-weight: 300;
  transition: color 0.2s;
}

.form-item-create-account-link a:hover {
  color: #999;
}

/* Sign-in Fields (Step 2) */
.form-item-username,
.form-item-password {
  margin-bottom: 25px;
  max-width: 100%;
  position: relative;
}

.form-item-username input[type="text"],
.form-item-password input[type="password"] {
  width: 100%;
  padding: 32px 36px;
  border: 1px solid #C4C4C4;
  border-radius: 4px;
  font-size: 24px;
  background: #fff;
  color: #C4C4C4;
  transition: all 0.2s;
  font-weight: 300;
}

.form-item-username input::placeholder,
.form-item-password input::placeholder {
  color: #C4C4C4;
  font-weight: 300;
}

.form-item-username input:focus,
.form-item-password input:focus {
  border-color: #999;
  outline: none;
  box-shadow: none;
}

/* Forgot Password link - positioned bottom right */
.form-item-forgot-password {
  text-align: right;
  margin: 10px 0 60px 0;
}

.form-item-forgot-password p {
  color: #ccc;
  font-size: 13px;
  margin: 0;
  font-weight: 300;
}

.form-item-forgot-password a {
  color: #ccc;
  text-decoration: none;
  font-weight: 300;
  transition: color 0.2s;
}

.form-item-forgot-password a:hover {
  color: #999;
  text-decoration: underline;
}

/* Form Buttons */
.form-actions {
  margin-top: 35px;
  padding-top: 0;
  border-top: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.webform-button--next,
.webform-button--submit {
  background: #E61C23;
  color: #fff;
  border: none;
  padding: 0;
  width: 154px;
  height: 59px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}

.webform-button--next:hover,
.webform-button--submit:hover {
  background: #C41A1F;
  box-shadow: none;
  transform: none;
}

.webform-button--next:active,
.webform-button--submit:active {
  background: #B01820;
  transform: none;
}

.webform-button--next:focus,
.webform-button--submit:focus {
  outline: 2px solid #E31E24;
  outline-offset: 2px;
}

.webform-button--previous {
  display: none; /* Hide previous button */
}

/* Required Fields Indicator */
.form-required {
  display: none; /* Hide required asterisks */
}

/* Hide descriptions */
.description {
  display: none;
}

/* Error Messages */
.form-item--error input,
.form-item--error select {
  border-color: #E31E24;
  background: #fff;
}

.form-item--error-message {
  color: #E31E24;
  font-size: 12px;
  margin-top: 8px;
  font-weight: 400;
}

.donation-form-errors {
  background: #fff5f5;
  border: 1px solid #E31E24;
  border-radius: 0;
  padding: 20px;
  margin-bottom: 40px;
  max-width: 100%;
  text-align: left;
}

.donation-form-errors h4 {
  color: #E31E24;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.donation-form-errors ul {
  margin: 0;
  padding-left: 20px;
}

.donation-form-errors li {
  margin-bottom: 8px;
  color: #E31E24;
  font-size: 14px;
}

/* Loading State */
.webform-submission-form.is-submitting {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.webform-submission-form.is-submitting::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #E31E24;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 1000;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Accessibility */
.sr-only,
.sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .donation-form .webform-wrapper {
    padding: 40px 30px;
  }

  .webform-progress-tracker {
    gap: 60px;
  }

  .webform-progress-tracker::before {
    width: calc(100% - 180px);
  }

  .progress-step .progress-marker {
    width: 60px;
    height: 60px;
  }

  .progress-step .progress-marker .step-icon {
    width: 45px;
    height: 45px;
  }

  .progress-step .step-number-text {
    font-size: 24px;
  }

  .webform-submission-form h2.webform-page-title {
    font-size: 36px;
    margin-bottom: 30px;
  }

  .form-item-intro-text {
    margin-bottom: 30px;
  }

  .form-item-intro-text p {
    font-size: 15px;
  }

  .form-item-donation-amount-select,
  .form-item-custom-amount {
    max-width: 100%;
  }

  .form-actions {
    margin-top: 35px;
  }

  .webform-button--next,
  .webform-button--submit {
    width: 100%;
    height: 50px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .donation-form {
    padding: 40px 15px;
  }

  .webform-progress-tracker {
    gap: 40px;
  }

  .progress-step .step-number {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .webform-submission-form h2.webform-page-title {
    font-size: 28px;
  }

  .form-item-intro-text p {
    font-size: 13px;
  }

  .webform-button--next,
  .webform-button--submit {
    width: 100%;
    padding: 14px 30px;
  }
}

.progress-tracker--center .progress-marker::before, .progress-tracker--center .progress-text--dotted::before, .webform-progress-tracker .progress-marker::after {
  display: none;
}
#edit-forgot-password, #edit-create-account-link {
  font-size: 16px;
}
.progress-tracker--text .progress-step:last-child, .progress-tracker--center .progress-step:last-child, .progress-tracker--right .progress-step:last-child {
  flex-grow: 0;
}

/* Redirection Step Styling */
.redirection-message-wrapper {
  padding: 40px 20px;
}

.redirection-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.redirection-title {
  font-size: 32px;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
}

.redirection-countdown {
  font-size: 18px;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.6;
}

#countdown-timer {
  font-weight: 700;
  color: #E61C23;
  font-size: 24px;
}

.redirection-manual {
  font-size: 14px;
  color: #999;
  margin-top: 20px;
}

.redirection-manual a.btn {
  display: inline-block;
  background: #E61C23;
  color: #fff;
  padding: 12px 30px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
  margin-top: 15px;
}

.redirection-manual a.btn:hover {
  background: #C41A1F;
  color: #fff;
  text-decoration: none;
}

/* Hide the submit button on redirection step */
.webform-submission-form .webform-button--submit.hidden {
  display: none;
}

/* ===========================================
   LEVELS OF PATRONAGE - Card Selection Step
   =========================================== */

/* Donor intro text - displayed in progress tracker template */
.donor-intro-text {
  color: #999;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  margin: 0 auto 30px;
  font-weight: 400;
}

/* Hide the original intro text in the form content (now shown in progress tracker) */
.form-item-donor-intro {
  display: none;
}

/* Hide the default fieldset legend */
.donor-cards-wrapper {
  margin: 0;
  border: none;
  padding: 0;
}

.donor-cards-wrapper > legend {
  display: none !important;
}

/* Grid layout for cards */
.donor-cards-wrapper .fieldset-wrapper > .js-webform-radios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 0 auto;
  align-items: stretch;
}

/* Individual card container */
.donor-cards-wrapper .js-webform-radios > .form-item {
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Hide the actual radio input */
.donor-cards-wrapper .js-webform-radios > .form-item > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Card label styling */
.donor-cards-wrapper .js-webform-radios > .form-item > label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 25px;
  border: 2px solid #C4C4C4;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  min-height: 140px;
  height: 100%;
  position: relative;
  font-size: 0; /* Hide original text */
}

/* Donation card (1st) - Gray hover/selected */
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(1) > label:hover {
  border-color: #666;
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(1) > input[type="radio"]:checked + label {
  border-color: #666;
  box-shadow: 0 0 0 1px #666;
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(1) > label:hover::before,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(1) > label:hover::after,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(1) > input[type="radio"]:checked + label::before,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(1) > input[type="radio"]:checked + label::after {
  color: #666;
}

/* Cinejoy All Access card (2nd) - Purple/Blue hover/selected */
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(2) > label:hover {
  border-color: #78509A;
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(2) > input[type="radio"]:checked + label {
  border-color: #78509A;
  box-shadow: 0 0 0 1px #78509A;
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(2) > label:hover::before,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(2) > label:hover::after,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(2) > input[type="radio"]:checked + label::before,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(2) > input[type="radio"]:checked + label::after {
  color: #78509A;
}

/* Cinequest All Access card (3rd) - Red hover/selected */
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(3) > label:hover {
  border-color: #E61C23;
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(3) > input[type="radio"]:checked + label {
  border-color: #E61C23;
  box-shadow: 0 0 0 1px #E61C23;
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(3) > label:hover::before,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(3) > label:hover::after,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(3) > input[type="radio"]:checked + label::before,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(3) > input[type="radio"]:checked + label::after {
  color: #E61C23;
}

/* Film Lovers Pass card (4th) - Purple/Blue hover/selected */
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(4) > label:hover {
  border-color: #2825C9;
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(4) > input[type="radio"]:checked + label {
  border-color: #2825C9;
  box-shadow: 0 0 0 1px #2825C9;
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(4) > label:hover::before,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(4) > label:hover::after,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(4) > input[type="radio"]:checked + label::before,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(4) > input[type="radio"]:checked + label::after {
  color: #2825C9;
}

/* Express Line Pass card (5th) - Red hover/selected */
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(5) > label:hover {
  border-color: #9B3344;
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(5) > input[type="radio"]:checked + label {
  border-color: #9B3344;
  box-shadow: 0 0 0 1px #9B3344;
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(5) > label:hover::before,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(5) > label:hover::after,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(5) > input[type="radio"]:checked + label::before,
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(5) > input[type="radio"]:checked + label::after {
  color: #9B3344;
}

/* Donation card - full width, single row layout */
.donor-cards-wrapper .js-webform-radios > .form-item:first-child {
  grid-column: 1 / -1;
}

.donor-cards-wrapper .js-webform-radios > .form-item:first-child > label {
  flex-direction: row;
  align-items: center;
  min-height: 70px;
}

/* Card description (bullet points) - top/left */
.donor-cards-wrapper .js-webform-radios > .form-item > label::before {
  font-size: 20px;
  color: #888;
  line-height: 1.7;
  text-align: left;
  white-space: pre-line;
  flex: 1;
}

/* Card title - bottom/right in bold gray */
.donor-cards-wrapper .js-webform-radios > .form-item > label::after {
  font-size: 36px;
  font-weight: 600;
  color: #666;
  text-align: right;
  white-space: nowrap;
  margin-top: auto;
  align-self: flex-end;
}

/* Donation card - side by side layout */
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(1) > label::before {
  content: "•  Donate any amount to Cinequest";
  margin-right: 20px;
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(1) > label::after {
  content: "Donation";
  margin-top: 0;
}

/* Cinejoy All Access card */
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(2) > label::before {
  content: "•  Unlimited Spotlight Events\A•  Unlimited Showcases\A•  VIP Lounge\A•  Virtual";
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(2) > label::after {
  content: "Cinejoy All Access";
}

/* Cinequest All Access card */
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(3) > label::before {
  content: "•  Unlimited Spotlight Events\A•  Unlimited Showcases\A•  VIP Lounge";
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(3) > label::after {
  content: "Cinequest All Access";
}

/* Film Lovers Pass card */
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(4) > label::before {
  content: "•  Unlimited Films";
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(4) > label::after {
  content: "Film Lovers Pass";
}

/* Express Line Pass card */
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(5) > label::before {
  content: "•  Priority Access to Films and Events\A•  Must be Accompanied by a Pass\A   and/or Ticket";
}
.donor-cards-wrapper .js-webform-radios > .form-item:nth-child(5) > label::after {
  content: "Express Line Pass";
}

/* ===========================================
   SELECT QUANTITY Step (for passes)
   =========================================== */

.pass-intro-text {
  color: #999;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 25px;
  font-weight: 400;
}

.form-item-pass-quantity {
  margin-bottom: 15px;
}

.form-item-pass-quantity > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.form-item-pass-quantity select {
  width: 100%;
  padding: 32px 36px;
  border: 1px solid #C4C4C4;
  border-radius: 4px;
  font-size: 24px;
  background: #fff;
  color: #333;
  transition: all 0.2s;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23999" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 20px;
  cursor: pointer;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", sans-serif;
}

.form-item-pass-quantity select:focus {
  border-color: #E31E24;
  outline: none;
  box-shadow: 0 0 0 1px #E31E24;
}

/* Responsive adjustments for donor cards */
@media (max-width: 768px) {
  .donor-cards-wrapper .fieldset-wrapper > .js-webform-radios {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .donor-cards-wrapper .js-webform-radios > .form-item:first-child {
    grid-column: 1;
  }

  .donor-cards-wrapper .js-webform-radios > .form-item:first-child > label {
    flex-direction: column;
    align-items: flex-start;
    min-height: 90px;
  }

  .donor-cards-wrapper .js-webform-radios > .form-item:first-child > label::before {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .donor-cards-wrapper .js-webform-radios > .form-item:first-child > label::after {
    margin-top: auto;
    align-self: flex-end;
  }

  .donor-cards-wrapper .js-webform-radios > .form-item > label {
    padding: 18px 20px;
    min-height: 100px;
  }

  .donor-cards-wrapper .js-webform-radios > .form-item > label::before {
    font-size: 12px;
  }

  .donor-cards-wrapper .js-webform-radios > .form-item > label::after {
    font-size: 18px;
  }
}