/* ═══════════════════════════════════════════════════════
   Pickup Store — Clique e Retire
   Estética: editorial / branco-preto-cinza / sem bordas redondas
   ═══════════════════════════════════════════════════════ */

/* O @import do Google Fonts saiu daqui.
 *
 * Ele era a causa REAL do pisca: @import bloqueia a renderização até o CSS
 * remoto responder, e é a pior forma de carregar fonte — o navegador só
 * descobre o pedido depois de baixar e interpretar ESTE arquivo, então a
 * requisição sai tarde e em série, nunca em paralelo.
 *
 * Como o popup passou a herdar a fonte do tema, as duas famílias não são mais
 * usadas e a requisição externa deixou de existir. Um pedido de rede a menos no
 * caminho da compra. */

:root {
    --ffd-black:   #111111;
    --ffd-gray1:   #333333;
    --ffd-gray2:   #666666;
    --ffd-gray3:   #999999;
    --ffd-gray4:   #cccccc;
    --ffd-gray5:   #eeeeee;
    --ffd-white:   #ffffff;
    --ffd-green:   #1a5c35;
    --ffd-green-bg:#eaf3ed;
    --ffd-red:     #c0392b;
    --ffd-red-bg:  #fdf0ee;
    /* Fonte do TEMA, não uma própria.
     *
     * Antes pedia 'DM Sans' e 'Playfair Display' — mas o frontend nunca
     * carregou essas fontes (o único Google Fonts do plugin é de telas de
     * admin). O navegador desenhava com a fallback e, se o tema tivesse a
     * fonte, trocava depois: era o "pisca" de ~1s ao abrir o popup.
     *
     * Carregar as fontes resolveria o pisca, mas ao custo de uma requisição
     * externa no caminho da compra — o oposto do que se quer aqui. Herdar do
     * tema custa zero e ainda faz o popup parecer parte do site.
     *
     * Os fallbacks ficam para o caso de o tema não definir fonte alguma. */
    --ffd-font-body: inherit;
    /* Serifada de SISTEMA para os títulos.
     *
     * `inherit` puro deixava o popup com a mesma fonte do corpo do tema (Arial),
     * e o bloco perdia a hierarquia entre título e texto. Estas famílias já
     * existem em Windows, macOS e Linux — nenhuma requisição, nenhum pisca, e o
     * ar editorial do popup volta.
     *
     * A última é `serif`: se o sistema não tiver nenhuma das anteriores, o
     * navegador usa a serifada padrão dele — nunca cai no sem-serifa do corpo. */
    --ffd-font-head: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif;
}

/* ── Overlay ── */
.ffd-pickup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    /* Acima da gaveta do mini carrinho do Woodmart (wd-side-hidden usa faixa
       ~500-1000) e do overlay dela. A gaveta segue aberta e funcional por
       baixo: nosso modal não a fecha, só cobre. Sem isto, o overlay do tema
       capturava os cliques e o campo de CEP não recebia digitação. */
    z-index: 999990;
    animation: ffdFadeIn .32s ease both;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ── Modal shell ── */
.ffd-pickup-modal {
    background: var(--ffd-white);
    border-radius: 0;
    width: 100%;
    max-width: 660px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 48px rgba(0,0,0,.28);
    position: relative;
    /* Leve atraso: o overlay escurece primeiro, o card entra em seguida. */
    animation: ffdSlideUp .42s cubic-bezier(.22,.84,.36,1) .06s both;
    font-family: var(--ffd-font-body);
}

@keyframes ffdFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ffdSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.ffd-pickup-modal__header {
    background: var(--ffd-color-primary, var(--ffd-black));
    padding: 10px 35px 10px;
    position: relative;
}

.ffd-pickup-modal__header h2 {
    margin: 0 !important;
    font-family: var(--ffd-font-head) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--ffd-white) !important;
    line-height: 1.2;
    letter-spacing: -.2px;
}

