.supportedx-grid {
    width: 100%;max-width: 1200px;margin: 50px auto;padding: 20px;display: grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap: 20px;
}


.supportedx-card {min-height: 260px;border-radius: 18px;overflow: hidden;background-color: #151a24;background-size: 100% 100%;background-repeat: no-repeat;position: relative;border: 1px solid rgba(255,255,255,.08);display: flex;align-items: flex-end;transition: .25s ease;
}


.supportedx-card:hover {transform: translateY(-3px);

}


.supportedx-card > div {width: 100%;padding: 20px;background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.9)
        );
}


.supportedx-card > div > div:first-child {display: flex;align-items: center;gap: 12px;margin-bottom: 18px;
}


.supportedx-icon {width: 42px;height: 42px;display: flex;align-items: center;justify-content: center;border-radius: 10px;background: rgba(255,255,255,.1);
}


.supportedx-card h3 {margin: 0;font-size: 17px;
}


.supportedx-card p {margin: 4px 0 0;font-size: 12px;color: #a7afbf;
}


.supportedx-card > div > div:last-child {display: grid;grid-template-columns: 1fr 1fr;gap: 8px;
}


.select-card-btn {font-weight: bold;
}


.select-card-btn:hover {background: #6366f1;color: #fff;

}


/* =========================================
   MODAL
========================================= */

.gift-modal-overlay {position: fixed;inset: 0;background:
        rgba(0,0,0,.78);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);display: none;align-items: center;justify-content: center;padding: 20px;z-index: 99999;overflow-y: auto;
}


.gift-modal-overlay.active {display: flex;

}


.gift-modal {width: 100%;max-width: 520px;max-height: 92vh;overflow-y: auto;background: #111827;color: #fff;border:
        1px solid
        rgba(255,255,255,.08);border-radius: 22px;padding: 28px;position: relative;box-shadow:
        0 25px 80px
        rgba(0,0,0,.55);animation:
        modalSlideUp
        .25s ease;
}


@keyframes modalSlideUp {from {    opacity: 0;    transform:
            translateY(25px)
            scale(.97);
    }to {    opacity: 1;    transform:
            translateY(0)
            scale(1);
    }

}


/* Close */

.gift-modal-close {position: absolute;top: 15px;right: 18px;width: 38px;height: 38px;border: none;border-radius: 50%;background:
        rgba(255,255,255,.08);color: #fff;font-size: 25px;cursor: pointer;z-index: 20;
}


.gift-modal-close:hover {background:
        rgba(255,255,255,.16);
}


/* =========================================
   MODAL SECTIONS
========================================= */

.modal-section {display: none;

}


.modal-section.active {display: block;

}


.modal-header {margin-bottom: 25px;padding-right: 35px;
}


.modal-header h2 {margin: 0 0 7px;font-size: 22px;
}


.modal-header p {margin: 0;color: #9ca3af;font-size: 14px;line-height: 1.5;
}



/* =========================================
   FORM
========================================= */

.form-group {margin-bottom: 20px;
}


.form-group > label {display: block;margin-bottom: 9px;font-size: 14px;font-weight: 600;color: #e5e7eb;
}


/* Select */

.form-group select {width: 100%;height: 50px;padding: 0 14px;border-radius: 11px;border:
        1px solid
        rgba(255,255,255,.1);background: #1f2937;color: #fff;outline: none;font-size: 14px;
}


.form-group select:focus {border-color: #6366f1;

}


/* =========================================
   AMOUNT INPUT
========================================= */

.amount-input-wrapper {display: flex;align-items: center;height: 50px;border-radius: 11px;border:
        1px solid
        rgba(255,255,255,.1);background: #1f2937;overflow: hidden;
}


.amount-input-wrapper span {padding-left: 15px;color: #9ca3af;font-weight: 600;
}


.amount-input-wrapper input {width: 100%;height: 100%;border: none;outline: none;background: transparent;color: #fff;padding: 0 12px;font-size: 15px;
}


/* Remove number arrows */

.amount-input-wrapper input::-webkit-inner-spin-button,
.amount-input-wrapper input::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;
}


