/* NYP Suggested Amounts Frontend Styles */

:root {
    --nyp-padding-mobile: 40px;
    --nyp-padding-desktop: 55px;
    --nyp-grid-gap: 0.5rem;
    --nyp-shadow: 2px 2px 5px #888888;
    --nyp-shadow-inset: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.nyp .suggested-amounts {
    border: 0;
    display: grid;
    margin: 2rem 0;
    padding: 0;
    grid-gap: var(--nyp-grid-gap);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Hide the radio buttons */
.nyp .suggested-amounts .suggested-amounts__amount input[type=radio] {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Styles for all labels */
.nyp .suggested-amounts .suggested-amounts__amount label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #284cc4, #4a6dff);
    font-weight: 600 !important;
    box-shadow: var(--nyp-shadow);
    width: 100%;
    padding: var(--nyp-padding-desktop) !important;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    gap: 4px;
}

.nyp .suggested-amounts .suggested-amounts__amount label .amount {
    font-size: inherit;
}

.nyp .suggested-amounts .suggested-amounts__amount label .amount-text,
.nyp .suggested-amounts .suggested-amounts__amount label .label-text {
    display: block;
    line-height: 1.2;
}

/* Hover effect for labels */
.nyp .suggested-amounts .suggested-amounts__amount label:hover {
    filter: brightness(1.1);
}

/* Styles for checked radio buttons */
.nyp .suggested-amounts .suggested-amounts__amount input[type=radio]:checked + label {
    box-shadow: var(--nyp-shadow-inset);
    color: var(--wc-primary-text, #FFF);
    font-weight: bold;
    filter: brightness(0.9);
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
    .nyp .suggested-amounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nyp .suggested-amounts .suggested-amounts__amount label {
        padding: var(--nyp-padding-mobile) !important;
    }

    /* Removed the font-size override - let user's custom settings work on mobile too */
}