/* Promo code row (components/payment/promo_field.php) on the product checkout and the cart.
 * --pf is the ink colour as an RGB triplet: the product page's --mk-fg, white on the dark cart,
 * near-black on the light cart. Monochrome only. */

.pf { --pf: var(--mk-fg, 255 255 255); display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
html[data-theme="light"] body.home-bw-theme:not(.mkt-v5) .pf { --pf: 8 7 6; }

.pf__toggle {
    display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none;
    color: rgb(var(--pf) / 0.72); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .2s ease;
}
.pf__toggle:hover, .pf__toggle[aria-expanded="true"] { color: rgb(var(--pf)); }
.pf__toggle > i:first-child { font-size: 12px; }
.pf__chev { font-size: 10px; transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1); }
.pf__toggle[aria-expanded="true"] .pf__chev { transform: rotate(180deg); }

.pf__box { display: flex; flex-direction: column; gap: 8px; }
.pf__box[hidden], .pf__row[hidden], .pf__applied[hidden] { display: none; }
.pf__row { display: flex; gap: 8px; }
.pf__input { position: relative; flex: 1; min-width: 0; }
.pf__input > i { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); font-size: 13px; color: rgb(var(--pf) / 0.4); pointer-events: none; }
.pf .pf__input input {
    width: 100%; height: 44px; box-sizing: border-box; padding: 0 14px 0 38px; border-radius: 12px; border: 1px solid rgb(var(--pf) / 0.12);
    background: rgb(var(--pf) / 0.03); color: rgb(var(--pf)); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.pf .pf__input input::placeholder { color: rgb(var(--pf) / 0.3); letter-spacing: 0; text-transform: none; font-weight: 500; opacity: 1; }
.pf .pf__input input:focus { border-color: rgb(var(--pf) / 0.45); box-shadow: 0 0 0 3px rgb(var(--pf) / 0.07); }
.pf.is-error .pf__input input { border-color: rgb(var(--pf) / 0.55); }

.pf__apply, .pf__remove {
    flex: none; height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid rgb(var(--pf) / 0.2); background: rgb(var(--pf) / 0.08);
    color: rgb(var(--pf)); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.pf__apply:hover, .pf__remove:hover { background: rgb(var(--pf) / 0.14); border-color: rgb(var(--pf) / 0.35); }
.pf__apply:disabled { opacity: 0.5; cursor: progress; }
.pf__apply:focus-visible, .pf__remove:focus-visible, .pf__toggle:focus-visible, .pf__tg:focus-visible { outline: 2px solid rgb(var(--pf) / 0.7); outline-offset: 2px; }

.pf__applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 4px 4px 4px 14px; border-radius: 12px; border: 1px dashed rgb(var(--pf) / 0.35); background: rgb(var(--pf) / 0.05); }
html[dir="rtl"] .pf__applied { padding: 4px 14px 4px 4px; }
.pf__chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: rgb(var(--pf)); font-size: 13.5px; }
.pf__chip b { letter-spacing: 0.08em; }
.pf__chip span { color: rgb(var(--pf) / 0.65); font-weight: 600; font-variant-numeric: tabular-nums; }
.pf__remove { height: 36px; padding: 0 14px; background: transparent; }

.pf__msg { margin: 0; min-height: 0; font-size: 12.5px; line-height: 1.45; color: rgb(var(--pf) / 0.6); }
.pf__msg:empty { display: none; }
.pf.is-error .pf__msg { color: rgb(var(--pf) / 0.92); font-weight: 600; }

.pf__tg {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgb(var(--pf) / 0.1);
    background: rgb(var(--pf) / 0.03); color: rgb(var(--pf) / 0.82); font-size: 13px; font-weight: 600; text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.pf__tg:hover { color: rgb(var(--pf)); border-color: rgb(var(--pf) / 0.25); background: rgb(var(--pf) / 0.06); }
.pf__tg > i:first-child { font-size: 17px; }
.pf__tg span { flex: 1; min-width: 0; }
.pf__out { font-size: 11px; opacity: 0.55; }
.pf__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Old price struck through next to the new total. */
.pf-was { margin-inline-end: 8px; font-size: 0.55em; font-weight: 600; color: rgb(var(--pf, var(--mk-fg, 255 255 255)) / 0.45); text-decoration: line-through; letter-spacing: 0; }
.pf-was[hidden] { display: none; }
html[data-theme="light"] body.home-bw-theme:not(.mkt-v5) .pf-was { color: rgb(8 7 6 / 0.45); }

@media (prefers-reduced-motion: reduce) {
    .pf__chev, .pf__toggle, .pf__apply, .pf__remove, .pf__tg, .pf .pf__input input { transition: none; }
}