/* ============================================================================
   RM POPUPS - one look for every popup on the Lists pages and the collection
   pages (owner 2026-10-13: "make a new design that fits the new pages ... so
   it stays consistent"). Built from the collection look the toolbar, the
   Filters panel and the phone sheets use:

     box      #222, a 1px #3a3a3a edge, 10px corners, a soft shadow
     header   the title on the left (17px / 700), the same x on the right
     labels   11px capitals, #a8a8a8 (the filter labels)
     fields   the toolbar's controls: #1a1a1a on #3a3a3a, 8px corners, 38px,
              an orange edge while typing / open
     choices  buttons in a row; the picked one #3a3a3a with an orange edge
              (never an orange fill)
     buttons  orange = the one thing to do (Save, Add, Download), dark =
              Cancel, red = only for Delete / Remove / Clear

   NinDecks copy (2026-10-14) of RiftMana's kit. The accent is NinDecks' own
   orange (--ps-orange, #ffa600 - the owner's call: not RiftMana's gold), set
   once in --rm-gold below; the token keeps RiftMana's name so the two files
   stay comparable.

   The popups keep their own show / hide (a .show class, style.display or
   the hidden attribute) - nothing here sets display or visibility on a
   popup's root. Change a value here, not in a popup's own rules.
   Loaded by riftmana_list_enqueue_assets() (Lists),
   collection_enqueue_assets() (owner + shared collection),
   shared_collection_enqueue_assets() (the [user_collection] shortcode) and
   the profile's deck section (user-decks.php).
   The toasts at the end of this file are part of the same look.
============================================================================ */

:root {
    --rm-pop-backdrop: rgba(0, 0, 0, 0.7);
    --rm-pop-bg: #222;
    --rm-pop-border: #3a3a3a;
    --rm-pop-radius: 10px;
    --rm-pop-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    --rm-pop-text: #bbb;
    --rm-pop-muted: #8a8a8a;
    --rm-pop-label: #a8a8a8;
    --rm-ctl-bg: #1a1a1a;
    --rm-ctl-border: #3a3a3a;
    --rm-ctl-border-hover: #555;
    --rm-ctl-pick: #3a3a3a;
    --rm-gold: var(--ps-orange, #ffa600);         /* NinDecks orange */
    --rm-gold-hover: var(--ps-orange-2, #ffb833); /* its brighter hover */
    --rm-red: #dc3545;
    --rm-red-hover: #c82333;
    --rm-red-text: #ff6b6b;
}

/* ---- The page behind: dimmed, the box centred, a gutter on small screens.
   (No display / visibility here - each popup shows itself its own way.) */
.rm-pop-overlay {
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--rm-pop-backdrop);
}

/* ---- The box ---- */
.rm-pop-box {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    margin: 0;
    padding: 20px 22px;
    background: var(--rm-pop-bg);
    border: 1px solid var(--rm-pop-border);
    border-radius: var(--rm-pop-radius);
    box-shadow: var(--rm-pop-shadow);
    color: #fff;
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
}

/* Wider: settings, import / export, sharing. */
.rm-pop-box.rm-pop-wide {
    max-width: 560px;
}

/* A side panel (Add Cards): the same surface, full height on the right; its
   header and search sit in bands, the list scrolls. */
.rm-pop-box.rm-pop-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 90vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}

.rm-pop-box.rm-pop-panel > .rm-pop-head {
    margin: 0;
    padding: 16px 18px 12px;
}

/* ---- Header: title + the x (and a back arrow on settings screens) ---- */
.rm-pop-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: none;
}

.rm-pop-box .rm-pop-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    overflow-wrap: anywhere;
}