.amount-input-wrapper input[type=number] {-moz-appearance: textfield;
}


/* =========================================
   IMAGE UPLOAD
========================================= */

.card-upload-preview {display: flex;align-items: center;justify-content: center;position: relative;width: 100%;height: 190px;border:1px dashed
        rgba(255,255,255,.18);border-radius: 14px;background:
        rgba(255,255,255,.025);overflow: hidden;cursor: pointer;transition: .25s ease;
}


.card-upload-preview:hover {border-color: #6366f1;background:
        rgba(99,102,241,.06);
}


/* Completely hide inputs */

#cardFront,
#cardBack {display: none;
}


.upload-placeholder {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;pointer-events: none;z-index: 2;transition: .2s;
}


.upload-placeholder strong {margin-top: 8px;font-size: 14px;
}


.upload-placeholder span {margin-top: 5px;font-size: 11px;color: #8b94a7;
}


.upload-camera-icon {width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background:
        rgba(99,102,241,.12);font-size: 21px;
}


/* =========================================
   UPLOADED IMAGE
========================================= */

.blurred-card-preview {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;display: none;filter: blur(8px);transform: scale(1.06);transition: .3s ease;
}


.card-upload-preview.has-image
.blurred-card-preview {display: block;
}


.card-upload-preview.has-image
.upload-placeholder {opacity: 0;
}


/* Dark overlay */

.card-upload-preview.has-image::after {content: "";position: absolute;inset: 0;background:
        rgba(0,0,0,.28);pointer-events: none;
}


/* Change image text */

.card-upload-preview.has-image:hover::before {content:
        "Click to change image";position: absolute;z-index: 5;left: 50%;top: 50%;transform:
        translate(-50%,-50%);padding: 9px 14px;border-radius: 8px;background:
        rgba(0,0,0,.7);color: #fff;font-size: 12px;white-space: nowrap;
}


/* =========================================
   MAIN BUTTON
========================================= */

.modal-primary-btn {width: 100%;height: 52px;border: none;border-radius: 12px;background: #6366f1;color: #fff;font-size: 15px;font-weight: 700;cursor: pointer;transition: .2s;margin-top: 5px;
}


.modal-primary-btn:hover {background: #4f46e5;transform: translateY(-1px);
}


/* =========================================
   PURCHASE CARD
========================================= */

.purchase-card-preview {border-radius: 15px;overflow: hidden;background: #1f2937;border:
        1px solid
        rgba(255,255,255,.08);margin-bottom: 25px;
}


.purchase-card-preview img {width: 100%;max-height: 240px;display: block;object-fit: cover;
}


.purchase-card-info {padding: 14px 16px;
}


.purchase-card-info h3 {margin: 0 0 4px;font-size: 17px;
}


.purchase-card-info p {margin: 0;color: #9ca3af;font-size: 13px;
}


/* =========================================
   PURCHASE AMOUNT BUTTONS
========================================= */

.amount-buttons {display: grid;grid-template-columns:
        repeat(3, 1fr);gap: 10px;
}


.amount-btn {height: 48px;border-radius: 10px;border:
        1px solid
        rgba(255,255,255,.1);background: #1f2937;color: #fff;font-weight: 600;cursor: pointer;transition: .2s;
}


.amount-btn:hover,
.amount-btn.selected {background: #6366f1;border-color: #6366f1;
}


/* =========================================
   PAYMENT SUMMARY
========================================= */

.payment-summary {padding: 17px;border-radius: 13px;background:
        rgba(255,255,255,.04);border:
        1px solid
        rgba(255,255,255,.07);display: grid;grid-template-columns:
        1fr 1fr;gap: 10px;margin-bottom: 20px;
}


.payment-summary span {color: #9ca3af;font-size: 13px;
}


.payment-summary strong {text-align: right;font-size: 14px;
}


/* =========================================
   PAYMENT METHODS
========================================= */

.payment-methods {display: flex;flex-direction: column;gap: 10px;
}


