/* ── MPGS overrides on top of Velzon ───────────────────────────────────── */

/* ── Brand palette ───────────────────────────────────────────────────────
   Two blues: #264f8b (deep) and #2460b9 (bright) — used as a gradient pair
   throughout buttons/accents. Overriding Velzon's --vz-primary family here
   re-themes buttons/badges/alerts/focus-rings app-wide without touching
   every component's own CSS. Success/danger stay Bootstrap's defaults —
   only the brand/primary color changes. */
:root {
    --mpgs-deep: #264f8b;
    --mpgs-bright: #2460b9;
    --mpgs-gradient: linear-gradient(135deg, var(--mpgs-deep), var(--mpgs-bright));
    --mpgs-accent: #a82d32;

    --vz-primary: var(--mpgs-bright);
    --vz-primary-rgb: 36, 96, 185;
    --vz-primary-text-emphasis: var(--mpgs-deep);
    --vz-primary-bg-subtle: #e8f0fb;
    --vz-primary-border-subtle: #b9d0ec;
    --vz-link-color: var(--mpgs-bright);
    --vz-link-hover-color: var(--mpgs-deep);
}

/* No sidebar — main content takes full width */
:root,
[data-layout="vertical"],
[data-layout="vertical"][data-sidebar-size="lg"],
[data-layout="vertical"][data-sidebar-size="sm"],
[data-layout="vertical"][data-sidebar-size="md"] {
    --vz-vertical-menu-width: 0px;
    --vz-vertical-menu-width-sm: 0px;
    --vz-vertical-menu-width-md: 0px;
}

.app-menu,
#sidebar-overlay {
    display: none !important;
}

#page-topbar {
    left: 0 !important;
}

.footer {
    left: 0 !important;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */

/* Brand */
.mpgs-brand { gap: 0; }

.mpgs-brand-icon {
    width: 38px;
    height: 38px;
    background: var(--vz-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(var(--vz-primary-rgb), .35);
}

.mpgs-brand-name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--vz-heading-color);
    letter-spacing: .02em;
}

.mpgs-brand-sub {
    font-size: 0.68rem;
    color: var(--vz-secondary-color);
    letter-spacing: .02em;
    line-height: 1;
}

/* Nav divider */
.mpgs-nav-divider {
    width: 1px;
    height: 28px;
    background: var(--vz-border-color);
    flex-shrink: 0;
}

/* Nav links */
.mpgs-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--vz-secondary-color);
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.mpgs-nav-link i { font-size: 1rem; }

.mpgs-nav-link:hover {
    background: var(--vz-light);
    color: var(--vz-primary);
}

.mpgs-nav-link.active {
    background: rgba(var(--vz-primary-rgb), .1);
    color: var(--vz-primary);
    font-weight: 600;
}

.mpgs-nav-ext {
    font-size: 0.7rem;
    opacity: .5;
    margin-left: -2px;
}

/* Secure badge */
.mpgs-secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--vz-secondary-color);
    background: var(--vz-light);
    border: 1px solid var(--vz-border-color);
    border-radius: 20px;
    padding: 5px 12px;
}

.mpgs-secure-dot {
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(34,197,94,.2);
}

/* Mobile menu button */
.mpgs-mobile-menu-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background: var(--vz-light);
    border: 1px solid var(--vz-border-color);
    color: var(--vz-body-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.mpgs-mobile-menu-btn:hover {
    background: var(--vz-border-color);
    color: var(--vz-primary);
}

/* ── End Topbar ──────────────────────────────────────────────────────────── */

/* Order / amount highlight */
.amount-highlight {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vz-primary);
}

/* Monospace spans (IDs, codes) */
.mono {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
}

/* Result cards */
.result-success .card-header {
    background-color: var(--vz-success-bg-subtle);
    border-bottom-color: var(--vz-success-border-subtle);
}
.result-failed .card-header {
    background-color: var(--vz-danger-bg-subtle);
    border-bottom-color: var(--vz-danger-border-subtle);
}

/* Detail rows in result */
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--vz-border-color);
    font-size: 0.875rem;
}
.detail-row:last-child { border-bottom: none; }
.detail-row span:first-child { color: var(--vz-secondary-color); }

/* ACS Challenge modal */
#acsModal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
#acsModal .modal-content {
    background: var(--vz-card-bg);
    border-radius: var(--vz-border-radius-lg);
    width: var(--acs-width, 520px);
    height: var(--acs-height, auto);
    max-width: 95vw;
    max-height: 95vh;
    overflow: auto;
    box-shadow: var(--vz-box-shadow-lg);
}
#acsModal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vz-border-color);
}
#acsModal .modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--vz-secondary-color);
    line-height: 1;
}

/* Secure badge */
.secure-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--vz-secondary-color);
    margin-top: 1rem;
}

/* Loading spinner */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
}
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--vz-border-color);
    border-top-color: var(--vz-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Settings page divider label */
.section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vz-secondary-color);
    margin: 0.5rem 0;
}

