/* =========================================================
   PAYMENT PORTAL / ONE-PAGE FORM WIZARD
   Bootstrap 5.3 + Custom Styling
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --yellow: #f5c800;

    --yellow-dark: #cda600;

    --green: #00a651;

    --green-dark: #147548;

    --dark: #222222;

    --text: #5f5f5f;

    --muted: #888888;

    --page-bg: #eeeeee;

    --border: #d7d7d7;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;
}


body {

    margin: 0;

    padding: 0;

    min-height: 100vh;

    font-family: "Nunito", sans-serif;

    background: #333333;

    color: var(--dark);
}


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

.payment-page {

    width: 100%;

    min-height: 100vh;

    background: #333333;

    overflow: hidden;
}


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

.payment-header {

    width: 100%;

    min-height: 88px;

    display: flex;

    align-items: center;

    background: #ffffff;

    border-radius: 7px 7px 0 0;
}


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

.payment-brand {

    display: inline-flex;

    align-items: center;

    width: 190px;

    text-decoration: none;
}


.payment-brand img {

    width: 100%;

    height: auto;

    display: block;

    object-fit: contain;
}


/* =========================================================
   PAYMENT PORTAL LINK
========================================================= */

.payment-portal-link {

    color: #a57d00;

    font-family: "Nunito", sans-serif;

    font-size: 17px;

    font-weight: 700;

    text-decoration: underline;

    text-underline-offset: 4px;

    white-space: nowrap;
}


.payment-portal-link:hover {

    color: var(--green-dark);
}


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

.payment-main {

    min-height: calc(100vh - 88px);

    background: var(--page-bg);
}


/* =========================================================
   BOOTSTRAP CARD
========================================================= */