.ffd-pickup-modal__subtitle {
    font-size: 15px !important;
    color: var(--ffd-gray4) !important;
    margin: 6px 0 0 !important;
    font-weight: 400;
}

.ffd-pickup-modal__close {
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--ffd-white) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    opacity: .7;
    transition: opacity .15s !important;
    padding: 4px !important;
}
.ffd-pickup-modal__close:hover { opacity: 1 !important; }

/* ── Body ── */
.ffd-pickup-modal__body {
    padding: 28px 32px 10px;
    background: var(--ffd-color-page-bg, var(--ffd-gray5));
}

/* ── Footer: "Só quero ver os produtos" ── */
.ffd-pickup-modal__footer {
    padding: 0 32px 10px;
    background: var(--ffd-color-page-bg, var(--ffd-gray5));
    text-align: center;
}

.ffd-pickup-modal__browse {
    font-size: 13px !important;
    color: #000000 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    background: none !important;
    border: none !important;
    cursor: pointer;
    font-weight: 800;
}

.ffd-pickup-modal__browse:hover {
    opacity: 0.65;
}

/* ── Mode cards grid ── */
.ffd-pickup-mode-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.ffd-pickup-mode-card {
    background: var(--ffd-white);
    border: 1px solid var(--ffd-gray4);
    border-radius: 0;
    padding: 15px 15px 15px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.ffd-pickup-mode-card:hover { border-color: var(--ffd-black); }

.ffd-pickup-mode-card:focus-visible {
    outline: 2px solid var(--ffd-black);
    outline-offset: -2px;
}

/* card expanded state (delivery CEP inline) */
.ffd-pickup-mode-card--expanded {
    cursor: default;
    border-color: var(--ffd-black);
}
.ffd-pickup-mode-card--expanded:hover { border-color: var(--ffd-black); }

.ffd-pickup-mode-card__icon {
    line-height: 1;
    display: flex;
    justify-content: center;
}

.ffd-pickup-mode-card__icon svg {
    width: 40px !important;
    height: 40px !important;
    color: var(--ffd-color-primary, var(--ffd-black));
    stroke: var(--ffd-color-primary, var(--ffd-black));
}

.ffd-pickup-mode-card__title {
    font-family: var(--ffd-font-head) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ffd-black) !important;
    line-height: 1.2;
}

.ffd-pickup-mode-card__price {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ffd-green) !important;
    background: var(--ffd-green-bg);
    padding: 3px 12px;
    border-radius: 0;
}

.ffd-pickup-mode-card__tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px !important;
    color: var(--ffd-gray2) !important;
    font-weight: 500;
}

.ffd-pickup-mode-card__tag .dashicons {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--ffd-gray3) !important;
}

.ffd-pickup-mode-card__address {
    font-size: 14px !important;
    color: var(--ffd-gray1) !important;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

.ffd-pickup-mode-card__address--sub {
    font-size: 13px !important;
    color: var(--ffd-gray2) !important;
    font-weight: 400;
}

.ffd-pickup-mode-card__confirm-btn {
    width: 100% !important;
    margin-top: 8px !important;
    padding: 10px !important;
    background: var(--ffd-btn-bg, var(--ffd-black)) !important;
    color: var(--ffd-btn-color, var(--ffd-white)) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--ffd-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .13s !important;
}
.ffd-pickup-mode-card__confirm-btn:hover {
    background: var(--ffd-btn-bg-hover, var(--ffd-gray1)) !important;
    color: var(--ffd-btn-color-hover, var(--ffd-white)) !important;
}

/* card de entrega: sem interação de hover (CEP já está visível inline) */
.ffd-pickup-mode-card--delivery { cursor: default !important; }
.ffd-pickup-mode-card--delivery:hover { border-color: var(--ffd-gray4) !important; }

.ffd-pickup-city-chip {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ffd-gray1) !important;
    background: var(--ffd-gray5);
    border: 1px solid var(--ffd-gray4);
    border-radius: 0;
    padding: 3px 12px;
    margin-top: 2px;
}

