/* Product page — "Quick Purchase" pieces from 768px (components/product/v5/checkout.php): the three steps (thin
 * gradient numerals 01 / 02 / 03 with a tick once done), the compact Crypto / Card / PayPal cards with their 3D
 * icons, and a tick in each valid field. product-checkout-hero.js sets .is-done / .is-current on the steps and .is-ok
 * on the fields; product.js sets .is-active on the picked card. Colours are the v5 tokens, so white mode follows.
 * Phones hide the steps and the cards. */

.pd-steps { display: none; }

@media (min-width: 768px) {
    /* ---- Steps: "01 Pay with | 02 Your details | 03 Complete purchase" ---- */
    .pd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 11px 0; padding: 0; list-style: none; }
    .pd-step {
        display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 16px; opacity: 0.3;
        transition: opacity .35s ease, gap .3s ease;
    }
    .pd-step:first-child { padding-inline-start: 4px; }
    .pd-step + .pd-step { border-inline-start: 1px solid rgb(var(--mk-fg) / 0.08); }
    .pd-step.is-current { opacity: 1; }
    .pd-step.is-done { gap: 18px; opacity: 0.55; }
    .pd-step__dot { position: relative; flex-shrink: 0; display: block; }
    .pd-step__n {
        display: block; padding-bottom: 0.06em; font-family: 'DM Sans', var(--pd-mono); font-size: 30px; font-weight: 300; line-height: 1.05; letter-spacing: -0.06em;
        background: linear-gradient(180deg, rgb(var(--mk-fg)) 0%, rgb(var(--mk-fg) / 0.8) 45%, rgb(var(--mk-fg) / 0.33) 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .pd-step.is-current .pd-step__n {
        background-image: linear-gradient(180deg, rgb(var(--mk-fg)) 0%, rgb(var(--mk-fg) / 0.9) 50%, rgb(var(--mk-fg) / 0.55) 100%);
        filter: drop-shadow(0 0 14px rgb(var(--mk-fg) / 0.3));
    }
    .pd-step__dot i {
        position: absolute; top: -3px; inset-inline-end: -9px; display: flex; align-items: center; justify-content: center; width: 15px; height: 15px;
        border-radius: 50%; background: rgb(var(--mk-fg)); color: rgb(var(--mk-bg)); font-size: 7.5px; opacity: 0; transform: scale(.4);
        transition: opacity .2s ease, transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pd-step.is-done .pd-step__dot i { opacity: 1; transform: none; }
    .pd-step__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: rgb(var(--mk-fg)); }

    /* ---- Pay with: compact cards ---- */
    .pd-pay__label { display: block; margin: 22px 0 10px; color: rgb(var(--mk-fg)); font-size: 13px; font-weight: 700; }
    .pd-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .pd-methods--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pd-method {
        position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 64px; padding: 10px 12px;
        border-radius: 14px; border: 1px solid rgb(var(--mk-fg) / 0.1);
        background: linear-gradient(180deg, rgb(var(--mk-fg) / 0.045) 0%, rgb(var(--mk-fg) / 0.012) 100%);
        color: rgb(var(--mk-fg)); font: inherit; text-align: start; cursor: pointer;
        transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .2s ease;
    }
    .pd-method:hover { transform: translateY(-2px); }
    .pd-method:focus-visible { outline: 2px solid rgb(var(--mk-fg)); outline-offset: 2px; }
    .pd-method.is-active {
        border-color: rgb(var(--mk-fg) / 0.65);
        background: radial-gradient(120% 90% at 20% 0%, rgb(var(--mk-fg) / 0.12) 0%, rgb(var(--mk-fg) / 0.03) 60%, rgb(var(--mk-fg) / 0.015) 100%);
        box-shadow: 0 16px 34px -20px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(var(--mk-fg) / 0.1);
    }
    .pd-method__art {
        flex-shrink: 0; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.5));
        transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pd-method.is-active .pd-method__art { transform: scale(1.08) rotate(-6deg); }
    .pd-method__text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .pd-method__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
    .pd-method__cap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); }
    .pd-method__radio {
        flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
        border-radius: 50%; border: 1px solid rgb(var(--mk-fg) / 0.25); color: rgb(var(--mk-bg)); font-size: 9px;
        transition: background .25s ease, border-color .25s ease;
    }
    .pd-method__radio i { opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .3s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .pd-method.is-active .pd-method__radio { border-color: rgb(var(--mk-fg)); background: rgb(var(--mk-fg)); }
    .pd-method.is-active .pd-method__radio i { opacity: 1; transform: none; }
    .pd-method__ext { flex-shrink: 0; width: 18px; text-align: center; font-size: 10px; color: rgb(var(--mk-fg) / 0.45); }
    .pd-pay .pd-note {
        gap: 10px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid rgb(var(--mk-fg) / 0.08); border-radius: 12px; background: rgb(var(--mk-fg) / 0.02);
        font-size: 12.5px;
    }

    /* ---- A tick in each valid field ---- */
    .pd-input.is-ok::after {
        content: '\f058'; position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%); pointer-events: none;
        font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 14px; color: rgb(var(--mk-fg) / 0.85); animation: pdTick .35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pd .pd-input.is-ok input { padding-inline-end: 40px; border-color: rgb(var(--mk-fg) / 0.3); }

    html[dir="rtl"] .pd :is(.pd-step__label, .pd-method__name, .pd-step__n) { letter-spacing: 0; }
}

@keyframes pdTick { 0% { opacity: 0; transform: translateY(-50%) scale(.4); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .pd :is(.pd-step, .pd-step__dot i, .pd-method, .pd-method__art, .pd-method__radio, .pd-method__radio i) { transition: none; }
    .pd-input.is-ok::after { animation: none; }
}