/* =========================================================
   AGIPEC — THANK YOU / PEDIDO RECEBIDO
========================================================= */


/* =========================================================
   1. VARIÁVEIS
========================================================= */

body.woocommerce-order-received {

    --ty-text: #101828;
    --ty-muted: #667085;

    --ty-border: #e4e7ec;

    --ty-primary: var(--color-primary);
    --ty-primary-dark: var(--color-primary-dark);

    --ty-accent: var(--color-accent);
    --ty-accent-dark: var(--color-accent-dark);

    --ty-success: #15803d;
    --ty-success-soft: #ecfdf3;

    --ty-danger: #b42318;
    --ty-danger-soft: #fff1f0;

    --ty-radius: 16px;

}


/* =========================================================
   2. CONTAINER
========================================================= */

.agipec-thankyou {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding: 30px 0 60px;

    color: var(--ty-text);
}


/* =========================================================
   3. STATUS
========================================================= */

.agipec-thankyou-status {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 22px;

    padding: 25px;

    border-radius: var(--ty-radius);
}


.agipec-thankyou-status--success {

    background:
            linear-gradient(
                    135deg,
                    #f0fdf4 0%,
                    #ffffff 100%
            );

    border: 1px solid #bbefca;
}


.agipec-thankyou-status--error {

    background:
            var(--ty-danger-soft);

    border: 1px solid #fecaca;
}


/* =========================================================
   4. ÍCONE STATUS
========================================================= */

.agipec-thankyou-status__icon {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    border-radius: 50%;
}


.agipec-thankyou-status--success
.agipec-thankyou-status__icon {

    background: var(--ty-success);

    color: #ffffff;

    box-shadow:
            0 8px 20px
            rgba(21, 128, 61, .18);
}


.agipec-thankyou-status--error
.agipec-thankyou-status__icon {

    background: var(--ty-danger);

    color: #ffffff;
}


.agipec-thankyou-status__icon svg {

    width: 25px;
    height: 25px;
}


/* =========================================================
   5. STATUS TEXTO
========================================================= */

.agipec-thankyou-eyebrow {

    display: block;

    margin-bottom: 5px;

    color: var(--ty-success);

    font-size: .72rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .06em;
}


.agipec-thankyou-status--error
.agipec-thankyou-eyebrow {

    color: var(--ty-danger);
}


.agipec-thankyou-status h1 {

    margin: 0 0 7px;

    color: var(--ty-primary-dark);

    font-size: clamp(1.45rem, 3vw, 2rem);

    font-weight: 850;

    line-height: 1.15;

    letter-spacing: -.02em;
}


.agipec-thankyou-status p {

    max-width: 760px;

    margin: 0;

    color: #475467;

    font-size: .9rem;

    line-height: 1.6;
}


/* =========================================================
   6. PROGRESSO
========================================================= */

.agipec-order-progress {

    display: grid;

    grid-template-columns:
        auto 1fr
        auto 1fr
        auto 1fr
        auto;

    align-items: center;

    margin-bottom: 22px;

    padding: 18px 22px;

    background: #ffffff;

    border: 1px solid var(--ty-border);

    border-radius: 14px;

    box-shadow:
            0 4px 17px
            rgba(16, 24, 40, .045);
}


.agipec-progress-item {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #98a2b3;
}


.agipec-progress-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    background: #f2f4f7;

    border: 1px solid #e4e7ec;

    border-radius: 50%;
}


.agipec-progress-icon svg {

    width: 16px;
    height: 16px;
}


.agipec-progress-item strong {

    display: block;

    color: #667085;

    font-size: .75rem;

    font-weight: 750;
}


.agipec-progress-item small {

    display: block;

    margin-top: 1px;

    color: #98a2b3;

    font-size: .63rem;
}


.agipec-progress-line {

    height: 1px;

    margin: 0 12px;

    background: #e4e7ec;
}


/* completo */

.agipec-progress-item.is-complete
.agipec-progress-icon {

    background: var(--ty-success);

    color: #ffffff;

    border-color: var(--ty-success);
}


.agipec-progress-item.is-complete strong {

    color: var(--ty-success);
}


/* atual */

.agipec-progress-item.is-current
.agipec-progress-icon {

    background: #eef4ff;

    color: var(--ty-primary);

    border-color: #b9ccff;
}


.agipec-progress-item.is-current strong {

    color: var(--ty-primary);
}


/* =========================================================
   7. GRID
========================================================= */

