/*
 * Custom CSS for Afribit Kibera BTCPay Server Crowdfund Page
 *
 * This stylesheet enhances the visual branding and interactivity of the crowdfund page.
 * It uses Afribit's brand colors and aims for a clean, modern aesthetic with advanced effects.
 *
 * Brand Colors:
 * Bitcoin Orange: #F7931A (Primary Accent)
 * Pan African Red: #EF3340 (Secondary Accent)
 * Pan African Green: #009E49 (Success/Positive)
 * Pure White: #FFFFFF (Replaces Pan African Gold/Yellow for borders and accents)
 * Dark Gray Background: #161B22 (Main page background)
 * Card Background: #1a1a1a (Slightly lighter than main background)
 * Soft White Text: #F0F0F0, #D0D0D0
 */

/* --- Global Styles --- */

/* Apply the desired background color to the main body/page container.
 * This targets common elements BTCPay Server might use for the main background.
 * Using !important to try and override any inline or default platform styles.
 */
body, html, #app, .crowdfund-app, .page-wrapper, .container-fluid {
    background-color: #161B22 !important; /* Main background color */
    color: #F0F0F0; /* Default text color */
    font-family: 'Inter', sans-serif; /* Apply Inter font globally */
    scroll-behavior: smooth; /* Smooth scrolling for internal links */
    -webkit-font-smoothing: antialiased; /* Enhance font rendering for macOS/iOS */
    -moz-osx-font-smoothing: grayscale; /* Enhance font rendering for Firefox on macOS */
}

/* Ensure all text within the crowdfund app uses the Inter font and soft white color */
.crowdfund-app *, .crowdfund-app p, .crowdfund-app li, .crowdfund-app h1, .crowdfund-app h2, .crowdfund-app h3, .crowdfund-app h4, .crowdfund-app h5, .crowdfund-app h6 {
    font-family: 'Inter', sans-serif !important;
    color: #F0F0F0;
}

/* --- Headings --- */
.crowdfund-app h3 {
    color: #F7931A !important; /* Bitcoin Orange for main headings */
    font-weight: bold;
    text-shadow: 0 0 8px rgba(247, 147, 26, 0.3); /* Subtle glow on headings */
}

/* --- Links --- */
.crowdfund-app a {
    color: #F7931A !important; /* Bitcoin Orange for all links */
    text-decoration: none;
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out; /* Smooth transition for hover */
}

.crowdfund-app a:hover {
    color: #FCD116 !important; /* Pan African Gold/Yellow on hover for links */
    text-decoration: underline;
    text-shadow: 0 0 10px rgba(252, 209, 22, 0.6); /* Stronger glow on hover */
}

/* --- Custom Description Section (from your HTML) --- */

/* Target the main container div you're pasting into the description field */
/* It's highly recommended to add a class like 'afribit-description' to this div in your HTML */
.afribit-description { /* Assuming you add class="afribit-description" to your main div */
    background-color: #161B22 !important; /* Ensure this specific section also has the desired background */
    padding: 1em; /* Adjust as needed */
    line-height: 1.6;
    text-align: justify; /* Justify text within this container */
}

/* Styling for the individual initiative "cards" within the description */
.afribit-description ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.afribit-description li {
    margin-bottom: 1.5em;
    padding: 1.5em;
    background-color: #1a1a1a; /* Dark gray for card background */
    border: 1px solid #333; /* Subtle initial border */
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Initial shadow for depth */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother, more pronounced transition */
    cursor: pointer; /* Indicate interactivity */
    position: relative; /* Needed for z-index and potential future effects */
    overflow: hidden; /* Ensure any overflow is hidden */
    z-index: 1; /* Ensure the card content is above any background elements */
}

