/*
 * "Message selected" and its form, in SEO Pro Stack's Saved panel. Colours
 * come from the panel (its Kadence palette text and background) and
 * translucent neutrals, so light and dark palettes both work.
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 * SPDX-FileCopyrightText: 2026 Marcus Quinn
 * Additional terms (GPL-3.0 section 7(b)): ATTRIBUTION.txt
 * Provenance: wpas-11fc97ca9348a13b. Copies, even of part, keep these lines.
 */
.spd-shortlist-actions {
    display: grid;
    gap: 12px;
}

/* In named lists' toolbar (SEO Pro Stack 1.3.64+): "Message selected"
   alone, before More actions; its note (nothing ticked, sent) shows
   above them (below). */
.sps-lists__end .spd-shortlist-actions {
    display: contents;
}

.sps-lists__end .spd-shortlist-hint {
    display: none;
}

/* The list's main action: filled in the site's button colours, with More
   actions the same height beside it. */
.sps-lists__end .spd-shortlist-open,
.spd-shortlist-send {
    --spd-shortlist-on-accent: var(--global-palette-btn, #fff);
    order: -1;
    padding-inline: 20px;
    border-color: var(--global-palette-btn-bg, var(--global-palette1, currentColor));
    background: var(--global-palette-btn-bg, var(--global-palette1, transparent));
    color: var(--spd-shortlist-on-accent);
}

.sps-lists__end .spd-shortlist-open:hover,
.sps-lists__end .spd-shortlist-open:focus-visible,
.spd-shortlist-send:hover,
.spd-shortlist-send:focus-visible {
    border-color: var(--global-palette-btn-bg-hover, var(--global-palette2, currentColor));
    background: var(--global-palette-btn-bg-hover, var(--global-palette2, transparent));
    color: var(--spd-shortlist-on-accent);
}

/* Dark mode: Kadence's button text usually follows a palette slot that
   turns dark (the page colour), which put dark text on the filled button.
   White, as in light mode (owner review, 21 October 2026). */
body.color-switch-dark .sps-lists__end .spd-shortlist-open,
body.color-switch-dark .spd-shortlist-send {
    --spd-shortlist-on-accent: #fff;
}

/* Buttons and fields here take the theme's button corners (Customizer:
   Buttons → Border Radius, --spd-button-radius, theme-styles.php), so
   "Message selected", More actions, "Send message" and Cancel share one
   shape (owner review, 23 October 2026). */
.sps-lists__end .sps-lists__more {
    min-height: 48px;
    border-radius: var(--spd-button-radius, 6px);
}

/* The note ("Tick up to 5 businesses.", "Sent.") sits just above the
   buttons, in the space over the toolbar, so showing it moves nothing.
   More actions' list then opens from this group, under its button. */
.sps-lists__end:has(.spd-shortlist-note) {
    position: relative;
    justify-content: flex-end;
}

.sps-lists__end .spd-shortlist-note {
    position: absolute;
    inset-block-end: calc(100% + 2px);
    inset-inline-end: 0;
    width: max-content;
    max-width: min(24rem, calc(100vw - 32px));
    margin: 0;
    font-size: var(--spd-text-small, 1.125rem);
    font-weight: 700;
    line-height: 1.3;
    text-align: end;
}

.sps-lists__end .spd-shortlist-note:empty {
    display: none;
}

/* A narrow toolbar puts Select all on a line of its own, just above the
   buttons: the note then takes its own line over them instead. */
.sps-lists__toolbar:has(.spd-shortlist-note) {
    container-type: inline-size;
}

@container (max-width: 28rem) {
    .sps-lists__end .spd-shortlist-note {
        position: static;
        flex-basis: 100%;
        order: -2;
        max-width: none;
    }
}

/* The form: a modal dialog over the page, in the page's surface colours
   (both palettes), full screen on phones. Corner radius: --spd-radius, the
   directory's (a theme can set it). */
.spd-shortlist-compose {
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: 640px;
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: clamp(28px, 5vw, 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: var(--spd-radius, 12px);
    background: var(--global-palette9, Canvas);
    color: var(--global-palette4, CanvasText);
    box-shadow: 0 24px 64px rgb(0 0 0 / 28%);
}

.spd-shortlist-compose::backdrop {
    background: rgb(15 23 42 / 62%);
}

html.spd-shortlist-modal-open {
    overflow: hidden;
}

.spd-shortlist-compose .spd-shortlist-title {
    margin-top: 0;
    padding-right: 48px;
    color: var(--global-palette3, inherit);
}

.spd-shortlist-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--spd-radius, 12px);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.spd-shortlist-close:hover {
    background: var(--global-palette8, rgb(127 127 127 / 12%));
    color: var(--global-palette3, inherit);
}

.spd-shortlist-close:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 0;
}