/* ── Inline CEP form (dentro do card Entrega Agendada) ── */
.ffd-inline-cep {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.ffd-inline-cep__label {
    font-size: 13px !important;
    color: var(--ffd-gray2) !important;
    font-weight: 500;
    text-align: center;
}

.ffd-inline-cep__row {
    display: flex;
    gap: 0;
}

.ffd-inline-cep__input {
    flex: 1;
    padding: 10px 12px !important;
    border: 1px solid var(--ffd-gray4) !important;
    border-right: none !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    color: var(--ffd-black) !important;
    background: var(--ffd-white) !important;
    font-family: var(--ffd-font-body) !important;
    letter-spacing: 1px;
    text-align: center;
    transition: border-color .15s;
    box-sizing: border-box;
}

.ffd-inline-cep__input:focus {
    outline: none !important;
    border-color: var(--ffd-black) !important;
}

.ffd-inline-cep__btn {
    padding: 10px 14px !important;
    background: var(--ffd-btn-bg, var(--ffd-black)) !important;
    color: var(--ffd-btn-color, var(--ffd-white)) !important;
    border: 1px solid var(--ffd-btn-bg, var(--ffd-black)) !important;
    border-radius: 0 !important;
    font-family: var(--ffd-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap;
    transition: background .15s !important;
}

.ffd-inline-cep__btn:hover:not(:disabled) {
    background: var(--ffd-btn-bg-hover, var(--ffd-gray1)) !important;
    color: var(--ffd-btn-color-hover, var(--ffd-white)) !important;
}
.ffd-inline-cep__btn:disabled { opacity: .5 !important; cursor: not-allowed !important; }

.ffd-inline-cep__result {
    font-size: 13px !important;
    font-weight: 500;
    padding: 8px 10px;
    text-align: center;
}

.ffd-inline-cep__result--ok  { background: var(--ffd-green-bg); color: var(--ffd-green) !important; }
.ffd-inline-cep__result--err { background: #f3f3f3; color: #000 !important; }

.ffd-inline-cep__zones-link {
    color: #000 !important;
    font-weight: 600;
    text-decoration: underline !important;
    cursor: pointer;
}
.ffd-inline-cep__zones-link:hover { opacity: .7; }

/* ── Modal de zonas ── */
.ffd-zones-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    /* Abre POR CIMA do modal de entrega (999990), que subiu para cobrir a
       gaveta do Woodmart. */
    z-index: 999995;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ffd-zones-modal {
    background: var(--ffd-white);
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,.25);
    font-family: var(--ffd-font-body);
    animation: ffdSlideUp .2s cubic-bezier(.22,.84,.36,1) both;
}

.ffd-zones-modal__header {
    background: var(--ffd-color-primary, var(--ffd-black));
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--ffd-font-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--ffd-white);
}

.ffd-zones-modal__close {
    color: var(--ffd-white) !important;
    text-decoration: none !important;
    font-size: 18px;
    opacity: .7;
    transition: opacity .13s;
}
.ffd-zones-modal__close:hover { opacity: 1; }

.ffd-zones-modal__body { padding: 16px 20px; }

.ffd-zones-modal__item {
    padding: 10px 0;
    border-bottom: 1px solid var(--ffd-gray5);
    font-size: 15px;
    color: var(--ffd-black);
}
.ffd-zones-modal__item:last-child { border-bottom: none; }

/* ── Location list (tela 2) ── */
.ffd-pickup-location-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
}

.ffd-pickup-location-item {
    background: var(--ffd-white);
    border: 1px solid var(--ffd-gray4);
    border-radius: 6px;
    padding: 18px 20px;
    cursor: pointer;
    transition: background .15s;
}

.ffd-pickup-location-item:hover  { background: var(--ffd-gray5); }
.ffd-pickup-location-item.selected { background: var(--ffd-gray5); outline: 2px solid var(--ffd-black); }

