/* ===================================================================
   The swap calculator — staff/swap_calculator_modal.php, on the shop's
   landing, products and premium pages and on every selling dashboard.

   Owner, 16 Oct 2026: "the user swappable modal … is showing directly
   under the page, restyle it to standard and make it a modal".

   A layer of its own on <body>, not a .modal. The pages that carry it
   dress .modal three different ways — Bootstrap on two shop pages, the
   staff stylesheet's !important rules on the dashboards, and nothing at
   all on the landing page, which is why it stood open under the footer
   there (mobile_fix.css even gives every .modal a full screen's height).
   It is `hidden` until opened, and the partial repeats the few rules
   that make it a layer, so a page without this file never shows it loose.

   The look is the stock sheets' (stock_sheets.css, 16 Oct): the violet
   #430078, a label over each field, 48px fields in 16px type (iOS zooms
   on anything smaller), a sheet from the bottom on a phone with its
   footer under the thumb, a card in the middle on a desk. Sized against
   #swapCalcModal, so the staff stylesheet's floors and Bootstrap's
   reboot cannot reach in. Dark only where the shop front is dark.
   =================================================================== */

/* ── the layer ─────────────────────────────────────────────────────── */
html.swc-open, html.swc-open body { overflow: hidden; }
#swapCalcModal {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2100;
    display: flex; align-items: flex-end; justify-content: center;
    margin: 0; padding: 0;
    font-size: 14px; line-height: 1.35; color: #0f172a; text-align: left;
    -webkit-tap-highlight-color: transparent;
}
/* `hidden` must win over the display a class or an id gives. */
#swapCalcModal[hidden], #swapCalcModal [hidden] { display: none !important; }
#swapCalcModal, #swapCalcModal * { box-sizing: border-box; }
#swapCalcModal .swc__back {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(15, 23, 42, .55);
    animation: swc-fade .18s ease-out;
}

/* A phone: a sheet from the bottom, the whole width (a desk, below). */
#swapCalcModal .swc__card {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    width: 100%; max-height: 92vh; max-height: 92dvh;
    margin: 0; padding: 0;
    background: #fff; border-radius: 18px 18px 0 0; overflow: hidden;
    box-shadow: 0 -10px 40px rgba(15, 23, 42, .22);
    outline: 0;
    animation: swc-up .24s cubic-bezier(.2, .8, .2, 1);
}

/* ── the head: the mark, the name, the way out ─────────────────────── */
#swapCalcModal .swc__head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    margin: 0; padding: 12px 12px 12px 16px;
    border-bottom: 1px solid #eef2f7; background: #fff;
}
#swapCalcModal .swc__ic {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 10px;
    background: #f3e8ff; color: #430078;
}
#swapCalcModal .swc__t {
    flex: 1 1 auto; min-width: 0; margin: 0; padding: 0;
    font: inherit; font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none;
}
#swapCalcModal .swc__x {
    position: relative; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-width: 40px; min-height: 40px; margin: 0 0 0 auto; padding: 0;
    border: 0; border-radius: 50%; background: #f1f5f9; color: #334155;
    box-shadow: none; cursor: pointer; transition: background .15s;
}
#swapCalcModal .swc__x::after { content: ""; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; border-radius: 50%; }
#swapCalcModal .swc__x:hover { background: #e2e8f0; }
#swapCalcModal svg { display: block; flex: 0 0 auto; pointer-events: none; }

/* ── the form: one scroller above a footer that never moves ────────── */
#swapCalcModal .swc__form {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    width: 100%; margin: 0; padding: 0;
}
#swapCalcModal .swc__scroll {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 14px 16px 18px;
}

/* the device brought in */
#swapCalcModal .swc__dev {
    display: flex; align-items: center; gap: 12px;
    margin: 0; padding: 10px 12px;
    border: 1px solid #eef2f7; border-radius: 14px; background: #f8fafc;
}
#swapCalcModal .swc__img {
    flex: 0 0 auto; width: 56px; height: 56px; margin: 0;
    border: 1px solid #e2e8f0; border-radius: 12px;
    object-fit: cover; background: #eef2f7;
}
#swapCalcModal .swc__devtext { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#swapCalcModal .swc__name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.25; color: #0f172a; overflow-wrap: anywhere;
}
#swapCalcModal .swc__base { margin: 0; font-size: 13px; font-weight: 600; color: #64748b; }
#swapCalcModal .swc__base strong { color: #430078; font-weight: 800; font-variant-numeric: tabular-nums; }

/* sections, labels, fields */
#swapCalcModal .swc__sec { margin: 0; padding: 16px 0 0; border: 0; }
#swapCalcModal .swc__sec-t {
    margin: 0 0 10px; padding: 0;
    font: inherit; font-size: 11px; font-weight: 800; line-height: 1.2;
    letter-spacing: .08em; text-transform: uppercase; color: #64748b;
}
#swapCalcModal .swc__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}
#swapCalcModal .swc__f { display: block; min-width: 0; margin: 0; }
#swapCalcModal .swc__l {
    display: block; margin: 0 0 6px 1px; padding: 0;
    font-size: 12.5px; font-weight: 700; line-height: 1.2; color: #475569;
    text-align: left; text-transform: none; letter-spacing: 0;
}

