/* ==========================================================================
   snifffr — seller polls
   Card lives inside an activity item; composer + voters are footer modals.
   Brand tokens come from custom.css :root (--color-pink / --color-purple);
   fallbacks are inlined so the card still looks right if it is ever rendered
   somewhere that stylesheet has not loaded.
   ========================================================================== */

.snf-poll {
    --snf-pink: var(--color-pink, #e65c95);
    --snf-plum: var(--color-purple, #332e4d);
    --snf-line: #e3e0ea;
    --snf-fill: #f3f1f7;
    margin: 4px 0 0;
    /* The card has to inset itself. Its container, .snifffr-mp-activity-body,
       is explicitly `padding: 0` (snifffr-activity.css:798) because media in
       the feed is meant to run edge to edge — so a poll, which is text and
       buttons, came out flush against the card border.

       16px matches the rest of the activity item: .snifffr-mp-activity-text is
       `15px 16px 0 68px` and .snifffr-mp-activity-time `1px 16px 12px 68px`.
       Only the horizontal 16 applies here. The 68px on those is clearance for
       the absolutely positioned avatar on the header line, and the poll sits
       below it, so matching that would indent the card for no reason. */
    padding: 4px 16px 16px;
}

/* 6px, not the 12 this used to claim: .snifffr-mp-activity-content p
   (snifffr-mobile-redesign.css:6150) sets `margin: 0 0 6px` at (0,2,1) and
   wins against a bare class, so 12 never applied. Stating the number that
   actually renders — see .snf-poll-meta below for the one place it was worth
   out-specifying. */
.snf-poll-q {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--snf-plum);
}

.snf-poll-opts { display: flex; flex-direction: column; gap: 8px; }

/* Each option is one button. The bar is a layer inside it rather than a
   separate element above it, so an option reads as a single tap target
   whether it is showing a result or not. */
.snf-poll-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;                 /* a real touch target */
    padding: 10px 14px;
    border: 1.5px solid var(--snf-pink);
    border-radius: 999px;
    background: #fff;
    color: var(--snf-pink);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.snf-poll-opt:hover:not(:disabled) { background: #fff6fa; }
.snf-poll-opt:focus-visible { outline: 2px solid var(--snf-plum); outline-offset: 2px; }

.snf-poll-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: #f6dced;
    transition: width .45s cubic-bezier(.22,.61,.36,1);
    z-index: 0;
}
.snf-poll-label { position: relative; z-index: 1; flex: 1; }
.snf-poll-pct {
    position: relative; z-index: 1;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    opacity: .85;
}

/* Once voted the options stop being controls and become a result read-out. */
.snf-poll.is-voted .snf-poll-opt {
    border-color: var(--snf-line);
    background: var(--snf-fill);
    color: var(--snf-plum);
    cursor: default;
}
.snf-poll.is-voted .snf-poll-opt .snf-poll-bar { background: #e7e1f2; }

/* The viewer's own choice stays obvious after the fact — it is the one piece
   of state the cached HTML cannot carry, so it has to read clearly. */
.snf-poll-opt.is-mine {
    border-color: var(--snf-pink) !important;
    color: var(--snf-plum) !important;
    font-weight: 700;
}
.snf-poll-opt.is-mine .snf-poll-bar { background: #f9cde2 !important; }
.snf-poll-opt.is-mine .snf-poll-label::after {
    content: "✓";
    margin-left: 7px;
    color: var(--snf-pink);
    font-weight: 700;
}

/* ── the optional linked listing ──────────────────────────────────────────
   Sits between the question and the choices. The image is capped so a tall
   portrait shot cannot push the buttons off the card — polls are exempt from
   the activity read-more clamp, so whatever this block costs in height is
   height the viewer has to scroll past to vote. */
.snf-poll-item {
    display: block;
    margin: 0 0 12px;
    border: 1px solid var(--snf-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
}
.snf-poll-item:hover { border-color: var(--snf-pink); }
/* Armour, not styling. Two theme rules claim every <img> inside an activity
   body and both out-specify a bare class:

     snifffr-desktop-redesign.css:11079  .snifffr-dp-body--about
       .snifffr-mp-activity-body img      (0,2,1), every property !important
       — 20px, border-radius 50%, clip-path: circle(). It is there for the
       inline mention avatars BP injects into action text, and it turned the
       listing photo into a dot.
     snifffr-mobile-redesign.css:6169     .snifffr-mp-activity-content img
       (0,2,1), softer, but adds a 6px top margin inside the card.

   So this selector carries html + body (and the #buddypress copy for the
   feed) to clear (0,2,1), and repeats !important to beat theirs. Half a rule
   loses every one of these fights — see #3938. */
html body .snf-poll .snf-poll-item-img,
html body #buddypress .snf-poll .snf-poll-item-img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 240px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    background: none !important;
    object-fit: cover !important;
    vertical-align: top !important;
}
.snf-poll-item-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.snf-poll-item-t {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--snf-plum);
}
.snf-poll-item-cta { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--snf-pink); }
.snf-poll-item-cta::after { content: " \2192"; }
/* Gated for this viewer: link row only, no locked tile. */
.snf-poll-item--bare .snf-poll-item-bar { padding: 10px 12px; }

.snf-poll.is-busy { opacity: .6; pointer-events: none; }

.snf-poll-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: #7d7792;
}
/* The vote count sat straight under the last option: the same
   .snifffr-mp-activity-content p rule zeroes every <p> margin in an activity
   body at (0,2,1), so the 11px this asked for never landed. Armoured the way
   .snf-poll-item-img is. */