.payment-card {

    border: 1px solid var(--border) !important;

    border-radius: 6px !important;

    background: #ffffff;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}


.payment-card .card-body {

    padding: 40px 42px 34px;
}


/* =========================================================
   ONE PAGE WIZARD
========================================================= */

.payment-wizard {

    width: 100%;

    position: relative;
}


/* =========================================================
   WIZARD STEPS
========================================================= */

.wizard-step {

    display: none;

    width: 100%;
}


.wizard-step.active {

    display: block;
}


/* =========================================================
   INTRO
========================================================= */

.payment-intro {

    margin-bottom: 30px;
}


.payment-title {

    margin: 0;

    color: #242424;

    font-family: "Baloo 2", sans-serif;

    font-size: 36px;

    font-weight: 700;

    line-height: 1.2;
}


.payment-title span {

    color: var(--yellow);
}


.payment-subtitle {

    margin: 12px 0 0;

    color: #707070;

    font-family: "Nunito", sans-serif;

    font-size: 19px;

    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   STEPPER
========================================================= */

.payment-stepper {

    width: min(560px, 100%);

    margin: 0 auto 36px;

    display: flex;

    align-items: flex-start;

    justify-content: center;
}


/* =========================================================
   STEP ITEM
========================================================= */

.step-item {

    flex: 0 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* =========================================================
   STEP CIRCLE
========================================================= */

.step-circle {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid var(--yellow-dark);

    border-radius: 50%;

    background: #ffffff;

    color: #202020;

    font-family: "Nunito", sans-serif;

    font-size: 18px;

    font-weight: 500;

    line-height: 1;
}


/* =========================================================
   ACTIVE STEP
========================================================= */

.step-item.active .step-circle {

    border-color: var(--yellow-dark);

    background: #ffffff;

    color: #202020;
}


.step-item.active .step-label {

    color: #b68a00;

    font-weight: 600;
}


/* =========================================================
   STEP LABEL
========================================================= */

.step-label {

    margin-top: 9px;

    color: var(--muted);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.2;

    white-space: nowrap;
}


/* =========================================================
   STEP LINE
========================================================= */

.step-line {

    flex: 1 1 80px;

    height: 2px;

    margin-top: 19px;

    background: var(--yellow-dark);
}


/* =========================================================
   COMPLETED STEP
========================================================= */

.step-item.completed .step-circle {

    position: relative;

    border-color: var(--green);

    background: var(--green);

    color: transparent;

    font-size: 0;
}


.step-item.completed .step-circle::after {

    content: "✓";

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 20px;

    font-weight: 700;

    line-height: 1;
}


.step-item.completed .step-label {

    color: var(--green);

    font-weight: 600;
}


/* =========================================================
   COMPLETED CONNECTING LINE
========================================================= */

.step-line.completed {

    background: var(--green);
}


/* =========================================================
   FORM
========================================================= */

#basicInformationForm {

    width: 100%;
}


/* =========================================================
   FORM LABEL
========================================================= */

.form-label {

    margin-bottom: 8px;

    color: #282828;

    font-family: "Nunito", sans-serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.25;
}


.form-label span {

    color: #e00000;
}


/* =========================================================
   FORM CONTROLS
========================================================= */

.form-control,
.form-select {

    width: 100%;

    min-height: 50px;

    border: 1px solid #d5d5d5;

    border-radius: 2px;

    padding: 10px 22px;

    background-color: #ffffff;

    color: #333333;

    font-family: "Nunito", sans-serif;

    font-size: 15px;

    font-weight: 400;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.form-control::placeholder {

    color: #a8a8a8;

    opacity: 1;
}


.form-control:focus,
.form-select:focus {

    border-color: var(--yellow);

    box-shadow: 0 0 0 0.15rem rgba(245, 200, 0, 0.15);

    outline: none;
}


/* =========================================================
   INVALID REQUIRED FIELDS
========================================================= */

.form-control:invalid:not(:placeholder-shown),
.form-select:invalid:not(:focus) {

    border-color: #d5d5d5;
}


.form-control:focus:invalid,
.form-select:focus:invalid {

    border-color: #dc3545;

    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.08);
}


/* =========================================================
   STEP 1 ACTIONS
========================================================= */

.payment-actions {

    width: 100%;

    margin-top: 30px;

    padding-top: 22px;

    border-top: 1px solid #dddddd;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 40px;
}


/* =========================================================
   COMMON BUTTONS
========================================================= */

.payment-back,
.payment-proceed {

    min-width: 150px;

    min-height: 45px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 4px;

    font-family: "Nunito", sans-serif;

    font-size: 16px;

    font-weight: 600;

    line-height: 1;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.payment-back {

    color: #b68a00;

    background: #ffffff;

    border: 2px solid var(--yellow-dark);
}


.payment-back:hover {

    color: #8f6d00;

    background: rgba(245, 200, 0, 0.08);

    border-color: #b68a00;
}


/* =========================================================
   PROCEED BUTTON
========================================================= */

.payment-proceed {

    background: var(--yellow);

    border: 2px solid var(--yellow);

    color: #161616;
}


.payment-proceed:hover {

    background: #ffd21a;

    border-color: #ffd21a;

    color: #161616;

    transform: translateY(-1px);
}


.payment-actions i,
.payment-type-actions i {

    margin-left: 8px;
}


.payment-back i {

    margin-left: 0;

    margin-right: 6px;
}


/* =========================================================
   STEP 2 — PAYMENT OPTIONS
========================================================= */

.payment-options {

    margin-top: 5px;

    margin-bottom: 55px;
}


/* =========================================================
   PAYMENT OPTION CARD
========================================================= */

.payment-option {

    position: relative;

    width: 100%;

    min-height: 252px;

    padding: 30px 28px 24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 6px;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.payment-option:hover {

    border-color: rgba(245, 200, 0, 0.7);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    transform: translateY(-2px);
}


.payment-option.selected {

    border: 2px solid var(--yellow);

    box-shadow: none;

    transform: none;
}


/* =========================================================
   HIDDEN RADIO
========================================================= */

.payment-option input {

    position: absolute;

    width: 1px;

    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   PAYMENT RADIO CIRCLE
========================================================= */

.payment-radio {

    position: absolute;

    top: 15px;

    right: 16px;

    width: 25px;

    height: 25px;

    border: 3px solid var(--yellow);

    border-radius: 50%;

    background: #ffffff;
}


.payment-option.selected .payment-radio {

    background: var(--yellow);

    box-shadow:
        inset 0 0 0 4px #ffffff;
}


/* =========================================================
   PAYMENT OPTION ICON
========================================================= */

.payment-option-icon {

    width: 40px;

    height: 40px;

    margin-bottom: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    background: rgba(245, 200, 0, 0.15);
}


.payment-option-icon img {

    width: 24px;

    height: 24px;

    display: block;

    object-fit: contain;
}


/* =========================================================
   PAYMENT OPTION TITLE
========================================================= */

.payment-option h2 {

    margin: 0;

    color: #292929;

    font-family: "Baloo 2", sans-serif;

    font-size: 19px;

    font-weight: 700;

    line-height: 1.2;
}


/* =========================================================
   PAYMENT OPTION DESCRIPTION
========================================================= */

.payment-option-description {

    max-width: 210px;

    min-height: 40px;

    margin: 10px auto 12px;

    color: #858585;

    font-family: "Nunito", sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.35;
}


/* =========================================================
   PAYMENT PRICE
========================================================= */

.payment-price {

    margin-top: auto;

    color: #262626;

    font-family: "Baloo 2", sans-serif;

    font-size: 23px;

    font-weight: 700;

    line-height: 1.1;
}


.payment-frequency {

    margin-top: 3px;

    color: #8a8a8a;

    font-size: 12px;

    line-height: 1.2;
}


/* =========================================================
   STEP 2 ACTIONS
========================================================= */

.payment-type-actions {

    width: 100%;

    margin-top: 0;

    padding-top: 22px;

    border-top: 1px solid #dddddd;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 40px;
}


/* =========================================================
   STEP 3 — SUCCESS
========================================================= */

#step-3 {

    width: 100%;
}


/* =========================================================
   SUCCESS ICON
========================================================= */

.success-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 5px 0 24px;
}


.success-icon-circle {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--green);

    color: #ffffff;

    font-size: 36px;
}


.success-icon-circle i {

    line-height: 1;
}


/* =========================================================
   SUCCESS INTRO
========================================================= */

.success-intro {

    margin-bottom: 34px;
}


.success-title {

    margin: 0;

    color: #222222;

    font-family: "Baloo 2", sans-serif;

    font-size: 36px;

    font-weight: 700;

    line-height: 1.2;
}


.success-subtitle {

    margin: 10px 0 0;

    color: #777777;

    font-family: "Nunito", sans-serif;

    font-size: 19px;

    line-height: 1.4;
}


/* =========================================================
   TRANSACTION SUMMARY
========================================================= */

.transaction-summary {

    width: 100%;

    min-height: 115px;

    padding: 26px 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background: #fffdf8;

    border: 1.5px solid var(--yellow);

    border-radius: 6px;
}


.summary-label {

    display: block;

    margin-bottom: 7px;

    color: #535353;

    font-size: 16px;

    line-height: 1.2;
}


.reference-value,
.amount-value {

    color: #bd9200;

    font-family: "Nunito", sans-serif;

    font-size: 25px;

    line-height: 1.2;
}


.reference-value {

    display: flex;

    align-items: center;

    gap: 8px;
}


/* =========================================================
   COPY BUTTON
========================================================= */

.copy-reference {

    width: 22px;

    height: 22px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    background: transparent;

    color: var(--yellow);

    font-size: 20px;

    cursor: pointer;
}


/* =========================================================
   PAYMENT DETAILS
========================================================= */

.payment-details {

    margin-top: 26px;

    padding: 16px 0 20px;

    border-top: 1px solid #dddddd;

    border-bottom: 1px solid #dddddd;
}


.payment-detail-row {

    min-height: 49px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 5px 18px;
}


.payment-detail-row span {

    color: #666666;

    font-size: 16px;

    line-height: 1.3;
}


.payment-detail-row strong {

    color: #3a3a3a;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.3;

    text-align: right;
}


/* =========================================================
   SUCCESS ACTIONS
========================================================= */

.success-actions {

    padding-top: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 36px;
}


.download-receipt,
.another-payment {

    width: 262px;

    min-height: 45px;

    border-radius: 4px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-family: "Nunito", sans-serif;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;
}


/* =========================================================
   DOWNLOAD
========================================================= */

.download-receipt {

    background: #ffffff;

    border: 2px solid var(--yellow-dark);

    color: #b28700;
}


.download-receipt:hover {

    background: rgba(245, 200, 0, 0.07);

    color: #8f6d00;
}


/* =========================================================
   ANOTHER PAYMENT
========================================================= */

.another-payment {

    background: var(--yellow);

    border: 2px solid var(--yellow);

    color: #111111;
}


.another-payment:hover {

    background: #ffd21a;

    border-color: #ffd21a;

    color: #111111;
}


.success-actions i {

    margin-right: 8px;
}


.another-payment i {

    margin-right: 0;

    margin-left: 9px;
}


/* =========================================================
   TABLET — BELOW 992px
========================================================= */

@media (max-width: 991.98px) {

    .payment-brand {

        width: 165px;
    }


    .payment-card .card-body {

        padding: 35px 30px 30px;
    }


    .payment-title {

        font-size: 32px;
    }


    .payment-subtitle {

        font-size: 18px;
    }


    .payment-stepper {

        margin-bottom: 30px;
    }


    .payment-option {

        min-height: 245px;
    }


    .transaction-summary {

        padding: 23px;
    }
}


/* =========================================================
   MOBILE — BELOW 768px
========================================================= */

@media (max-width: 767.98px) {

    .payment-header {

        min-height: 72px;
    }


    .payment-brand {

        width: 140px;
    }


    .payment-portal-link {

        font-size: 14px;
    }


    .payment-main {

        min-height: auto;
    }


    .payment-main > .container {

        padding-top: 30px !important;

        padding-bottom: 30px !important;
    }


    .payment-card .card-body {

        padding: 30px 20px 25px;
    }


    .payment-title {

        font-size: 28px;

        line-height: 1.15;
    }


    .payment-subtitle {

        font-size: 16px;
    }


    /* -----------------------------------------------------
       STEPPER
    ----------------------------------------------------- */

    .payment-stepper {

        width: 100%;

        margin-bottom: 28px;
    }


    .step-circle {

        width: 36px;

        height: 36px;

        font-size: 16px;
    }


    .step-line {

        margin-top: 17px;

        min-width: 30px;
    }


    .step-label {

        font-size: 13px;
    }


    /* -----------------------------------------------------
       FORM
    ----------------------------------------------------- */

    .form-control,
    .form-select {

        min-height: 48px;

        padding-left: 15px;

        padding-right: 15px;

        font-size: 14px;
    }


    /* -----------------------------------------------------
       STEP 1 ACTIONS
    ----------------------------------------------------- */

    .payment-actions {

        margin-top: 25px;

        padding-top: 20px;

        justify-content: space-between;

        gap: 15px;
    }


    .payment-back,
    .payment-proceed {

        flex: 1;

        min-width: 0;

        font-size: 14px;
    }


    /* -----------------------------------------------------
       STEP 2
    ----------------------------------------------------- */

    .payment-options {

        margin-bottom: 35px;
    }


    .payment-option {

        min-height: 235px;
    }


    .payment-type-actions {

        justify-content: space-between;

        gap: 15px;
    }


    /* -----------------------------------------------------
       STEP 3
    ----------------------------------------------------- */

    .payment-success-card .card-body {

        padding: 35px 20px 30px;
    }


    .success-icon-circle {

        width: 60px;

        height: 60px;

        font-size: 32px;
    }


    .success-title {

        font-size: 28px;
    }


    .success-subtitle {

        font-size: 16px;
    }


    .transaction-summary {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        padding: 22px;
    }


    .transaction-amount {

        width: 100%;

        text-align: left;
    }


    .payment-detail-row {

        padding-left: 0;

        padding-right: 0;
    }


    .payment-detail-row span,
    .payment-detail-row strong {

        font-size: 15px;
    }


    .success-actions {

        flex-direction: column;

        align-items: stretch;

        gap: 15px;
    }


    .download-receipt,
    .another-payment {

        width: 100%;

        min-height: 48px;
    }
}


/* =========================================================
   SMALL PHONES — BELOW 576px
========================================================= */

@media (max-width: 575.98px) {

    .payment-header {

        min-height: 68px;
    }


    .payment-brand {

        width: 125px;
    }


    .payment-portal-link {

        font-size: 13px;
    }


    .payment-main > .container {

        padding-left: 12px !important;

        padding-right: 12px !important;
    }


    .payment-card .card-body {

        padding: 28px 17px 24px;
    }


    .payment-title {

        font-size: 25px;

        line-height: 1.15;
    }


    .payment-subtitle {

        font-size: 15px;
    }


    /* -----------------------------------------------------
       STEPPER
    ----------------------------------------------------- */

    .payment-stepper {

        margin-bottom: 25px;
    }


    .step-circle {

        width: 34px;

        height: 34px;

        font-size: 15px;
    }


    .step-label {

        font-size: 11px;

        max-width: 85px;

        white-space: normal;

        line-height: 1.25;
    }


    .step-line {

        min-width: 18px;

        margin-top: 16px;
    }


    /* -----------------------------------------------------
       FORM
    ----------------------------------------------------- */

    .form-label {

        font-size: 14px;
    }


    .form-control,
    .form-select {

        min-height: 47px;

        font-size: 13px;
    }


    /* -----------------------------------------------------
       PAYMENT CARDS
    ----------------------------------------------------- */

    .payment-option {

        min-height: 225px;

        padding: 28px 20px 22px;
    }


    .payment-option-icon {

        width: 38px;

        height: 38px;

        margin-bottom: 20px;
    }


    .payment-option-icon img {

        width: 23px;

        height: 23px;
    }


    .payment-option h2 {

        font-size: 18px;
    }


    .payment-option-description {

        max-width: 190px;

        font-size: 12px;
    }


    .payment-price {

        font-size: 21px;
    }


    .payment-frequency {

        font-size: 11px;
    }


    /* -----------------------------------------------------
       SUCCESS
    ----------------------------------------------------- */

    .success-icon-circle {

        width: 56px;

        height: 56px;

        font-size: 29px;
    }


    .success-title {

        font-size: 25px;
    }


    .success-subtitle {

        font-size: 14px;
    }


    .transaction-summary {

        padding: 18px;
    }


    .summary-label {

        font-size: 14px;
    }


    .reference-value,
    .amount-value {

        font-size: 21px;
    }


    .payment-detail-row {

        min-height: 45px;

        gap: 15px;
    }


    .payment-detail-row span,
    .payment-detail-row strong {

        font-size: 13px;
    }


    .payment-detail-row strong {

        max-width: 55%;
    }
}


/* =========================================================
   430px
========================================================= */

@media (max-width: 430px) {

    .payment-header {

        min-height: 64px;
    }


    .payment-brand {

        width: 112px;
    }


    .payment-portal-link {

        font-size: 12px;
    }


    .payment-main > .container {

        padding-left: 10px !important;

        padding-right: 10px !important;

        padding-top: 25px !important;

        padding-bottom: 25px !important;
    }


    .payment-card .card-body {

        padding: 24px 14px 22px;
    }


    /* -----------------------------------------------------
       TITLE
    ----------------------------------------------------- */

    .payment-title {

        font-size: 23px;
    }


    .payment-subtitle {

        font-size: 13px;

        line-height: 1.45;
    }


    /* -----------------------------------------------------
       STEPPER
    ----------------------------------------------------- */

    .step-circle {

        width: 31px;

        height: 31px;

        font-size: 13px;
    }


    .step-label {

        font-size: 10px;

        max-width: 75px;
    }


    .step-line {

        min-width: 12px;

        margin-top: 14px;
    }


    /* -----------------------------------------------------
       FORM
    ----------------------------------------------------- */

    .form-label {

        font-size: 13px;
    }


    .form-control,
    .form-select {

        min-height: 45px;

        padding: 9px 13px;

        font-size: 12px;
    }


    /* -----------------------------------------------------
       PAYMENT CARDS
    ----------------------------------------------------- */

    .payment-option {

        min-height: 215px;

        padding: 26px 17px 20px;
    }


    .payment-option-icon {

        width: 36px;

        height: 36px;

        margin-bottom: 17px;
    }


    .payment-option-icon img {

        width: 22px;

        height: 22px;
    }


    .payment-option h2 {

        font-size: 17px;
    }


    .payment-option-description {

        max-width: 180px;

        font-size: 11px;

        line-height: 1.35;
    }


    .payment-price {

        font-size: 20px;
    }


    .payment-frequency {

        font-size: 10px;
    }


    .payment-radio {

        width: 22px;

        height: 22px;

        top: 12px;

        right: 13px;
    }


    /* -----------------------------------------------------
       SUCCESS
    ----------------------------------------------------- */

    .success-icon-circle {

        width: 53px;

        height: 53px;

        font-size: 27px;
    }


    .success-title {

        font-size: 23px;
    }


    .success-subtitle {

        font-size: 13px;
    }


    .transaction-summary {

        padding: 17px;
    }


    .summary-label {

        font-size: 13px;
    }


    .reference-value,
    .amount-value {

        font-size: 20px;
    }


    .payment-detail-row span,
    .payment-detail-row strong {

        font-size: 12px;
    }
}


/* =========================================================
   375px
========================================================= */

@media (max-width: 375px) {

    .payment-brand {

        width: 105px;
    }


    .payment-portal-link {

        font-size: 11px;
    }


    .payment-card .card-body {

        padding: 22px 12px 20px;
    }


    .payment-title {

        font-size: 21px;
    }


    .payment-subtitle {

        font-size: 12px;
    }


    .payment-stepper {

        margin-bottom: 22px;
    }


    .step-circle {

        width: 30px;

        height: 30px;

        font-size: 12px;
    }


    .step-label {

        font-size: 9px;

        max-width: 68px;
    }


    .step-line {

        min-width: 10px;

        margin-top: 14px;
    }


    .form-control,
    .form-select {

        min-height: 44px;

        font-size: 12px;
    }


    .payment-option {

        min-height: 205px;
    }


    .payment-option h2 {

        font-size: 16px;
    }


    .payment-option-description {

        font-size: 10.5px;
    }


    .payment-price {

        font-size: 19px;
    }


    .success-title {

        font-size: 21px;
    }


    .success-subtitle {

        font-size: 12px;
    }
}


/* =========================================================
   320px
========================================================= */

@media (max-width: 320px) {

    .payment-header {

        min-height: 60px;
    }


    .payment-brand {

        width: 98px;
    }


    .payment-portal-link {

        font-size: 10px;
    }


    .payment-main > .container {

        padding-left: 8px !important;

        padding-right: 8px !important;
    }


    .payment-card .card-body {

        padding: 20px 10px 18px;
    }


    .payment-title {

        font-size: 20px;
    }


    .payment-subtitle {

        font-size: 11px;
    }


    /* -----------------------------------------------------
       STEPPER
    ----------------------------------------------------- */

    .step-circle {

        width: 28px;

        height: 28px;

        font-size: 11px;
    }


    .step-label {

        font-size: 8px;

        max-width: 60px;
    }


    .step-line {

        min-width: 7px;

        margin-top: 13px;
    }


    /* -----------------------------------------------------
       FORM
    ----------------------------------------------------- */

    .form-label {

        font-size: 12px;
    }


    .form-control,
    .form-select {

        min-height: 43px;

        padding: 8px 11px;

        font-size: 11px;
    }


    /* -----------------------------------------------------
       PAYMENT CARDS
    ----------------------------------------------------- */

    .payment-option {

        min-height: 195px;

        padding: 24px 14px 18px;
    }


    .payment-option-icon {

        width: 34px;

        height: 34px;

        margin-bottom: 15px;
    }


    .payment-option-icon img {

        width: 20px;

        height: 20px;
    }


    .payment-option h2 {

        font-size: 15px;
    }


    .payment-option-description {

        max-width: 165px;

        font-size: 10px;
    }


    .payment-price {

        font-size: 18px;
    }


    .payment-frequency {

        font-size: 9px;
    }


    .payment-radio {

        width: 20px;

        height: 20px;

        border-width: 2px;

        top: 11px;

        right: 11px;
    }


    /* -----------------------------------------------------
       SUCCESS
    ----------------------------------------------------- */

    .success-icon-circle {

        width: 50px;

        height: 50px;

        font-size: 25px;
    }


    .success-title {

        font-size: 20px;
    }


    .success-subtitle {

        font-size: 11px;
    }


    .transaction-summary {

        padding: 14px;
    }


    .reference-value,
    .amount-value {

        font-size: 18px;
    }


    .payment-detail-row {

        min-height: 42px;

        gap: 10px;
    }


    .payment-detail-row span,
    .payment-detail-row strong {

        font-size: 10.5px;
    }


    .payment-detail-row strong {

        max-width: 58%;
    }
}


















/* =========================================================
   PAYMENT CONFIRMATION MODAL
========================================================= */

.payment-modal {

    border: 0;

    border-radius: 8px;

    overflow: hidden;

    background: #ffffff;

    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.20);
}


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

.payment-modal-header {

    padding: 24px 28px 18px;

    border-bottom: 1px solid #eeeeee;

    background: #ffffff;
}


.payment-modal-eyebrow {

    margin: 0 0 4px;

    color: var(--yellow-dark);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.5px;
}


.payment-modal-header .modal-title {

    margin: 0;

    color: #222222;

    font-family: "Baloo 2", sans-serif;

    font-size: 27px;

    font-weight: 700;
}


.payment-modal-header .btn-close {

    box-shadow: none;

    opacity: 0.65;
}


/* =========================================================
   MODAL BODY
========================================================= */

.payment-modal-body {

    padding: 25px 28px 22px;
}


/* =========================================================
   PAYMENT TYPE
========================================================= */

.payment-modal-type {

    min-height: 70px;

    margin-bottom: 24px;

    padding: 15px 17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    background: rgba(245, 200, 0, 0.07);

    border: 1px solid rgba(245, 200, 0, 0.35);

    border-radius: 6px;
}


.payment-modal-label {

    display: block;

    margin-bottom: 3px;

    color: #777777;

    font-size: 13px;
}


.payment-modal-type strong {

    display: block;

    color: #222222;

    font-family: "Baloo 2", sans-serif;

    font-size: 20px;
}


.payment-modal-type-icon {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    background: rgba(245, 200, 0, 0.15);
}


.payment-modal-type-icon img {

    width: 24px;

    height: 24px;

    object-fit: contain;
}


/* =========================================================
   DETAILS SECTION
========================================================= */

.payment-modal-section {

    margin-bottom: 22px;
}


.payment-modal-section h3,
.payment-breakdown h3 {

    margin: 0 0 12px;

    color: #333333;

    font-family: "Baloo 2", sans-serif;

    font-size: 17px;

    font-weight: 700;
}


.payment-modal-row {

    min-height: 36px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 5px 0;

    border-bottom: 1px solid #f0f0f0;
}


.payment-modal-row:last-child {

    border-bottom: 0;
}


.payment-modal-row span {

    color: #777777;

    font-size: 14px;
}


.payment-modal-row strong {

    max-width: 60%;

    color: #333333;

    font-size: 14px;

    font-weight: 600;

    text-align: right;

    overflow-wrap: anywhere;
}


/* =========================================================
   BREAKDOWN
========================================================= */

.payment-breakdown {

    padding: 18px;

    background: #fafafa;

    border: 1px solid #e5e5e5;

    border-radius: 6px;
}


.payment-breakdown-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 32px;
}


