/* Product page — "Quick Purchase" card of the "OG Product Page" design (components/product/v5/checkout.php) and the
 * pieces of the order summary it shares with the ticket (terms, "Complete purchase", error). From 768px it sits at the
 * start of the row with the ticket at the end (product-v5.css); its silk banner is product-v5-silk.css. On phones it
 * stacks under the phone card with a plain head, the method row hidden (product-mobile.css) and the summary moved
 * in by product-checkout-hero.js. Colours are the v5 tokens on body.mkt-v5. */

.pd-co {
    flex: 1 1 520px; min-width: 0; border-radius: 24px; border: 1px solid rgb(var(--mk-fg) / 0.1); scroll-margin-top: 24px;
    background: linear-gradient(160deg, rgb(var(--mk-s1)) 0%, rgb(var(--mk-c2)) 100%);
}
.pd-co__in { padding: 20px 16px; }

/* ---- Head (the silk banner from 768px) ---- */
.pd-co__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pd-co__titles { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pd-co__title { margin: 0; color: rgb(var(--mk-fg)); font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.045em; }
.pd-co__sub { font-family: var(--pd-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--mk-fg) / calc(0.4 * var(--mk-tk))); }
.pd-co__badge {
    display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgb(var(--mk-fg) / 0.12);
    font-size: 12px; font-weight: 600; white-space: nowrap; color: rgb(var(--mk-fg) / calc(0.65 * var(--mk-tk)));
}
.pd-co__badge i { font-size: 11px; }

/* ---- Pay with: the method cards are product-v5-checkout-ui.css (768px+; phones hide the row); the note follows them ---- */
.pd-pay__label { display: none; }

.pd-note {
    display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgb(var(--mk-fg) / 0.14);
    font-size: 13px; line-height: 1.4; color: rgb(var(--mk-fg) / calc(0.65 * var(--mk-tk)));
}
.pd-note__art { flex-shrink: 0; width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.4)); }

/* ---- Details ---- */
.pd-divider {
    display: flex; align-items: center; gap: 14px; margin-top: 20px;
    font-family: var(--pd-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--mk-fg) / calc(0.4 * var(--mk-tk)));
}
.pd-divider::after { content: ''; flex: 1; height: 1px; background: rgb(var(--mk-fg) / 0.08); }
.pd-divider__art { display: none; }
/* Two columns at most (name | email), one below 432px: each column is at least half the row. */
.pd-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(210px, calc((100% - 12px) / 2)), 1fr)); gap: 14px 12px; margin-top: 14px; }
.pd-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pd-field--full { grid-column: 1 / -1; }
.pd-field__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.pd-field__label { color: rgb(var(--mk-fg)); font-size: 13px; font-weight: 600; }
.pd-req { color: rgb(var(--mk-fg) / calc(0.45 * var(--mk-tk))); }
.pd-field[hidden] { display: none; }
.pd-field__hint { color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); font-size: 12px; line-height: 1.45; }

