/**
 * Spirit Collective Fundraiser Page Styles
 * File location: /wp-content/plugins/spirit-collective-custom-code/assets/css/fundraiser.css
 */

/* #region Fundraiser Sections Common */

.sc-fundraiser-intro__wrapper,
.sc-fundraiser-cta__wrapper {
    display: flex;
    align-items: stretch;
}

.sc-fundraiser-intro__content,
.sc-fundraiser-cta__content {
    flex: 1;
    display: flex;
    align-items: center;
}

.sc-fundraiser-intro__image,
.sc-fundraiser-cta__image {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-fundraiser-intro__image { max-width: 45%; }
.sc-fundraiser-cta__image { max-width: 40%; }

.sc-fundraiser-intro__image img,
.sc-fundraiser-cta__image img {
    width: auto;
    height: 100%;
    object-fit: contain;
    max-height: 1100px;
    display: block;
}

/* Progress Bar */
.sc-progress-wrapper {
    padding: 25px;
    background: var(--sc-color-bg-alt);
    border-radius: var(--sc-radius-10);
    border: 1px solid var(--sc-color-border);
}

.sc-progress-wrapper .give-totals-shortcode-wrap {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

@media (max-width: 950px) {
    .sc-fundraiser-intro__wrapper,
    .sc-fundraiser-cta__wrapper { flex-direction: column; }
    
    .sc-fundraiser-intro__text,
    .sc-fundraiser-cta__text { margin: 0 auto; text-align: center; }
    
    .sc-fundraiser-intro__image,
    .sc-fundraiser-cta__image { max-width: 100%; height: auto; }
    
    .sc-fundraiser-intro__image img,
    .sc-fundraiser-cta__image img { width: 100%; height: auto; max-width: 782px; }
}
/* #endregion Fundraiser Sections Common */

/* #region Fundraiser Details */
.sc-fundraiser-details__wrapper {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.sc-fundraiser-rewards-card {
    background: var(--sc-color-bg-content);
    border-radius: var(--sc-radius-15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--sc-color-border);
    position: sticky;
    top: 100px;
}

.sc-rewards-table {
    border: 2px solid var(--sc-color-border);
    border-radius: var(--sc-radius-10);
    overflow: hidden;
    margin-bottom: 25px;
}

.sc-reward-tier {
    display: grid;
    grid-template-columns: 100px 1fr;
    border-bottom: 1px solid var(--sc-color-border);
    transition: all 0.2s ease;
}


.sc-reward-tier:last-child { border-bottom: none; }
.sc-reward-tier:hover { background: var(--sc-color-btn-secondary); }

.sc-reward-amount {
    padding: 16px 20px;
    font-family: var(--sc-font-body);
    font-size: 17px;
    font-weight: 700;
    background: var(--sc-color-btn-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--sc-color-border);
}

.sc-reward-description {
    padding: 16px 20px;
    font-family: var(--sc-font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--sc-color-text);
    display: flex;
    align-items: center;
}
.sc-reward-tier:nth-child(1) .sc-reward-amount {
    background: #87a96b22;
}
.sc-reward-tier:nth-child(2) .sc-reward-amount {
    background: #87a96b44;
}
.sc-reward-tier:nth-child(3) .sc-reward-amount {
    background: #87a96b66;
}
.sc-reward-tier:nth-child(4) .sc-reward-amount {
    background: #87a96b88;
}
.sc-reward-tier:nth-child(5) .sc-reward-amount {
    background: #87a96baa;
}
.sc-reward-tier:last-child .sc-reward-amount {
    background: var(--sc-color-success);
    color: var(--sc-color-white);
}

.sc-fundraiser-details__rewards .sc-rewards-note {
    border-radius: var(--sc-radius-3) var(--sc-radius-6) var(--sc-radius-6) var(--sc-radius-3);
    border-left: 10px solid var(--sc-color-info);
}

@media (max-width: 1050px) {
    .sc-fundraiser-details__wrapper { grid-template-columns: 1fr; gap: 50px; }
    .sc-fundraiser-rewards-card { position: static; max-width: 700px; margin: 0 auto; }
}
/* #endregion Fundraiser Details */

/* #region Accordion Fundraiser Specific */
.sc-accordion-title-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
}

.sc-accordion-emoji { font-size: 28px; flex-shrink: 0; }

.sc-accordion-amount {
    font-family: var(--sc-font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--sc-color-success);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sc-accordion-fundraiser .sc-accordion-title {
    font-family: var(--sc-font-heading);
    margin: 0;
    line-height: 1.3;
}

@media (max-width: 480px) {
    .sc-accordion-emoji { display: none; }
}
/* #endregion Accordion Fundraiser Specific */

/* #region App Features */

.sc-app-features__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.sc-app-feature {
    border-radius: var(--sc-radius-10);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sc-app-feature p:last-child { margin-bottom: 0; }

.sc-app-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(213, 41, 117, 0.12);
}

.sc-app-feature__icon {
    font-size: 36px;
    margin-bottom: 15px;
    display: inline-block;
    animation: float-subtle 3s ease-in-out infinite;
}

.sc-app-feature:nth-child(even) .sc-app-feature__icon { animation-delay: 1.5s; }

@keyframes float-subtle {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

@media (max-width: 768px) {
    .sc-app-features { padding: 40px 20px; }
    .sc-app-features__grid { grid-template-columns: 1fr; gap: 25px; margin-bottom: 45px; }
    .sc-app-feature__icon { font-size: 32px; margin-bottom: 12px; }
}
/* #endregion */

/* #region Donation Form */
.sc-donation-form {
    position: relative;
}

#primary .sc-donation-form #give-form-shortcode-1 {
    margin-bottom: 0;
}

.sc-donation-form__wrapper {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.sc-top-donors {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--sc-color-border);
    scrollbar-width: thin; /* Firefox */
    position: relative;
    top: 100px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.sc-donation-form .givewp-donation-form { padding: 0;}

@media (max-width: 1050px) {
    .sc-donation-form__wrapper { grid-template-columns: 1fr; gap: 30px;}
    .sc-top-donors { position: static; max-height: none; }
}

/* Custom scrollbar for donors container */
/* Webkit browsers (Chrome, Safari, Edge) */
.sc-top-donors::-webkit-scrollbar {
    width: 8px;
}

.sc-top-donors::-webkit-scrollbar-track {
    border-radius: var(--sc-radius-full);
    margin: 10px 0; /* Add margin to top/bottom of track */
}

.sc-top-donors::-webkit-scrollbar-thumb {
    border-radius: var(--sc-radius-full);
    border: 2px solid var(--sc-color-bg-page); /* Creates padding around thumb */
    background-clip: padding-box;
}

.sc-top-donors::-webkit-scrollbar-thumb:hover {
    background-clip: padding-box;
}

/* Optional: Add fade effect at top/bottom */
.sc-top-donors {
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20px,
        black calc(100% - 20px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20px,
        black calc(100% - 20px),
        transparent 100%
    );
}

/* #endregion Donation Form */


/* #region GiveWP Dark Mode Styles */
/* ======================================== */

/* GiveWP Donor Wall Dark Mode */
[data-theme="dark"] .give-donor.give-card {
    background: var(--sc-color-bg-card);
    border: 1px solid var(--sc-color-border);
}

[data-theme="dark"] .give-donor-container-variation__name {
    color: var(--sc-color-text);
}

[data-theme="dark"] .give-donor-container-variation__timestamp {
    color: var(--sc-color-text-light);
}

[data-theme="dark"] .give-donor-content {
    background: var(--sc-color-bg-card);
    border-color: var(--sc-color-primary) !important;
}

[data-theme="dark"] .give-donor-content__comment,
[data-theme="dark"] .give-donor-content__excerpt {
    color: var(--sc-color-text);
}

[data-theme="dark"] .give-donor-content__read-more {
    color: var(--sc-color-primary) !important;
}

[data-theme="dark"] .give-donor-content__read-more:hover {
    color: var(--sc-color-primary-hover) !important;
    text-decoration: underline;
}

[data-theme="dark"] .give-donor-details {
    background: var(--sc-color-bg-card);
}

[data-theme="dark"] .give-donor-details__wrapper span {
    color: var(--sc-color-text-light);
}

[data-theme="dark"] .give-donor-details__total {
    color: var(--sc-color-success) !important;
}

/* GiveWP Modal Dark Mode */
[data-theme="dark"] .give-donor-wall-modal.mfp-wrap {
    background: rgba(26, 25, 24, 0.5); /* Dark overlay background */
}

[data-theme="dark"] .give-donor-wall-modal .mfp-content {
    background: var(--sc-color-bg-card);
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-10);
}

[data-theme="dark"] .give-donor-wall-modal .give-donor-content__comment {
    color: var(--sc-color-text);
    background: var(--sc-color-bg-card);
    padding: 30px;
}

[data-theme="dark"] .give-donor-wall-modal .mfp-close {
    color: var(--sc-color-text-light);
    opacity: 0.8;
    background: transparent;
}

[data-theme="dark"] .give-donor-wall-modal .mfp-close:hover {
    color: var(--sc-color-text);
    opacity: 1;
}

[data-theme="dark"] .give-donor-wall-modal .mfp-preloader {
    color: var(--sc-color-text-light);
}

/* Modal backdrop overlay if it exists as separate element */
[data-theme="dark"] .mfp-bg {
    background: rgba(26, 25, 24, 0.95);
}

/* #endregion GiveWP Dark Mode Styles */