.payment-breakdown-row span {

    color: #666666;

    font-size: 14px;
}


.payment-breakdown-row strong {

    color: #333333;

    font-size: 14px;

    font-weight: 600;
}


.payment-breakdown-divider {

    width: 100%;

    height: 1px;

    margin: 10px 0;

    background: #dddddd;
}


.payment-breakdown-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.payment-breakdown-total span {

    color: #222222;

    font-size: 15px;

    font-weight: 700;
}


.payment-breakdown-total strong {

    color: var(--green-dark);

    font-family: "Baloo 2", sans-serif;

    font-size: 22px;

    font-weight: 700;
}


/* =========================================================
   INFORMATION NOTICE
========================================================= */

.payment-modal-notice {

    margin-top: 18px;

    padding: 12px 14px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: #6d6d6d;

    background: #fffdf3;

    border-left: 3px solid var(--yellow);

    font-size: 12px;

    line-height: 1.45;
}


.payment-modal-notice i {

    flex-shrink: 0;

    margin-top: 2px;

    color: var(--yellow-dark);
}


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

.payment-modal-footer {

    padding: 18px 28px 24px;

    border-top: 1px solid #eeeeee;

    display: flex;

    justify-content: flex-end;

    gap: 15px;
}


/* =========================================================
   CANCEL
========================================================= */