.payment-method {width: 100%;display: flex;align-items: center;gap: 13px;padding: 15px;border-radius: 13px;border:
        1px solid
        rgba(255,255,255,.08);background: #1f2937;color: #fff;cursor: pointer;text-align: left;transition: .2s;
}


.payment-method:hover {border-color: #6366f1;background:
        rgba(99,102,241,.08);transform: translateX(2px);
}


.payment-method-icon {width: 43px;height: 43px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;border-radius: 11px;background:
        rgba(255,255,255,.08);font-size: 20px;
}


.payment-method > div:nth-child(2) {flex: 1;display: flex;flex-direction: column;gap: 4px;
}


.payment-method strong {font-size: 14px;
}


.payment-method > div:nth-child(2) span {color: #9ca3af;font-size: 11px;
}


.payment-arrow {font-size: 24px;color: #6b7280;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {.gift-modal-overlay {    padding: 10px;    align-items: flex-end;
    }
.gift-modal {    max-height: 94vh;    padding: 22px;    border-radius:
            20px 20px 0 0;
    }
.modal-header h2 {    font-size: 21px;
    }
.amount-buttons {    grid-template-columns:
            repeat(2, 1fr);
    }
.card-upload-preview {    height: 170px;
    }

}



/* Payment popup enhancements */
.payment-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(8px);
}

.payment-popup-overlay.active {
    display: flex;
}

/* Validation result must appear above the gift-card modal */
#validationStatusPopup {
    z-index: 100002;
}

.payment-popup {
    width: min(100%, 470px);
    max-height: min(90vh, 720px);
    overflow-y: auto;
    background: #111827;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
    color: #fff;
    text-align: center;
    position: relative;
}

.payment-popup-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.payment-popup-icon {
    width: 58px;
    height: 58px;
    margin: 4px auto 16px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(99,102,241,.14);
    font-size: 28px;
}

.payment-popup h3 {
    margin: 0 0 8px;
    font-size: 22px;
}

.payment-popup p {
    margin: 0 auto 20px;
    color: #9ca3af;
    line-height: 1.6;
    max-width: 390px;
}

.payment-popup .popup-field {
    text-align: left;
    margin: 16px 0;
}

.payment-popup .popup-field label {
    display: block;
    margin-bottom: 8px;
    color: #d1d5db;
    font-size: 13px;
    font-weight: 600;
}

.payment-popup input[type="email"],
.payment-popup input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: #0b1020;
    color: #fff;
    outline: none;
}

.payment-popup input:focus {
    border-color: #6366f1;
}

.wallet-row {
    display: flex;
    gap: 8px;
}

.wallet-row input {
    min-width: 0;
    flex: 1;
}

.popup-btn {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 13px 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
}

.popup-btn.primary {
    background: #6366f1;
    color: #fff;
}

.popup-btn.secondary {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.copy-wallet {
    flex: 0 0 auto;
    border: 0;
    border-radius: 12px;
    padding: 0 14px;
    background: rgba(99,102,241,.16);
    color: #fff;
    cursor: pointer;
}

.receipt-box {
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 14px;
    padding: 15px;
    text-align: left;
    background: rgba(255,255,255,.025);
}

.receipt-box input[type="file"] {
    width: 100%;
    margin-top: 8px;
    color: #9ca3af;
}

.popup-success {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(34,197,94,.14);
    color: #4ade80;
    font-size: 32px;
}

.validation-status-card { margin: 18px 0 8px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.025); text-align: left; }
.validation-status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.validation-status-row:last-child { border-bottom: 0; }
.validation-status-row span { color: #9ca3af; font-size: 13px; }
.validation-status-row strong { color: #fff; font-size: 13px; text-align: right; word-break: break-word; }
#validationStatusValue { color: #4ade80; }

.popup-error {
    color: #fca5a5 !important;
    font-size: 13px !important;
    margin: 8px 0 !important;
    display: none;
}

@media (max-width: 520px) {
    .payment-popup {
        padding: 22px 18px;
        border-radius: 18px;
    }.wallet-row {
        flex-direction: column;
    }.copy-wallet {
        min-height: 44px;
    }