@media (max-width: 640px) {
    .spd-shortlist-compose {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin: 0;
        padding: 56px 20px 24px;
        border-radius: 0;
    }
}

.spd-shortlist-hint,
.spd-shortlist-note,
.spd-shortlist-to,
.spd-shortlist-intro,
.spd-shortlist-status {
    margin: 0;
    font-size: var(--spd-text-small, 1.125rem);
}

.spd-shortlist-hint,
.spd-shortlist-intro {
    opacity: 0.8;
}

.spd-shortlist-note:empty,
.spd-shortlist-status:empty,
.spd-shortlist-to:empty {
    display: none;
}

.spd-shortlist-note,
.spd-shortlist-status {
    font-weight: 600;
}

.spd-shortlist-open,
.spd-shortlist-send {
    justify-content: center;
    min-height: 48px;
    border-radius: var(--spd-button-radius, 6px);
    font-weight: 600;
}

.spd-shortlist-open[hidden],
.spd-shortlist-compose:not([open]) {
    display: none;
}

.spd-shortlist-form {
    display: grid;
    gap: 12px;
    margin: 0;
}

.spd-shortlist-title {
    margin: 8px 0 0;
    font-size: var(--spd-h5-size, 1.25em);
    line-height: var(--spd-h5-line-height, 1.25);
}

.spd-shortlist-title:focus {
    outline: none;
}

.spd-shortlist-to {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.spd-shortlist-field {
    display: grid;
    gap: 4px;
    margin: 0;
}

.spd-shortlist-field label {
    font-size: var(--spd-text-small, 1.125rem);
    font-weight: 600;
}

/* Field names are placeholders; labels are for screen readers only. */
.spd-shortlist-field .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.spd-shortlist-field ::placeholder {
    color: inherit;
    opacity: 0.68;
}

.spd-shortlist-field select:has(option[value=""]:checked) {
    color: color-mix(in srgb, currentColor 68%, transparent);
}

.spd-shortlist-field input:not([type="checkbox"]),
.spd-shortlist-field select,
.spd-shortlist-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid rgb(127 127 127 / 55%);
    border-radius: var(--spd-button-radius, 6px);
    background: transparent;
    color: inherit;
    font: inherit;
}

.spd-shortlist-field select option {
    background: var(--global-palette9, Canvas);
    color: var(--global-palette3, CanvasText);
}

.spd-shortlist-field textarea {
    min-height: 7.5em;
    resize: vertical;
}

.spd-shortlist-field input:focus-visible,
.spd-shortlist-field select:focus-visible,
.spd-shortlist-field textarea:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.spd-shortlist-consent label {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-weight: 400;
}

.spd-shortlist-consent input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
}

.spd-shortlist-consent a {
    color: inherit;
    font-size: inherit;
}

.spd-shortlist-required {
    opacity: 0.7;
}

/* People never see it; bots fill it. */
.spd-shortlist-trap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.spd-shortlist-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* "Send message" and Cancel: one size and shape (SEO Pro Stack's button
   is a pill). */
.spd-shortlist-buttons .sps-reactions__button {
    flex: 1 1 8rem;
    justify-content: center;
    min-height: 48px;
    border-radius: var(--spd-button-radius, 6px);
}

.spd-shortlist-send:disabled {
    cursor: progress;
    opacity: 0.6;
}