/* UltraPay artwork supplied in ultrapay_logo_themes.
   The source contains a secondary payment brand below the wordmark; these
   fixed-ratio crops expose only the UltraPay mark. */

.uf-card-brand-crop,
.uf-card-method-logo,
.uf-modal-brand-crop,
.uf-modal-method-logo,
.uf-footer-method-logo,
.uf-footer-brand-crop {
    position: relative;
    display: block;
    overflow: hidden;
    flex: 0 0 auto;
    line-height: 0;
}

.uf-card-brand-crop img,
.uf-modal-brand-crop img,
.uf-footer-brand-crop img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: auto;
    max-width: none;
}

.uf-card-method-logo,
.uf-modal-method-logo,
.uf-footer-method-logo {
    display: grid;
    place-items: center;
}

.uf-card-method-logo img,
.uf-modal-method-logo img,
.uf-footer-method-logo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

/* Desktop and mobile payment-method cards. */
.dep-method-icon.uf-method-visual,
.wd-method-icon.uf-method-visual {
    --uf-method-color: #60a5fa;
    position: relative;
    width: 164px;
    height: 80px;
    padding: 7px 10px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, .24);
    border-radius: 13px;
    background: linear-gradient(145deg, #111827, #07101f) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.mdep-method-icon.uf-method-visual,
.mwd-method-icon.uf-method-visual {
    --uf-method-color: #60a5fa;
    position: relative;
    width: 112px;
    height: 60px;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: 10px;
    background: linear-gradient(145deg, #111827, #07101f) !important;
}

.uf-method-visual::before {
    content: '';
    position: absolute;
    right: 7px;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--uf-method-color);
    box-shadow: 0 0 10px var(--uf-method-color);
}

.uf-method-visual .uf-card-brand-crop {
    width: 142px;
    height: 38px;
}

.uf-method-visual .uf-card-brand-crop img { width: 142px; }
.uf-method-visual .uf-card-method-logo { width: 142px; height: 62px; }

.mdep-method-icon.uf-method-visual .uf-card-brand-crop,
.mwd-method-icon.uf-method-visual .uf-card-brand-crop {
    width: 100px;
    height: 28px;
}

.mdep-method-icon.uf-method-visual .uf-card-brand-crop img,
.mwd-method-icon.uf-method-visual .uf-card-brand-crop img { width: 100px; }
.mdep-method-icon.uf-method-visual .uf-card-method-logo,
.mwd-method-icon.uf-method-visual .uf-card-method-logo { width: 100px; height: 48px; }

/* Checkout header: brand wordmark plus the selected method icon. */
.ufc-modal .ufc-provider-mark.ufc-provider-mark-logo {
    position: relative;
    display: flex;
    width: 154px;
    height: 64px;
    padding: 7px 10px;
    box-sizing: border-box;
    place-items: initial;
}

.ufc-provider-mark-logo .uf-modal-brand-crop {
    width: 132px;
    height: 36px;
}

.ufc-provider-mark-logo .uf-modal-brand-crop img { width: 132px; }
.ufc-provider-mark-logo .uf-modal-method-logo { width: 132px; height: 48px; }

.ufc-provider-mark-logo.ufc-provider-mark-dedicated .ufc-method-emblem { display: none; }

.ufc-provider-mark-logo .ufc-method-emblem {
    position: absolute;
    right: 7px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: var(--ufc-method-color);
    background: #0f172a;
    font-size: .62rem;
}

/* Footer provider tile. */
.pro-footer-payment-item.pro-footer-payment-item-ultrapay,
.mfooter-payment-item.mfooter-payment-item-ultrapay {
    flex-direction: column;
    gap: 1px;
    border: 1px solid rgba(96, 165, 250, .2);
    background: linear-gradient(145deg, #111827, #07101f);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.pro-footer-payment-item-ultrapay .uf-footer-brand-crop {
    width: 112px;
    height: 31px;
}

.pro-footer-payment-item-ultrapay .uf-footer-brand-crop img { width: 112px; }
.pro-footer-payment-item-ultrapay .uf-footer-method-logo { width: 126px; height: 46px; }

.mfooter-payment-item-ultrapay .uf-footer-brand-crop {
    width: 80px;
    height: 22px;
}

.mfooter-payment-item-ultrapay .uf-footer-brand-crop img { width: 80px; }
.mfooter-payment-item-ultrapay .uf-footer-method-logo { width: 92px; height: 34px; }

.pro-footer-payment-item-ultrapay .uf-footer-method-logo + .uf-footer-methods,
.mfooter-payment-item-ultrapay .uf-footer-method-logo + .uf-footer-methods { display: none; }

.uf-footer-methods {
    display: block;
    overflow: hidden;
    width: 100%;
    color: #93c5fd;
    font-size: 7px;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: .015em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mfooter-payment-item-ultrapay .uf-footer-methods { font-size: 5.8px; }

.uf-brand-text-fallback {
    color: #fff;
    font-size: .88rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.02em;
}

@media (max-width: 600px) {
    .ufc-modal .ufc-provider-mark.ufc-provider-mark-logo {
        width: 118px;
        height: 54px;
        padding: 6px 10px;
    }

    .ufc-provider-mark-logo .uf-modal-brand-crop {
        width: 96px;
        height: 27px;
    }

    .ufc-provider-mark-logo .uf-modal-brand-crop img { width: 96px; }
    .ufc-provider-mark-logo .uf-modal-method-logo { width: 96px; height: 40px; }
    .ufc-provider-mark-logo .ufc-method-emblem { right: 5px; bottom: 4px; width: 18px; height: 18px; font-size: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dep-method-card:hover .uf-method-visual,
    .wd-method-card:hover .uf-method-visual { transform: none; }
}