/* --- Actual main styles for the step pages --- */
.steps-title {
  color: #015dab;
}

.confirm-num {
  color: #111827;
}

.scheduled-green-box {
  margin-left: 270px;
  margin-right: 270px;
}

@media (max-width: 768px) {
  .above-steps {
    height: 110px !important;
  }

  .step-2-btm-space {
    height: 250px;
  }

  .charity-selection-section {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .charity-selection-section > .wp-block-group__inner-container,
  .charity-selection-section > .wp-block-columns {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .charity-selection-section .wp-block-columns {
    flex-direction: column !important;
    gap: 30px !important;
  }

  .pickup-guidelines-box,
  .charity-card {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* steps background */
.charity-selection-section {
  background-color: #f4f7fa !important;
  padding-top: 80px !important;
  padding-bottom: 100px !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* Force the inner content to stay centered with side margins */
.charity-selection-section > .wp-block-group__inner-container,
.charity-selection-section > .wp-block-columns {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.charity-selection-section .wp-block-columns {
  display: flex !important;
  align-items: flex-start !important;
  gap: 40px !important;
}

/* --- Pickup Guidelines Sidebar --- */
.pickup-guidelines-box {
  background-color: #ebf7ff !important;
  border: 1px solid #bee3ff !important;
  border-radius: 15px !important;
  padding: 40px 30px !important;
  height: auto !important;
  align-self: flex-start !important;
  box-shadow: 0 10px 30px rgba(1, 93, 171, 0.05) !important;
}

.pickup-guidelines-box .wp-block-columns:first-child {
  gap: 15px !important;
}

.pickup-guidelines-box
  .wp-block-columns:first-child
  .wp-block-column:first-child {
  flex-basis: auto !important;
  width: 40px !important;
}

/* --- Icon & Image Column Alignment Fix --- */

/* Standardize the first column width for all rows in the box */
.pickup-guidelines-box .wp-block-columns .wp-block-column:first-child {
  flex-basis: 45px !important;
  max-width: 45px !important;
  min-width: 45px !important;
  display: flex !important;
  justify-content: flex-start !important;
  margin-right: 0 !important;
}

/* Force the Icon element to remove default padding/margins */
.pickup-guidelines-box .wp-block-column:first-child .wp-block-icon {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
}

/* Ensure images (like the heart) and icons share the same vertical nudge */
.pickup-guidelines-box .wp-block-column:first-child img,
.pickup-guidelines-box .wp-block-column:first-child .wp-block-icon svg {
  margin-top: 5px !important;
}

/* standardizing the gap across all rows */
.pickup-guidelines-box .wp-block-columns {
  gap: 15px !important;
}

/*--- ART START HERE FOR ALL PLACEHOLDER STYLING ---*/

/* --- Step Tracker Placeholder Styling --- */
.step-tracker-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 900px !important;
  margin: 0 auto 60px !important;
  padding: 20px !important;
}

.step-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 15px !important;
  flex: 1 !important;
}

.step-circle {
  width: 65px !important;
  height: 65px !important;
  background-color: #e9f2f9 !important;
  color: #1a2b3c !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  position: relative !important;
}

.step-label {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  letter-spacing: 1px !important;
}

.step-line {
  height: 3px !important;
  background-color: #e2e8f0 !important;
  flex: 1 !important;
  margin-bottom: 30px !important;
}

.step-item.active .step-circle {
  background-color: #02a950 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 6px #d1f2e1 !important;
}

.step-item.completed .step-circle {
  background-color: #02a950 !important;
  color: #ffffff !important;
  font-size: 18px !important;
}

.step-item.completed .step-label,
.step-item.active .step-label {
  color: #1a2b3c !important;
}

.step-line.active {
  background-color: #02a950 !important;
}

/* Final Step Circle Styling */
.step-item.final-step .step-circle {
  background-color: #015dab !important;
  box-shadow: 0 0 0 6px #dceefc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Sizing for the celebration PNG */
.final-step-icon {
  width: 32px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

.step-item.final-step .step-label {
  color: #1a2b3c !important;
  font-weight: 800 !important;
}

/* --- End Step Tracker Placeholder Styling --- */

/* --- STEP: 1 Zip Code Placeholder Card --- */
.zip-placeholder-container {
  background-color: #f4f7fa !important;
  border-radius: 15px !important;
  padding: 60px 40px !important;
  max-width: 650px !important;
  margin: 0 auto !important;
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 65px !important;
  border: 1px solid rgba(0, 0, 0, 0.02) !important;
}

.zip-input-mock {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 12px !important;
  padding: 20px 25px !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  color: #94a3b8 !important;
  font-size: 18px !important;
}

.zip-button-mock {
  background-color: #015dab !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 22px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition:
    transform 0.2s ease,
    background-color 0.3s ease !important;
}

.zip-button-mock:hover {
  background-color: #018c42 !important;
}

/* --- End Zip Code Placeholder Card --- */

/* --- Zip Code Change Bar Placeholder --- */
.zip-change-bar-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
  background-color: #ffffff !important;
  border: 3px solid #0055a51a !important;
  border-radius: 100px !important;
  padding: 20px 25px !important;
  max-width: fit-content !important;
  margin: 0 auto 40px !important;
}

.zip-display-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.zip-display-group i {
  color: #015dab !important;
  font-size: 16px !important;
}

.zip-number {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #111827 !important;
  letter-spacing: 1.1px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.zip-change-link {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #015dab !important;
  text-decoration: none !important;
  letter-spacing: 1.5px !important;
  transition: opacity 0.2s ease !important;
}

.zip-change-link:hover {
  opacity: 0.7 !important;
  text-decoration: underline !important;
}

/* Mobile */
@media (max-width: 768px) {
  .zip-change-bar-placeholder {
    gap: 25px !important;
    padding: 10px 30px !important;
  }
  .zip-number {
    font-size: 18px !important;
    font-weight: 900 !important;
  }
  .zip-change-link {
    font-size: 14px !important;
  }
}

/* --- STEP: 1 End Zip Code Change Bar Placeholder --- */

/* --- STEP 2: Charity Selection Grid (Strict 2x2) --- */
.charity-grid-placeholder {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 30px !important;
  margin-bottom: 50px !important;
  width: 100% !important;
}

.charity-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 40px 30px !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  border: 3px solid transparent !important;
  transition: all 0.3s ease !important;
}

.charity-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

.charity-card.selected {
  border-color: #02a950 !important;
}

.charity-logo {
  height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}

.charity-logo img {
  max-height: 100% !important;
  max-width: 180px !important;
  object-fit: contain !important;
}

.charity-card h4 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1a2b3c !important;
  margin-bottom: 15px !important;
}

.charity-card p {
  font-size: 14px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin-bottom: 10px !important;
}

.read-more {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #015dab !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 25px !important;
  letter-spacing: 1px !important;
}

.select-btn {
  background-color: #02a950 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 25px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase;
}

.select-btn:hover {
  background-color: #018c42 !important;
  transform: translateY(-2px) !important;
}

.select-btn.is-selected {
  background-color: #02a950 !important;
  cursor: default !important;
}

.bottom-action {
  text-align: center !important;
  width: 100% !important;
}

.pickup-date-btn {
  background-color: #015dab !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 20px 50px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 25px rgba(1, 93, 171, 0.2) !important;
  cursor: pointer;
  transition: background 0.3s ease;
}

.pickup-date-btn:hover {
  background-color: #02a950 !important;
}

/* --- Mobile --- */
@media (max-width: 900px) {
  .charity-grid-placeholder {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .step-circle {
    width: 45px !important;
    height: 45px !important;
    font-size: 18px !important;
  }

  .step-label {
    font-size: 10px !important;
  }

  .zip-placeholder-container {
    padding: 30px 20px !important;
    gap: 30px !important;
    margin: 0 15px !important;
  }

  .zip-input-mock {
    padding: 15px !important;
    font-size: 16px !important;
  }

  .zip-button-mock {
    padding: 18px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .step-line {
    display: none !important;
  }

  .step-tracker-placeholder {
    gap: 10px !important;
  }
}

/* --- STEP 2: End Charity Selection Grid (Strict 2x2) --- */

/* --- STEP 3: Calendar Placeholder Styling --- */
.calendar-wrapper {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 60px 40px !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.calendar-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 50px !important;
}

.calendar-month {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #1a2b3c !important;
  margin: 0 !important;
}

.calendar-nav {
  display: flex !important;
  gap: 15px !important;
}

.nav-btn {
  width: 55px !important;
  height: 55px !important;
  border-radius: 50% !important;
  border: 1.5px solid #e2e8f0 !important;
  background: white !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.nav-btn:hover {
  border-color: #015dab !important;
  color: #015dab !important;
}

.weekday-labels,
.date-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 12px !important;
  text-align: center !important;
}

.weekday-labels {
  margin-bottom: 25px !important;
}

.weekday-labels span {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

.day-box {
  aspect-ratio: 1/1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  position: relative !important;
}

.day-box.unavailable {
  background-color: #e5f5ff !important;
  color: #0055a526 !important;
}

.day-box.available {
  color: #1a2b3c !important;
  cursor: pointer !important;
}

.day-box.available .dot {
  width: 10px !important;
  height: 10px !important;
  background-color: #02a950 !important;
  border-radius: 50% !important;
  margin-top: 8px !important;
}

.day-box.selected {
  border: 3px solid #015dab !important;
  color: #1a2b3c !important;
}

.calendar-legend {
  display: flex !important;
  justify-content: center !important;
  gap: 40px !important;
  margin-top: 60px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
}

.legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 16px;
}

.leg-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #02a950;
}

.leg-square {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #e5f5ff;
}

.leg-outline {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2.5px solid #015dab;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .calendar-wrapper {
    padding: 30px 15px !important;
    border-radius: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  .calendar-header {
    margin-bottom: 30px !important;
    flex-direction: column !important;
    gap: 15px !important;
  }

  .calendar-month {
    font-size: 24px !important;
  }

  .nav-btn {
    width: 45px !important;
    height: 45px !important;
  }

  .weekday-labels {
    gap: 4px !important;
    margin-bottom: 15px !important;
  }

  .weekday-labels span {
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }

  .date-grid {
    gap: 6px !important;
  }

  .day-box {
    font-size: 15px !important;
    border-radius: 8px !important;
  }

  .day-box.available .dot {
    width: 5px !important;
    height: 5px !important;
    margin-top: 4px !important;
  }

  .calendar-legend {
    flex-wrap: wrap !important;
    gap: 10px 15px !important;
    margin-top: 30px !important;
    justify-content: center !important;
  }

  .legend-item {
    font-size: 11px !important;
  }
}

/* Extra small fix for very narrow phones (iPhone SE, etc) */
@media (max-width: 380px) {
  .day-box {
    font-size: 13px !important;
  }
  .calendar-month {
    font-size: 20px !important;
  }
  .date-grid {
    gap: 4px !important;
  }
}

/* --- STEP 3: End Calendar Placeholder Styling --- */

/* --- Summary Placeholder Styling --- */
.summary-card-placeholder {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 70px !important;
  max-width: 1200px !important;
  margin: 0 auto 50px auto !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  gap: 40px !important;
}

/* Left Content Styles */
.summary-left {
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
  flex: 1.2 !important;
}

.summary-logo img {
  max-width: 140px !important;
  height: auto !important;
}

.summary-label {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #015dab !important;
  letter-spacing: 1.5px !important;
  display: block !important;
  margin-bottom: 5px !important;
  text-transform: uppercase !important;
}

.summary-title {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #1a2b3c !important;
  margin: 0 !important;
}

.summary-date {
  font-size: 16px !important;
  color: #94a3b8 !important;
  margin: 5px 0 20px 0 !important;
}

.summary-change-btn {
  display: inline-block !important;
  padding: 10px 25px !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #015dab !important;
  text-decoration: none !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}

.summary-change-btn:hover {
  background-color: #f8fafc !important;
  border-color: #015dab !important;
}

/* Vertical Divider */
.summary-divider {
  width: 1px !important;
  height: 100px !important;
  background-color: #e2e8f0 !important;
}

/* Right Content Styles */
.summary-right {
  flex: 1 !important;
}

.guidelines-header {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  margin-bottom: 25px !important;
}

.g-header-img {
  width: 32px !important;
  height: auto !important;
  object-fit: contain !important;
}

.guidelines-header h4 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1a2b3c !important;
  margin: 0 !important;
}

.guidelines-icons-row {
  display: flex !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

.g-icon-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.g-icon-item i {
  color: #015dab !important;
  font-size: 23px !important;
}

.g-custom-img {
  width: 32px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.g-icon-item span {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1a2b3c !important;
  white-space: nowrap !important;
}

/* Mobile */
@media (max-width: 900px) {
  .summary-card-placeholder {
    flex-direction: column !important;
    text-align: center !important;
    padding: 30px !important;
  }
  .summary-left {
    flex-direction: column !important;
  }
  .summary-divider {
    width: 80% !important;
    height: 1px !important;
    margin: 20px 0 !important;
  }
  .guidelines-icons-row {
    flex-direction: column !important;
    align-items: center !important;
  }
  .summary-right {
    width: 100% !important;
  }
  .guidelines-header {
    justify-content: center !important;
  }
  .g-custom-img {
    margin-bottom: 5px;
  }
}
/* END: Summary Placeholder Styling */

/* --- Step 4: Details Form Placeholder Styling --- */
.contact-details-container {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 60px !important;
  max-width: 1000px !important;
  margin: 0 auto 40px auto !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.details-form-mock {
  display: flex !important;
  flex-direction: column !important;
  gap: 25px !important;
}

.form-row {
  display: flex !important;
  gap: 20px !important;
}

.form-row.three-col .form-group {
  flex: 1 !important;
}

.form-group {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.form-group label {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1a2b3c !important;
}

.form-group label span {
  color: #015dab !important;
  font-weight: 400 !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  font-size: 16px !important;
  color: #1a2b3c !important;
  width: 100% !important;
}

.form-group textarea {
  height: 120px !important;
  resize: none !important;
}

.checkbox-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  margin: 10px 0 !important;
}

.custom-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #475569 !important;
  cursor: pointer !important;
}

.custom-checkbox input {
  width: 20px !important;
  height: 20px !important;
  margin-top: 2px !important;
}

.custom-checkbox input[type="checkbox"] {
  accent-color: #015dab !important;
  width: 20px !important;
  height: 20px !important;
  cursor: pointer !important;
}

.custom-checkbox a {
  color: #015dab !important;
  text-decoration: none !important;
}

.furniture-warning-box {
  background-color: #fff1f2 !important;
  border: 1px solid #fee2e2 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  color: #991b1b !important;
  font-weight: 900 !important;
  text-align: center !important;
  font-size: 16px !important;
}

/* Mobile */
@media (max-width: 768px) {
  .contact-details-container {
    padding: 30px 20px !important;
  }
  .form-row {
    flex-direction: column !important;
    gap: 25px !important;
  }
  .furniture-warning-box {
    font-size: 14px !important;
  }
}
/* END: Step 4: Details Form Placeholder Styling */

/* --- Step 5: Confirmation Card Placeholder Styling --- */
/* START: Confirmation Card */
.confirmation-card-container {
  padding: 40px 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.confirmation-card {
  background-color: #ebf7ff !important; /* The soft blue from your image */
  border: 1px solid #bee3ff !important;
  border-radius: 20px !important;
  padding: 60px 40px !important;
  max-width: 550px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(1, 93, 171, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Forces all children to center */
}

/* Header Section & Logo Centering */
.conf-logo-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.conf-logo-section img {
  max-width: 200px !important;
  height: auto !important;
  margin-bottom: 30px !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.conf-proudly {
  display: block !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #015dab !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 10px !important;
  text-align: center !important;
  width: 100% !important;
}

.conf-charity-name {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #1a2b3c !important;
  margin: 0 0 15px 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

.conf-thank-you {
  font-size: 18px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin-bottom: 0px !important;
}

/* Data Rows & Labels */
.conf-data-row {
  width: 100% !important;
  text-align: center !important;
}

.conf-divider {
  height: 1px !important;
  background-color: #bee3ff !important;
  width: 100% !important;
  margin: 30px 0 !important;
}

.conf-label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #015dab !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 12px !important;
  text-align: center !important;
}

.conf-value {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1a2b3c !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* Mobile Responsive Confirmation */
@media (max-width: 768px) {
  .confirmation-card {
    padding: 40px 20px !important;
  }
  .conf-charity-name {
    font-size: 26px !important;
  }
  .conf-value {
    font-size: 18px !important;
  }
}
/* END: Step 5: Confirmation Card Placeholder Styling */

/* --- ART - END OF PLACEHOLDER STYLING --- */