/* Every field is the same box. */
#swapCalcModal .swc__in {
    display: block; width: 100%; height: 48px; min-height: 48px; margin: 0; padding: 0 14px;
    border: 1px solid #d8dfe8; border-radius: 10px;
    background: #fff; color: #0f172a;
    font: inherit; font-size: 16px; font-weight: 500; line-height: normal; text-align: left;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .03);
    outline: none;
    -webkit-appearance: none; appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
#swapCalcModal .swc__in::placeholder { color: #94a3b8; opacity: 1; }
#swapCalcModal .swc__in:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
#swapCalcModal [aria-invalid="true"] { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important; }

/* The per cent sign sits in the box, never typed; no spinner arrows. */
#swapCalcModal .swc__pct { position: relative; display: block; }
#swapCalcModal .swc__pct .swc__in { padding-right: 34px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
#swapCalcModal .swc__pct .swc__in::-webkit-outer-spin-button,
#swapCalcModal .swc__pct .swc__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#swapCalcModal .swc__unit {
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    color: #64748b; font-size: 15px; font-weight: 700; line-height: 1; pointer-events: none;
}

/* the search over the products */
#swapCalcModal .swc__find { position: relative; display: block; margin: 0 0 8px; }
#swapCalcModal .swc__find svg { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); z-index: 1; color: #94a3b8; }
#swapCalcModal .swc__find .swc__in { padding-left: 40px; }
#swapCalcModal .swc__find .swc__in::-webkit-search-decoration { -webkit-appearance: none; }

/* the products, one row each (staff/swap_targets.php) */
#swapCalcModal .swc__list {
    max-height: 240px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    margin: 0; padding: 0;
    border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
}
#swapCalcModal .swap-target-item {
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; margin: 0; padding: 8px 14px;
    border: 0; border-bottom: 1px solid #f1f5f9; border-radius: 0;
    background: none;
    font-size: 14px; font-weight: 400; line-height: 1.3; color: #0f172a; text-align: left;
    cursor: pointer; -webkit-user-select: none; user-select: none;
}
#swapCalcModal .swap-target-item:last-child { border-bottom: 0; }
#swapCalcModal .swap-target-item:hover { background: #fafbfd; }
#swapCalcModal .swap-target-item.is-on,
#swapCalcModal .swap-target-item:has(input:checked) { background: #faf5ff; }
#swapCalcModal .swap-target-item input[type="checkbox"] {
    flex: 0 0 auto; width: 20px; height: 20px; min-width: 20px; min-height: 0; margin: 0; padding: 0;
    accent-color: #6d28d9; cursor: pointer;
}
#swapCalcModal .swap-target-item input[type="checkbox"]:focus { outline: none; }
#swapCalcModal .swap-target-item input[type="checkbox"]:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
#swapCalcModal .swap-target-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
#swapCalcModal .swap-target-price { flex: 0 0 auto; color: #475569; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#swapCalcModal .swc__none { margin: 0; padding: 14px; color: #64748b; font-size: 13.5px; font-weight: 600; text-align: left; }
#swapCalcModal .swc__retry {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; min-height: 40px; margin: 10px 14px; padding: 0 16px;
    border: 1px solid #ddd6fe; border-radius: 10px; background: #faf5ff; color: #5b21b6;
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}

/* Each result under what decides it: the trade-in under the condition,
   the new price under the products. */
#swapCalcModal .swc__res {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 44px; margin: 12px 0 0; padding: 8px 14px;
    border: 1px solid #ede9fe; border-radius: 12px; background: #faf5ff;
    font-size: 13.5px; font-weight: 700; color: #475569;
}
#swapCalcModal .swc__res b { color: #0f172a; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── the footer: what went wrong, then Cancel and the one strong button ── */
#swapCalcModal .swc__foot {
    flex: 0 0 auto;
    margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #eef2f7; background: #fff;
}
/* What is paid: always on screen, above the buttons. */
#swapCalcModal .swc__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 0 2px 10px; font-size: 15px; font-weight: 800; line-height: 1.2; color: #430078;
}
#swapCalcModal .swc__total b { font-size: 20px; font-weight: 800; color: #430078; font-variant-numeric: tabular-nums; white-space: nowrap; }
#swapCalcModal .swc__err {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 10px; padding: 9px 12px;
    border: 1px solid #fecaca; border-radius: 10px; background: #fef2f2; color: #b91c1c;
    font-size: 13px; font-weight: 700; line-height: 1.35; text-align: left;
}
#swapCalcModal .swc__err svg { margin-top: 1px; }
#swapCalcModal .swc__btns { display: flex; align-items: center; gap: 10px; }
#swapCalcModal .swc__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: auto; height: 48px; min-height: 48px; margin: 0; padding: 0 18px;
    border: 0; border-radius: 12px;
    font: inherit; font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: .01em;
    text-transform: none; white-space: nowrap; cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .08s, opacity .15s;
}
#swapCalcModal .swc__btn:active { transform: translateY(1px); }
#swapCalcModal .swc__btn:focus-visible,
#swapCalcModal .swc__x:focus-visible,
#swapCalcModal .swc__retry:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
#swapCalcModal .swc__btn--quiet { flex: 0 0 auto; background: #f1f5f9; color: #334155; box-shadow: none; }
#swapCalcModal .swc__btn--quiet:hover { background: #e2e8f0; }
#swapCalcModal .swc__btn--primary {
    flex: 1 1 auto;
    background: #430078; color: #fff;
    box-shadow: 0 8px 18px rgba(67, 0, 120, .22);
}
#swapCalcModal .swc__btn--primary:hover { background: #36005f; }
#swapCalcModal .swc__btn--primary:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
/* Busy: a ring turns where the cart was. */
#swapCalcModal .swc__spin {
    display: none; width: 18px; height: 18px;
    border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
    animation: swc-spin .7s linear infinite;
}
#swapCalcModal .swc__btn[aria-busy="true"] .swc__spin { display: inline-block; }
#swapCalcModal .swc__btn[aria-busy="true"] .swc__cart { display: none; }

