/* =========================================================
   MAIN PAGE
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f1f1f1;
}


/* =========================================================
   PAGE
   ========================================================= */

.receipt-page {
    width: 100%;
    padding: 30px 15px;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.receipt-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.receipt-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

    .receipt-actions .btn {
        font-size: 14px;
        font-weight: 600;
        padding: 7px 16px;
    }


/* =========================================================
   RECEIPT
   ========================================================= */

.fee-receipt {
    width: 100%;
    background: #ffffff;
    border: 2px solid #173f6f;
    padding: 28px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}


    /* Inner border */

    .fee-receipt::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 6px;
        right: 6px;
        bottom: 6px;
        border: 1px solid #173f6f;
        pointer-events: none;
    }


/* =========================================================
   HEADER
   ========================================================= */

.receipt-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    position: relative;
    z-index: 2;
    min-height: 110px;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo-box {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}


.header-logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
    display: block;
}


/* =========================================================
   INSTITUTE INFORMATION
   ========================================================= */

.institute-info {
    text-align: center;
    flex: 1;
}


.institute-name {
    font-size: 29px;
    font-weight: 800;
    color: #173f6f;
    line-height: 1.2;
    letter-spacing: 0.4px;
}


.institute-tagline {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-top: 5px;
}


.institute-address {
    font-size: 25px;
    color: #555;
    margin-top: 4px;
}


.institute-motto {
    font-size: 15px;
    font-weight: 600;
    font-style: italic;
    color: #173f6f;
    margin-top: 5px;
}


/* =========================================================
   RECEIPT TITLE
   ========================================================= */

.receipt-title {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 15px auto 8px;
    width: fit-content;
    min-width: 300px;
    padding: 7px 25px;
    border: 1px solid #173f6f;
    border-radius: 5px;
    background: #e7f1ff;
    color: #173f6f;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.receipt-divider {
    border: 0;
    border-top: 1px solid #173f6f;
    margin: 14px 0;
}


/* =========================================================
   RECEIPT INFORMATION
   ========================================================= */

.receipt-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 10px;
    padding: 0 2px;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.section-title {
    background: #dcecff;
    border: 1px solid #7fa6cf;
    color: #173f6f;
    font-size: 16px;
    font-weight: 800;
    padding: 6px 10px;
    margin-top: 12px;
    margin-bottom: 0;
}


.fee-section {
    margin-top: 15px;
}


/* =========================================================
   TABLE
   ========================================================= */

.receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 13px;
}


    .receipt-table th,
    .receipt-table td {
        border: 1px solid #9ba7b3;
        padding: 7px 9px;
        vertical-align: middle;
    }


    .receipt-table th {
        width: 35%;
        background: #f8f9fa;
        font-weight: 700;
        text-align: left;
    }


    .receipt-table td {
        background: #ffffff;
    }


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

.amount {
    text-align: right;
    white-space: nowrap;
}


/* =========================================================
   CURRENT PAYMENT
   ========================================================= */

.current-payment-row th,
.current-payment-row td {
    background: #dcecff !important;
    color: #123f70;
    font-weight: 800;
}


.current-payment {
    font-size: 15px;
}


/* =========================================================
   REMAINING
   ========================================================= */

.remaining-amount {
    font-weight: 800;
}


/* =========================================================
   REMARKS
   ========================================================= */

.receipt-remarks {
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px solid #9ba7b3;
    background: #f8f9fa;
    font-size: 12px;
}


    .receipt-remarks strong {
        color: #173f6f;
        margin-right: 5px;
    }


/* =========================================================
   SIGNATURE
   ========================================================= */

.signature-section {
    display: flex;
    justify-content: space-between;
    margin-top: 42px;
    font-size: 12px;
}


.signature-box {
    width: 40%;
    text-align: center;
}


    .signature-box strong {
        display: block;
        margin-bottom: 28px;
    }