.payment-modal-cancel {

    min-width: 120px;

    min-height: 44px;

    color: #a27b00;

    background: #ffffff;

    border: 2px solid var(--yellow-dark);

    border-radius: 4px;

    font-size: 14px;

    font-weight: 600;
}


.payment-modal-cancel:hover {

    color: #806100;

    background: rgba(245, 200, 0, 0.07);

    border-color: #a27b00;
}


/* =========================================================
   PAY NOW
========================================================= */

.payment-modal-pay {

    min-width: 145px;

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #111111;

    background: var(--yellow);

    border: 2px solid var(--yellow);

    border-radius: 4px;

    font-size: 14px;

    font-weight: 700;

    transition: 0.2s ease;
}


.payment-modal-pay:hover {

    color: #111111;

    background: #ffd21a;

    border-color: #ffd21a;

    transform: translateY(-1px);
}


.payment-modal-pay:disabled {

    opacity: 0.65;

    cursor: wait;

    transform: none;
}


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

@media (max-width: 575.98px) {

    .payment-modal-header {

        padding: 20px 18px 15px;
    }


    .payment-modal-header .modal-title {

        font-size: 23px;
    }


    .payment-modal-body {

        padding: 20px 18px;
    }


    .payment-modal-footer {

        padding: 15px 18px 20px;

        flex-direction: column-reverse;
    }


    .payment-modal-cancel,
    .payment-modal-pay {

        width: 100%;
    }


    .payment-modal-type {

        padding: 13px;
    }


    .payment-modal-type strong {

        font-size: 18px;
    }


    .payment-modal-row span,
    .payment-modal-row strong {

        font-size: 13px;
    }


    .payment-breakdown-row span,
    .payment-breakdown-row strong {

        font-size: 13px;
    }


    .payment-breakdown-total strong {

        font-size: 20px;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 375px) {

    .payment-modal-header .modal-title {

        font-size: 21px;
    }


    .payment-modal-eyebrow {

        font-size: 10px;
    }


    .payment-modal-body {

        padding: 18px 14px;
    }


    .payment-modal-footer {

        padding: 14px;
    }


    .payment-modal-row {

        gap: 10px;
    }


    .payment-modal-row strong {

        max-width: 55%;

        font-size: 12px;
    }


    .payment-modal-notice {

        font-size: 11px;
    }
}












/* =========================================================
   BANK TRANSFER MODAL
========================================================= */

.transfer-modal {

    border: 0;

    border-radius: 8px;

    overflow: hidden;

    background: #ffffff;

    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.22);
}


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

