/* BHAVYA_MA_CHECKOUT_POLISH_V2 */

/* -----------------------------------------
   Modal must always begin inside viewport.
   Browser page itself should not scroll.
----------------------------------------- */

.ma-pay-overlay {
    align-items: flex-start !important;
    justify-content: center !important;

    overflow: hidden !important;

    padding:
        max(10px, env(safe-area-inset-top))
        10px
        max(10px, env(safe-area-inset-bottom))
        !important;
}


/* -----------------------------------------
   Fixed viewport-safe shell.
   Content scrolls INSIDE the checkout only.
----------------------------------------- */

.ma-pay-card {
    width: min(100%, 1080px) !important;

    height:
        min(
            790px,
            calc(100dvh - 20px)
        ) !important;

    max-height:
        calc(100dvh - 20px) !important;

    margin: 0 auto !important;

    overflow: hidden !important;

    border-radius: 24px !important;
}


/* LEFT PANEL */

.ma-pay-brand {
    height: 100%;

    box-sizing: border-box;

    overflow-y: auto;

    padding:
        25px
        27px
        24px !important;
}


.ma-pay-logo {
    width: 58px !important;
    height: 58px !important;

    border-radius: 15px !important;
}


.ma-pay-brand-kicker {
    margin-top: 17px !important;
}


.ma-pay-brand h2 {
    margin:
        7px 0
        8px !important;

    font-size: 24px !important;
}


.ma-pay-brand p {
    line-height: 1.6 !important;
}


.ma-price-box {
    margin-top: 19px !important;

    padding: 16px !important;
}


.ma-price-main {
    font-size: 28px !important;
}


.ma-secure-list {
    margin-top: 18px !important;

    gap: 8px !important;
}


/* -----------------------------------------
   RIGHT FORM SCROLLS INDEPENDENTLY
----------------------------------------- */

.ma-pay-form {
    height: 100%;

    box-sizing: border-box;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding:
        0
        28px
        27px !important;

    scrollbar-gutter: stable;
}


/* -----------------------------------------
   Sticky professional checkout navigation
----------------------------------------- */

.ma-pay-nav {
    position: sticky;

    top: 0;

    z-index: 30;

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

    gap: 14px;

    margin:
        0 -2px
        16px;

    padding:
        17px
        46px
        13px
        2px;

    background:
        linear-gradient(
            180deg,
            rgba(16, 24, 43, 1) 0%,
            rgba(16, 24, 43, .98) 74%,
            rgba(16, 24, 43, .88) 90%,
            rgba(16, 24, 43, 0) 100%
        );
}


.ma-pay-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 40px;

    padding:
        0
        14px;

    border:
        1px solid
        rgba(148, 163, 184, .18);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .055);

    color: #e2e8f0;

    font-family: inherit;
    font-size: 11px;
    font-weight: 850;

    cursor: pointer;

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


.ma-pay-back:hover {
    transform: translateX(-2px);

    border-color:
        rgba(103, 232, 249, .45);

    background:
        rgba(103, 232, 249, .08);
}


.ma-pay-nav-title {
    color: #8291a7;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: .8px;

    text-transform: uppercase;
}


/* X stays as secondary close */

.ma-pay-close {
    z-index: 50 !important;

    top: 14px !important;
    right: 17px !important;
}


/* -----------------------------------------
   FORM HEADER / STEPS
----------------------------------------- */

.ma-pay-title {
    margin:
        0 48px
        5px 0 !important;

    font-size: 22px !important;
}


.ma-pay-subtitle {
    margin:
        0 0
        15px !important;
}


.ma-checkout-steps {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(59, 130, 246, .14);

    border-radius: 11px;

    background:
        rgba(37, 99, 235, .05);

    color: #77879e;

    font-size: 10px;
    font-weight: 750;
}


.ma-checkout-step {
    display: inline-flex;
    align-items: center;

    gap: 6px;
}


.ma-checkout-step-number {
    width: 21px;
    height: 21px;

    display: inline-grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(148, 163, 184, .10);

    color: #94a3b8;

    font-size: 9px;
    font-weight: 950;
}


.ma-checkout-step.active {
    color: #dff8ff;
}


.ma-checkout-step.active
.ma-checkout-step-number {
    background:
        linear-gradient(
            135deg,
            #06b6d4,
            #2563eb
        );

    color: #fff;
}


.ma-checkout-arrow {
    color: #475569;
}


/* -----------------------------------------
   COMPACT FORM CONTROLS
----------------------------------------- */

.ma-billing-grid {
    gap:
        11px
        12px !important;
}


.ma-billing-field label {
    margin-bottom:
        6px !important;
}


.ma-billing-field input,
.ma-billing-field select {
    height:
        46px !important;
}


.ma-billing-field textarea {
    min-height:
        68px !important;

    max-height:
        95px !important;
}


.ma-checkout-summary {
    margin-top:
        15px !important;

    padding:
        12px
        14px !important;
}


.ma-checkout-row {
    padding:
        4px 0 !important;
}


.ma-checkout-row.total {
    margin-top:
        5px !important;

    padding-top:
        10px !important;
}


.ma-pay-btn {
    min-height:
        51px !important;

    margin-top:
        14px !important;
}


.ma-pay-security {
    margin-top:
        9px !important;
}


/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 860px) {

    .ma-pay-card {
        grid-template-columns:
            minmax(220px, .72fr)
            minmax(0, 1.28fr) !important;
    }


    .ma-pay-brand {
        padding:
            22px
            20px !important;
    }


    .ma-pay-brand h2 {
        font-size:
            21px !important;
    }


    .ma-secure-item {
        font-size:
            10px !important;
    }
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 700px) {

    .ma-pay-overlay {
        padding:
            6px !important;
    }


    .ma-pay-card {
        width:
            100% !important;

        height:
            calc(100dvh - 12px)
            !important;

        max-height:
            calc(100dvh - 12px)
            !important;

        grid-template-columns:
            1fr !important;

        border-radius:
            18px !important;
    }


    .ma-pay-brand {
        display:
            none !important;
    }


    .ma-pay-form {
        padding:
            0
            15px
            22px !important;
    }


    .ma-pay-nav {
        margin-bottom:
            12px;

        padding:
            12px
            42px
            10px
            0;
    }


    .ma-pay-title {
        font-size:
            20px !important;
    }


    .ma-billing-grid {
        grid-template-columns:
            1fr !important;
    }


    .ma-field-full {
        grid-column:
            auto !important;
    }


    .ma-checkout-steps {
        overflow-x:
            auto;

        white-space:
            nowrap;
    }
}