/*
 * Soulmkt_MercadoPago — parcelamento do Mercado Pago (DEV-273).
 * Texto abaixo do preco, link do modal e o modal de meios de pagamento.
 */

.soulmkt-mercadopago-installments,
.soulmkt-mercadopago-installments-modal {
    --soulmkt-mp-text: #333;
    --soulmkt-mp-muted: #737373;
    --soulmkt-mp-interest-free: #00a650;
    --soulmkt-mp-link: #3483fa;
    --soulmkt-mp-border: #e5e5e5;
    --soulmkt-mp-surface: #fff;
    --soulmkt-mp-radius: 0.375rem;
}

.soulmkt-mercadopago-installments {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--soulmkt-mp-text);
}

/* Sem o texto da API a raiz nao ocupa espaco, mas continua no layout: e ela que o
   IntersectionObserver observa. */
.soulmkt-mercadopago-installments--ready {
    margin-top: 0.25rem;
}

.soulmkt-mercadopago-installments__fallback[hidden],
.soulmkt-mercadopago-installments__summary[hidden],
.soulmkt-mercadopago-installments__link[hidden] {
    display: none;
}

.soulmkt-mercadopago-installments--product {
    font-size: 1rem;
}

/* Step de pagamento: caixa de destaque na largura do formulario do cartao, com
   icone de cartao, o resumo das parcelas e o link do modal. */
.soulmkt-mercadopago-installments--checkout {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* Respiro em cima tambem: no cartao separado a caixa vem logo depois do select
       de emissor, que so aparece quando o Mercado Pago pede o banco. */
    margin: 1rem 0;
    padding: 0.875rem 1rem 0.875rem 3.25rem;
    border: 1px solid #cfe3fd;
    border-radius: var(--soulmkt-mp-radius);
    background: #f2f8ff;
    font-size: 0.9375rem;
}

.soulmkt-mercadopago-installments--checkout::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
    background: var(--soulmkt-mp-link);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3Cline x1='6' y1='15' x2='10' y2='15'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3Cline x1='6' y1='15' x2='10' y2='15'/%3E%3C/svg%3E") center / contain no-repeat;
}

.soulmkt-mercadopago-installments--checkout .soulmkt-mercadopago-installments__summary {
    font-weight: 600;
}

.soulmkt-mercadopago-installments--checkout .soulmkt-mercadopago-installments__link {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

/* O checkout do tema estiliza todo botao dos passos com seletor de ID
   (.checkout-onepage-process #checkoutSteps button: padding 0.75rem 1.5rem,
   font-weight 500), que vence a classe acima e recuava o link. ID + duas classes
   aqui para passar daquele peso, so dentro deste bloco. */
#checkoutSteps .soulmkt-mercadopago-installments .soulmkt-mercadopago-installments__link {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-weight: 600;
}

.soulmkt-mercadopago-installments--checkout .soulmkt-mercadopago-installments__link::after {
    content: " \203A";
}

/* Total do carrinho e do resumo do checkout: alinhado a direita, como o valor
   e o "inclui impostos" logo acima e abaixo. */
.soulmkt-mercadopago-installments--quote {
    align-items: flex-end;
    width: 100%;
    text-align: right;
}

.soulmkt-mercadopago-installments--quote .soulmkt-mercadopago-installments__link {
    text-align: right;
}

.soulmkt-mercadopago-installments__summary {
    display: block;
}

.soulmkt-mercadopago-installments__summary--interest-free {
    color: var(--soulmkt-mp-interest-free);
}

.soulmkt-mercadopago-installments__cft {
    color: var(--soulmkt-mp-muted);
    font-size: 0.75rem;
}

.soulmkt-mercadopago-installments__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--soulmkt-mp-link);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.soulmkt-mercadopago-installments__link:hover,
.soulmkt-mercadopago-installments__link:focus-visible {
    text-decoration: underline;
}

/* ------------------------------------------------------------ modal */

/* Posicao explicita: reset global de margin no tema anula o margin:auto que o
   navegador usa para centralizar o <dialog>, e o modal cola na esquerda. */
.soulmkt-mercadopago-installments-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(36rem, calc(100vw - 2rem));
    height: fit-content;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    padding: 0;
    border: 0;
    border-radius: var(--soulmkt-mp-radius);
    background: var(--soulmkt-mp-surface);
    color: var(--soulmkt-mp-text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: auto;
}

.soulmkt-mercadopago-installments-modal[open] {
    display: flex;
    flex-direction: column;
}

.soulmkt-mercadopago-installments-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.soulmkt-mercadopago-installments-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--soulmkt-mp-border);
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--soulmkt-mp-surface);
}

.soulmkt-mercadopago-installments-modal__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.soulmkt-mercadopago-installments-modal__close {
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--soulmkt-mp-muted);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.soulmkt-mercadopago-installments-modal__body {
    padding: 0 1.5rem 1.5rem;
}

.soulmkt-mercadopago-installments-modal__message {
    margin: 1.5rem 0 0;
    color: var(--soulmkt-mp-muted);
}

.soulmkt-mercadopago-installments-modal__section {
    padding-top: 1.25rem;
}

.soulmkt-mercadopago-installments-modal__section + .soulmkt-mercadopago-installments-modal__section {
    margin-top: 1.25rem;
    border-top: 1px solid var(--soulmkt-mp-border);
}

.soulmkt-mercadopago-installments-modal__section-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.soulmkt-mercadopago-installments-modal__subtitle {
    margin: 1rem 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.soulmkt-mercadopago-installments-modal__subtitle--interest-free {
    color: var(--soulmkt-mp-interest-free);
}

.soulmkt-mercadopago-installments-modal__logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.soulmkt-mercadopago-installments-modal__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.25rem;
    border: 1px solid var(--soulmkt-mp-border);
    border-radius: var(--soulmkt-mp-radius);
    font-size: 0.75rem;
    text-align: center;
}

.soulmkt-mercadopago-installments-modal__logo img {
    max-width: 100%;
    max-height: 1.75rem;
}

.soulmkt-mercadopago-installments-modal__plans {
    margin: 0;
    padding: 0;
    list-style: none;
}

.soulmkt-mercadopago-installments-modal__plan {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--soulmkt-mp-border);
    font-size: 0.875rem;
}

.soulmkt-mercadopago-installments-modal__plan-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}

.soulmkt-mercadopago-installments-modal__plan-cft {
    color: var(--soulmkt-mp-muted);
    font-size: 0.75rem;
}