.agipec-thankyou-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(300px, .6fr);

    align-items: start;

    gap: 20px;

    margin-bottom: 20px;
}


/* =========================================================
   8. CARD
========================================================= */

.agipec-thankyou-card,
.agipec-thankyou-next {

    background: #ffffff;

    border: 1px solid var(--ty-border);

    border-radius: var(--ty-radius);

    box-shadow:
            0 5px 20px
            rgba(16, 24, 40, .05);
}


.agipec-thankyou-card {

    padding: 22px;
}


/* =========================================================
   9. HEADER CARD
========================================================= */

.agipec-thankyou-card__header {

    display: flex;

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

    gap: 16px;

    margin-bottom: 19px;

    padding-bottom: 16px;

    border-bottom: 1px solid #eef1f5;
}


.agipec-thankyou-card__eyebrow {

    display: block;

    margin-bottom: 2px;

    color: var(--ty-muted);

    font-size: .66rem;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .06em;
}


.agipec-thankyou-card h2,
.agipec-thankyou-next h2 {

    margin: 0;

    color: var(--ty-primary-dark);

    font-size: 1.05rem;

    font-weight: 850;
}


.agipec-order-number {

    padding: 6px 10px;

    background: #f2f4f7;

    color: var(--ty-primary-dark);

    border-radius: 999px;

    font-size: .75rem;

    font-weight: 800;
}


/* =========================================================
   10. INFORMAÇÕES
========================================================= */

.agipec-order-info-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.agipec-order-info {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px;

    background: #f8fafc;

    border: 1px solid #eef1f5;

    border-radius: 10px;
}


.agipec-order-info__icon {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    background: #ffffff;

    color: var(--ty-primary);

    border: 1px solid var(--ty-border);

    border-radius: 9px;
}


.agipec-order-info__icon svg {

    width: 17px;
    height: 17px;
}


.agipec-order-info small {

    display: block;

    margin-bottom: 2px;

    color: var(--ty-muted);

    font-size: .65rem;
}


.agipec-order-info strong {

    display: block;

    color: #344054;

    font-size: .8rem;

    font-weight: 750;
}


.agipec-order-info--total strong {

    color: var(--ty-accent-dark);

    font-size: .93rem;

    font-weight: 850;
}


/* =========================================================
   11. EMAIL
========================================================= */

.agipec-order-email {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 14px;

    padding: 11px 13px;

    background: #f5f8ff;

    color: #475467;

    border: 1px solid #dce5ff;

    border-radius: 9px;
}


.agipec-order-email svg {

    flex: 0 0 17px;

    width: 17px;
    height: 17px;

    color: var(--ty-primary);
}


.agipec-order-email p {

    margin: 0;

    font-size: .72rem;

    line-height: 1.4;
}


/* =========================================================
   12. PRÓXIMOS PASSOS
========================================================= */

.agipec-thankyou-next {

    padding: 22px;
}


.agipec-thankyou-next__icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 12px;

    background: #eef4ff;

    color: var(--ty-primary);

    border-radius: 10px;
}


.agipec-thankyou-next__icon svg {

    width: 21px;
    height: 21px;
}


.agipec-thankyou-next h2 {

    margin-bottom: 17px;
}


.agipec-next-step {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 15px;
}


.agipec-next-step:last-child {

    margin-bottom: 0;
}


.agipec-next-step > span {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 25px;

    width: 25px;
    height: 25px;

    background: var(--ty-primary-dark);

    color: #ffffff;

    border-radius: 50%;

    font-size: .66rem;

    font-weight: 850;
}


.agipec-next-step strong {

    display: block;

    color: #344054;

    font-size: .76rem;

    font-weight: 800;
}


.agipec-next-step p {

    margin: 2px 0 0;

    color: var(--ty-muted);

    font-size: .69rem;

    line-height: 1.45;
}


/* =========================================================
   13. BOTÕES
========================================================= */

.agipec-thankyou-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 18px;
}


.agipec-thankyou-actions--bottom {

    margin: 0 0 20px;
}


.agipec-thankyou-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 44px;

    padding: 10px 16px;

    border-radius: 9px;

    font-size: .78rem;

    font-weight: 750;

    transition:
            transform .15s ease,
            filter .18s ease;
}


.agipec-thankyou-btn svg {

    width: 17px;
    height: 17px;
}


.agipec-thankyou-btn--primary {

    background:
            linear-gradient(
                    180deg,
                    var(--ty-accent) 0%,
                    var(--ty-accent-dark) 100%
            );

    color: #ffffff;
}