.signature-line {
    width: 180px;
    margin: auto;
    border-bottom: 1px solid #333;
    height: 1px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.receipt-footer {
    margin-top: 25px;
    padding-top: 8px;
    border-top: 1px solid #173f6f;
    text-align: center;
    font-size: 10px;
    color: #6c757d;
}


.thank-you {
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #173f6f;
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    @page {
        size: A4 portrait;
        margin: 8mm;
    }


    html,
    body {
        width: 100%;
        margin: 0;
        padding: 0;
        background: white !important;
    }


    /* Hide buttons */

    .receipt-actions {
        display: none !important;
    }


    /* Remove Bootstrap spacing */

    .receipt-page {
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }


    .receipt-container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }


    /* Receipt */

    .fee-receipt {
        width: 100% !important;
        max-width: none !important;
        min-height: 280mm;
        margin: 0 !important;
        padding: 18px;
        border: 2px solid #000;
        box-shadow: none !important;
        background: white !important;
    }


    /* Header */

    .receipt-header {
        min-height: 90px;
        gap: 15px;
    }


    /* Logo */

    .logo-box {
        width: 80px;
    }


    .header-logo {
        width: 75px;
        height: 75px;
    }


    /* Institute */

    .institute-name {
        font-size: 23px;
    }


    .institute-tagline {
        font-size: 12px;
    }


    .institute-address {
        font-size: 10px;
    }


    .institute-motto {
        font-size: 10px;
    }


    /* Receipt title */

    .receipt-title {
        min-width: 250px;
        padding: 5px 20px;
        margin: 10px auto 5px;
        font-size: 16px;
    }


    /* Divider */

    .receipt-divider {
        margin: 9px 0;
    }


    /* Receipt info */

    .receipt-info-row {
        font-size: 10px;
        margin-bottom: 6px;
    }


    /* Section */

    .section-title {
        font-size: 12px;
        padding: 4px 7px;
        margin-top: 7px;
    }


    /* Table */

    .receipt-table {
        font-size: 9.5px;
    }


        .receipt-table th,
        .receipt-table td {
            padding: 4px 6px;
        }


    /* Current payment */

    .current-payment {
        font-size: 12px;
    }


    /* Remarks */

    .receipt-remarks {
        margin-top: 7px;
        padding: 5px 7px;
        font-size: 9.5px;
    }


    /* Signature */

    .signature-section {
        margin-top: 25px;
        font-size: 9.5px;
    }


    .signature-box strong {
        margin-bottom: 20px;
    }


    .signature-line {
        width: 150px;
    }


    /* Footer */

    .receipt-footer {
        margin-top: 15px;
        padding-top: 5px;
        font-size: 8px;
    }


    .thank-you {
        font-size: 9px;
        margin-top: 3px;
    }


    /* Keep receipt on one page */

    .fee-receipt {
        page-break-inside: avoid;
    }


    /* Print backgrounds */

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* =========================================================
   RECEIPT PAGE / MAIN CONTENT
========================================================= */

    .receipt-main-content {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        box-sizing: border-box;
        overflow-x: hidden;
        padding: 0;
    }

        .receipt-main-content .receipt-page {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .receipt-main-content .receipt-container {
            box-sizing: border-box;
        }


    /* =========================================================
   ACTION BUTTONS
========================================================= */

    .receipt-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

        .receipt-actions .btn {
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            padding: 7px 16px;
        }


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

    @media (max-width: 767px) {

        .sidebar {
            width: 70px !important;
        }

        .receipt-main-content {
            margin-left: 70px;
            width: calc(100% - 70px);
            max-width: calc(100% - 70px);
        }

        .receipt-actions {
            padding: 0 10px;
        }
    }


    /* =========================================================
   PRINT
========================================================= */

    @media print {

        @page {
            size: A4 portrait;
            margin: 8mm;
        }

        html,
        body {
            width: 100%;
            margin: 0;
            padding: 0;
            background: white !important;
        }


        /* Hide sidebar */

        .sidebar {
            display: none !important;
        }


        /* Hide buttons */

        .receipt-actions {
            display: none !important;
        }


        /* Main content */

        .receipt-main-content {
            margin-left: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            min-height: auto !important;
            padding: 0 !important;
        }


        /* Receipt page */

        .receipt-page {
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }


        .receipt-container {
            width: 100% !important;
            max-width: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }


        /* Receipt */

        .fee-receipt {
            width: 100% !important;
            max-width: none !important;
            min-height: 280mm;
            margin: 0 !important;
            padding: 18px;
            border: 2px solid #000;
            box-shadow: none !important;
            background: white !important;
            page-break-inside: avoid;
        }


        /* Header */

        .receipt-header {
            min-height: 90px;
            gap: 15px;
        }


        /* Logo */

        .logo-box {
            width: 80px;
        }

        .header-logo {
            width: 75px;
            height: 75px;
        }


        /* Institute */

        .institute-name {
            font-size: 23px;
        }

        .institute-tagline {
            font-size: 12px;
        }

        .institute-address {
            font-size: 10px;
        }

        .institute-motto {
            font-size: 10px;
        }


        /* Receipt title */

        .receipt-title {
            min-width: 250px;
            padding: 5px 20px;
            margin: 10px auto 5px;
            font-size: 16px;
        }


        /* Divider */

        .receipt-divider {
            margin: 9px 0;
        }


        /* Receipt information */

        .receipt-info-row {
            font-size: 10px;
            margin-bottom: 6px;
        }


        /* Section title */

        .section-title {
            font-size: 12px;
            padding: 4px 7px;
            margin-top: 7px;
        }


        /* Table */

        .receipt-table {
            font-size: 9.5px;
        }

            .receipt-table th,
            .receipt-table td {
                padding: 4px 6px;
            }


        /* Current payment */

        .current-payment {
            font-size: 12px;
        }


        /* Remarks */

        .receipt-remarks {
            margin-top: 7px;
            padding: 5px 7px;
            font-size: 9.5px;
        }


        /* Signature */

        .signature-section {
            margin-top: 25px;
            font-size: 9.5px;
        }

        .signature-box strong {
            margin-bottom: 20px;
        }

        .signature-line {
            width: 150px;
        }


        /* Footer */

        .receipt-footer {
            margin-top: 15px;
            padding-top: 5px;
            font-size: 8px;
        }

        .thank-you {
            font-size: 9px;
            margin-top: 3px;
        }


        /* Print backgrounds */

        * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
    }
}