.rm-pop-box button.rm-pop-close,
.rm-pop-box button.rm-pop-back {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    min-height: 0;
    margin: -6px -8px -6px 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    color: #aaa;
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    text-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.rm-pop-box button.rm-pop-back {
    margin: -6px 0 -6px -8px;
    font-size: 16px;
}

.rm-pop-box button.rm-pop-close:hover,
.rm-pop-box button.rm-pop-back:hover {
    background: #2a2a2a;
    color: #fff;
}

.rm-pop-box button.rm-pop-close:focus,
.rm-pop-box button.rm-pop-back:focus {
    outline: none;
}

.rm-pop-box button.rm-pop-close:focus-visible,
.rm-pop-box button.rm-pop-back:focus-visible {
    outline: 2px solid var(--rm-gold);
    outline-offset: -2px;
}

/* The hidden attribute still hides them (the display above would win). */
.rm-pop-box button.rm-pop-close[hidden],
.rm-pop-box button.rm-pop-back[hidden] {
    display: none;
}

/* ---- Text ---- */
.rm-pop-box .rm-pop-text {
    margin: 0 0 14px;
    color: var(--rm-pop-text);
    font-size: 0.9rem;
    line-height: 1.5;
}

.rm-pop-box .rm-pop-text strong {
    color: #fff;
}

.rm-pop-box .rm-pop-hint {
    margin: 6px 0 0;
    color: var(--rm-pop-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* A line that says what is wrong ("Pick at least one language"). */
.rm-pop-box .rm-pop-hint.rm-pop-hint-error {
    color: var(--rm-red-text);
}

/* A boxed note (what will happen, a warning). */
.rm-pop-box .rm-pop-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--rm-ctl-bg);
    border: 1px solid var(--rm-ctl-border);
    border-left: 3px solid var(--rm-gold);
    border-radius: 6px;
    color: #ccc;
    font-size: 0.85rem;
    line-height: 1.5;
}

.rm-pop-box .rm-pop-note.rm-pop-note-warn {
    border-left-color: #ff9800;
}

.rm-pop-box .rm-pop-note.rm-pop-note-danger {
    border-left-color: var(--rm-red-text);
}

/* A labelled line between groups ("Sharing"). */
.rm-pop-box .rm-pop-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 14px;
    color: var(--rm-pop-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rm-pop-box .rm-pop-divider::before,
.rm-pop-box .rm-pop-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rm-pop-border);
}

/* ---- Fields ---- */
.rm-pop-box .rm-pop-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 14px;
    min-width: 0;
}

.rm-pop-box .rm-pop-label {
    display: block;
    margin: 0;
    color: var(--rm-pop-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.rm-pop-box .rm-pop-label .rm-pop-req {
    color: var(--rm-red-text);
}

.rm-pop-box input.rm-pop-input,
.rm-pop-box textarea.rm-pop-input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    min-height: 0;
    margin: 0;
    padding: 0 12px;
    background: var(--rm-ctl-bg);
    border: 1px solid var(--rm-ctl-border);
    border-radius: 8px;
    box-shadow: none;
    color: #f5f5f5;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.15s ease;
}

.rm-pop-box textarea.rm-pop-input {
    height: auto;
    min-height: 76px;
    padding: 9px 12px;
    resize: vertical;
}

.rm-pop-box input.rm-pop-input::placeholder,
.rm-pop-box textarea.rm-pop-input::placeholder {
    color: #777;
    opacity: 1;
}

.rm-pop-box input.rm-pop-input:hover,
.rm-pop-box textarea.rm-pop-input:hover {
    border-color: var(--rm-ctl-border-hover);
}

.rm-pop-box input.rm-pop-input:focus,
.rm-pop-box textarea.rm-pop-input:focus {
    outline: none;
    border-color: var(--rm-gold);
    background: var(--rm-ctl-bg);
    box-shadow: none;
}

.rm-pop-box input.rm-pop-input[readonly] {
    color: #ccc;
}

/* A field and its button on one line (a share link + Copy). */
.rm-pop-box .rm-pop-inline {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.rm-pop-box .rm-pop-inline > input.rm-pop-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- Choices: a row of buttons, the picked one with the gold edge ---- */
.rm-pop-box .rm-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.rm-pop-box button.rm-seg-btn {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    height: 38px;
    min-height: 0;
    margin: 0;
    padding: 0 12px;
    background: var(--rm-ctl-bg);
    border: 1px solid var(--rm-ctl-border);
    border-radius: 8px;
    box-shadow: none;
    color: #ccc;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.rm-pop-box button.rm-seg-btn:hover {
    border-color: var(--rm-ctl-border-hover);
    color: #fff;
}

.rm-pop-box button.rm-seg-btn.is-on,
.rm-pop-box button.rm-seg-btn[aria-pressed="true"],
.rm-pop-box button.rm-seg-btn[aria-checked="true"] {
    background: var(--rm-ctl-pick);
    border-color: var(--rm-gold);
    color: #fff;
}

.rm-pop-box button.rm-seg-btn:disabled,
.rm-pop-box button.rm-seg-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.rm-pop-box button.rm-seg-btn i {
    font-size: 0.85em;
}

/* Four choices: one row in the box, two by two on a phone. */
.rm-pop-box .rm-seg.rm-seg-2x2 button.rm-seg-btn {
    padding: 0 8px;
}

.rm-pop-box button.rm-seg-btn:focus {
    outline: none;
}

.rm-pop-box button.rm-seg-btn:focus-visible {
    outline: 2px solid var(--rm-gold);
    outline-offset: 2px;
}

/* ---- A tick box with its words ---- */
.rm-pop-box label.rm-pop-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 4px 0;
    color: #ddd;
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

.rm-pop-box label.rm-pop-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--rm-gold);
    cursor: pointer;
    box-shadow: none;
}

