/* NMI Pro Payment Gateway - v3.1.0 - Credit To Keys™ Branded */

/* ── Brand Colors ──
   Primary:   #0d3a64 (Navy)
   Secondary: #f5a824 (Gold)
─────────────────────────── */

/* ── Card Section ── */
.nmi-pro-section {
    margin-top: 28px;
    padding: 24px;
    border: 2px solid #0d3a6430;
    border-radius: 14px;
    background: linear-gradient(135deg, #0d3a6408, #f5a82408);
    animation: nmiSlideIn .3s ease;
}
@keyframes nmiSlideIn {
    from { opacity:0; transform:translateY(-10px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Header */
.nmi-pro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 2px solid #0d3a6420;
    font-size: 16px;
    font-weight: 700;
    color: #0d3a64;
}
.nmi-test-badge {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* Message */
.nmi-pro-msg {
    padding: 13px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}
.nmi-pro-msg.success { background:#dcfce7; border:1px solid #86efac; color:#14532d; }
.nmi-pro-msg.error   { background:#fee2e2; border:1px solid #fca5a5; color:#7f1d1d; }
.nmi-pro-msg.loading { background:#eff6ff; border:1px solid #93c5fd; color:#1e3a8a; }

/* Fields */
.nmi-pro-field { margin-bottom: 16px; }
.nmi-pro-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #0d3a64;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.nmi-pro-field .req { color: #ef4444; }

.nmi-pro-section input[type="text"],
.nmi-pro-section select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #0d3a6430;
    border-radius: 8px;
    font-size: 15px;
    color: #1e293b;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    appearance: auto;
}
.nmi-pro-section input:focus,
.nmi-pro-section select:focus {
    outline: none;
    border-color: #0d3a64;
    box-shadow: 0 0 0 3px rgba(13,58,100,.12);
}

/* Card input with icon */
.card-input-wrap { position: relative; }
.card-input-wrap input { padding-right: 44px; }
#nmi-card-brand {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    pointer-events: none;
}

/* Row */
.nmi-pro-row { display: flex; gap: 12px; margin-bottom: 16px; }
.nmi-pro-row .nmi-pro-field { flex: 1; margin-bottom: 0; }

/* Total */
.nmi-pro-total {
    background: #0d3a6410;
    border: 1.5px solid #0d3a6430;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: #0d3a64;
    font-weight: 600;
    margin-bottom: 12px;
}
.nmi-pro-total strong { font-size: 20px; color: #f5a824; }

/* Secure note */
.nmi-pro-secure {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    margin: 8px 0 0;
}

/* ── COUPON SECTION ── */
.nmi-coupon-section {
    background: linear-gradient(135deg, #0d3a6410, #f5a82410);
    border: 2px dashed #f5a824;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.nmi-coupon-section label {
    display: block;
    font-weight: 700;
    color: #0d3a64;
    font-size: 14px;
    margin-bottom: 10px;
}
.nmi-coupon-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.nmi-coupon-row input[type="text"] {
    flex: 1;
    min-width: 160px;
    padding: 10px 14px;
    border: 2px solid #0d3a6430;
    border-radius: 6px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #0d3a64;
}
.nmi-coupon-row input:focus {
    outline: none;
    border-color: #f5a824;
    box-shadow: 0 0 0 3px rgba(245,168,36,.15);
}
.nmi-coupon-btn {
    background: #f5a824;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    transition: background .2s;
}
.nmi-coupon-btn:hover { background: #d4911e; }
.nmi-coupon-msg {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    display: none;
}
.nmi-coupon-msg.success { background:#dcfce7; color:#15803d; border:1px solid #86efac; }
.nmi-coupon-msg.error   { background:#fdf0f0; color:#c0392b; border:1px solid #f5c6cb; }

/* ── Overlay ── */
#nmi-pro-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13,58,100,.7);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}
.nmi-pro-overlay-box {
    background: #fff;
    border-radius: 16px;
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    min-width: 280px;
    border-top: 4px solid #f5a824;
}
.nmi-pro-overlay-box p {
    margin: 16px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #0d3a64;
}
.nmi-pro-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e2e8f0;
    border-top-color: #f5a824;
    border-radius: 50%;
    animation: nmiSpin .7s linear infinite;
    margin: 0 auto;
}
@keyframes nmiSpin { to { transform: rotate(360deg); } }

/* ── Success Screen ── */
#nmi-pro-success-screen { text-align: center; padding: 30px 20px; }
.nmi-success-icon { font-size: 60px; margin-bottom: 12px; }
.nmi-success-title { font-size: 22px; font-weight: 800; color: #0d3a64; margin: 0 0 8px; }
.nmi-success-sub { font-size: 14px; color: #64748b; }

@media (max-width:500px) {
    .nmi-pro-row { flex-direction:column; gap:0; }
    .nmi-pro-row .nmi-pro-field { margin-bottom:16px; }
    .nmi-coupon-row { flex-direction:column; }
    .nmi-coupon-btn { width:100%; }
}