/* --- Modal Overlays --- */
.shenge-modal {
    display: none; position: fixed; z-index: 999999 !important;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); backdrop-filter: blur(5px);
    /* Enable scrolling inside the modal overlay */
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
    text-align: center;
}
.shenge-modal-content {
    background: #fff; margin: 2% auto; padding: 25px;
    border-radius: 20px; width: 90%; max-width: 400px;
    position: relative; text-align: center; 
    /* Uses your theme's default font */
    font-family: inherit; 
    display: inline-block;
    vertical-align: middle;
}
.close-shenge { position: absolute; right: 15px; top: 10px; font-size: 30px; cursor: pointer; color: #ccc; }

/* --- IMAGE RADIO BUTTONS --- */
.image-radio-group {
    display: flex; justify-content: space-around; gap: 10px; margin-bottom: 20px;
}
.image-radio-group input[type="radio"] { display: none; }
.image-radio-group label {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 12px; border: 2px solid #f0f0f0; border-radius: 15px;
    cursor: pointer; transition: 0.3s; background: #fafafa;
    font-family: inherit;
}
.image-radio-group label img { width: auto; height: 35px; margin-bottom: 8px; object-fit: contain; }
.image-radio-group label span { font-size: 12px; font-weight: bold; color: #777; }

/* Active Selection with #f4b03e */
.image-radio-group input[type="radio"]:checked + label {
    border-color: #f4b03e; background: #fffdf9;
}
.image-radio-group input[type="radio"]:checked + label span { color: #f4b03e; }

/* --- Amounts & Inputs --- */
.amount-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 15px; }
.amt-option {
    padding: 12px; border: 2px solid #f0f0f0; background: #fff;
    border-radius: 10px; font-weight: bold; cursor: pointer;
    font-family: inherit;
}
.amt-option.active { border-color: #f4b03e; color: #f4b03e; background: #fffdf9; }

.payer-fields input, #customAmount {
    width: 100%; grid-column: span 3; padding: 12px; margin-bottom: 10px; border: 1px solid #eee;
    border-radius: 10px; box-sizing: border-box; font-size: 16px;
    font-family: inherit;
}

#shenge-submit {
    background: #f4b03e; color: #fff; border: none; padding: 18px;
    width: 100%; border-radius: 50px; font-size: 18px; font-weight: bold;
    cursor: pointer; box-shadow: 0 4px 10px rgba(244, 176, 62, 0.3);
    font-family: inherit;
}

/* --- MOBILE OPTIMIZATION (With side spacing) --- */
@media screen and (max-width: 600px) {
    .shenge-modal-content { 
        margin: 20px auto; /* Centered with top/bottom gap */
        width: 88%;      /* Leaves space on the left/right */
        border-radius: 20px; 
        padding: 40px 20px 30px 20px; 
    }
    .image-radio-group label { padding: 15px 5px; }
    .amount-grid { grid-template-columns: 1fr 1fr; }
    #customAmount { grid-column: span 2; }
}