/**
 * Mundofy Donations Public CSS
 * High Specificity & Resets to prevent Theme Bleed
 */

.mundofy-donation-form {
    max-width: 100%;
    margin: 0 auto;
    font-family: inherit;
    box-sizing: border-box;
    /* Local scope variable defaults (fallback) */
    --mundofy-amount-btn-bg-local: var(--mundofy-amount-btn-bg, #f7f7f7);
    --mundofy-amount-btn-text-local: var(--mundofy-amount-btn-text, #333);
    --mundofy-amount-btn-padding-local: var(--mundofy-amount-btn-padding, 10px 15px);
    --mundofy-amount-btn-border-width-local: var(--mundofy-amount-btn-border-width, 2px);
    --mundofy-amount-btn-border-color-local: var(--mundofy-amount-btn-border-color, #dddddd);
    --mundofy-amount-btn-active-border-color-local: var(--mundofy-amount-btn-active-border-color, #0073aa);
    --mundofy-amount-btn-active-bg-local: var(--mundofy-amount-btn-active-bg, #f7f7f7);
    --mundofy-amount-btn-border-radius-local: var(--mundofy-amount-btn-border-radius, 4px);

    --mundofy-donate-btn-bg-local: var(--mundofy-donate-btn-bg, #0073aa);
    --mundofy-donate-btn-text-local: var(--mundofy-donate-btn-text, #fff);
    --mundofy-donate-btn-padding-local: var(--mundofy-donate-btn-padding, 12px 24px);
    --mundofy-frequency-direction-local: var(--mundofy-frequency-direction, row);
}

.mundofy-donation-form *,
.mundofy-donation-form *::before,
.mundofy-donation-form *::after {
    box-sizing: inherit;
}

/* Frequency */
.mundofy-donation-form .mundofy-donation-frequency {
    display: flex;
    flex-direction: var(--mundofy-frequency-direction-local);
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
}

.mundofy-donation-form .mundofy-donation-frequency label {
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    /* Reset theme margins */
    line-height: normal;
    /* Reset theme line-height */
}

/* Interval Dropdown */
.mundofy-donation-form .mundofy-donation-interval {
    margin-bottom: 15px;
}

.mundofy-donation-form .mundofy-donation-interval select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    height: auto;
    /* Reset fixed heights */
    background-color: #fff;
}

/* Amount Buttons */
.mundofy-donation-form .mundofy-donation-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.mundofy-donation-form .mundofy-amount-btn {
    /* Resets */
    appearance: none;
    -webkit-appearance: none;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none;
    margin: 0;
    text-decoration: none;

    /* Styles */
    background-color: var(--mundofy-amount-btn-bg-local);
    color: var(--mundofy-amount-btn-text-local);
    padding: var(--mundofy-amount-btn-padding-local);
    border-width: var(--mundofy-amount-btn-border-width-local);
    border-style: solid;
    border-color: var(--mundofy-amount-btn-border-color-local);
    border-radius: var(--mundofy-amount-btn-border-radius-local);
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Flex Layout Logic */
    display: flex;
    align-items: center;
    justify-content: center;
    --mundofy-amount-btn-flex-local: var(--mundofy-amount-btn-flex, 1 0 calc(33% - 10px));
    flex: var(--mundofy-amount-btn-flex-local);
    text-align: center;

    font-size: 1em;
    /* Reset font size */
    line-height: 1.2;
}

.mundofy-donation-form .mundofy-amount-btn:hover,
.mundofy-donation-form .mundofy-amount-btn.active {
    filter: brightness(0.95);
    border-color: var(--mundofy-amount-btn-active-border-color-local) !important;
    background-color: var(--mundofy-amount-btn-active-bg-local) !important;
    font-weight: 700;
}

/* Custom Amount Input */
.mundofy-donation-form .mundofy-custom-amount-input {
    width: 100%;
    margin-top: 10px;
    position: relative;
    display: flex;
    align-items: center;
}

.mundofy-donation-form .mundofy-currency-prefix {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    font-size: 1.1em;
    font-weight: 500;
    pointer-events: none;
    z-index: 2;
}

.mundofy-donation-form .mundofy-custom-amount-input input {
    width: 100%;
    padding: 12px 12px 12px 30px;
    /* Left padding for currency symbol */
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mundofy-donation-form .mundofy-custom-amount-input input:focus {
    border-color: var(--mundofy-donate-btn-bg-local, #0073aa);
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
    outline: none;
}

/* Donate Button */
.mundofy-donation-form .mundofy-donation-submit {
    margin-top: 20px;
}

.mundofy-donation-form .mundofy-donate-btn {
    /* Resets */
    appearance: none;
    -webkit-appearance: none;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none;

    background-color: var(--mundofy-donate-btn-bg-local);
    color: var(--mundofy-donate-btn-text-local);
    padding: var(--mundofy-donate-btn-padding-local);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
    display: block;
}

.mundofy-donation-form .mundofy-donate-btn:hover {
    opacity: 0.9;
}

.mundofy-donation-form .mundofy-donate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc !important;
    color: #666 !important;
}

/* Message */
.mundofy-donation-form .mundofy-donation-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    display: none;
    border: 1px solid transparent;
}

.mundofy-donation-form .mundofy-donation-message.error {
    background-color: #fde8e8;
    color: #c53030;
    border-color: #fadbd8;
    display: block;
}

/* Utilities for Vanilla JS Slide Animation */
.mundofy-slide-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

.mundofy-slide-wrapper.open {
    grid-template-rows: 1fr;
}

.mundofy-slide-inner {
    overflow: hidden;
}

/* Payment Gateway Icons Fix - For Checkout Page */
li[class*="payment_method_mundofy_"] label {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    /* Allow wrapping if needed, though flex should handle it */
}

/* Target the payment method input to ensure it stays first if possible, or handle via order */
li[class*="payment_method_mundofy_"] input[type="radio"] {
    margin-right: 10px !important;
}

li[class*="payment_method_mundofy_"] img,
li[class*="payment_method_mundofy_"] .mundofy-payment-icon {
    order: -1 !important;
    /* Move to start (but after radio usually, as radio is outside label often or inside?) */
    /* If radio is inside label, radio should be first. If image is -1, it might jump before radio. */
    /* Usually WC structure: <input> <label> ... <img /> ... </label> OR <label><input> Text <img></label> */
    /* Let's be careful. If input is outside, order works on contents of label. */

    margin-right: 12px !important;
    margin-left: 0 !important;
    max-height: 24px !important;
    width: auto !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: none !important;
}