.yn-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; animation: fadeIn 0.3s forwards forwards;
}

.yn-payment-card {
    background: #ffffff; border-radius: 16px; width: 100%; max-width: 420px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2); overflow: hidden;
    transform: translateY(20px); animation: slideUp 0.4s ease-out forwards;
}

.yn-card-header {
    background: #f8f9fa; padding: 20px; border-bottom: 1px solid #e9ecef;
    display: flex; justify-content: space-between; align-items: center;
}

.yn-card-header h3 { margin: 0; font-size: 18px; color: #333; font-weight: 700; }
.yn-status-badge {
    padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 600;
    background: #fff3cd; color: #ff9800; border: 1px solid #ffeeba; display: flex; align-items: center; gap: 6px;
}
.yn-status-badge.paid { background: #d4edda; color: #28a745; border-color: #c3e6cb; }

.yn-card-body { padding: 30px 20px; text-align: center; }
.yn-qr-wrapper {
    background: #fff; padding: 10px; border-radius: 12px; border: 2px dashed #dee2e6;
    display: inline-block; margin-bottom: 20px; position: relative;
}
.yn-qr-wrapper img { width: 220px; height: 220px; border-radius: 8px; display: block; }

.yn-amount-display { font-size: 32px; font-weight: 800; color: #212529; margin-bottom: 5px; }
.yn-amount-display span { font-size: 16px; color: #6c757d; font-weight: 600; }
.yn-order-ref { font-size: 14px; color: #adb5bd; font-family: monospace; margin-bottom: 20px; }

.yn-timer-container { background: #f8f9fa; border-radius: 8px; padding: 15px; margin-top: 20px; }
.yn-timer-text { font-size: 14px; color: #495057; font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; }
.yn-timer-bar { height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; }
.yn-timer-progress { height: 100%; background: #ff9800; width: 100%; transition: width 1s linear; }

.yn-card-footer { padding: 15px 20px; background: #fff; border-top: 1px solid #e9ecef; }
.yn-cancel-btn {
    width: 100%; padding: 12px; background: transparent; border: 1px solid #ced4da;
    border-radius: 8px; color: #6c757d; font-weight: 600; cursor: pointer; transition: 0.2s;
}
.yn-cancel-btn:hover { background: #f8f9fa; color: #dc3545; border-color: #dc3545; }

@keyframes fadeIn { to { opacity: 1; } }
@keyframes slideUp { to { transform: translateY(0); } }

.ym-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 999999999; opacity: 0; animation: ymFadeIn 0.3s forwards;
}

.ym-qr-card {
    background: #ffffff; border-radius: 20px; width: 100%; max-width: 400px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden;
    transform: translateY(20px) scale(0.95); animation: ymPopUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    height:90%;
}
.ym-qr-header {
    background: #f8fafc; 
    padding: 10px 24px; border-bottom: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; align-items: center;
}
.ym-qr-header h3 { margin: 0; font-size: 17px; color: #0f172a; font-weight: 700; }
.ym-badge {
    padding: 6px 14px; border-radius: 30px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px;
}
.ym-badge.waiting { background: #fef3c7; color: #d97706; }
.ym-badge.success { background: #dcfce7; color: #15803d; }

.ym-qr-body { 
    padding: 30px 24px 0 24px; 
    text-align: center; 
}
.ym-amount { font-size: 36px; font-weight: 800; color: #0f172a; line-height: 1; margin-bottom: 8px; }
.ym-amount span { font-size: 16px; color: #64748b; font-weight: 600; }
.ym-order-id { font-size: 13px; color: #94a3b8;}

.ym-qr-box {
    background: #ffffff; padding: 12px; border-radius: 16px; border: 2px dashed #e2e8f0;
    display: inline-block;
}
.ym-qr-box img { width: 200px; height: 200px; border-radius: 8px; display: block; }
.ym-instruction { color: #64748b; font-size: 13px; line-height: 1.5; margin-bottom: 10px; }

.ym-timer-wrap { background: #f8fafc; border-radius: 12px; padding: 16px; }
.ym-timer-head { display: flex; justify-content: space-between; font-size: 13px; color: #475569; font-weight: 600; margin-bottom: 10px; }
.ym-timer-track { height: 6px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.ym-timer-fill { height: 100%; background: #f59e0b; width: 100%; transition: width 1s linear; }

.ym-qr-footer { padding: 16px 24px; background: #ffffff; border-top: 1px solid #f1f5f9; }
.ym-btn-cancel {
    width: 100%; padding: 14px; background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 12px; color: #475569; font-weight: 600; font-size: 14px; cursor: pointer; transition: 0.2s;
}
.ym-btn-cancel:hover { background: #f1f5f9; color: #ef4444; border-color: #fca5a5; }

/* Custom Alert Box */
.ym-alert-box {
    background: #ffffff; border-radius: 20px; width: 90%; max-width: 360px;
    padding: 32px 24px 24px; text-align: center; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.9); animation: ymPopUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ym-alert-icon {
    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin: 0 auto 20px auto;
}
.ym-alert-icon.warning { background: #fef3c7; color: #d97706; }
.ym-alert-icon.error { background: #fee2e2; color: #ef4444; }
.ym-alert-icon.success { background: #dcfce7; color: #15803d; }

.ym-alert-title { font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.ym-alert-text { font-size: 14px; color: #64748b; margin-bottom: 28px; line-height: 1.6; }
.ym-alert-btn {
    background: #f59e0b; color: #ffffff; border: none; padding: 14px; border-radius: 12px;
    font-size: 15px; font-weight: 700; cursor: pointer; width: 100%; transition: 0.2s;
}
.ym-alert-btn:hover { background: #d97706; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.3); }

.ym-input-error {
    border: 2px solid #ef4444 !important;
    background-color: #fef2f2 !important;
    animation: ymShake 0.4s;
}

@keyframes ymFadeIn { to { opacity: 1; } }
@keyframes ymPopUp { to { transform: translateY(0) scale(1); } }
@keyframes ymShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.ym-alert-icon.info { background: #e0f2fe; color: #3b82f6; }