.ffd-pickup-location-item__name {
    font-family: var(--ffd-font-head) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--ffd-black) !important;
    margin-bottom: 4px;
}

.ffd-pickup-location-item__address {
    font-size: 14px !important;
    color: var(--ffd-gray2) !important;
}

/* ── Single location ── */
.ffd-pickup-single-location {
    background: var(--ffd-white);
    border: 1px solid var(--ffd-gray4);
    border-radius: 0;
    padding: 18px 20px;
    margin-bottom: 16px;
    border-left: 3px solid var(--ffd-black);
}

.ffd-pickup-single-location__name {
    font-family: var(--ffd-font-head) !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    color: var(--ffd-black) !important;
    margin-bottom: 4px;
}

.ffd-pickup-single-location__address {
    font-size: 14px !important;
    color: var(--ffd-gray2) !important;
}

/* ── Back button ── */
.ffd-pickup-back-btn {
    background: none !important;
    border: none !important;
    color: var(--ffd-gray2) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 18px !important;
    font-family: var(--ffd-font-body) !important;
    transition: color .12s !important;
}
.ffd-pickup-back-btn:hover { color: var(--ffd-black) !important; }

/* ── Select button ── */
.ffd-pickup-select-btn {
    width: 100% !important;
    padding: 15px !important;
    background: var(--ffd-black) !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--ffd-white) !important;
    font-family: var(--ffd-font-head) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .15s !important;
    margin-top: 12px !important;
    letter-spacing: .2px;
}
.ffd-pickup-select-btn:hover { background: var(--ffd-gray1) !important; }

/* ── Checkout section ── */
#ffd-pickup-checkout-section {
    border: 1px solid var(--ffd-gray4);
    border-left: 3px solid var(--ffd-black);
    padding: 20px 22px;
    margin: 20px 0;
    background: var(--ffd-white);
}

#ffd-pickup-checkout-section h3 {
    margin: 0 0 14px !important;
    font-family: var(--ffd-font-head) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--ffd-black) !important;
}

/* ── Fields ── */
.ffd-pickup-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.ffd-pickup-field label {
    display: block;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ffd-black) !important;
    margin-bottom: 5px;
}

.ffd-pickup-field input,
.ffd-pickup-field select {
    width: 100% !important;
    padding: 11px 13px !important;
    border: 1px solid var(--ffd-gray4) !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    color: var(--ffd-black) !important;
    background: var(--ffd-white) !important;
    box-sizing: border-box;
    font-family: var(--ffd-font-body) !important;
    transition: border-color .13s;
}

.ffd-pickup-field input:focus,
.ffd-pickup-field select:focus {
    outline: none !important;
    border-color: var(--ffd-black) !important;
}

/* ── Responsibility ── */
.ffd-pickup-responsibility {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--ffd-gray5);
    border: 1px solid var(--ffd-gray4);
    padding: 12px 14px;
    margin-top: 6px;
}

.ffd-pickup-responsibility input[type="checkbox"] {
    margin-top: 3px !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--ffd-black) !important;
    cursor: pointer;
}

.ffd-pickup-responsibility label {
    font-size: 14px !important;
    color: var(--ffd-gray1) !important;
    line-height: 1.5;
    cursor: pointer;
}

/* ── Change mode button ── */
.ffd-pickup-summary__change {
    background: none !important;
    border: 1px solid var(--ffd-gray4) !important;
    border-radius: 0 !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    color: var(--ffd-gray1) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-family: var(--ffd-font-body) !important;
    transition: border-color .13s, background .13s !important;
}
.ffd-pickup-summary__change:hover {
    border-color: var(--ffd-black) !important;
    background: var(--ffd-gray5) !important;
}

