/* Paxi Guard - the codes block on the thank-you page and in My Account (phone first, works left-to-right and right-to-left) */
.pxg-codes,
.pxg-wait {
    --pxg-blue: #1352D6;
    --pxg-blue-2: #2F6BEA;
    --pxg-ink: #0B1F3A;
    --pxg-muted: #55657C;
    --pxg-line: #DCE4F0;
    --pxg-bg: #F5F8FD;
    --pxg-ok: #0E8F4F;
    --pxg-bad: #B32D2E;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.6;
    color: var(--pxg-ink);
}
.pxg-codes *,
.pxg-wait * { box-sizing: border-box; }

.pxg-codes {
    margin: 24px 0;
    padding: 16px;
    border: 1px solid var(--pxg-line);
    border-radius: 14px;
    background: var(--pxg-bg);
}

/* "We are preparing your codes" */
.pxg-wait {
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--pxg-line);
    border-radius: 12px;
    background: var(--pxg-bg);
}
.pxg-codes .pxg-wait { margin: 0; padding: 0; border: 0; background: none; }
.pxg-wait p { margin: 0 0 6px; }
.pxg-wait p:last-child { margin-bottom: 0; }
.pxg-wait-ar,
.pxg-wait-en { font-size: 15px; }
.pxg-wait p:first-child { font-weight: 700; color: var(--pxg-blue); }
.pxg-wait p:not(:first-child) { color: var(--pxg-muted); }

.pxg-title {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--pxg-blue);
}
.pxg-title span { display: block; }
.pxg-title span:last-child { margin-top: 2px; font-size: 15px; font-weight: 500; }
.pxg-title-ar { text-align: right; }
.pxg-title-en { text-align: left; }

.pxg-product {
    margin: 16px 0 8px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--pxg-ink);
}

/* one code = the code itself + a big copy button */
.pxg-code {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 8px;
}
.pxg-code code {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--pxg-blue-2);
    border-radius: 10px;
    background: #fff;
    color: var(--pxg-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .5px;
    text-align: center;
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: slashed-zero;
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-user-select: all;
    user-select: all;
}
.pxg-copy {
    flex: 0 0 auto;
    min-width: 104px;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--pxg-blue);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease;
}
.pxg-copy:hover,
.pxg-copy:focus { background: var(--pxg-blue-2); color: #fff; }
.pxg-copy:focus-visible { outline: 3px solid var(--pxg-blue-2); outline-offset: 2px; }
.pxg-copy.is-done,
.pxg-copy.is-done:hover,
.pxg-copy.is-done:focus { background: var(--pxg-ok); color: #fff; }

.pxg-how,
.pxg-bad {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--pxg-muted);
}
.pxg-how + .pxg-how { margin-top: 2px; }
.pxg-bad { color: var(--pxg-bad); font-weight: 600; }
.pxg-bad + .pxg-bad { margin-top: 2px; }
.pxg-how[dir="rtl"],
.pxg-bad[dir="rtl"],
.pxg-wait-ar { text-align: right; }
.pxg-how[dir="ltr"],
.pxg-bad[dir="ltr"],
.pxg-wait-en { text-align: left; }

/* phones: the code gets the whole row, the button sits under it and is easy to hit */
@media (max-width: 520px) {
    .pxg-codes { padding: 14px; }
    .pxg-code { flex-direction: column; }
    .pxg-code code { font-size: 18px; padding: 14px 12px; }
    .pxg-copy { width: 100%; min-height: 48px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .pxg-copy { transition: none; }
}