/* Always show recur help */
#recurHelp {
display: flex !important;
    flex-direction: column;
    position: relative;
    padding-left: 39px;
	font-size:16px;
    align-items: center;
}
	.crm-container fieldset.honor_block-group {
		padding-top: 20px !important;
	}
#editrow-custom_545 {
  width: 100% !important;
}
/* Chevron arrow */
#recurHelp::before {
  content: "";
  display: block;
  width: 32px;
  height: 20px;
  margin: 0 0 6px 0; /* no auto-centering */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAARCAYAAAC8XK78AAAACXBIWXMAAAsSAAALEgHS3X78AAAAr0lEQVRIx73VyxHCIBCA4R8a0BLsQEvIwfREB6YnLikhdqIVrAcf4wMM7IbsDCdm+D+44EQEzbh+2AIjsAM6iWHSnOON8T2wAUbXD4dVAF/xK3C2IKoAiXj3WGpEMSAVlxgmieFiQRQBcvHnvgUxC5iLWxF/AaVxCyILqI1rEUmANq5B/ACs8VrEB2CpeA3iBVg6XorwLeMlCMfx1DT+PqmL+rXiuZfw3P/z5vEc4gYMkaqkMVBaYAAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-position: center bottom;
}

/* Message text */
#recurHelp::after {
  content: "Make a monthly gift to maximize your impact for SF Bay.";
  display: block;
  font-weight: 700;
  color: #000;
}
@media (max-width: 480px) {
  #recurHelp {
    padding-left: 0;
    text-align: center;
  }
}



	.donation_amount-rowOther {
		display:inline !important;
	}
	.donation_amount-rowOther .other_amount-section {
			margin-top:0 !important;
		padding-top:0 !important;
	}
	.donation_amount-rowOther .other_amount-section .content {
		padding: 0 !important;
	}
/* Hide the radio inputs that control panels */
#donateTabs .donateTabRadio {
  position: absolute;
  left: -9999px;
}
	.crm-container fieldset {
		margin:0 !important;
		border: none !important;
		padding: 0 !important;
	}
	

/* Tab header */
#donateTabs .donateTabList {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: flex;
  border-bottom: 2px solid #ccc;
  background: #fff;
}
#donateTabs .donateTabList li {
  flex: 1 1 0;
}
#donateTabs .donateTabList label {
display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
    padding: 10px 16px;
    cursor: pointer;
    border-top: 4px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    background: #fff;
}
#donateTabs .tabNumber {
  background: #00418A;
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  min-width: 28px;
  text-align: center;
}

/* Panels */
#donateTabs .donatePanel {
  display: none;
  border-left: 8px solid #00418A;
  padding: 20px 30px;
}

/* Show active panel (CSS-only switching) */
#donateTabs #donateTab0:checked ~ .donateTabList + .donatePanels .donatePanel[data-panel="0"],
#donateTabs #donateTab1:checked ~ .donateTabList + .donatePanels .donatePanel[data-panel="1"],
#donateTabs #donateTab2:checked ~ .donateTabList + .donatePanels .donatePanel[data-panel="2"] {
  display: block;
}

/* Active tab styling */
#donateTabs #donateTab0:checked ~ .donateTabList label[for="donateTab0"],
#donateTabs #donateTab1:checked ~ .donateTabList label[for="donateTab1"],
#donateTabs #donateTab2:checked ~ .donateTabList label[for="donateTab2"] {
  border-top-color: #00418A;
  font-weight: 600;
  border-bottom: 2px solid #fff;
}

/* Nav buttons */
#donateTabs .donateNav {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.25rem;
}

#donateTabs .donateNav button,
#donateTabs .donateNav input[type="submit"] {
  padding: 10px 16px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

#donateTabs .donateNext,
#donateTabs .donateSubmit {
  background: #28a745;
  color: #fff;
}

#donateTabs .donatePrev {
  background: #00418A;
  color: #fff;
}

#donateTabs .donateErrorMsg {
  color: #b00;
  margin: 0 0 10px 0;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 767px) {
  #donateTabs .donateTabList label {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }
  #donateTabs .donatePanel {
    padding: 16px;
  }
}
	/* ============================
   Amount tab layout fixes
   (matches your desired screenshot)
   ============================ */

/* Force Amount panel content to align left (undo centering) */
#donateTabs .donatePanel[data-panel="0"] {
  text-align: left;
}

/* If any inner wrapper is centering, neutralize it */
#donateTabs .donatePanel[data-panel="0"] .crm-public-form-item,
#donateTabs .donatePanel[data-panel="0"] .crm-section,
#donateTabs .donatePanel[data-panel="0"] .content {
  text-align: left;
  justify-content: flex-start;
}

/* ONE-TIME / MONTHLY toggle: keep as a left-aligned row, not centered/stacked */
#donateTabs .donatePanel[data-panel="0"] .is_recur_radio-section .content {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Make the labels look like buttons but not full-width blocks */
#donateTabs .donatePanel[data-panel="0"] .is_recur_radio-section .content label {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  width: auto !important;
  min-width: 160px;
  margin: 0 !important;
}

/* Monthly messaging stays aligned with the toggle row */
#donateTabs .donatePanel[data-panel="0"] #donationTypeMessaging {
  margin: 1rem 0 1.5rem 0; /* not auto */
  text-align: left;
}