/* ── a desk: a card in the middle ──────────────────────────────────── */
@media (min-width: 576px) {
    #swapCalcModal { align-items: center; padding: 24px; }
    #swapCalcModal .swc__card {
        max-width: 520px; max-height: 88vh; max-height: 88dvh;
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
        animation-name: swc-pop;
    }
    #swapCalcModal .swc__scroll { padding: 16px 20px 20px; }
    #swapCalcModal .swc__foot { padding: 12px 20px 14px; }
}
@media (max-height: 700px) {
    #swapCalcModal .swc__list { max-height: 192px; }
}
@media (max-width: 359px) {
    #swapCalcModal .swc__grid { gap: 10px 8px; }
    #swapCalcModal .swc__btn { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
    #swapCalcModal .swc__card, #swapCalcModal .swc__back { animation: none; }
}

/* ── the shop front's dark theme (html.dark — index.php) ───────────── */
html.dark #swapCalcModal { color: #f3f4f6; }
html.dark #swapCalcModal .swc__card,
html.dark #swapCalcModal .swc__head,
html.dark #swapCalcModal .swc__foot { background: #12121c; border-color: rgba(255, 255, 255, .08); }
html.dark #swapCalcModal .swc__t,
html.dark #swapCalcModal .swc__name,
html.dark #swapCalcModal .swap-target-item,
html.dark #swapCalcModal .swc__res b { color: #f3f4f6; }
html.dark #swapCalcModal .swc__ic { background: rgba(124, 58, 237, .22); color: #c4b5fd; }
html.dark #swapCalcModal .swc__x,
html.dark #swapCalcModal .swc__btn--quiet { background: #1f1f2e; color: #e5e7eb; }
html.dark #swapCalcModal .swc__dev { background: #181826; border-color: rgba(255, 255, 255, .08); }
html.dark #swapCalcModal .swc__img { background: #1f1f2e; border-color: rgba(255, 255, 255, .1); }
html.dark #swapCalcModal .swc__l,
html.dark #swapCalcModal .swc__sec-t,
html.dark #swapCalcModal .swc__base,
html.dark #swapCalcModal .swc__res,
html.dark #swapCalcModal .swc__unit,
html.dark #swapCalcModal .swc__none,
html.dark #swapCalcModal .swap-target-price { color: #9ca3af; }
html.dark #swapCalcModal .swc__in,
html.dark #swapCalcModal .swc__list { background: #0d0d16; border-color: rgba(255, 255, 255, .14); color: #f3f4f6; }
html.dark #swapCalcModal .swap-target-item { border-color: rgba(255, 255, 255, .06); }
html.dark #swapCalcModal .swap-target-item:hover { background: rgba(255, 255, 255, .03); }
html.dark #swapCalcModal .swap-target-item.is-on,
html.dark #swapCalcModal .swap-target-item:has(input:checked) { background: rgba(124, 58, 237, .18); }
html.dark #swapCalcModal .swc__res { background: rgba(124, 58, 237, .12); border-color: rgba(167, 139, 250, .25); }
html.dark #swapCalcModal .swc__base strong,
html.dark #swapCalcModal .swc__total,
html.dark #swapCalcModal .swc__total b { color: #c4b5fd; }
html.dark #swapCalcModal .swc__btn--primary { background: #6d28d9; box-shadow: none; }
html.dark #swapCalcModal .swc__btn--primary:hover { background: #5b21b6; }
html.dark #swapCalcModal .swc__err { background: rgba(239, 68, 68, .12); border-color: rgba(248, 113, 113, .35); color: #fca5a5; }
html.dark #swapCalcModal .swc__retry { background: rgba(124, 58, 237, .14); border-color: rgba(167, 139, 250, .3); color: #ddd6fe; }

@keyframes swc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes swc-up   { from { opacity: .4; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes swc-pop  { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes swc-spin { to { transform: rotate(360deg); } }