.transfer-modal-header {

    padding: 23px 27px 19px;

    background: #222222;

    border-bottom: 0;

    color: #ffffff;
}


.transfer-modal-eyebrow {

    margin: 0 0 4px;

    color: #f5c800;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.6px;
}


.transfer-modal-header .modal-title {

    margin: 0;

    color: #ffffff;

    font-family: "Baloo 2", sans-serif;

    font-size: 27px;

    font-weight: 700;
}


/* =========================================================
   BODY
========================================================= */

.transfer-modal-body {

    padding: 24px 27px 20px;
}


/* =========================================================
   BANK SECTION
========================================================= */

.transfer-section h3,
.transfer-breakdown h3 {

    margin: 0 0 13px;

    color: #333333;

    font-family: "Baloo 2", sans-serif;

    font-size: 17px;

    font-weight: 700;

    text-transform: uppercase;
}


.transfer-details {

    border: 1px solid #e5e5e5;

    border-radius: 6px;

    overflow: hidden;
}


.transfer-row {

    min-height: 43px;

    padding: 8px 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-bottom: 1px solid #eeeeee;
}


.transfer-row:last-child {

    border-bottom: 0;
}


.transfer-row span {

    color: #707070;

    font-size: 13px;
}


.transfer-row strong {

    max-width: 62%;

    color: #242424;

    font-size: 14px;

    font-weight: 700;

    text-align: right;

    overflow-wrap: anywhere;
}


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

