/*Conditional homepage style*/

.home .donateCard label img {
    display: none;
}

/* Donation Flow */
#donationFlowContainer {
    position: relative;
}

#donationFlowContainer svg {
    position: absolute;
    top: 0;
    z-index: 35;
}

#donationFlow #intro {
    max-width: 1000px;
}

#donationFlow h1 {
    font-size: 48px;
}

#donationFlow h2 {
    font-size: 44px;
}


#donationBgContainer {
    margin: auto;
    display: grid;
    gap: var(--wp--preset--spacing--medium);
}

#donationBgContainer > .col-2:first-child {
    padding-left: 0;
}

#donationBgContainer > .col-2:last-child {
    padding-right: 0;
}

#tab1 {
    max-width: 1100px;
}

#tab2 .inner-tab,
#tab3 .inner-tab,
#tab4 .inner-tab {
}

#tab2 .inner-tab-block,
#tab3 .inner-tab-block,
#tab4 .inner-tab-block {
    background: var(--wp--preset--color--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 12px 3px #00000012;
}

.donationFlowInnerContainer {
    margin-top: -23%;
}

.donation-campaign {
    position: relative;
    z-index: 50;
}

/* Tab Visibility */
#donationFlow #tab1,
#donationFlow #tab2,
#donationFlow #tab3,
#donationFlow #tab4 {
    position: relative;
    z-index: 50;
}

#donationBg,
#donationFlow #tab2,
#donationFlow #tab3,
#donationFlow #tab4 {
    display: none;
}

/* Hide/Show Cards */
.recurring-card, .one-off-card {
    display: block;
}

.recurring-card[style*="display: none"], .one-off-card[style*="display: none"] {
    display: none !important;
}

/* Tab Indicator */
.tabIndicatorContainer {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.tab-indicator {
    width: 25px;
    height: 8px;
    background-color: #2d2f3e;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.tab-indicator.active {
    background-color: #fcc443;
}

/* Tab Intro */
.tab-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 25px;
}

.tab-intro h3 {
    margin: 0;
}

/* Toggle Buttons */
#donationFlow #donateToggle {
    display: flex;
    align-items: center;
    max-width: 650px;
    padding: 5px;
    background: var(--wp--preset--color--septenary);
    border-radius: var(--wp--preset--spacing--large);
    margin-bottom: var(--wp--preset--spacing--large);
}

#donationFlow .toggle-label {
    flex: 1;
    text-align: center;
    padding: 0 10px;
    height: 66px;
    font-size: 24px;
    font-weight: 800;
    color: #333;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

#donationFlow .toggle-label:nth-child(1) {
    margin-right: -10px;
}

#donationFlow .toggle-label:nth-child(2) {
    margin-left: -10px;
}

#donationFlow .toggle-label input[type="radio"] {
    display: none;
}

#donationFlow .toggle-label:has(input[type="radio"]:checked) {
    background-color: #5c2d91;
    color: #fff;
    z-index: 25;
}

#donationFlow .toggle-label:hover {
    opacity: 0.9;
}

/* Grid*/
#donationFlow .grid.columns-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}

/* Form Inputs */
#donationFlow input,
#donationFlow select,
#donationFlow textarea {
    border: 2px solid #e5e5e5;
    background-color: var(--wp--preset--color--white);
    height: 46px;
    font-size: 16px;
    padding: 0 16px;
    border-radius: 8px;
    color: #323232;
    box-sizing: border-box;
}



#donationFlow textarea {
    width: 100%;
    height: 100px;
}

#donationFlow input[type="text"],
#donationFlow input[type="email"] {
    width: 100%;
    margin-bottom: 10px;
}

#donationFlow #optional {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: var(--wp--preset--spacing--small);
}

#donationFlow input[type="checkbox"] {
    width: 30px;
    height: 30px;
    margin: 1px 4px 11px 0;
    vertical-align: middle;
    min-width: 30px;
}

#donationFlow label {
    font-weight: 600;
    padding-bottom: 6px;
    display: block;
}

#donationFlow label span {
    margin:0;
    top:0;
}

#donationFlow label.checkbox {
    display: inline-block;
}

#donationFlow #optional > div {
    display: flex;
    gap: 5px;
}

#giftaid p {
    font-size: 14px;
    line-height: 20px;
}

input.InputElement {
    background: #fff;
}

.required[style*="border-color: red"] {
    border: 2px solid red !important;
}

/* Custom Donation */
.donateCustomInput {
    position: relative;
}

.donateCustomInput span {
    position: absolute;
    top: 14px;
    left: 16px;
    font-size: 16px;
    color: #696969;
    font-weight: 700;
}