.agipec-thankyou-btn--primary:hover {

    color: #ffffff;

    filter: brightness(1.04);

    transform: translateY(-1px);
}


.agipec-thankyou-btn--secondary {

    background: #ffffff;

    color: var(--ty-primary);

    border: 1px solid #cdd9f5;
}


.agipec-thankyou-btn--secondary:hover {

    background: #f5f8ff;

    color: var(--ty-primary-dark);
}


/* =========================================================
   14. GATEWAYS
========================================================= */

.agipec-thankyou-gateway {

    margin-bottom: 20px;
}


.agipec-thankyou-gateway:empty {

    display: none;
}


/* =========================================================
   15. DETALHES NATIVOS WOO
========================================================= */

.agipec-thankyou-order-details {

    margin-top: 20px;
}


.agipec-thankyou-order-details
.woocommerce-order-details,
.agipec-thankyou-order-details
.woocommerce-customer-details {

    margin-bottom: 20px;

    padding: 21px;

    background: #ffffff;

    border: 1px solid var(--ty-border);

    border-radius: 14px;

    box-shadow:
            0 4px 17px
            rgba(16, 24, 40, .04);
}


.agipec-thankyou-order-details h2 {

    margin: 0 0 16px;

    color: var(--ty-primary-dark);

    font-size: 1.05rem;

    font-weight: 850;
}


/* =========================================================
   16. TABELA
========================================================= */

.agipec-thankyou-order-details
table.shop_table {

    margin: 0;

    border: 1px solid var(--ty-border);

    border-radius: 10px;
}


.agipec-thankyou-order-details
table.shop_table th,
.agipec-thankyou-order-details
table.shop_table td {

    padding: 12px;

    font-size: .78rem;
}


/* =========================================================
   17. ENDEREÇO
========================================================= */

.agipec-thankyou-order-details
address {

    padding: 13px;

    background: #f8fafc;

    color: #475467;

    border: 1px solid var(--ty-border);

    border-radius: 9px;

    font-size: .78rem;

    line-height: 1.65;
}


/* =========================================================
   18. MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .agipec-thankyou {

        padding:
                15px 0 35px;
    }


    .agipec-thankyou-status {

        gap: 12px;

        margin-bottom: 14px;

        padding: 17px 14px;

        border-radius: 12px;
    }


    .agipec-thankyou-status__icon {

        flex-basis: 40px;

        width: 40px;
        height: 40px;
    }


    .agipec-thankyou-status__icon svg {

        width: 20px;
        height: 20px;
    }


    .agipec-thankyou-status h1 {

        font-size: 1.25rem;
    }


    .agipec-thankyou-status p {

        font-size: .76rem;

        line-height: 1.5;
    }


    /* PROGRESSO */

    .agipec-order-progress {

        display: grid;

        grid-template-columns: 1fr;

        gap: 7px;

        padding: 13px;
    }


    .agipec-progress-line {

        width: 1px;
        height: 12px;

        margin:
                -1px 0 -1px 16px;
    }


    .agipec-progress-item {

        min-width: 0;
    }


    /* GRID */

    .agipec-thankyou-grid {

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .agipec-thankyou-card,
    .agipec-thankyou-next {

        padding: 15px 13px;

        border-radius: 12px;
    }


    .agipec-order-info-grid {

        grid-template-columns: 1fr;

        gap: 8px;
    }


    /* AÇÕES */

    .agipec-thankyou-actions {

        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }


    .agipec-thankyou-btn {

        width: 100%;

        min-height: 47px;
    }


    /* DETALHES */

    .agipec-thankyou-order-details
    .woocommerce-order-details,
    .agipec-thankyou-order-details
    .woocommerce-customer-details {

        padding: 14px 12px;

        border-radius: 11px;
    }

}


/* =========================================================
   19. MOBILE MUITO PEQUENO
========================================================= */

@media (max-width: 420px) {

    .agipec-thankyou-status {

        align-items: flex-start;
    }


    .agipec-thankyou-status h1 {

        font-size: 1.14rem;
    }


    .agipec-thankyou-card__header {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }

}


/* =========================================================
   20. ACESSIBILIDADE
========================================================= */

.agipec-thankyou a:focus-visible {

    outline:
            3px solid
            rgba(0, 54, 213, .18);

    outline-offset: 2px;
}


@media (prefers-reduced-motion: reduce) {

    .agipec-thankyou *,
    .agipec-thankyou *::before,
    .agipec-thankyou *::after {

        transition: none !important;

        animation: none !important;
    }

}