/*
 * Clear-cart link + confirmation dialog (peptidology4, flag
 * pep_clear_cart_enabled). Two placements share one link style: the cart
 * page's actions cell and the FunnelKit side cart. The dialog is a native
 * <dialog> in the top layer, so it sits above the side cart without z-index
 * games. Tokens come from style.css (--primary-color, fonts) and
 * shell-redesign.css (--pep-ink/--pep-muted/--pep-line/--pep-field), with
 * literal fallbacks so the file also reads on its own.
 */

.pep-clear-cart {
    font: 500 14px/1.4 var(--primary-font, system-ui, sans-serif);
    color: var(--pep-muted, #6a6570);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    transition: color .2s ease;
}

.pep-clear-cart:hover,
.pep-clear-cart:focus-visible {
    color: var(--primary-color, #de0076);
}

.pep-clear-cart.is-busy {
    opacity: .5;
    pointer-events: none;
}

/* Cart page: a quiet link beside the Update cart button. */
.woocommerce-cart .actions .pep-clear-cart--cart {
    display: inline-block;
    margin-left: 18px;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .woocommerce-cart .actions .pep-clear-cart--cart {
        display: block;
        margin: 14px 0 0;
        text-align: center;
    }
}

/* FunnelKit side cart: right-aligned under the item list, same weight as
   FunnelKit's own "Continue shopping" link. */
#fkcart-modal .pep-clear-cart--side,
.fkcart-modal-container .pep-clear-cart--side {
    display: block;
    text-align: right;
    margin: 8px 0 2px;
    font-size: 13px;
}

/* ---- confirmation dialog ---- */
/* fit-content, not auto: a fixed-position dialog has left+right insets, so
   width:auto would stretch it edge to edge and pin the card to the left. */
dialog.pep-confirm {
    border: 0;
    padding: 0;
    background: transparent;
    width: fit-content;
    max-width: calc(100vw - 24px);
    overflow: visible;
}

dialog.pep-confirm::backdrop {
    background: rgba(23, 20, 25, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.pep-confirm__card {
    box-sizing: border-box;
    width: min(92vw, 380px);
    margin: 0;
    padding: 28px 26px 22px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(23, 20, 25, .4);
    font-family: var(--primary-font, system-ui, sans-serif);
    color: var(--pep-ink, #171419);
}

.pep-confirm__title {
    margin: 0 0 8px;
    font: 700 20px/1.25 var(--secondary-font, var(--primary-font, system-ui, sans-serif));
    letter-spacing: -.01em;
    color: var(--pep-ink, #171419);
    text-transform: none; /* style.css capitalizes every word in h2 */
}

.pep-confirm__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--pep-muted, #6a6570);
}

.pep-confirm__error {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #b3261e;
}

.pep-confirm__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
}

.pep-confirm__btn {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 100px;
    height: 44px;
    padding: 0 20px;
    font: 600 15px/1 var(--primary-font, system-ui, sans-serif);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.pep-confirm__btn--ghost {
    background: var(--pep-field, #f4f1f5);
    color: var(--pep-ink, #171419);
}

.pep-confirm__btn--ghost:hover {
    background: var(--pep-line, #ece8ec);
}

.pep-confirm__btn--primary {
    background: var(--primary-color, #de0076);
    color: #fff;
}

.pep-confirm__btn--primary:hover {
    background: var(--secondary-color, #ee6d20);
}

.pep-confirm__btn:disabled {
    opacity: .6;
    cursor: default;
}

.pep-confirm__btn:focus-visible {
    outline: 2px solid var(--primary-color, #de0076);
    outline-offset: 2px;
}

.pep-confirm.is-busy .pep-confirm__btn--primary {
    background: var(--pep-muted, #6a6570);
}

@media (max-width: 480px) {
    .pep-confirm__actions {
        flex-direction: column-reverse;
    }
    .pep-confirm__btn {
        width: 100%;
        height: 48px;
    }
}