#donateCustomContainer {
    display: flex;
    margin-top: var(--wp--preset--spacing--medium);
    max-width: 725px;
    gap: var(--wp--preset--spacing--medium);
}

#donateCustomContainer #donateCustom {
    /* padding-right: 30px; */
}

#donateCustomContainer input,
#donateCustomContainer select {
    width: 100%;
    max-width: 500px;
    cursor: pointer;
}

#donateCustomContainer > div {
    flex: 1;
}

#donateCustom input {
    padding-left: 30px;
}

#donationFlow #card-number {
    margin-bottom: 15px;
}

/* Donation Cards */
#donationFlow .donateCard {
    position: relative;
    height: 100%;
}

#donationFlow .donateCard label {
    border-radius: 12px;
    height: 100%;
    box-shadow: 0 2px 12px 3px #00000012;
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    outline: 3px solid transparent;
    transition: all 0.25s ease-in-out;
}

#donationFlow .donateCard label img {vertical-align:middle;}

#donationFlow .donateCard input {
    visibility: hidden;
    height: 1px;
    width: 1px;
    margin: 0;
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

#donationFlow .donateCard.active label,
#donationFlow .donateCard label:hover,
#donationFlow .donateCard label:focus-visible {
    outline-color: #fcc443;
}

#donationFlow .donateCardMeta {
    padding: var(--wp--preset--spacing--medium);
    height: 100%;
    background: #fff;
}

#donationFlow .donateCardMeta span {
    font-size: 48px;
    line-height: 1;
    font-weight: 800;
    margin: 0;
    display: block;
}

#donationFlow .donateCardMeta p {
    margin: 0;
    line-height: 1.2;
    font-size: 20px;
    margin-top: 20px;
}

/* Sidebar Amount */
#donationAmount {
    background: var(--wp--preset--color--white);
    padding: 25px;
    border-radius: 12px;
    max-width: 300px;
    position: relative;
    z-index: 100;
}

span.donationAmount {
    font-size: 52px;
    font-weight: 800;
    display: block;
    margin: 25px 0;
}

span.donationType {
    font-weight: 800;
    font-size: 22px;
    color: #767576;
}

span.changeAmount {
    display: block;
    text-decoration: underline;
    cursor: pointer;
    color: #593683;
    margin-top: 15px;
}

/* Action Buttons */
.actionBtnContainer {
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
}

.actionBtnContainer.duo {
    justify-content: space-between;
    gap: 15px;
}

.actionBtnContainer button,
#donationFlow #submitButton {
    height: 54px;
    padding: 0 28px;
    font-size: 20px;
    font-weight: 600;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #593683;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

.actionBtnContainer button.back-button {
    background: none;
    border: 3px solid #593683;
    color: #593683;
}

.actionBtnContainer button.back-button:hover {
    background: #593683;
    color: #fff;
    border-color: transparent;
}

.actionBtnContainer button:hover {
    background: #432667;
}

.actionBtnContainer button:active,
.actionBtnContainer button:focus {
    opacity: 0.8;
    transform: scale(0.99);
    transition: 0.5s;
}

.actionBtnContainer .continue-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Error Messages */
.error {
    display: none;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #e4584c;
    color: #e4584c;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
}

.error.visible {
    display: block;
}

/* Thank You Page */
#ty-donation {
    padding-top: 30px;
    overflow: hidden;
}

#ty-donation .flex {
    display: flex;
    flex-direction: row;
}

#ty-donation img {
    max-height: 100vh;
    object-fit: cover;
    height: 100%;
}

#ty-donation .content-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    background-color: #97d5e5;
}

#ty-donation .row-1,
#ty-donation .row-2 {
    width: 350px;
    display: flex;
    flex-direction: column;
    margin: 0 30px;
}

#ty-donation .row-1 {
    border-bottom: 4px solid #0000004a;
    padding-bottom: 40px;
}

#ty-donation .button.purple {
    margin: 30px 0;
}

/* Payment Fields */
.field {
    background: #fff;
    padding: 0 16px;
    font-weight: 300;
    border: 2px solid #e5e5e5;
    color: #000;
    border-radius: 8px;
    flex: 1;
    cursor: text;
    height: 46px;
    padding-top: 12px;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}



@media screen and (max-width: 800px) {
#donationFlow .grid.columns-3 {grid-template-columns: repeat(3, minmax(0, 1fr));text-align: center;}
#donationFlow .donateCardMeta p {display:none;}
#donationFlow label span {font-size: 20px;}
}

@media screen and (max-width: 600px) {
#donationFlow label span span {display: none;}
#donationFlow .toggle-label {height: 50px;}
#donationFlow .donateCardMeta span {font-size:38px;}
#donateCustomContainer {flex-direction: column;}
}