/* ---- Dropdown: the toolbar control's look; its list under it ---- */
.rm-pop-box .rm-pop-dd {
    position: relative;
    min-width: 0;
}

.rm-pop-box .rm-pop-dd-btn {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    min-height: 0;
    margin: 0;
    padding: 0 12px;
    background: var(--rm-ctl-bg);
    border: 1px solid var(--rm-ctl-border);
    border-radius: 8px;
    box-shadow: none;
    color: #f5f5f5;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.rm-pop-box .rm-pop-dd-btn:hover {
    border-color: var(--rm-ctl-border-hover);
}

.rm-pop-box .rm-pop-dd.is-open .rm-pop-dd-btn,
.rm-pop-box .rm-pop-dd.open .rm-pop-dd-btn,
.rm-pop-box .rm-pop-dd-btn[aria-expanded="true"] {
    background: var(--rm-ctl-pick);
    border-color: var(--rm-gold);
}

.rm-pop-box .rm-pop-dd-btn:focus {
    outline: none;
}

.rm-pop-box .rm-pop-dd-btn:focus-visible {
    outline: 2px solid var(--rm-gold);
    outline-offset: 2px;
}

.rm-pop-box .rm-pop-dd-list {
    box-sizing: border-box;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #2a2a2a;
    border: 1px solid var(--rm-ctl-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    max-height: 260px;
    overflow-y: auto;
    z-index: 5;
}

.rm-pop-box .rm-pop-dd-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 36px;
    margin: 0;
    padding: 6px 10px;
    border-radius: 6px;
    color: #ddd;
    font-size: 14px;
    cursor: pointer;
}

.rm-pop-box .rm-pop-dd-opt:hover {
    background: #333;
    color: #fff;
}

.rm-pop-box .rm-pop-dd-opt.is-selected,
.rm-pop-box .rm-pop-dd-opt.selected,
.rm-pop-box .rm-pop-dd-opt[aria-selected="true"] {
    background: #333;
    color: #fff;
    box-shadow: inset 3px 0 0 var(--rm-gold);
}

/* ---- Buttons ---- */
.rm-pop-box .rm-pop-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    border: 0;
    background: none;
}

.rm-pop-box .rm-pop-actions[hidden] {
    display: none;
}

.rm-pop-box button.rm-btn,
.rm-pop-box a.rm-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: 38px;
    min-height: 0;
    margin: 0;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rm-pop-box .rm-btn.rm-btn-primary {
    background: var(--rm-gold);
    border-color: var(--rm-gold);
    color: #1a1a1a;
}