/* ── Cards de seleção de loja no CHECKOUT (cores vêm inline via JS) ── */
.ffd-loc-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 2 lojas: lado a lado no desktop. */
.ffd-loc-cards--2up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
/* 3+ lojas: área rolável (mostra ~3, o resto rola). */
.ffd-loc-cards--scroll {
    max-height: 264px;
    overflow-y: auto;
    padding-right: 4px;
}
.ffd-loc-card {
    transition: filter .13s, box-shadow .13s;
}
.ffd-loc-card:hover {
    filter: brightness(0.97);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.ffd-loc-card:focus-visible {
    outline: 2px solid var(--ffd-color-primary, #676f48);
    outline-offset: 2px;
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .ffd-pickup-mode-cards { grid-template-columns: 1fr; }
    /* 2 lojas empilham no mobile. */
    .ffd-loc-cards--2up { grid-template-columns: 1fr; }

    .ffd-pickup-modal {
        max-height: 90vh !important;
        max-width: calc(100% - 32px) !important;
    }

    .ffd-pickup-modal__header { padding: 22px 20px 18px; }
    .ffd-pickup-modal__body   { padding: 20px 20px 10px; }
    .ffd-pickup-modal__footer { padding: 0 20px 10px; }
}

/* ---- Aviso de conflito: a loja não vende o que está no carrinho ----------
   Dentro do modal, e não no confirm() do navegador. O nativo aparece colado
   no topo da janela, longe de onde o cliente está olhando, e parece erro do
   site em vez de uma pergunta sobre a escolha que ele acabou de fazer.

   As MESMAS variáveis do modal (--ffd-btn-bg, --ffd-color-primary): o aviso é
   parte dele, não um enxerto. E !important em tudo que o Woodmart estiliza —
   o tema tem regras próprias para button, e sem isso o botão volta ao visual
   dele no meio do nosso modal. */
.ffd-pickup-conflict {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba( 0, 0, 0, .5 );
}

.ffd-pickup-conflict__box {
    width: 100%;
    max-width: 420px;
    padding: 28px 24px 24px;
    background: var(--ffd-white) !important;
    /* Sem raio, como o modal e os cards — a identidade do plugin é reta. */
    border-radius: 0 !important;
    border-top: 3px solid var(--ffd-color-primary, var(--ffd-black));
    box-shadow: 0 8px 32px rgba( 0, 0, 0, .22 );
    text-align: center;
    font-family: var(--ffd-font-body) !important;
}

.ffd-pickup-conflict__text {
    margin: 0 0 8px !important;
    font-family: var(--ffd-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--ffd-black) !important;
}

.ffd-pickup-conflict__hint {
    margin: 0 0 22px !important;
    font-family: var(--ffd-font-body) !important;
    font-size: 13px !important;
    color: var(--ffd-gray2) !important;
}

.ffd-pickup-conflict__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ffd-pickup-conflict__actions button {
    flex: 1 1 auto !important;
    min-width: 130px !important;
    padding: 11px 18px !important;
    border-radius: 0 !important;
    font-family: var(--ffd-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: background .13s !important;
}

/* "Continuar" usa o botão primário do tema — é a mesma cor do "confirmar" do
   card de loja, logo atrás dele. */
.ffd-pickup-conflict__yes {
    background: var(--ffd-btn-bg, var(--ffd-black)) !important;
    color: var(--ffd-btn-color, var(--ffd-white)) !important;
    border: none !important;
}

.ffd-pickup-conflict__yes:hover {
    background: var(--ffd-btn-bg-hover, var(--ffd-gray1)) !important;
    color: var(--ffd-btn-color-hover, var(--ffd-white)) !important;
}

/* "Escolher outra" é a saída conservadora — nada se perde. Contorno, como os
   campos do modal: presente, sem competir com a ação principal. */
.ffd-pickup-conflict__no {
    background: var(--ffd-white) !important;
    color: var(--ffd-black) !important;
    border: 1px solid var(--ffd-gray4) !important;
}

.ffd-pickup-conflict__no:hover {
    background: var(--ffd-gray5) !important;
    border-color: var(--ffd-gray3) !important;
    color: var(--ffd-black) !important;
}