/*
Copyright © Wild Rose Devs. & Alberta Lynx 2025. All rights reserved.

This software and its source code are proprietary and confidential.
Unauthorized copying, distribution, modification, or use in whole or in part
is strictly prohibited and may result in civil and/or criminal penalties.

No license or rights are granted by implication or otherwise under any
intellectual property rights.

For licensing inquiries, contact: https://wildrosedevs.ca
*/

/* HERO SECTION */
.hero-s {
  position: relative;
  width: 100%;
  height: 50vh;
  background: url('../images/hero/donate-hero.avif') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-s .hero-title {
  position: static;
  margin: 0;
  padding: 0;
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 1.2;
  color: #f5f5f5;
  text-shadow: none;
}

/* DONATION SECTION */
.donation-section {
  background: url('../images/backgrounds/donate-form-bg.avif') center/cover no-repeat;
}

.donation-container {
  max-width: 600px;
  margin: 3rem auto;
  padding: 2.5rem;
  background: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  min-height: 600px;
  transition: min-height 0.3s ease;
}


.steps-indicator {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.step-indicator {
  flex: 1;
  text-align: center;
  position: relative;
  padding-bottom: 0.5rem;
  color: #666;
  font-weight: 500;
}

.step-indicator::after {
  content: '';
  display: block;
  height: 2px;
  background: #ddd;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.step-indicator.step-active {
  color: #1F4CE0;
}

.step-indicator.step-active::after {
  background: #1F4CE0;
}

.step-content {
  display: none;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.4s, transform 0.4s;
}

.step-content.step-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Amount Buttons */
.amount-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.amount-btn {
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1.25rem 0;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.amount-btn.selected {
  background: #1F4CE0;
  border-color: #004f58;
  color: #fff;
}

.amount-btn.custom input {
  width: 60%;
  border: none;
  color: #ffffff;
  background: transparent;
  text-align: right;
  font-size: 1.25rem;
  padding: 0.25rem 0;
}


.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 30px 0;
  font-weight: bold;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.divider:not(:empty)::before {
  margin-right: .5em;
}

.divider:not(:empty)::after {
  margin-left: .5em;
}

.interac-section {
  text-align: center;
  margin-bottom: 30px;
}

.interac-button {
  background-color: #7ED957;
  border: 1px solid #ffffff;
  padding: 15px 25px;
  font-size: 20px;
  cursor: pointer;
  text-decoration: none;
  color: #fff5f5;
  border-radius: 5px;
  display: inline-block;
  margin-top: 10px;
}

.tagline {
  margin-top: 20px;
  text-align: center;
  font-size: 20px;
  color: #444;
}

.tagline strong {
  display: block;
  margin-top: 5px;
}



.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #333;
}

.form-group input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: #1F4CE0;
}

.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-next,
#submit-payment {
  background: #1F4CE0;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-next:disabled,
#submit-payment:disabled {
  background: #aac;
  cursor: not-allowed;
}

.btn-next:hover:not(:disabled),
#submit-payment:hover:not(:disabled) {
  background: #004f58;
}

.btn-back {
  background: transparent;
  border: none;
  color: #1F4CE0;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.5rem 0;
}

#card-element {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  min-height: 44px;
  /* a tappable height on mobile */
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

#confirm-checkbox {
  margin-right: 0.5rem;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.checkbox-group input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  accent-color: #1F4CE0;
}

.checkbox-group label {
  margin: 0;
  font-size: 0.95rem;
  color: #333;
}

.cards-accepted {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  overflow: visible !important;
}

.cards-accepted i {
  font-size: 3rem !important;
  line-height: 2;
}

/* Brand colors */
.fa-cc-visa {
  color: #1434CB;
}

.fa-cc-mastercard {
  color: #eb001b;
}

.fa-cc-amex {
  color: #016FD0;
}