/* ── Payment flow page shell (Views/Shared/_LayoutPayment.cshtml) ────────
   Full-height column: content centered on both axes above, the skyline
   banner pinned as a full-width footer below. */
.mpgs-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(38, 79, 139, .06), transparent 60%),
        radial-gradient(1000px 500px at 110% 10%, rgba(36, 96, 185, .05), transparent 55%),
        radial-gradient(1500px 850px at 50% 135%, rgba(168, 45, 50, .14), transparent 72%),
        radial-gradient(1100px 750px at 100% 105%, rgba(168, 45, 50, .1), transparent 68%),
        radial-gradient(950px 650px at -5% 100%, rgba(168, 45, 50, .09), transparent 65%),
        radial-gradient(800px 500px at 100% -8%, rgba(168, 45, 50, .05), transparent 55%),
        radial-gradient(700px 450px at -5% 8%, rgba(168, 45, 50, .04), transparent 55%),
        linear-gradient(180deg, rgba(168, 45, 50, .02) 0%, transparent 30%, rgba(168, 45, 50, .07) 100%),
        #f4f7fc;
}

/* Footer bar: "Powered by Himalayan Bank Ltd." credit centered. A normal (non-fixed) flex
   item so it reserves its own space at the bottom of the page instead of floating on top
   of — and overlapping — whatever content happens to be there. */
.mpgs-page-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .85rem 1.5rem;
}

.mpgs-footer-credit {
    font-size: .95rem;
    font-weight: 500;
    color: var(--vz-secondary-color);
    white-space: nowrap;
}

.mpgs-footer-credit a {
    color: var(--mpgs-bright);
    font-weight: 600;
    text-decoration: none;
}

.mpgs-footer-credit a:hover {
    color: var(--mpgs-deep);
    text-decoration: underline;
}

/* HBL logo + PCI-DSS badge, shown together directly below each page's card content —
   centered, at full opacity as normal, clearly visible images, not a faded watermark. */
.mpgs-brand-credit {
    margin-top: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.mpgs-brand-credit img {
    display: block;
}

/* HBL logo keeps its own natural size/ratio. The PCI-DSS badge is a much more square
   image (native ~1876x1271 vs HBL's wide ~250x50 strip), so it's sized taller — at
   equal height it looked like a tiny chip next to the HBL banner — to read as a
   similarly-weighted companion mark without stretching either image. */
.mpgs-brand-credit-hbl {
    height: 48px;
    width: auto;
}

.mpgs-brand-credit-pci {
    height: 72px;
    width: auto;
}

.mpgs-brand-credit-cards {
    height: 40px;
    width: auto;
}

.mpgs-content {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.mpgs-content > .container {
    width: 100%;
}

/* ── Header banner (above the card) ──────────────────────────────────── */
.mpgs-header-banner {
    display: flex;
    justify-content: center;
    margin: 0 auto 1.5rem;
    max-width: 480px;
}

.mpgs-header-banner img {
    width: 100%;
    max-width: 320px;
    height: auto;
}

/* ── Landing-page branding (Branding:Title / Branding:Description) ──────── */
.mpgs-branding {
    max-width: 480px;
    margin: 0 auto 1.5rem;
}

.mpgs-branding-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--mpgs-deep);
    margin-bottom: .35rem;
}

.mpgs-branding-description {
    font-size: .95rem;
    color: var(--vz-secondary-color);
    margin-bottom: 0;
}

/* ── Modernized card ──────────────────────────────────────────────────── */
.mpgs-page .card {
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 3rem -1.25rem rgba(38, 79, 139, .35), 0 0 0 1px rgba(38, 79, 139, .05);
    overflow: hidden;
}

.mpgs-page .card-header {
    background: #fff;
    border-bottom: 1px solid var(--vz-border-color);
    font-weight: 600;
}

.mpgs-page .card-body {
    padding: 1.75rem;
}

/* ── Modernized form controls ─────────────────────────────────────────── */
.mpgs-page .form-control,
.mpgs-page .form-select {
    border-radius: .65rem;
    border-color: #d7e1f0;
    padding: .65rem .9rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mpgs-page .form-control:focus,
.mpgs-page .form-select:focus {
    border-color: var(--mpgs-bright);
    box-shadow: 0 0 0 .2rem rgba(36, 96, 185, .15);
}

/* Currency + amount as one attached control — the currency select sits flush against the
   amount field's left edge instead of stacking as two separate fields. */
.mpgs-currency-select {
    flex: 0 0 auto;
    width: auto;
    max-width: 100px;
    font-weight: 600;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.mpgs-page .form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--mpgs-deep);
}

/* ── Modernized primary button ────────────────────────────────────────── */
.mpgs-page .btn-primary {
    background: var(--mpgs-gradient);
    border: none;
    border-radius: .75rem;
    padding: .75rem 1.5rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 .75rem 1.5rem -.5rem rgba(36, 96, 185, .55);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.mpgs-page .btn-primary:hover,
.mpgs-page .btn-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 1rem 2rem -.5rem rgba(36, 96, 185, .65);
    filter: brightness(1.05);
}

.mpgs-page .btn-primary:active {
    transform: translateY(0);
}