.rm-pop-box .rm-btn.rm-btn-primary:hover {
    background: var(--rm-gold-hover);
    border-color: var(--rm-gold-hover);
    color: #1a1a1a;
}

.rm-pop-box .rm-btn.rm-btn-secondary {
    background: var(--rm-ctl-bg);
    border-color: var(--rm-ctl-border);
    color: #ddd;
}

.rm-pop-box .rm-btn.rm-btn-secondary:hover {
    background: var(--rm-ctl-bg);
    border-color: var(--rm-ctl-border-hover);
    color: #fff;
}

.rm-pop-box .rm-btn.rm-btn-danger {
    background: var(--rm-red);
    border-color: var(--rm-red);
    color: #fff;
}

.rm-pop-box .rm-btn.rm-btn-danger:hover {
    background: var(--rm-red-hover);
    border-color: var(--rm-red-hover);
    color: #fff;
}

.rm-pop-box .rm-btn:disabled,
.rm-pop-box .rm-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.rm-pop-box .rm-btn:focus {
    outline: none;
}

.rm-pop-box .rm-btn:focus-visible {
    outline: 2px solid var(--rm-gold);
    outline-offset: 2px;
}

/* A small dark button next to a field (Copy, Add). */
.rm-pop-box button.rm-btn.rm-btn-sm {
    flex: 0 0 auto;
    padding: 0 14px;
    font-size: 13px;
}

/* A side panel takes the whole width on a tablet / phone. 100% (of the page
   area), not 100vw: the site header reserves the scrollbar's strip
   (scrollbar-gutter: stable), and in a narrow desktop window a 100vw panel
   pinned right ran 10px off the left edge. Phones have no strip, so there
   100% is the full width as before. */
@media (max-width: 768px) {
    .rm-pop-box.rm-pop-panel {
        width: 100%;
        max-width: 100%;
        border-left-width: 0;
    }
}

/* ---- Phone: a tighter box, buttons share the row and grow to a 46px tap
   target (the phone sheets' foot). ---- */
@media (max-width: 640px) {
    .rm-pop-overlay {
        padding: 12px;
    }

    .rm-pop-box,
    .rm-pop-box.rm-pop-wide {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 18px 16px;
    }

    .rm-pop-box .rm-pop-actions .rm-btn {
        flex: 1 1 0;
        height: 46px;
    }

    .rm-pop-box .rm-seg.rm-seg-2x2 button.rm-seg-btn {
        flex: 1 1 calc(50% - 3px);
    }

    .rm-pop-box button.rm-pop-close,
    .rm-pop-box button.rm-pop-back {
        width: 44px;
        height: 44px;
        margin-top: -10px;
        margin-bottom: -10px;
    }
}

/* Choices with long words (a set's name) stack one per line on a narrow phone. */
@media (max-width: 480px) {
    .rm-pop-box .rm-seg.rm-seg-stack-phone button.rm-seg-btn {
        flex: 1 1 100%;
    }
}

/* ============================================================================
   TOASTS - one short line at the bottom centre, above any popup ("Card
   added", "Network error"): an icon, then the words, in the message's
   colour. Every toast on the Lists and collection pages uses it; the page
   adds .rm-toast-show to slide it in and removes it to fade it out.
============================================================================ */
.rm-toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    width: fit-content;
    max-width: 440px;
    margin: 0 auto;
    padding: 11px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.rm-toast.rm-toast-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.rm-toast > i {
    flex: 0 0 auto;
    font-size: 15px;
}

.rm-toast.rm-toast-success {
    background: #065f46;
    border-color: #059669;
    color: #6ee7b7;
}

.rm-toast.rm-toast-error {
    background: #7f1d1d;
    border-color: #b91c1c;
    color: #fca5a5;
}

.rm-toast.rm-toast-info {
    background: #2a2a2a;
    border-color: var(--rm-pop-border);
    color: #eee;
}