html body .snf-poll .snf-poll-meta,
html body #buddypress .snf-poll .snf-poll-meta {
    margin: 14px 2px 0 !important;
}
.snf-poll-state { white-space: nowrap; }

.snf-poll-login { margin: 10px 2px 0; font-size: 12.5px; }
.snf-poll-login a { color: var(--snf-pink); font-weight: 600; text-decoration: none; }
.snf-poll-login a:hover { text-decoration: underline; }

.snf-poll-voters {
    margin-top: 10px;
    padding: 7px 14px;
    border: 1px solid var(--snf-line);
    border-radius: 999px;
    background: #fff;
    color: var(--snf-plum);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.snf-poll-voters:hover { border-color: var(--snf-pink); color: var(--snf-pink); }

.snf-poll-fresh { animation: snfPollIn .35s ease both; }
@keyframes snfPollIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── activity-directory announcement ──────────────────────────────────────
   Premium sellers only, top of the page, and only until the date in
   snifffr-polls-announce.php. Deliberately the same object as every other
   feature banner we have shipped — medal, New pill, gradient, pill CTA —
   so it reads as "snifffr announcement" and not as a stray card. Values
   track snifffr-wishlist-announce.php; keep them in step. */
.snifffr-pa {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    margin: 0 0 20px; padding: 16px 46px 16px 18px;
    background: linear-gradient(120deg, #fdeef6 0%, #f3ecfc 55%, #fdf3ea 100%);
    border: 1px solid #f4e3ef; border-radius: 18px;
    box-shadow: 0 14px 30px -22px rgba(124,92,255,.55);
}
.snifffr-pa-medal {
    flex: 0 0 auto; width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(140deg, #e65c95, #7c5cff);
    color: #fff; font-size: 22px;
    filter: drop-shadow(0 7px 11px rgba(124,92,255,.35));
}
.snifffr-pa-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.snifffr-pa-title { font-size: 15px; font-weight: 800; color: #332e4d; line-height: 1.2; letter-spacing: .2px; }
.snifffr-pa-new {
    display: inline-block; vertical-align: middle; margin-right: 4px;
    font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: #fff; background: #e65c95; border-radius: 999px; padding: 2px 8px;
}
.snifffr-pa-sub { font-size: 12.5px; color: #6d6485; line-height: 1.35; }
.snifffr-pa-cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    border: 0; cursor: pointer;
    background: #e65c95; color: #fff !important; text-decoration: none !important;
    font-size: 13px; font-weight: 700; border-radius: 999px; padding: 9px 16px;
    box-shadow: 0 10px 20px -12px rgba(230,92,149,.75);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
}
.snifffr-pa-cta:hover, .snifffr-pa-cta:focus { background: #d84c86; transform: translateY(-1px); box-shadow: 0 14px 24px -12px rgba(230,92,149,.8); }
.snifffr-pa-cta .bi { font-size: 12px; }
.snifffr-pa-x {
    position: absolute; top: 8px; right: 10px;
    border: 0; background: transparent; cursor: pointer;
    color: #a99fbb; font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 8px;
    transition: color .15s ease, background .15s ease;
}
.snifffr-pa-x:hover, .snifffr-pa-x:focus { color: #6d6485; background: rgba(124,92,255,.08); }

@media (max-width: 600px) {
    .snifffr-pa { flex-wrap: wrap; gap: 12px; padding: 16px 42px 16px 16px; }
    .snifffr-pa-medal { width: 46px; height: 46px; font-size: 20px; }
    .snifffr-pa-copy { flex: 1 1 140px; }
    .snifffr-pa-cta { width: 100%; justify-content: center; }
}

/* ── composer + voters modals ─────────────────────────────────────────── */
.snf-pollc, .snf-pollv {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(26, 22, 40, .55);
    display: flex; align-items: flex-end; justify-content: center;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.snf-pollc[hidden], .snf-pollv[hidden] { display: none !important; }

.snf-pollc-sheet, .snf-pollv-sheet {
    width: 100%; max-width: 520px;
    max-height: 88vh;
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.3);
    animation: snfSheetUp .22s ease both;
}
@keyframes snfSheetUp { from { transform: translateY(20px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
    .snf-pollc, .snf-pollv { align-items: center; }
    .snf-pollc-sheet, .snf-pollv-sheet { border-radius: 16px; }
}

.snf-pollc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--snf-line, #e3e0ea);
}
.snf-pollc-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: #332e4d; }
.snf-pollc-x { border: 0; background: none; font-size: 28px; line-height: 1; color: #8b84a0; cursor: pointer; padding: 0 4px; }

.snf-pollc-body { padding: 16px 18px; overflow-y: auto; }
.snf-pollc-lab { display: block; margin: 16px 0 7px; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #8b84a0; }
.snf-pollc-lab:first-child { margin-top: 0; }
.snf-pollc-body input[type=text] {
    width: 100%; padding: 11px 13px; margin-bottom: 8px;
    border: 1.5px solid var(--snf-line, #e3e0ea); border-radius: 10px;
    font-size: 14.5px; color: #332e4d; background: #fff;
}
.snf-pollc-body input[type=text]:focus { outline: none; border-color: #e65c95; }
.snf-pollc-hint { margin: 2px 0 0; font-size: 12px; color: #8b84a0; }

.snf-pollc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.snf-pollc-chip {
    padding: 8px 14px; border: 1.5px solid var(--snf-line, #e3e0ea); border-radius: 999px;
    background: #fff; color: #5b5470; font-size: 13px; font-weight: 600; cursor: pointer;
}
.snf-pollc-chip.is-on { border-color: #e65c95; background: #fdeef5; color: #332e4d; }

/* Answer choices. One row per choice: the text input plus a remove button that
   only shows while there is more than the minimum to remove. The input's own
   margin-bottom is dropped — the row gap does that spacing now. */
.snf-pollc-opts { display: flex; flex-direction: column; gap: 8px; }
.snf-pollc-row { display: flex; align-items: center; gap: 8px; }
.snf-pollc-row input[type=text] { margin-bottom: 0; }

.snf-pollc-del {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: #f3f1f7; color: #8b84a0;
    font-size: 20px; line-height: 1; cursor: pointer;
}
.snf-pollc-del:hover { background: #fdeef5; color: #e65c95; }
/* display:flex above would otherwise beat the UA rule for the attribute. */
.snf-pollc-del[hidden] { display: none; }

.snf-pollc-add {
    margin-top: 10px; padding: 8px 14px;
    border: 1.5px dashed var(--snf-line, #e3e0ea); border-radius: 999px;
    background: #fff; color: #5b5470; font-size: 13px; font-weight: 600; cursor: pointer;
}
.snf-pollc-add:hover:not(:disabled) { border-color: #e65c95; color: #e65c95; }
.snf-pollc-add:disabled { opacity: .45; cursor: not-allowed; }

.snf-pollc-opt-tag {
    margin-left: 6px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
    color: #b3adc4;
}

/* Listing picker. Hidden until the seller asks for it, then a grid of their
   own listings; one at a time, and tapping the linked one unlinks it. */
.snf-pollc-pick { margin-top: 2px; }
.snf-pollc-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin-top: 10px;
    max-height: 240px;
    overflow-y: auto;
}
.snf-pollc-items[hidden] { display: none; }
.snf-pollc-item {
    display: flex; flex-direction: column; gap: 5px;
    padding: 6px;
    border: 2px solid var(--snf-line, #e3e0ea);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 11.5px;
    line-height: 1.3;
    color: #5b5470;
    text-align: center;
}
.snf-pollc-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; display: block; }
.snf-pollc-item span {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.snf-pollc-item.is-on { border-color: #e65c95; background: #fdeef5; color: #332e4d; }

/* "Also send to my followers" — the one control in this composer that spends
   something other than the poll quota, so it is a panel rather than a line. */
.snf-pollc-send {
    margin-top: 16px;
    border: 1.5px solid var(--snf-line, #e3e0ea);
    border-radius: 12px;
    background: #faf9fc;
}
.snf-pollc-send-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; cursor: pointer;
}
.snf-pollc-send-row input { margin: 2px 0 0; flex: 0 0 auto; width: 16px; height: 16px; accent-color: #e65c95; }
.snf-pollc-send-row strong { display: block; font-size: 13.5px; font-weight: 700; color: #332e4d; }
.snf-pollc-send-row small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: #8b84a0; }
.snf-pollc-send.is-off { background: #f6f5f8; }
.snf-pollc-send.is-off .snf-pollc-send-row { cursor: not-allowed; }
.snf-pollc-send.is-off strong { color: #8b84a0; }

/* The card as it appears inside a private message. */
.snifffr-broadcast-poll { padding: 2px 0 0; }

.snf-pollc-foot {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; border-top: 1px solid var(--snf-line, #e3e0ea);
}
.snf-pollc-msg { margin: 0; flex: 1; font-size: 13px; color: #9c1f3a; min-width: 140px; }
.snf-pollc-left { margin: 0; font-size: 12px; color: #8b84a0; }
.snf-pollc-go {
    padding: 11px 22px; border: 0; border-radius: 999px;
    background: #e65c95; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.snf-pollc-go:disabled { background: #d9d5e2; cursor: not-allowed; }

.snf-pollv-body { padding: 8px 18px 18px; overflow-y: auto; }
.snf-pollv-body h4 { margin: 16px 0 8px; font-size: 13px; color: #332e4d; }
.snf-pollv-body h4 span { color: #8b84a0; font-weight: 400; }
.snf-pollv-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.snf-pollv-body li a {
    display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px;
    border: 1px solid var(--snf-line, #e3e0ea); border-radius: 999px;
    text-decoration: none; color: #332e4d; font-size: 12.5px;
}
.snf-pollv-body li img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.snf-pollv-load { font-size: 13px; color: #8b84a0; }

@media (prefers-reduced-motion: reduce) {
    .snf-poll-bar, .snf-poll-fresh, .snf-pollc-sheet, .snf-pollv-sheet { animation: none !important; transition: none !important; }
}