/*
 * ResultPro v132 — Postgraduate public-payment header
 * Rebuilds the upper section to use the same professional structure as
 * the authenticated postgraduate student portal. This file is loaded last
 * so legacy public-payment rules cannot move the title to the right or
 * collapse the illustrated header into a shallow white strip.
 */

@media screen {
    body.pg-pay-body,
    body.pg-pay-body.pg-pay-invoice-page {
        padding: 12px 0 28px !important;
    }

    body.pg-pay-body .pg-pay-shell {
        width: min(1680px, calc(100% - 28px)) !important;
        margin: 0 auto !important;
        overflow: visible !important;
        border: 1px solid rgba(255, 255, 255, .74) !important;
        border-radius: 26px !important;
        background: rgba(238, 245, 245, .84) !important;
        box-shadow: 0 30px 82px rgba(0, 16, 29, .42) !important;
    }

    body.pg-pay-body .pg-pay-student-style-header {
        position: relative !important;
        isolation: isolate !important;
        width: 100% !important;
        min-height: 146px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 28px !important;
        margin: 0 !important;
        padding: 22px 34px !important;
        overflow: hidden !important;
        text-align: left !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 25px 25px 0 0 !important;
        background-color: #0b3850 !important;
        background-image:
            linear-gradient(105deg, rgba(5, 35, 52, .97), rgba(14, 65, 91, .82) 54%, rgba(143, 67, 38, .72)),
            url("../img/pg_abstract_background.249b3dc66a53.png") !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center 45% !important;
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .35) !important;
    }

    body.pg-pay-body .pg-pay-student-style-header::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: -2 !important;
        pointer-events: none !important;
        background:
            radial-gradient(circle at 77% 8%, rgba(255, 226, 177, .24), transparent 26%),
            linear-gradient(90deg, rgba(4, 31, 47, .04), rgba(154, 72, 40, .16)) !important;
    }

    body.pg-pay-body .pg-pay-student-style-header::after {
        content: "" !important;
        position: absolute !important;
        inset: auto 0 0 0 !important;
        z-index: -1 !important;
        height: 1px !important;
        pointer-events: none !important;
        background: rgba(255, 255, 255, .28) !important;
    }

    body.pg-pay-body .pg-pay-student-style-title {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 132px) !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    body.pg-pay-body .pg-pay-student-style-title h1,
    body.pg-pay-body .pg-pay-student-style-header h1 {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: clamp(38px, 3.25vw, 52px) !important;
        line-height: 1.02 !important;
        font-weight: 950 !important;
        letter-spacing: -.035em !important;
        text-align: left !important;
        text-shadow: 0 4px 18px rgba(0, 14, 26, .60) !important;
    }

    body.pg-pay-body .pg-pay-student-style-title h2,
    body.pg-pay-body .pg-pay-student-style-header h2 {
        width: fit-content !important;
        min-width: min(100%, 520px) !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        color: #ffd58f !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: clamp(21px, 1.9vw, 29px) !important;
        line-height: 1.08 !important;
        font-weight: 850 !important;
        letter-spacing: -.015em !important;
        text-align: center !important;
        text-shadow: 0 3px 13px rgba(0, 14, 26, .48) !important;
    }

    body.pg-pay-body .pg-pay-student-style-logo {
        flex: 0 0 auto !important;
        width: 104px !important;
        height: 104px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
    }

    body.pg-pay-body .pg-pay-student-style-header .pg-pay-student-style-logo img,
    body.pg-pay-body .pg-pay-student-style-header img {
        position: static !important;
        float: none !important;
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
        margin: 0 !important;
        padding: 5px !important;
        object-fit: contain !important;
        border: 3px solid rgba(255, 215, 150, .96) !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 15px 36px rgba(0, 16, 28, .40) !important;
    }

    body.pg-pay-body .pg-pay-student-style-nav {
        position: relative !important;
        z-index: 80 !important;
        width: 100% !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 8px 18px !important;
        overflow: visible !important;
        color: #fff !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .34) !important;
        background-color: #0b3850 !important;
        background-image:
            linear-gradient(105deg, rgba(8, 43, 63, .98), rgba(22, 78, 107, .94), rgba(129, 59, 42, .91)),
            url("../img/pg_abstract_background.249b3dc66a53.png") !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center 62% !important;
        box-shadow: 0 8px 24px rgba(3, 27, 42, .21) !important;
    }

    body.pg-pay-body .pg-pay-student-style-nav > a,
    body.pg-pay-body .pg-pay-student-style-nav .pg-pay-menu > a {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 9px 13px !important;
        border: 1px solid transparent !important;
        border-radius: 12px !important;
        color: #fff !important;
        background: transparent !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 15px !important;
        line-height: 1.1 !important;
        font-weight: 850 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
    }

    body.pg-pay-body .pg-pay-student-style-nav > a:hover,
    body.pg-pay-body .pg-pay-student-style-nav > a:focus-visible,
    body.pg-pay-body .pg-pay-student-style-nav .pg-pay-menu:hover > a,
    body.pg-pay-body .pg-pay-student-style-nav .pg-pay-menu:focus-within > a {
        color: #fff !important;
        border-color: rgba(255, 221, 163, .64) !important;
        background: linear-gradient(110deg, rgba(220, 139, 44, .86), rgba(169, 82, 49, .82)) !important;
        transform: translateY(-1px) !important;
        outline: none !important;
    }

    body.pg-pay-body .pg-pay-student-style-nav .rp-pay-nav-sep {
        color: rgba(255, 255, 255, .38) !important;
        font-size: 20px !important;
        font-weight: 400 !important;
    }

    /* Keep dropdowns above the payment form and cards. */
    body.pg-pay-body .pg-pay-student-style-nav .pg-pay-menu,
    body.pg-pay-body .pg-pay-student-style-nav .pg-pay-submenu {
        z-index: 9999 !important;
    }

    /* Medium laptop screens retain the same structure with slightly smaller dimensions. */
    @media (min-width: 761px) and (max-height: 900px) {
        body.pg-pay-body,
        body.pg-pay-body.pg-pay-invoice-page {
            padding-top: 8px !important;
        }

        body.pg-pay-body .pg-pay-student-style-header {
            min-height: 132px !important;
            padding: 18px 30px !important;
        }

        body.pg-pay-body .pg-pay-student-style-title h1,
        body.pg-pay-body .pg-pay-student-style-header h1 {
            font-size: clamp(34px, 3vw, 47px) !important;
        }

        body.pg-pay-body .pg-pay-student-style-title h2,
        body.pg-pay-body .pg-pay-student-style-header h2 {
            font-size: clamp(20px, 1.75vw, 26px) !important;
        }

        body.pg-pay-body .pg-pay-student-style-logo,
        body.pg-pay-body .pg-pay-student-style-header .pg-pay-student-style-logo img,
        body.pg-pay-body .pg-pay-student-style-header img {
            width: 90px !important;
            height: 90px !important;
            min-width: 90px !important;
            max-width: 90px !important;
            max-height: 90px !important;
        }

        body.pg-pay-body .pg-pay-student-style-nav {
            min-height: 56px !important;
            padding-top: 7px !important;
            padding-bottom: 7px !important;
        }
    }

    @media (max-width: 900px) {
        body.pg-pay-body .pg-pay-shell {
            width: min(100% - 18px, 900px) !important;
        }

        body.pg-pay-body .pg-pay-student-style-header {
            min-height: 124px !important;
            padding: 18px 22px !important;
        }

        body.pg-pay-body .pg-pay-student-style-title h1,
        body.pg-pay-body .pg-pay-student-style-header h1 {
            font-size: clamp(30px, 5.1vw, 42px) !important;
        }

        body.pg-pay-body .pg-pay-student-style-title h2,
        body.pg-pay-body .pg-pay-student-style-header h2 {
            min-width: 0 !important;
            font-size: clamp(18px, 3vw, 24px) !important;
            text-align: left !important;
        }

        body.pg-pay-body .pg-pay-student-style-logo,
        body.pg-pay-body .pg-pay-student-style-header .pg-pay-student-style-logo img,
        body.pg-pay-body .pg-pay-student-style-header img {
            width: 78px !important;
            height: 78px !important;
            min-width: 78px !important;
            max-width: 78px !important;
            max-height: 78px !important;
        }
    }

    @media (max-width: 760px) {
        body.pg-pay-body,
        body.pg-pay-body.pg-pay-invoice-page {
            padding: 0 0 16px !important;
        }

        body.pg-pay-body .pg-pay-shell {
            width: 100% !important;
            margin: 0 !important;
            border-left: 0 !important;
            border-right: 0 !important;
            border-radius: 0 !important;
        }

        body.pg-pay-body .pg-pay-student-style-header {
            min-height: 112px !important;
            gap: 12px !important;
            padding: 15px 16px !important;
            border-radius: 0 !important;
        }

        body.pg-pay-body .pg-pay-student-style-title {
            max-width: calc(100% - 72px) !important;
        }

        body.pg-pay-body .pg-pay-student-style-title h1,
        body.pg-pay-body .pg-pay-student-style-header h1 {
            font-size: clamp(25px, 7.8vw, 35px) !important;
            line-height: 1.02 !important;
        }

        body.pg-pay-body .pg-pay-student-style-title h2,
        body.pg-pay-body .pg-pay-student-style-header h2 {
            margin-top: 5px !important;
            font-size: clamp(16px, 4.8vw, 21px) !important;
            text-align: left !important;
        }

        body.pg-pay-body .pg-pay-student-style-logo,
        body.pg-pay-body .pg-pay-student-style-header .pg-pay-student-style-logo img,
        body.pg-pay-body .pg-pay-student-style-header img {
            width: 62px !important;
            height: 62px !important;
            min-width: 62px !important;
            max-width: 62px !important;
            max-height: 62px !important;
        }

        body.pg-pay-body .pg-pay-student-style-nav {
            min-height: 54px !important;
            justify-content: flex-start !important;
            flex-wrap: nowrap !important;
            gap: 7px !important;
            padding: 7px 10px !important;
            overflow-x: auto !important;
            overflow-y: visible !important;
            -webkit-overflow-scrolling: touch !important;
        }

        body.pg-pay-body .pg-pay-student-style-nav > a,
        body.pg-pay-body .pg-pay-student-style-nav .pg-pay-menu,
        body.pg-pay-body .pg-pay-student-style-nav .pg-pay-menu > a {
            flex: 0 0 auto !important;
        }

        body.pg-pay-body .pg-pay-student-style-nav > a,
        body.pg-pay-body .pg-pay-student-style-nav .pg-pay-menu > a {
            min-height: 38px !important;
            padding: 8px 11px !important;
            border-radius: 999px !important;
            font-size: 13px !important;
        }

        body.pg-pay-body .pg-pay-student-style-nav .rp-pay-nav-sep {
            display: none !important;
        }
    }

    @media (max-width: 430px) {
        body.pg-pay-body .pg-pay-student-style-header {
            min-height: 106px !important;
            padding: 14px 12px !important;
        }

        body.pg-pay-body .pg-pay-student-style-title h1,
        body.pg-pay-body .pg-pay-student-style-header h1 {
            font-size: clamp(22px, 7.4vw, 30px) !important;
        }

        body.pg-pay-body .pg-pay-student-style-title h2,
        body.pg-pay-body .pg-pay-student-style-header h2 {
            font-size: clamp(14px, 4.4vw, 18px) !important;
        }

        body.pg-pay-body .pg-pay-student-style-logo,
        body.pg-pay-body .pg-pay-student-style-header .pg-pay-student-style-logo img,
        body.pg-pay-body .pg-pay-student-style-header img {
            width: 56px !important;
            height: 56px !important;
            min-width: 56px !important;
            max-width: 56px !important;
            max-height: 56px !important;
        }
    }
}

@media print {
    body.pg-pay-body .pg-pay-student-style-header,
    body.pg-pay-body .pg-pay-student-style-nav {
        display: none !important;
    }
}