/* ============================================================================
   private-seller-fixes.css
   ----------------------------------------------------------------------------
   Companion to private-seller-fixes-patch.js. Styles the new Scene 7 features
   multi-select dropdown and the wider "feeling" pill grid.

   LOAD ORDER: after private-seller.css and private-seller-scenes-extra.css.
   ============================================================================ */

/* ── Features multi-select dropdown ──────────────────────────────────── */
.ps-s7-features-dd-wrap {
    position: relative;
    width: 100%;
}

.ps-s7-features-dd-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sj-dark, #1A1D20);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

    .ps-s7-features-dd-toggle:hover {
        border-color: var(--sj-orange, #F58220);
    }

    .ps-s7-features-dd-toggle.open {
        border-color: var(--sj-orange, #F58220);
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.12);
    }

    .ps-s7-features-dd-toggle i {
        color: var(--sj-orange, #F58220);
        font-size: 1rem;
        transition: transform 0.2s ease;
    }

    .ps-s7-features-dd-toggle.open i {
        transform: rotate(180deg);
    }

.ps-s7-features-dd-summary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    color: var(--sj-dark, #1A1D20);
}

    .ps-s7-features-dd-summary:not(:has(*))::before {
        content: '';
    }

/* The panel — absolute, scrolls when many features. Z-index above other
   form rows so it overlays cleanly. */
.ps-s7-features-dd-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ps-s7-features-dd-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    font-size: 0.9rem;
    font-weight: 500;
    color: #2c3340;
}

    .ps-s7-features-dd-opt:hover {
        background: rgba(245, 130, 32, 0.07);
    }

    .ps-s7-features-dd-opt input[type="checkbox"] {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        accent-color: var(--sj-orange, #F58220);
        cursor: pointer;
    }

    .ps-s7-features-dd-opt span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 1 1 auto;
    }

        .ps-s7-features-dd-opt span i {
            color: var(--sj-orange, #F58220);
        }

.ps-s7-features-dd-allopt {
    background: linear-gradient(135deg, rgba(245, 130, 32, 0.06), rgba(245, 130, 32, 0.02));
    border: 1px dashed rgba(245, 130, 32, 0.35);
    margin-bottom: 4px;
}

    .ps-s7-features-dd-allopt span {
        font-weight: 700;
    }

.ps-s7-features-dd-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 4px 6px;
}

/* ── "Feeling" pill grid — wider, wraps cleanly with 6+ options ──────── */
.ps-s7-quick-opts.ps-s7-quick-opts--feelings {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .ps-s7-quick-opts.ps-s7-quick-opts--feelings .ps-s7-quick-opt {
        /* Slightly tighter than the default to fit 6-9 options on a single
       desktop row group. */
        padding: 8px 14px;
        font-size: 0.86rem;
        line-height: 1.2;
        flex: 0 1 auto;
        max-width: 100%;
    }

/* Mobile — keep the dropdown panel anchored cleanly inside the modal */
@media (max-width: 600px) {
    .ps-s7-features-dd-panel {
        max-height: 240px;
    }

    .ps-s7-features-dd-toggle {
        font-size: 0.88rem;
        padding: 11px 12px;
    }

    .ps-s7-quick-opts.ps-s7-quick-opts--feelings .ps-s7-quick-opt {
        font-size: 0.82rem;
        padding: 7px 12px;
    }
}

/* ── Tone badge (post-fix) ───────────────────────────────────────────
   Companion styling for the badge created by B1 in private-seller-fixes-patch.js.
   The patch removes the original full-width "NO TONE SELECTED" badge from
   the DOM entirely and replaces it (only AFTER the user picks a tone)
   with a node carrying both .ps-s7-tone-badge (so it inherits the base
   pill look from private-seller.css) and .ps-s7-tone-badge--fix.

   The modifier class lets us:
     • Promote the badge to its own line so it doesn't fight the textarea
       above for width — the original used `inline-flex` which on some
       layouts stretched to fill its flex parent and read full-width.
     • Add a small entry animation so it feels like positive feedback
       ("you picked a tone") instead of a static placeholder.
   ──────────────────────────────────────────────────────────────────── */
.ps-s7-tone-badge--fix {
    display: inline-flex;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    margin-top: 6px;
    margin-bottom: 8px;
    animation: psS7ToneBadgeIn 0.22s ease-out;
}

@keyframes psS7ToneBadgeIn {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   PATCH E styles — Scene 3 (DNA Builder) production fixes
   ----------------------------------------------------------------------------
   E3 — minimum-size live hint
       The ps-size-hint--fix node is appended just below the size <input>
       wrapper by patchSceneThreeDna. It stays empty (display:none) until
       the user enters a positive value below the per-field minimum.

   E3 — "below minimum" tile state
       Mirrors the existing .ps-metric-tile--needs orange-outline state
       used for missing required fields, but with a subtler treatment
       so the user understands "you need MORE, not nothing".
   ============================================================================ */
.ps-size-hint--fix {
    display: none;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(245, 130, 32, 0.08);
    border: 1px solid rgba(245, 130, 32, 0.28);
    color: #8a3f00;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    animation: psSizeHintIn 0.18s ease-out;
}

    .ps-size-hint--fix.is-active {
        display: block;
    }

@keyframes psSizeHintIn {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ps-metric-tile--below-min {
    /* Subtler than --needs: we use a dashed border to communicate
       "value is here but not enough" vs solid orange for "missing". */
    border-color: rgba(245, 130, 32, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.10) !important;
}

    .ps-metric-tile--below-min input[type="number"] {
        color: #8a3f00;
    }

/* Mobile: keep the hint tight inside the modal */
@media (max-width: 600px) {
    .ps-size-hint--fix {
        font-size: 0.74rem;
        padding: 5px 8px;
        margin-top: 5px;
    }
}