.transfer-amount-row {

    background: rgba(245, 200, 0, 0.08);
}


.transfer-amount-row strong {

    color: var(--green-dark);

    font-family: "Baloo 2", sans-serif;

    font-size: 20px;
}


/* =========================================================
   WARNING
========================================================= */

.transfer-warning {

    margin-top: 17px;

    padding: 12px 14px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    background: #fffdf2;

    border: 1px solid rgba(245, 200, 0, 0.45);

    border-radius: 6px;

    color: #666666;

    font-size: 12px;

    line-height: 1.5;
}


.transfer-warning i {

    flex-shrink: 0;

    margin-top: 2px;

    color: #c49a00;
}


/* =========================================================
   BREAKDOWN
========================================================= */

.transfer-breakdown {

    margin-top: 20px;

    padding: 16px;

    background: #fafafa;

    border: 1px solid #e4e4e4;

    border-radius: 6px;
}


.transfer-breakdown-row {

    min-height: 31px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.transfer-breakdown-row span {

    color: #696969;

    font-size: 13px;
}


.transfer-breakdown-row strong {

    color: #333333;

    font-size: 13px;

    font-weight: 600;
}


.transfer-divider {

    width: 100%;

    height: 1px;

    margin: 9px 0;

    background: #dddddd;
}


.transfer-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.transfer-total span {

    color: #222222;

    font-size: 14px;

    font-weight: 700;
}


.transfer-total strong {

    color: var(--green-dark);

    font-family: "Baloo 2", sans-serif;

    font-size: 22px;

    font-weight: 700;
}


/* =========================================================
   NOTE
========================================================= */

.transfer-note {

    margin-top: 15px;

    display: flex;

    align-items: flex-start;

    gap: 9px;

    color: #777777;

    font-size: 12px;

    line-height: 1.4;
}


.transfer-note i {

    color: #bd9200;

    margin-top: 2px;
}


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

.transfer-modal-footer {

    padding: 17px 27px 23px;

    border-top: 1px solid #eeeeee;

    display: flex;

    justify-content: flex-end;

    gap: 14px;
}


/* =========================================================
   CANCEL
========================================================= */

.transfer-cancel {

    min-width: 110px;

    min-height: 44px;

    background: #ffffff;

    border: 2px solid #cda600;

    border-radius: 4px;

    color: #a27b00;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   CONFIRM TRANSFER
========================================================= */

.transfer-confirm {

    min-width: 190px;

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: var(--green-dark);

    border: 2px solid var(--green-dark);

    border-radius: 4px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}


.transfer-confirm:hover {

    background: #0e613c;

    border-color: #0e613c;

    color: #ffffff;
}


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

@media (max-width: 575.98px) {

    .transfer-modal-header {

        padding: 20px 18px 16px;
    }


    .transfer-modal-header .modal-title {

        font-size: 23px;
    }


    .transfer-modal-body {

        padding: 20px 18px;
    }


    .transfer-modal-footer {

        padding: 15px 18px 20px;

        flex-direction: column-reverse;
    }


    .transfer-cancel,
    .transfer-confirm {

        width: 100%;
    }


    .transfer-row {

        padding: 8px 11px;

        gap: 10px;
    }


    .transfer-row span,
    .transfer-row strong {

        font-size: 12px;
    }


    .transfer-amount-row strong {

        font-size: 18px;
    }


    .transfer-warning {

        font-size: 11px;
    }


    .transfer-breakdown-row span,
    .transfer-breakdown-row strong {

        font-size: 12px;
    }


    .transfer-total strong {

        font-size: 20px;
    }
}


/* =========================================================
   375px
========================================================= */

@media (max-width: 375px) {

    .transfer-modal-header .modal-title {

        font-size: 21px;
    }


    .transfer-modal-body {

        padding: 17px 14px;
    }


    .transfer-modal-footer {

        padding: 14px;
    }


    .transfer-row strong {

        max-width: 58%;
    }


    .transfer-warning,
    .transfer-note {

        font-size: 10.5px;
    }
}





/* =========================================================
   TRANSFER ERROR
   Match the inner modal content width
========================================================= */

.transfer-modal .transfer-error {

    width: calc(100% - 54px);

    margin: 14px 27px 0;

    padding: 12px 14px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    background: #fff5f5;

    border: 1px solid #f0b5b5;

    border-left: 4px solid #dc3545;

    border-radius: 6px;

    color: #c62828;

    font-family: "Nunito", sans-serif;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.45;

    box-sizing: border-box;
}


.transfer-modal .transfer-error i {

    flex-shrink: 0;

    margin-top: 2px;

    color: #dc3545;

    font-size: 14px;
}


.transfer-modal .transfer-error span {

    flex: 1;

    min-width: 0;
}


.transfer-modal .transfer-error.d-none {

    display: none !important;
}


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

@media (max-width: 575.98px) {

    .transfer-modal .transfer-error {

        width: calc(100% - 36px);

        margin-left: 18px;

        margin-right: 18px;

        font-size: 11px;

        padding: 10px 11px;
    }
}


@media (max-width: 375px) {

    .transfer-modal .transfer-error {

        width: calc(100% - 28px);

        margin-left: 14px;

        margin-right: 14px;

        font-size: 10.5px;
    }
}

/* =========================================================
   STEP 3 — RECEIPT
   CLEAN / SINGLE RECEIPT SYSTEM
========================================================= */

/*
   IMPORTANT:
   Step 3 must be allowed to determine its own height.
   These rules prevent the payment card/wizard from
   ending before the receipt amount section.
*/

#step-3,
#step-3.wizard-step,
.payment-wizard,
.payment-card,
.payment-card .card-body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

#step-3 {
    width: 100%;
    overflow: visible !important;
}

.receipt-success-header {
    margin: 0 0 30px;
    text-align: center;
}


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

.receipt-container {
    position: relative;
    display: block;

    width: 100%;
    max-width: 900px;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto;
    padding: 0 0 24px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #dedede;
    border-top: 4px solid var(--yellow);
    border-radius: 5px;

    overflow: visible !important;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   BRANDING
========================================================= */

.receipt-branding {
    width: 100%;

    padding: 25px 30px 18px;

    text-align: center;

    border-bottom: 1px solid #e8e8e8;

    box-sizing: border-box;
}

.receipt-logo {
    width: 180px;
    max-width: 70%;
    height: auto;

    display: block;
    margin: 0 auto 14px;

    object-fit: contain;
}

.receipt-branding h2 {
    max-width: 700px;

    margin: 0 auto;

    color: #252525;

    font-family: "Baloo 2", sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;

    text-transform: uppercase;
}


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

.receipt-title-area {
    padding: 17px 30px 14px;
    text-align: center;
    box-sizing: border-box;
}

.receipt-title-area h3 {
    margin: 0;

    color: #242424;

    font-family: "Baloo 2", sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.receipt-title-area span {
    display: block;
    margin-top: 3px;

    color: #8a8a8a;
    font-size: 12px;
}


/* =========================================================
   TRANSACTION REFERENCE
========================================================= */

.receipt-reference {
    margin: 0 30px;
    padding: 15px 18px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;

    background: #f7f7f7;
    border: 1px solid #eeeeee;
    border-radius: 4px;

    box-sizing: border-box;
}

.receipt-reference > div {
    min-width: 0;
}

.receipt-label {
    display: block;
    margin-bottom: 4px;

    color: #777777;
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
}

.receipt-reference strong {
    color: #242424;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}


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

.receipt-details {
    width: 100%;

    padding: 22px 30px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 35px;
    row-gap: 0;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    box-sizing: border-box;
    overflow: visible !important;
}

.receipt-detail {
    min-width: 0;
    min-height: 52px;

    padding: 9px 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-bottom: 1px solid #eeeeee;
    box-sizing: border-box;
}

.receipt-detail span {
    margin-bottom: 3px;

    color: #888888;
    font-size: 11px;
    line-height: 1.2;
}

.receipt-detail strong {
    color: #333333;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}


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

.receipt-amount-section {
    position: static !important;

    width: auto !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 30px;
    padding: 16px 18px;

    display: block;

    box-sizing: border-box;

    background: #fafafa;
    border: 1px solid #e3e3e3;
    border-radius: 5px;

    overflow: visible !important;
}

.receipt-amount-row {
    width: 100%;
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    box-sizing: border-box;
}

.receipt-amount-row span {
    min-width: 0;
    color: #666666;
    font-size: 13px;
}

.receipt-amount-row strong {
    flex: 0 0 auto;
    color: #333333;
    font-size: 14px;
    font-weight: 700;
}

.receipt-total-divider {
    width: 100%;
    height: 1px;

    margin: 9px 0;

    background: #dddddd;
}

.receipt-total-row {
    width: 100%;
    min-height: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    box-sizing: border-box;
}

.receipt-total-row span {
    min-width: 0;
    color: #222222;
    font-size: 15px;
    font-weight: 700;
}

.receipt-total-row strong {
    flex: 0 0 auto;
    color: var(--green-dark);
    font-family: "Baloo 2", sans-serif;
    font-size: 24px;
    font-weight: 700;
}


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

.receipt-footer-note {
    position: static !important;

    width: 100%;

    height: auto !important;
    min-height: 0 !important;

    margin: 0;
    padding: 20px 30px 0;

    box-sizing: border-box;

    color: #8a8a8a;
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}


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

.receipt-actions {
    width: 100%;
    max-width: 900px;

    margin: 22px auto 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.receipt-actions .download-receipt,
.receipt-actions .another-payment {
    width: 250px;
    min-width: 0;

    height: 52px;
    min-height: 52px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 5px;

    font-family: "Nunito", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;
    box-sizing: border-box;
}

.receipt-actions .download-receipt {
    gap: 9px;

    background: #ffffff;
    border: 2px solid var(--yellow-dark);
    color: #b68a00;
}

.receipt-actions .download-receipt i {
    margin: 0 !important;
    font-size: 19px;
    flex-shrink: 0;
}

.receipt-actions .another-payment {
    position: relative;

    padding-left: 18px;
    padding-right: 45px;

    background: var(--yellow);
    border: 2px solid var(--yellow);
    color: #111111;
}

.receipt-actions .another-payment i {
    position: absolute;
    right: 16px;

    margin: 0 !important;
    font-size: 19px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .receipt-container {
        max-width: 100%;
    }

}


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

@media (max-width: 767.98px) {

    .receipt-reference {
        grid-template-columns: 1fr;
    }

    .receipt-details {
        grid-template-columns: 1fr;
    }

    .receipt-actions {
        padding: 0 10px;
        flex-direction: column;
        gap: 12px;
    }

    .receipt-actions .download-receipt,
    .receipt-actions .another-payment {
        width: 100%;
        height: 50px;
        min-height: 50px;
        font-size: 15px;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 575.98px) {

    .receipt-branding {
        padding-left: 18px;
        padding-right: 18px;
    }

    .receipt-branding h2 {
        font-size: 10px;
    }

    .receipt-title-area {
        padding-left: 18px;
        padding-right: 18px;
    }

    .receipt-title-area h3 {
        font-size: 20px;
    }

    .receipt-reference {
        margin-left: 18px;
        margin-right: 18px;
        padding: 13px 15px;
    }

    .receipt-details {
        padding: 15px 18px;
    }

    .receipt-detail {
        min-height: 45px;
    }

    .receipt-detail strong {
        font-size: 13px;
    }

    .receipt-amount-section {
        margin-left: 18px;
        margin-right: 18px;
        padding: 14px;
    }

    .receipt-total-row strong {
        font-size: 21px;
    }

    .receipt-footer-note {
        padding-left: 18px;
        padding-right: 18px;
    }
}


/* =========================================================
   375px
========================================================= */

@media (max-width: 375px) {

    .receipt-branding {
        padding-left: 14px;
        padding-right: 14px;
    }

    .receipt-logo {
        width: 135px;
    }

    .receipt-branding h2 {
        font-size: 9px;
    }

    .receipt-title-area h3 {
        font-size: 19px;
    }

    .receipt-reference {
        margin-left: 14px;
        margin-right: 14px;
    }

    .receipt-details {
        padding-left: 14px;
        padding-right: 14px;
    }

    .receipt-amount-section {
        margin-left: 14px;
        margin-right: 14px;
    }

    .receipt-footer-note {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* =========================================================
   320px
========================================================= */

@media (max-width: 320px) {

    .receipt-branding h2 {
        font-size: 8px;
    }

    .receipt-reference,
    .receipt-details,
    .receipt-amount-section {
        margin-left: 10px;
        margin-right: 10px;
    }

    .receipt-details {
        padding-left: 10px;
        padding-right: 10px;
    }

    .receipt-amount-row span,
    .receipt-amount-row strong,
    .receipt-total-row span {
        font-size: 12px;
    }

    .receipt-total-row strong {
        font-size: 19px;
    }

}



/* =========================================================
   STEP 3 — REMOVE OUTER PAYMENT CARD VISUAL
   Leave the actual receipt intact.
========================================================= */

.payment-card:has(#step-3.active) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.payment-card:has(#step-3.active) .card-body {
    padding: 0 !important;
}



.payment-portal-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.payment-portal-link i {
    font-size: 13px;
}