/* Donation amount grid: anchor to the left (not centered) */
#donateTabs .donatePanel[data-panel="0"] .donation_amount-content {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* If the grid wrapper is being centered with a max-width, keep it left */
#donateTabs .donatePanel[data-panel="0"] .donation_amount-section,
#donateTabs .donatePanel[data-panel="0"] .donation_amount-content {
  max-width: 720px;      /* optional: keeps it from getting too wide */
}
@media screen and (max-width:620px) {
  .crm-contribution-main-form-block #priceset .donation_amount-section .donation_amount-content {
    grid-template-columns: repeat(2, 1fr);
}
}
/* Other Amount field: keep it aligned with the grid and not oversized */
#donateTabs .donatePanel[data-panel="0"] .price-set-row input.crm-form-text {
  max-width: 720px;
}

/* Mobile: allow buttons to wrap nicely */
@media (max-width: 600px) {
  #donateTabs .donatePanel[data-panel="0"] .is_recur_radio-section .content label {
    min-width: 140px;
  }
}


/* =========================
   PAYMENT TAB (Panel 3) FIXES
   ========================= */

/* Scope to payment panel */
#donateTabs .donatePanel[data-panel="2"] .credit_card_info-group {
  max-width: 640px; /* keeps it from stretching weirdly */
}

/* Reset any "45%" widths that are causing the collapse */
#donateTabs .donatePanel[data-panel="2"] .credit_card_info-group input[type="text"],
#donateTabs .donatePanel[data-panel="2"] .credit_card_info-group select {
  width: 100% !important;
  box-sizing: border-box;
}

/* Card number should always be full width */
#donateTabs .donatePanel[data-panel="2"] .crm-section.credit_card_number-section .content {
  display: block !important;
}
#donateTabs .donatePanel[data-panel="2"] #credit_card_number {
  width: 100% !important;
}

/* CVV row: input + icon aligned nicely */
#donateTabs .donatePanel[data-panel="2"] .crm-section.cvv2-section .content {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
#donateTabs .donatePanel[data-panel="2"] .crm-section.cvv2-section .content input {
  flex: 1 1 auto;
  min-width: 180px;
}
#donateTabs .donatePanel[data-panel="2"] .crm-section.cvv2-section .cvv2-icon {
  flex: 0 0 auto;
}

/* Expiration: Month + Year side-by-side like prod */
#donateTabs .donatePanel[data-panel="2"] .crm-section.credit_card_exp_date-section .content {
  display: flex !important;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
}
#donateTabs .donatePanel[data-panel="2"] #credit_card_exp_date_M,
#donateTabs .donatePanel[data-panel="2"] #credit_card_exp_date_Y {
  flex: 1 1 0;
  min-width: 0; /* prevents overflow pushing stuff around */
}

/* Billing checkbox spacing */
#donateTabs .donatePanel[data-panel="2"] #billingcheckbox {
  margin-top: 8px;
}

/* Mobile: stack exp selects + keep things readable */
@media (max-width: 600px) {
  #donateTabs .donatePanel[data-panel="2"] .crm-section.credit_card_exp_date-section .content {
    flex-wrap: wrap;
  }
  #donateTabs .donatePanel[data-panel="2"] #credit_card_exp_date_M,
  #donateTabs .donatePanel[data-panel="2"] #credit_card_exp_date_Y {
    flex: 0 0 100%;
  }
  #donateTabs .donatePanel[data-panel="2"] .crm-section.cvv2-section .content {
    flex-wrap: wrap;
  }
  #donateTabs .donatePanel[data-panel="2"] .crm-section.cvv2-section .content input {
    flex: 0 0 75%;
  }
}

/* =========================
   BUTTONS (match production)
   ========================= */

/* Previous = green */
#donateTabs .donateNav .prevBtn {
  background: #28a745 !important;
  border-color: #28a745 !important;
  color: #fff !important;
}

/* Contribute = blue outline */
#donateTabs .donateNav input[type="submit"],
#donateTabs .donateNav button[type="submit"] {
  background: #fff !important;
  color: #00418A !important;
  border: 2px solid #00418A !important;
}
fieldset.billing_mode-group.credit_card_info-group ~ #billingcheckbox, fieldset.billing_mode-group.credit_card_info-group ~ #billingcheckbox + label {
    position: relative;
    top: unset;
    margin-top: 20px !important;

}
input#billingcheckbox {
    margin-left: 00px !important; 
}
.crm-container fieldset.billing_name_address-group {
  margin-top: 20px !important;
}
.custom_post_profile-group {
  margin-top: 20px !important;
}
/* =========================
   BILLING ADDRESS GRID (when revealed)
   ========================= */

/* Scope to Payment tab only */
 .billing_name_address-section {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  align-items: start;
}

/* Make common "row wrappers" behave as grid items */
 .billing_name_address-section > .crm-section,
 .billing_name_address-section > div[id^="editrow-"],
 .billing_name_address-section > .crm-public-form-item {
  margin: 0 !important;
  width: auto !important;
}

/* Full-width rows (street + country usually want the full line) */
 .billing_name_address-section #editrow-street_address-Primary,
 .billing_name_address-section #editrow-country-Primary,
 .billing_name_address-section .crm-section.street_address-section,
 .billing_name_address-section .crm-section.country-section {
  grid-column: 1 / -1;
}

/* Inputs/selects take full width inside their cell */
 .billing_name_address-section input,
 .billing_name_address-section select,
 .billing_name_address-section .select2-container {
  width: 100% !important;
  box-sizing: border-box;
}

/* Mobile: stack to single column */
@media (max-width: 600px) {
   .billing_name_address-section {
    grid-template-columns: 1fr;
  }
}