/* Left borders for initiative cards - using your brand colors */
.afribit-description li:nth-child(1) { border-left: 6px solid #EF3340; } /* Pan African Red */
.afribit-description li:nth-child(2) { border-left: 6px solid #FFFFFF; } /* White */
.afribit-description li:nth-child(3) { border-left: 6px solid #009E49; } /* Pan African Green */
.afribit-description li:nth-child(4) { border-left: 6px solid #EF3340; } /* Pan African Red */
.afribit-description li:nth-child(5) { border-left: 6px solid #FFFFFF; } /* White */

/* --- Animated Pulsating Glow for Cards on Hover --- */

/* Keyframes for the pulsating glow effect */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 10px rgba(247, 147, 26, 0.4); /* Subtle glow */
        border-color: #F7931A; /* Solid orange border */
    }
    50% {
        box-shadow: 0 0 25px rgba(247, 147, 26, 0.8), 0 0 40px rgba(252, 209, 22, 0.4); /* Stronger glow, hint of yellow */
        border-color: #FCD116; /* Yellowish border */
    }
    100% {
        box-shadow: 0 0 10px rgba(247, 147, 26, 0.4); /* Back to subtle glow */
        border-color: #F7931A; /* Back to orange border */
    }
}

/* Hover effects for the initiative cards */
.afribit-description li:hover {
    transform: translateY(-8px) scale(1.02); /* More pronounced lift and subtle grow */
    background-color: #2a2a2a; /* Slightly lighter on hover */
    /* Apply the pulsating glow animation on hover */
    animation: pulseGlow 2s ease-in-out infinite alternate; /* 2s duration, ease-in-out, infinite loop, alternates direction */
    /* Ensure the initial hover box-shadow and border-color are set,
       which will then be overridden by the animation */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(247, 147, 26, 0.6);
    border-color: #F7931A;
}

/* Styling for strong tags (titles within cards) */
.afribit-description strong {
    color: #F7931A; /* Bitcoin Orange */
    font-size: 1.3em;
    display: block;
    margin-bottom: 0.8em;
    transition: color 0.3s ease-in-out;
}

/* Info icon styling */
.afribit-description sup {
    font-size: 0.7em;
    vertical-align: super;
    margin-left: 3px;
    position: relative;
}

.afribit-description sup svg {
    vertical-align: baseline;
    fill: #FFFFFF; /* White color for the info icon */
    transition: fill 0.3s ease-in-out;
}

/* --- Specific Styling for "How to Claim Your Perk" Ordered List --- */
/* This section ensures the ordered list looks like a standard list, not a card. */
.afribit-description ol {
    list-style: decimal; /* Ensure standard numbering */
    padding-left: 1.5em !important; /* Add padding for the numbers */
    margin-left: 0 !important; /* Remove any default margin from the parent ul/ol if present */
    color: #D0D0D0; /* Ensure text color is soft white */
}

.afribit-description ol li {
    background-color: transparent !important; /* Crucial: No background color */
    border: none !important; /* Crucial: No borders */
    box-shadow: none !important; /* Crucial: No box shadows */
    padding: 0.5em 0 !important; /* Adjust padding for readability */
    margin-bottom: 0.8em !important; /* Adjust margin for spacing */
    transition: none !important; /* No transitions on hover */
    cursor: default !important; /* No pointer cursor */
    transform: none !important; /* No transform on hover */
    animation: none !important; /* No animation */
    z-index: auto !important; /* Reset z-index */
    overflow: visible !important; /* Ensure content is not hidden */
}

/* Ensure no hover effects apply to these list items */
.afribit-description ol li:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
    color: #D0D0D0 !important; /* Keep original text color on hover */
}

/* Remove any pseudo-elements that might have mistakenly applied to ol li */
.afribit-description ol li::before,
.afribit-description ol li::after {
    content: none !important;
    animation: none !important;
}


/* --- BTCPay Server Specific Overrides --- */
/* These are general selectors that might need adjustment based on your specific BTCPay theme.
   You might need to use your browser's developer tools to inspect the elements on your live
   crowdfund page and find the exact classes/IDs to target for overriding. */

/* Example: If the main campaign title is not changing color */
#CampaignTitle, .crowdfund-title {
    color: #F7931A !important;
    text-shadow: 0 0 10px rgba(247, 147, 26, 0.5);
}

/* Example: If the progress bar is not matching brand colors */
.progress-bar-fill {
    background-color: #F7931A !important;
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.7);
    transition: width 0.5s ease-out;
}

/* Example: If donation buttons are not matching brand colors */
.btn-primary, .btn-donate, .btn-primary:focus, .btn-donate:focus {
    background-color: #F7931A !important;
    border-color: #F7931A !important;
    color: #000000 !important; /* Black text on orange buttons */
    font-weight: bold;
    padding: 0.8em 1.8em;
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(247, 147, 26, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-primary:hover, .btn-donate:hover {
    background-color: #FCD116 !important; /* Pan African Gold/Yellow on hover */
    border-color: #FCD116 !important;
    transform: translateY(-3px); /* Lift more on hover */
    box-shadow: 0 6px 15px rgba(247, 147, 26, 0.6), 0 0 20px rgba(252, 209, 22, 0.8); /* Stronger glow */
}

/* Ensure all form inputs have consistent styling */
input[type="text"], input[type="email"], input[type="number"], textarea {
    background-color: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #F0F0F0 !important;
    border-radius: 8px !important;
    padding: 0.8em !important;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, textarea:focus {
    border-color: #F7931A !important;
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.3) !important;
    outline: none !important;
}