/*
 * ==========================================================
 * MTG COMMERCE · UNIVERSAL PAYMENT RAIL V1
 * ==========================================================
 *
 * Desktop:
 * - 5 tarjetas visibles
 * - flechas si existe overflow
 *
 * Tablet:
 * - 3 tarjetas visibles
 *
 * Mobile:
 * - aproximadamente 1.45 tarjetas
 * - swipe horizontal
 * - scroll snap
 *
 * Pensado para N métodos de pago.
 * ==========================================================
 */


/* ==========================================================
   SHELL
   ========================================================== */

.mtg-payment-rail {
    position: relative;
    width: 100%;
    margin: 14px 0 0;
}


.mtg-payment-rail__row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    width: 100%;
}


/* ==========================================================
   VIEWPORT
   ========================================================== */

.mtg-payment-rail__viewport {
    min-width: 0;
    width: 100%;
    overflow: hidden;
}


/*
 * El grid original del checkout se convierte
 * en el TRACK universal.
 */
.mtg-payment-rail
.mtg-payment-cards-v2 {
    display: grid !important;

    grid-template-columns:
        none !important;

    grid-auto-flow:
        column !important;

    grid-auto-columns:
        calc(
            (100% - 56px) / 5
        ) !important;

    gap:
        14px !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        4px 2px 10px !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    scroll-snap-type:
        x mandatory;

    scroll-behavior:
        smooth;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;

    overscroll-behavior-inline:
        contain;
}


.mtg-payment-rail
.mtg-payment-cards-v2::-webkit-scrollbar {
    display: none;
}


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

.mtg-payment-rail
.mtg-payment-card-v2 {
    position: relative;

    display: flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-width:
        0 !important;

    width:
        100% !important;

    min-height:
        124px !important;

    height:
        124px !important;

    padding:
        12px 10px !important;

    gap:
        5px !important;

    border:
        1px solid #dde3ec !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        none !important;

    text-align:
        center !important;

    scroll-snap-align:
        start;

    scroll-snap-stop:
        always;

    box-sizing:
        border-box !important;

    cursor:
        pointer;

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


.mtg-payment-rail
.mtg-payment-card-v2:hover {
    border-color:
        #a995ff !important;

    transform:
        translateY(-1px);
}


.mtg-payment-rail
.mtg-payment-card-v2.is-selected {
    border:
        2px solid #6847e8 !important;

    background:
        #fcfbff !important;

    box-shadow:
        0 0 0 3px
        rgba(104, 71, 232, .07)
        !important;
}


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

.mtg-payment-rail
.mtg-payment-card-v2__logo {
    display: flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        48px !important;

    height:
        48px !important;

    flex:
        0 0 48px !important;

    margin:
        0 auto 2px !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    background:
        transparent !important;
}


.mtg-payment-rail
.mtg-payment-card-v2__logo img {
    display:
        block !important;

    max-width:
        44px !important;

    max-height:
        40px !important;

    width:
        auto !important;

    height:
        auto !important;

    object-fit:
        contain !important;
}


/* ==========================================================
   TEXTO
   ========================================================== */

.mtg-payment-rail
.mtg-payment-card-v2__body {
    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    gap:
        2px !important;

    width:
        100% !important;

    min-width:
        0 !important;
}


.mtg-payment-rail
.mtg-payment-card-v2__body strong {
    display:
        block !important;

    width:
        100% !important;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        14px !important;

    line-height:
        1.2 !important;

    font-weight:
        850 !important;

    text-align:
        center !important;
}


.mtg-payment-rail
.mtg-payment-card-v2__body small {
    display:
        -webkit-box !important;

    width:
        100% !important;

    max-width:
        145px !important;

    margin:
        0 auto !important;

    overflow:
        hidden;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    color:
        #64748b !important;

    font-size:
        10.5px !important;

    line-height:
        1.25 !important;

    text-align:
        center !important;
}


/*
 * Nunca poner totales/comisiones dentro
 * de la mini-card del selector.
 */
.mtg-payment-rail
.mtg-payment-card-v2
.mtg-stripe-fee-box,

.mtg-payment-rail
.mtg-payment-card-v2
.mtg-payment-fee-box {
    display:
        none !important;
}


/* ==========================================================
   FLECHAS
   ========================================================== */

.mtg-payment-rail__nav {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        40px;

    height:
        40px;

    padding:
        0;

    border:
        1px solid #e0e5ed;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        #3f3f46;

    box-shadow:
        0 5px 16px
        rgba(15, 23, 42, .08);

    font-family:
        inherit;

    font-size:
        25px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        border-color .15s ease,
        color .15s ease,
        opacity .15s ease,
        transform .15s ease;
}


.mtg-payment-rail__nav:hover:not(:disabled) {
    border-color:
        #8066ef;

    color:
        #6244de;

    transform:
        scale(1.04);
}


.mtg-payment-rail__nav:disabled {
    opacity:
        .28;

    cursor:
        default;

    box-shadow:
        none;
}


.mtg-payment-rail:not(.has-overflow)
.mtg-payment-rail__nav {
    visibility:
        hidden;

    pointer-events:
        none;
}


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

.mtg-payment-rail__meta {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    min-height:
        20px;

    margin-top:
        4px;

    color:
        #7b8494;

    font-size:
        11px;

    font-weight:
        700;
}


.mtg-payment-rail:not(.has-overflow)
.mtg-payment-rail__meta {
    display:
        none;
}


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

@media (max-width: 1050px) {

    .mtg-payment-rail
    .mtg-payment-cards-v2 {

        grid-auto-columns:
            calc(
                (100% - 28px) / 3
            ) !important;
    }
}


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

@media (max-width: 680px) {

    .mtg-payment-rail__row {
        display:
            block;
    }


    .mtg-payment-rail__viewport {
        overflow:
            visible;
    }


    .mtg-payment-rail
    .mtg-payment-cards-v2 {

        grid-auto-columns:
            min(
                76vw,
                210px
            ) !important;

        gap:
            10px !important;

        padding-inline:
            2px 22px !important;
    }


    .mtg-payment-rail
    .mtg-payment-card-v2 {
        min-height:
            118px !important;

        height:
            118px !important;
    }


    /*
     * En móvil mandan el dedo y el scroll-snap.
     */
    .mtg-payment-rail__nav {
        display:
            none;
    }


    .mtg-payment-rail__meta {
        margin-top:
            6px;
    }
}