.pd-input { position: relative; display: block; }
.pd-input > i {
    position: absolute; top: 50%; inset-inline-start: 14px; width: 16px; transform: translateY(-50%); pointer-events: none; text-align: center;
    font-size: 13px; color: rgb(var(--mk-fg) / calc(0.4 * var(--mk-tk))); transition: color .2s ease;
}
.pd-input--contact > i { font-size: 15px; color: rgb(var(--mk-fg) / calc(0.7 * var(--mk-tk))); }
.pd-input:focus-within > i { color: rgb(var(--mk-fg) / 0.85); }
.pd .pd-input input {
    display: block; width: 100%; height: 46px; margin: 0; padding: 0 14px; padding-inline-start: 40px; border-radius: 12px;
    border: 1px solid rgb(var(--mk-fg) / 0.11); background: rgb(var(--mk-fg) / 0.025); box-shadow: none; outline: 0;
    color: rgb(var(--mk-fg)); caret-color: rgb(var(--mk-fg)); font: inherit; font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pd .pd-input input::placeholder { color: rgb(var(--mk-fg) / 0.3); opacity: 1; }
.pd .pd-input input:hover { border-color: rgb(var(--mk-fg) / 0.25); }
.pd .pd-input input:focus { border-color: rgb(var(--mk-fg) / 0.45); box-shadow: 0 0 0 3px rgb(var(--mk-fg) / 0.07); }
.pd .pd-input input:-webkit-autofill {
    -webkit-text-fill-color: rgb(var(--mk-fg)); box-shadow: 0 0 0 100px rgb(var(--mk-c1)) inset; transition: background-color 9999s ease 0s;
}

/* Telegram / Instagram / WhatsApp switch: a pill of icons; the picked one turns white and shows its name */
.pd-seg {
    display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgb(var(--mk-fg) / 0.12);
    background: linear-gradient(180deg, rgb(var(--mk-fg) / 0.08) 0%, rgb(var(--mk-fg) / 0.03) 100%); box-shadow: inset 0 1px 0 rgb(var(--mk-fg) / 0.08);
}
.pd-seg__btn {
    display: flex; align-items: center; justify-content: center; gap: 7px; height: 30px; min-width: 30px; padding: 0; border: 0; border-radius: 999px;
    background: transparent; color: rgb(var(--mk-fg) / calc(0.7 * var(--mk-tk))); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, padding .25s ease;
}
.pd-seg__btn i { font-size: 14px; }
.pd-seg__txt { display: none; }
.pd-seg__btn:hover { color: rgb(var(--mk-fg)); }
.pd-seg__btn.is-on { padding-inline: 11px 13px; background: rgb(var(--mk-acc)); color: rgb(var(--mk-on-acc)); box-shadow: 0 4px 12px rgb(0 0 0 / 0.35); }
.pd-seg__btn.is-on .pd-seg__txt { display: inline; }
.pd-seg__btn:focus-visible { outline: 2px solid rgb(var(--mk-fg) / 0.7); outline-offset: 2px; }

/* ---- Terms, "Complete purchase" and errors (in the ticket's summary; under the form on phones) ---- */
.pd-terms {
    position: relative; display: flex; align-items: center; gap: 12px; margin-top: 16px; cursor: pointer; user-select: none;
    font-size: 13px; line-height: 1.45; color: rgb(var(--mk-fg) / calc(0.75 * var(--mk-tk)));
}
.pd-terms input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pd-terms__box {
    width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px;
    border: 1px solid rgb(var(--mk-fg) / 0.28); background: rgb(var(--mk-fg) / 0.03); color: rgb(var(--mk-on-acc)); font-size: 10px;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pd-terms__box i { opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; }
.pd-terms input:checked + .pd-terms__box { background: rgb(var(--mk-acc)); border-color: rgb(var(--mk-acc)); }
.pd-terms input:checked + .pd-terms__box i { opacity: 1; transform: none; }
.pd-terms input:focus-visible + .pd-terms__box { box-shadow: 0 0 0 2px rgb(var(--mk-bg)), 0 0 0 4px rgb(var(--mk-fg) / 0.6); }
.pd-terms__text a { color: rgb(var(--mk-fg)); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.pd-submit {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 14px;
    background: rgb(var(--mk-acc)); color: rgb(var(--mk-on-acc)); font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pd-submit i { font-size: 13px; }
.pd-submit:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); }
.pd-submit:is(:disabled, [aria-disabled="true"]) { background: rgb(var(--mk-fg) / 0.08); color: rgb(var(--mk-fg) / calc(0.4 * var(--mk-tk))); cursor: not-allowed; }
.pd-submit.is-busy:disabled { cursor: wait; }
.pd-error:not(:empty) {
    margin-top: 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgb(248 113 113 / 0.25); background: rgb(248 113 113 / 0.07);
    color: #f87171; font-size: 13px; line-height: 1.5;
}
html[data-theme="light"] .pd-error:not(:empty) { color: #b91c1c; }

/* What is missing (product-checkout-errors.js): a line under each bad field, a red edge, and a list under the button */
.pd-field__err { font-size: 12px; line-height: 1.45; color: #f87171; }
.pd-field__err[hidden] { display: none; }
.pd .pd-input.is-bad input { border-color: rgb(248 113 113 / 0.55); }
.pd .pd-input.is-bad input:focus { border-color: rgb(248 113 113 / 0.75); box-shadow: 0 0 0 3px rgb(248 113 113 / 0.12); }
.pd-input.is-bad > i { color: #f87171; }
.pd-missing { margin-top: 12px; font-size: 12.5px; line-height: 1.5; text-align: center; color: rgb(var(--mk-fg) / calc(0.55 * var(--mk-tk))); }
.pd-missing[hidden] { display: none; }
.pd-missing b { font-weight: 600; color: rgb(var(--mk-fg) / 0.9); }
html[data-theme="light"] :is(.pd-field__err, .pd-input.is-bad > i) { color: #b91c1c; }

@media (min-width: 768px) {
    .pd-co__in { padding: 9px; }
    .pd-form { padding: 0 11px 13px; }
    .pd-divider { gap: 10px; margin-top: 28px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: rgb(var(--mk-fg)); }
    .pd-divider::after { margin-inline-start: 4px; }
    .pd-divider__art { display: block; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.4)); }
    .pd-sum-slot { display: none; }
}

html[dir="rtl"] .pd :is(.pd-co__title, .pd-submit, .pd-co__sub, .pd-divider, .pd-method) { letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
    .pd :is(.pd-submit, .pd-method, .pd-method__art, .pd-seg__btn, .pd-terms__box i) { transition: none; }
}

/* ---- Phone: the summary closes the card; white mode uses black accents like the card above ---- */
@media (max-width: 767px) {
    .pd-co { border-radius: 22px; }
    .pd-co__in { padding: 20px 16px; }
    .pd-sum .pd-sum__amount { font-size: 32px; }
    html[data-theme="light"] body.mkt-v5 .pd { --mk-acc: var(--mk-fg); --mk-on-acc: 255 255 255; }
}