/* =============================================================================
   LAKEHEAD SMP - Donation Card Overrides - Mobile-First Design
   Minecraft.net inspired beveled box design
   ============================================================================= */

/* Base styles for donation cards to adopt the beveled box look */
.mc-donation-card {
    background: var(--box-bg, #1E1E1E); /* Dark background with a hint of color */
    border: 4px solid #FFFFFF; /* Thick, white border */
    padding: 24px;
    position: relative;
    color: var(--box-fg, var(--mc-core-white)); /* Use text color variable */
    transition: border-color 0.3s ease;
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack elements vertically */
}

/* Mobile-responsive donation cards */
@media (max-width: 1023px) {
    .mc-donation-card {
        padding: var(--mc-spacing-md) !important;
        border-width: 2px !important;
    }
    
    .mc-donation-grid {
        grid-template-columns: 1fr !important;
        gap: var(--mc-spacing-sm) !important;
    }
    
    .mc-donation-title {
        font-size: var(--mc-font-size-lg) !important;
        margin-bottom: var(--mc-spacing-xs) !important;
    }
    
    .mc-donation-description {
        font-size: var(--mc-font-size-sm) !important;
        line-height: 1.4 !important;
        margin-bottom: var(--mc-spacing-sm) !important;
    }
}

@media (max-width: 768px) {
    .mc-donation-card {
        padding: var(--mc-spacing-sm) !important;
        border-width: 2px !important;
    }
    
    .mc-donation-title {
        font-size: var(--mc-font-size-base) !important;
        margin-bottom: 4px !important;
    }
    
    .mc-donation-description {
        font-size: var(--mc-font-size-xs) !important;
        line-height: 1.3 !important;
        margin-bottom: var(--mc-spacing-xs) !important;
    }
    
    .btn-mc-donate {
        font-size: var(--mc-font-size-sm) !important;
        padding: var(--mc-spacing-sm) var(--mc-spacing-md) !important;
        min-height: 44px !important;
    }
}

@media (max-width: 480px) {
    .mc-donation-card {
        padding: 12px !important;
        border-width: 1px !important;
    }
    
    .mc-donation-title {
        font-size: var(--mc-font-size-sm) !important;
        margin-bottom: 2px !important;
    }
    
    .mc-donation-description {
        font-size: 11px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }
    
    .btn-mc-donate {
        font-size: 12px !important;
        padding: 8px 12px !important;
        min-height: 40px !important;
        box-shadow: inset 0 -3px 0 var(--btn-shadow, var(--mc-core-rich-black)) !important;
    }
}

.mc-donation-card:hover {
    border-color: #3C8527; /* Green on hover */
}

/* Corrected Bevel Effect */
.mc-donation-card::before {
    content: none;
}

/* Card Themes */
.mc-donation-card-paypal {
    --box-bg: #1C2A4A; /* A deeper, more harmonious blue */
    --box-fg: #FFFFFF;
}

.mc-donation-card-kofi {
    --box-bg: #2E4A2E; /* A deeper, harmonious green */
    --box-fg: #FFFFFF;
}

.mc-donation-card-patreon {
    --box-bg: #4A2E1E; /* A deeper, harmonious orange */
    --box-fg: #FFFFFF;
}

/* Improved Text Contrast */
.mc-donation-description {
    color: #A0A0A0; /* A light gray that's softer than pure white */
}
.mc-donation-description strong {
    color: #FFFFFF; /* Keep important parts white */
}


/* Styling for content inside the cards */
.mc-donation-card .mc-donation-card-header,
.mc-donation-card .mc-donation-card-content {
    position: relative;
    z-index: 2; /* Ensure content is above the pseudo-element */
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-grow: 1; /* Allow content to grow */
}

.mc-donation-description {
    flex-grow: 1;
}

/* Base button style for donation cards */
.btn-mc-donate {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 1.25rem; /* Increased font size */
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    width: 100%; /* Make button full width */
    padding: 1rem 1.25rem; /* Increased padding */
    border: 2px solid var(--mc-core-border, #000);
    color: var(--btn-fg, var(--mc-core-rich-black));
    background: var(--btn-bg, var(--mc-core-white));
    box-shadow: inset 0 -6px 0 var(--btn-shadow, var(--mc-core-rich-black));
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}

.btn-mc-donate span {
    position: relative;
    z-index: 2;
}

/* Inner bevel highlight */
.btn-mc-donate::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 6px);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.2),
                inset -2px -2px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Hover state */
.btn-mc-donate:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* Active state */
.btn-mc-donate:active {
    box-shadow: none;
    background: var(--btn-shadow, var(--mc-core-border));
    color: var(--mc-core-white);
    transform: translateY(0);
}

/* Button Color Variants */
.mc-btn-paypal {
    --btn-bg: #0079C1; /* PayPal Blue */
    --btn-shadow: #005EA6;
    --btn-fg: #FFFFFF;
}

.mc-btn-kofi {
    --btn-bg: #3C8527; /* Matching the site's primary green */
    --btn-shadow: #2A641C;
    --btn-fg: #FFFFFF;
}

.mc-btn-patreon {
    --btn-bg: #E6461A; /* A harmonious orange */
    --btn-shadow: #C5360A;
    --btn-fg: #FFFFFF; /* White */
}