/* ogapoll.css — Studio poll pages (builder, details). Moved as-is from builder.cshtml <style>. */
/* ============ Poll builder — mockup-faithful rebuild (2026-09-26) ============
   Ported class-for-class from the approved Design canvas ("Poll/Survey Builder
   Redesign", artboards Studio_Step1_Create / Step3_Settings / Step4_Preview /
   Step2a_QuestionType / Step2b_QuestionContent / Step5_Created) -- every color,
   spacing value and component listed there is reproduced here under an
   "ogapoll-" prefix so it never collides with _Layout.cshtml's other CSS. */
.ogapoll {
    --navy: #0B2C57; --navy2: #0A2340; --blue: #1F7BC0; --blueS: #1565A8; --cyan: #2BB3E3;
    --red: #E63329; --redD: #C4271E; --section: #E9F5FC; --section2: #F2FAFF;
    --border: #CFE6F5; --line: #E3EEF6; --text: #0B2C57; --muted: #6C8098;
    font-family: 'Nunito', sans-serif; color: var(--text);
    max-width: 700px; margin: 0 auto; background: #F4F9FC; padding: 24px 24px 0; border-radius: 16px;
    zoom: 1.35; /* appearance only, per user request 2026-09-26 — trivially reverted by deleting this line */
}
#addPollQuestionModal, #pollCreatedModal {
    --navy: #0B2C57; --navy2: #0A2340; --blue: #1F7BC0; --cyan: #2BB3E3; --red: #E63329; --redD: #C4271E;
    --section: #E9F5FC; --section2: #F2FAFF;
    --border: #CFE6F5; --line: #E3EEF6; --text: #0B2C57; --muted: #6C8098;
    font-family: 'Nunito', sans-serif; color: var(--text);
}
/* ONE size for every image/video box (cover, question photo, answer photos, question
   thumbnails, preview rows) — per user 2026-09-28: all media boxes rectangular, one size per level. */
/* Question-level boxes (poll/survey cover, question photo, question thumbnails) are one notch
   bigger than answer-option boxes (--media-*). Same ~1.44 ratio for both. */
.ogapoll, #addPollQuestionModal, #pollCreatedModal { --media-w: 96px; --media-h: 67px; --qmedia-w: 112px; --qmedia-h: 78px; }
.ogapoll h1, .ogapoll h2, .ogapoll h3, .ogapoll h4, .ogapoll-card-title, .ogapoll-label,
.ogapoll-btn, .ogapoll-addq h4, .ogapoll-mhead-title, .ogapoll-typecard .tt,
#pollCreatedModal h2, .ogapoll-created-cta, .ogapoll-qhead, .ogapoll-setlabel { font-family: 'Poppins', sans-serif; }

.ogapoll-screen { padding-bottom: 24px; }
.req { color: var(--red); margin-left: 2px; }
.ogapoll-statusbar { display: flex; justify-content: flex-end; padding: 0 0 10px; }
/* Bootstrap's .form-check-reverse floats the input into negative padding, which overlapped the
   label inside this flex row — neutralise it and let flex place label then switch. */
.ogapoll-statusbar .form-check { display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; padding: 0; margin: 0; min-height: 0; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--navy); }
.ogapoll-statusbar .form-check.form-switch.form-check-reverse .form-check-input { width: 38px; height: 21px; cursor: pointer; float: none; margin: 0; }

.ogapoll-titlebar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ogapoll-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--navy); padding: 6px 14px; border-radius: 20px; font-weight: 800; font-size: 12px; border: 1px solid var(--border); }
.ogapoll-pill-step { background: var(--navy); color: #fff; border-color: var(--navy); }
.ogapoll-pill-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.ogapoll-mutedstep { font-size: 12.5px; color: var(--muted); font-weight: 700; }

.ogapoll-card { background: var(--section); border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.ogapoll-card-white { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 2px 10px rgba(11,44,87,.05); }
.ogapoll-card-revenue { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 2px 10px rgba(11,44,87,.05); border-top: 3px solid #D97706; }
.ogapoll-card-title { font-weight: 800; color: var(--navy); font-size: 18px; margin: 0 0 16px; }
.ogapoll-card-sub { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-bottom: 18px; margin-top: -12px; }

.ogapoll-gifttext { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.5; margin-bottom: 14px; }

.ogapoll-label { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--navy); font-size: 13px; margin-bottom: 8px; display: block; }
.ogapoll-hint { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.ogapoll-errmsg { color: var(--red); font-weight: 700; margin-bottom: 10px; }
.ogapoll-muted { color: var(--muted); font-weight: 600; }
.ogapoll-center { text-align: center; }

.ogapoll-row { display: flex; gap: 12px; }
/* Design: the field beside an image box stretches to the box height (layout CSS forces 50px on inputs). */
.ogapoll-row > .ogapoll-field-input { height: auto; align-self: stretch; }
.ogapoll-row2col { display: flex; gap: 12px; margin-top: 2px; }
.ogapoll-row2col > div { flex: 1; }

.ogapoll-thumb { width: var(--qmedia-w); height: var(--qmedia-h); border-radius: 12px; border: 2px dashed var(--border); background: #fff; display: grid; place-items: center; color: #b6cee0; flex: none; position: relative; font-size: 20px; cursor: pointer; }
.ogapoll-cam { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; border: 2px solid #fff; font-size: 10px; }
.ogapoll-cam.sm { width: 18px; height: 18px; top: -5px; right: -5px; border-width: 1.5px; }

.ogapoll-field-input, .ogapoll-select {
    width: 100%; border: 1.5px solid var(--border); background: #fff; border-radius: 12px;
    padding: 12px 14px; font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 14px;
    color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; box-sizing: border-box;
}
.ogapoll-field-input:disabled, .ogapoll-select:disabled { background: #F2F6FA; color: var(--muted); cursor: not-allowed; }
.ogapoll-field-input:focus, .ogapoll-select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(43,179,227,.15); }
textarea.ogapoll-field-input { resize: vertical; min-height: 60px; }
.ogapoll-select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236C8098' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}

.ogapoll-sec { margin: 16px 0 8px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; color: var(--navy); }
.ogapoll-ck { display: flex; align-items: center; gap: 9px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--navy); cursor: pointer; }
.ogapoll-ck input { width: 17px; height: 17px; accent-color: var(--cyan); }
.ogapoll-ogcsub { margin: 14px 0 0 26px; padding-left: 14px; border-left: 2px solid var(--border); }
.ogapoll-ogcsub2 { background: var(--section); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 12px; }

/* No bottom margin: the control row below is pulled up by half the "+" button height so every
   icon sits centred on this box's dashed bottom border (half inside, half outside). */
.ogapoll-addq { display: block; border: 2px dashed var(--border); border-radius: 14px; padding: 10px 16px 18px; text-align: center; background: #fff; text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s; margin-bottom: 0; }
.ogapoll-addq:hover { border-color: var(--cyan); }
.ogapoll-addq h4 { font-weight: 800; color: var(--navy); margin: 0 0 4px; font-size: 14.5px; }
.ogapoll-addq p { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; }

.ogapoll-ctrlrow { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; position: relative; top: -22px; z-index: 2; }
/* Mockup: red buttons are 38px rounded squares, only the navy "+" is a 44px circle. */
.ogapoll-icobtn { width: 38px; height: 38px; border-radius: 10px; border: none; display: grid; place-items: center; cursor: pointer; color: #fff; }
.ogapoll-icobtn-red { background: var(--red); }
.ogapoll-icobtn-red:hover { background: var(--redD); }
.ogapoll-icobtn-navy { background: var(--navy); width: 44px; height: 44px; border-radius: 50%; }
.ogapoll-icobtn-navy:hover { background: var(--navy2); }

/* Question strip: the semi-transparent ‹ › arrows live INSIDE the card and float OVER the thumbnails
   (per user: no space reserved for them); thumbnails centred like the mockup, 'safe center' keeps
   the first one reachable when the list overflows. */
.ogapoll-strip { position: relative; min-width: 0; background: var(--section); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.ogapoll-chev { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 14px; height: 14px; color: #fff; background: rgba(230,51,41,.6); border-radius: 50%; padding: 6px; box-sizing: content-box; cursor: pointer; }
.ogapoll-chev[data-dir="-1"] { left: 10px; }
.ogapoll-chev[data-dir="1"] { right: 10px; }
.ogapoll-qlist { display: flex; justify-content: safe center; gap: 10px; overflow-x: auto; padding: 2px; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.ogapoll-qlist::-webkit-scrollbar { display: none; }
.ogapoll-qthumb { position: relative; flex: none; width: var(--qmedia-w); height: var(--qmedia-h); border-radius: 12px; border: 2px solid var(--border); background: #fff; display: grid; place-items: center; color: #b6cee0; font-size: 22px; cursor: pointer; transition: transform .15s, border-color .2s; }
.ogapoll-qthumb:hover { transform: translateY(-3px); }
.ogapoll-b1 { border-color: #37B26A; } .ogapoll-b2 { border-color: var(--cyan); } .ogapoll-b3 { border-color: #8A6FE8; }
.ogapoll-qthumb.active, .ogapoll-qthumb.selected { box-shadow: 0 0 0 3px rgba(31,123,192,.35); }
.ogapoll-qnum { position: absolute; top: 4px; right: 4px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-family: 'Poppins', sans-serif; }

.ogapoll-singleq { background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 14px; margin-bottom: 10px; cursor: pointer; }
.ogapoll-singleq:hover { border-color: var(--cyan); }
.ogapoll-singleq .txt { flex-grow: 1; }
.ogapoll-singleq .qt { font-weight: 800; font-size: 13.5px; color: var(--navy); }
.ogapoll-singleq .qd { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.ogapoll-editbtn { background: #fff; border: 1.5px solid var(--border); color: var(--navy); border-radius: 10px; padding: 8px 14px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; flex: none; }

/* ---- Settings screen ---- */
.ogapoll-subcard { background: var(--section); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; }
.ogapoll-subcard.disabled { opacity: .55; }
.ogapoll-subcard.disabled .ogapoll-field-input { cursor: not-allowed; background: #F2F6FA; }
.ogapoll-setrow { display: flex; gap: 14px; align-items: flex-start; }
.ogapoll-setnum { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 12.5px; }
.ogapoll-setbody { flex-grow: 1; min-width: 0; }
.ogapoll-setlabel { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; color: var(--navy); margin-bottom: 2px; }
.ogapoll-sethint { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.ogapoll-seg { display: inline-flex; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.ogapoll-seg span { padding: 7px 16px; border-radius: 7px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none; }
.ogapoll-seg span.on { background: var(--cyan); color: #fff; }
.ogapoll-dates { display: flex; gap: 12px; flex-wrap: wrap; }
.ogapoll-dates .ogapoll-field-input { flex: 1 1 160px; min-width: 150px; }
.ogapoll-minmax { display: flex; gap: 14px; margin-top: 4px; }
.ogapoll-mmfield { flex: 1; }
.ogapoll-mmfield label { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; display: block; margin-bottom: 6px; }
.ogapoll-capnote { display: block; font-size: 10.5px; color: var(--muted); font-weight: 700; margin-top: 5px; }

.ogapoll-toggle { width: 42px; height: 24px; border-radius: 20px; background: #D7E4EE; position: relative; flex: none; cursor: pointer; transition: background .2s; }
.ogapoll-toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s; }
.ogapoll-toggle.on { background: var(--cyan); }
.ogapoll-toggle.on i { left: 21px; }
.ogapoll-trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ogapoll-search { border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; background: #fff; }
.ogapoll-search input { border: none; outline: none; flex: 1; font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; color: var(--text); }
.ogapoll-countrylist { background: #fff; border: 1.5px solid var(--border); border-radius: 12px; max-height: 200px; overflow: auto; }
.ogapoll-crow { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--line); margin: 0; cursor: pointer; }
.ogapoll-crow:last-child { border-bottom: 0; }
.ogapoll-crow input { width: 16px; height: 16px; accent-color: var(--cyan); }
.ogapoll-chipwrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ogapoll-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--border); border-radius: 20px; padding: 6px 8px 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.ogapoll-chip button { width: 18px; height: 18px; border-radius: 50%; background: var(--line); border: none; display: grid; place-items: center; color: var(--red); cursor: pointer; }

.ogapoll-navbar { margin: 20px -24px 0; background: var(--navy); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.ogapoll-navbtn { width: 42px; height: 42px; border-radius: 10px; background: var(--red); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; }
.ogapoll-navbtn-send { background: var(--blue); }
.ogapoll-dots { display: flex; gap: 7px; }
.ogapoll-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); }
.ogapoll-dots span.on { width: 22px; border-radius: 4px; background: var(--cyan); }

/* ---- Preview screen ---- */
.ogapoll-qhead { font-weight: 800; font-size: 16px; color: var(--navy); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.ogapoll-typetag { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 10.5px; color: var(--blue); background: var(--section); padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: .3px; }
.ogapoll-qtext { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; color: var(--navy); margin-bottom: 16px; }
.ogapoll-pqrow { display: flex; align-items: center; gap: 14px; margin: 8px 0 16px; }
.ogapoll-pqrow .ogapoll-qtext { margin: 0; flex-grow: 1; min-width: 0; }
.ogapoll-pqmedia { position: relative; width: var(--qmedia-w); height: var(--qmedia-h); border-radius: 12px; flex: none; border: 2px solid var(--border); background: #fff no-repeat center/cover; display: grid; place-items: center; color: #b6cee0; cursor: pointer; }
.ogapoll-pickbar { background: var(--section); border-radius: 10px; padding: 9px; text-align: center; font-size: 12.5px; font-weight: 800; color: var(--blue); font-family: 'Poppins', sans-serif; margin-bottom: 14px; }
/* multiple choice, maximum reached: the reason and how to change an answer, under the options */
.ogapoll-maxnote { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: #FCF0D6; border: 1px solid #F0D49A; color: #92620B; font-size: 12.5px; font-weight: 700; line-height: 1.45; }
.ogapoll-popt.is-refused { animation: ogapollRefused .35s ease; }
@keyframes ogapollRefused { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .ogapoll-popt.is-refused { animation: none; } }
/* Question + its text in ONE box, exactly like the question window's Question box (.ogapoll-qbox) */
.ogapoll-pqrow { background: var(--section2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin: 8px 0 16px; }
.ogapoll-pqrow.nomedia { padding: 16px; }
/* Answers: one light background (a bit lighter than "Pick one answer"); a picked answer shows its own color */
.ogapoll-popt {
    display: flex; align-items: center; gap: 14px; border-radius: 14px; padding: 4px; margin-bottom: 10px; border: 1.5px solid var(--line);
    background: var(--section2); min-height: 70px; cursor: pointer; transition: background .15s, border-color .15s;
}
.ogapoll-popt.nomedia { min-height: 0; padding: 13px 4px 13px 16px; }
/* picked: the creator's color at 80% */
.ogapoll-popt.selected { background: color-mix(in srgb, var(--optcolor, var(--border)) 80%, white); border-color: var(--optcolor); }
.ogapoll-popt.selected .ogapoll-popt-label { color: #fff; }
.ogapoll-popt.selected .ogapoll-radio, .ogapoll-popt.selected .ogapoll-checkbox { border-color: #fff; }
.ogapoll-popt.selected .ogapoll-radio { background: radial-gradient(circle, var(--optcolor) 0 5px, #fff 6px); }
/* empty box next to answers that have one: a second, slightly thicker rectangle inside, same color */
.ogapoll-popt-thumb.ogapoll-noimg { background: #fff; }
.ogapoll-popt-thumb.ogapoll-noimg::after { content: ''; width: 36%; height: 50%; border: 3px solid var(--optcolor, var(--border)); border-radius: 5px; }
.ogapoll-popt.selected .ogapoll-checkbox { background: var(--optcolor) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center / 14px; }
.ogapoll-popt-thumb.ogapoll-noimg { cursor: pointer; }
.ogapoll-popt .ogapoll-radio, .ogapoll-popt .ogapoll-checkbox { margin-right: 12px; }
.ogapoll-popt-thumb { position: relative; width: var(--media-w); height: var(--media-h); border-radius: 10px; flex: none; border: 2px solid var(--optcolor, var(--border)); background: #fff no-repeat center/cover; display: grid; place-items: center; color: #b6cee0; cursor: pointer; }
/* 'view full size' badge: small, tight in the bottom-right corner */
.ogapoll-viewbadge { position: absolute; bottom: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; border: 1px solid #fff; }
.ogapoll-viewbadge svg { width: 8px; height: 8px; }
.ogapoll-popt-label { flex-grow: 1; font-weight: 700; font-size: 14px; color: var(--navy); }
.ogapoll-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--optcolor, var(--border)); flex: none; background: #fff; }
.ogapoll-checkbox { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--optcolor, var(--border)); flex: none; background: #fff; }
.ogapoll-yesno { display: flex; gap: 14px; }
.ogapoll-yesno button { flex: 1; padding: 22px; border-radius: 16px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 16px; border: 2px solid var(--border); background: #fff; color: var(--navy); cursor: pointer; }
.ogapoll-yesno button.yes { border-color: #37B26A; color: #1E7A45; background: color-mix(in srgb, #37B26A 10%, white); }
.ogapoll-yesno button.no { border-color: var(--red); color: var(--redD); background: color-mix(in srgb, var(--red) 8%, white); }
.ogapoll-stars { display: flex; justify-content: center; gap: 10px; padding: 10px 0 4px; }
.ogapoll-stars svg { width: 38px; height: 38px; color: #E3C24E; }
.ogapoll-ratingwrap { display: flex; justify-content: center; padding: 8px 0 4px; }
.ogapoll-starhint { text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 4px; }
.ogapoll-scale10 { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.ogapoll-scale10 span { width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--border); display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--navy); background: #fff; }
.ogapoll-scale10 span.mid { border-color: var(--cyan); background: var(--section); color: var(--blue); }
.ogapoll-scaleends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 0 2px; }
.ogapoll-opentext, .ogapoll-wcinput { border: 1.5px solid var(--border); border-radius: 12px; padding: 14px; font-size: 14px; font-weight: 600; color: #9AB2C6; background: #fff; }
.ogapoll-opentext { min-height: 70px; }
.ogapoll-wcinput { font-weight: 700; margin-bottom: 10px; }
.ogapoll-wchint { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.ogapoll-rank { display: flex; align-items: center; gap: 12px; background: var(--section); border-radius: 14px; padding: 17px 16px; margin-bottom: 10px; }
.ogapoll-rankhandle { color: var(--muted); flex: none; }
.ogapoll-ranknum { width: 34px; height: 34px; border-radius: 8px; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13px; flex: none; }

.ogapoll-btn { border: none; border-radius: 12px; font-weight: 800; cursor: pointer; padding: 13px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; text-decoration: none; }
.ogapoll-btn:active { transform: scale(.98); }
.ogapoll-btn-red { background: var(--red); color: #fff; }
.ogapoll-btn-red:hover { background: var(--redD); color: #fff; }
.ogapoll-btn-ghost { background: #fff; color: var(--navy); border: 1.5px solid var(--border); }
.ogapoll-btn-navy { background: var(--navy); color: #fff; text-decoration: none; display: inline-flex; align-items: center; }
.ogapoll-btn-navy:hover { background: var(--navy2); color: #fff; }
.ogapoll-btn-ghost:hover { border-color: var(--cyan); }
.ogapoll-btn-ghost-red { background: #fff; color: var(--red); border: 1.5px solid var(--border); }
.ogapoll-btn-ghost-red:hover { border-color: var(--red); background: #FDEBEA; }
.ogapoll-btn-block { width: 100%; }

/* ---- Add-question modal ---- */
#addPollQuestionModal .modal-dialog { max-width: 640px; }
#addPollQuestionModal .ogapoll-modal-content { border-radius: 18px; overflow: hidden; border: none; }
#addPollQuestionModal .ogapoll-mhead { background: var(--navy); color: #fff; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; border: none; border-radius: 0; }
#addPollQuestionModal .ogapoll-mhead-title { margin: 0; font-weight: 800; font-size: 19px; color: #fff; }
#addPollQuestionModal .ogapoll-mhead-sub { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#addPollQuestionModal .ogapoll-qtextarea { min-height: var(--qmedia-h); resize: none; flex-grow: 1; }
#addPollQuestionModal .ogapoll-steplbl { font-size: 11px; font-weight: 700; color: #B9D3E8; white-space: nowrap; }
#addPollQuestionModal .ogapoll-stepdots { display: flex; gap: 6px; }
#addPollQuestionModal .ogapoll-stepdots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); display: inline-block; }
#addPollQuestionModal .ogapoll-stepdots span.on { width: 18px; border-radius: 4px; background: var(--cyan); }
#addPollQuestionModal .ogapoll-xbtn { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #fff; border: none; cursor: pointer; }
/* Fixed-height body (design 2b "fixed footer, scrolling body"): the modal keeps the same size on every step. */
#addPollQuestionModal .ogapoll-mbody { padding: 22px; height: min(65vh, 600px); overflow-y: auto; }
#addPollQuestionModal .ogapoll-mfoot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; background: #fff; }
#addPollQuestionModal .ogapoll-mfoot .ogapoll-btn { flex: 1; }

#addPollQuestionModal .ogapoll-typegrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
#addPollQuestionModal .ogapoll-typecard { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; background: #fff; cursor: pointer; }
#addPollQuestionModal .ogapoll-typecard .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--line); display: grid; place-items: center; color: var(--blue); flex: none; }
#addPollQuestionModal .ogapoll-typecard .tt { font-weight: 700; font-size: 13.5px; color: var(--navy); }
#addPollQuestionModal .ogapoll-typecard .td { font-size: 11.5px; color: var(--muted); font-weight: 700; }
#addPollQuestionModal .btn-check:checked + .ogapoll-typecard { border-color: var(--cyan); background: #EAF8FE; }
#addPollQuestionModal .btn-check:checked + .ogapoll-typecard .ic { background: var(--cyan); color: #fff; }
#addPollQuestionModal .ogapoll-typewarn { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #FCF0D6; border: 1px solid #F0D49A; color: #92620B; font-size: 12.5px; font-weight: 700; line-height: 1.45; }
#addPollQuestionModal .ogapoll-typewarn svg { flex: none; margin-top: 1px; }
#addPollQuestionModal .ogapoll-ronote { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; padding: 11px 14px; border-radius: 12px; background: var(--section); border: 1px solid var(--border); color: var(--blue); font-size: 12.5px; font-weight: 700; }
#addPollQuestionModal .ogapoll-btn:disabled, #addPollQuestionModal .ogapoll-mbody button:disabled { opacity: .45; cursor: not-allowed; }
#addPollQuestionModal.ogapoll-readonly .poll-answer-row { cursor: default; }
#addPollQuestionModal.ogapoll-readonly .ogapoll-media.has-media { cursor: zoom-in; }
#addPollQuestionModal .ogapoll-flip.locked .ogapoll-seg { opacity: .45; pointer-events: none; }
#addPollQuestionModal .ogapoll-fliplocked { width: 100%; font-size: 11.5px; font-weight: 700; color: var(--muted); }
/* answer drag handle (template drag-drop icon) */
.ogapoll-opt-grip { flex: none; display: grid; place-items: center; width: 16px; cursor: grab; touch-action: none; opacity: .75; }
.ogapoll-opt-grip:hover { opacity: 1; }
.ogapoll-opt-grip img { width: 10px; height: 12px; pointer-events: none; }
.poll-answer-row.dragging .ogapoll-opt-grip { cursor: grabbing; }
/* edit boxes: the camera stays in the middle, no badge on the border */
.ogapoll-media > .ogapoll-cam { display: none; }
#addPollQuestionModal .ogapoll-flip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

#addPollQuestionModal .ogapoll-qbox { background: var(--section2); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 20px; }
#addPollQuestionModal .ogapoll-qogc { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); color: #92620B; }
#addPollQuestionModal .ogapoll-qogc-input { max-width: 90px; padding: 8px 10px; font-size: 13px; }
#addPollQuestionModal .ogapoll-opthead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#addPollQuestionModal .ogapoll-draghint { font-size: 11.5px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 5px; }
#addPollQuestionModal .ogapoll-addopt { width: 100%; background: var(--blue); color: #fff; border: none; border-radius: 12px; padding: 13px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; margin-top: 6px; }

.ogapoll-opt { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.ogapoll-opt-thumb { position: relative; width: var(--media-w); height: var(--media-h); border-radius: 10px; border: 2px solid var(--optborder, var(--border)); background: #fff; display: grid; place-items: center; color: #b6cee0; flex: none; cursor: pointer; }
.ogapoll-opt-field { flex-grow: 1; border: 1.5px solid var(--border); background: #fff; border-radius: 12px; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; }
.ogapoll-opt-field input { border: none; outline: none; width: 100%; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 600; color: var(--text); background: transparent; }
.ogapoll-opt-controls { display: flex; flex-direction: column; gap: 8px; flex: none; }
.ogapoll-ogc-pill { flex: none; display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--border); background: #fff; color: var(--muted); border-radius: 20px; padding: 0 13px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 12.5px; cursor: pointer; height: var(--media-h); }
.ogapoll-ogc-pill.set { border-color: #D97706; color: #92620B; background: #FCF0D6; }
.ogapoll-opt-color { width: 48px; height: 31px; border-radius: 8px; border: 1.5px solid var(--border); background: #fff; display: grid; place-items: center; cursor: pointer; position: relative; }
.ogapoll-opt-color .dot { width: 15px; height: 15px; border-radius: 50%; background: var(--optcolor, #DC2626); }
.ogapoll-opt-del { width: 48px; height: 31px; border-radius: 8px; background: var(--red); color: #fff; display: grid; place-items: center; border: none; cursor: pointer; }
/* Design 2b: the 15-color picker opens inline, right under the option row it belongs to. */
.ogapoll-colorpop { margin: -2px 0 16px calc(var(--media-w) + 10px); background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: 0 10px 26px rgba(11,44,87,.18); display: grid; grid-template-columns: repeat(5, 60px); gap: 10px; width: max-content; }
.ogapoll-swatch { width: 60px; height: 60px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; }
.ogapoll-swatch.sel { border-color: var(--navy); }
.ogapoll-otherck { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text); margin: 4px 0 16px; }
.ogapoll-otherck input { width: 17px; height: 17px; accent-color: var(--cyan); }

/* ---- Created (Step 5) modal ---- */
#pollCreatedModal .modal-dialog { max-width: 480px; }
#pollCreatedModal .ogapoll-created-content { border-radius: 20px; padding: 36px 32px; text-align: center; border: none; box-shadow: 0 24px 60px rgba(11,44,87,.3); }
#pollCreatedModal .ogapoll-created-check { width: 80px; height: 80px; border-radius: 50%; border: 3px solid #22A559; display: grid; place-items: center; margin: 0 auto 18px; }
#pollCreatedModal h2 { font-weight: 800; font-size: 18px; color: var(--navy); margin: 0 0 22px; letter-spacing: .3px; }
#pollCreatedModal .ogapoll-created-shares { display: flex; justify-content: center; gap: 22px; margin-bottom: 26px; }
#pollCreatedModal .ogapoll-created-share { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; text-decoration: none; }
#pollCreatedModal .ogapoll-created-share .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
#pollCreatedModal .ogapoll-created-share span:last-child { font-size: 11px; font-weight: 700; color: var(--muted); }
#pollCreatedModal .ic.wa { background: #25D366; } #pollCreatedModal .ic.fb { background: #1877F2; } #pollCreatedModal .ic.mail { background: var(--blue); }
#pollCreatedModal .ic.more { background: linear-gradient(135deg,#F59E0B,#EF4444,#EC4899); }
#pollCreatedModal .ogapoll-created-urllabel { font-size: 11.5px; font-weight: 800; color: var(--muted); letter-spacing: .4px; margin-bottom: 10px; }
#pollCreatedModal .ogapoll-created-urlbox { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 12px; padding: 11px 12px; gap: 10px; margin-bottom: 10px; }
#pollCreatedModal .ogapoll-created-urlbox span { flex-grow: 1; text-align: left; font-size: 13px; font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pollCreatedModal .ogapoll-created-urlbox button { border: none; background: none; color: var(--muted); cursor: pointer; flex: none; }
#pollCreatedModal .ogapoll-created-hint { font-size: 11.5px; color: var(--muted); font-weight: 600; line-height: 1.5; margin-bottom: 24px; }
#pollCreatedModal .ogapoll-created-cta { display: inline-block; background: var(--navy); color: #fff; border: none; border-radius: 24px; padding: 13px 40px; font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none; }

/* ---- Media boxes (cover, question, answers, thumbnails, preview) ---- */
.ogapoll-media, .ogapoll-media-view { background-repeat: no-repeat; background-position: center; background-size: cover; overflow: visible; }
.ogapoll-media.has-media, .ogapoll-media-view.has-media { border-style: solid; }
.has-media > .ogapoll-media-ph, .has-media > i.bi, .has-media > svg:not(.ogapoll-keep) { visibility: hidden; }
.ogapoll-media-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }
.ogapoll-media-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 26px; height: 26px; border-radius: 50%; background: rgba(11,44,87,.75); color: #fff; display: grid; place-items: center; pointer-events: none; }
.ogapoll-media.locked { cursor: default; }
/* social video (YouTube, TikTok, Vimeo, Facebook, Instagram): thumbnail or platform logo */
.ogapoll-media-social { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }
.is-social > .ogapoll-media-prov { position: absolute; left: 5px; bottom: 5px; width: 18px; height: 18px; border-radius: 4px; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.is-social.nothumb { background: #F2F6FA; }
.is-social.nothumb > .ogapoll-media-prov { left: 50%; top: 50%; bottom: auto; width: 34%; height: auto; max-width: 40px; transform: translate(-50%, -62%); box-shadow: none; }
.is-social.nothumb > .ogapoll-media-play { top: auto; bottom: 4px; left: auto; right: 4px; transform: none; width: 20px; height: 20px; }
.ogapoll-lightbox-body iframe { display: block; border: 0; border-radius: 10px; background: #000; max-width: 86vw; max-height: 80vh; }
.ogapoll-socialcard { max-width: 480px; }
.ogapoll-sociallogos { display: flex; gap: 10px; margin-bottom: 14px; }
.ogapoll-sociallogos img { width: 30px; height: 30px; border-radius: 6px; }
.ogapoll-media.uploading { opacity: .55; }
.ogapoll-media.uploading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--cyan); animation: ogapoll-spin .8s linear infinite; }
@keyframes ogapoll-spin { to { transform: rotate(360deg); } }

.ogapoll-sourcesheet { position: fixed; z-index: 1080; width: 230px; background: #fff; border: 1px solid #CFE6F5; border-radius: 14px; padding: 8px; box-shadow: 0 14px 34px rgba(11,44,87,.2); font-family: 'Poppins', sans-serif; }
.ogapoll-sourcesheet:before { content: ""; position: absolute; top: -8px; left: 26px; width: 14px; height: 14px; background: #fff; border-left: 1px solid #CFE6F5; border-top: 1px solid #CFE6F5; transform: rotate(45deg); }
.ogapoll-srow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 13px; color: #0B2C57; background: none; border: none; cursor: pointer; text-align: left; }
.ogapoll-srow:hover { background: #E9F5FC; }
.ogapoll-srow-remove { color: var(--red, #E63329); }
.ogapoll-srow .ic { width: 30px; height: 30px; border-radius: 8px; background: #E9F5FC; color: #1F7BC0; display: grid; place-items: center; flex: none; }

.ogapoll-lightbox, .ogapoll-camera { position: fixed; inset: 0; background: rgba(11,44,87,.72); display: flex; align-items: center; justify-content: center; z-index: 1090; }
.ogapoll-lightbox-card, .ogapoll-camera-card { position: relative; background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.ogapoll-lightbox-body img, .ogapoll-lightbox-body video { display: block; max-width: min(80vw, 720px); max-height: 75vh; border-radius: 10px; }
.ogapoll-lightbox-x { position: absolute; top: -16px; right: -16px; width: 36px; height: 36px; border-radius: 50%; background: #E63329; color: #fff; display: grid; place-items: center; border: 3px solid #fff; cursor: pointer; }
.ogapoll-camera-card video { display: block; width: min(80vw, 560px); border-radius: 10px; background: #000; }
.ogapoll-camera-actions { display: flex; gap: 10px; margin-top: 12px; }
.ogapoll-camera-actions .ogapoll-btn { flex: 1; }

/* ---- Answer rows drag & drop ---- */
.poll-answer-row.dragging { opacity: .55; }
.poll-answer-row.dragging .ogapoll-opt-field { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(43,179,227,.15); }
#newQuestionAnswersList .ogapoll-opt-thumb { touch-action: none; } /* the drag handle on touch screens */

/* ---- Settings: date + time pickers (Step3 artboard) ---- */
.ogapoll-dates { display: flex; gap: 12px; }
.ogapoll-datecol { flex: 1; display: flex; gap: 8px; min-width: 0; }
.ogapoll-dinput, .ogapoll-tinput { border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; }
.ogapoll-dinput { flex: 1; min-width: 0; white-space: nowrap; }
.ogapoll-tinput { flex: none; width: 104px; }
.ogapoll-tinput input { border: none; outline: none; background: transparent; width: 100%; font: inherit; color: inherit; padding: 0; }
.ogapoll-tinput input::-webkit-calendar-picker-indicator { display: none; } /* the artboard's clock icon is already there */
.ogapoll-dinput.active, .ogapoll-tinput.active { border-color: var(--cyan); color: var(--navy); box-shadow: 0 0 0 3px rgba(43,179,227,.15); }
.ogapoll-dinput.set, .ogapoll-tinput.set { color: var(--navy); }
.ogapoll-calrow { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.ogapoll-calpop { flex: 1; min-width: 250px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: 0 10px 26px rgba(11,44,87,.12); }
.ogapoll-calpop.focus { border-color: var(--cyan); }
.ogapoll-calhead { display: flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 12.5px; color: var(--navy); margin-bottom: 10px; }
.ogapoll-calhead .month { margin-left: auto; margin-right: auto; }
.ogapoll-calwhich { background: var(--navy); color: #fff; font-size: 9.5px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
.ogapoll-calnav { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.ogapoll-calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ogapoll-calwd { font-size: 9.5px; font-weight: 800; color: var(--muted); text-align: center; padding: 4px 0; }
.ogapoll-calday { font-size: 11.5px; font-weight: 700; color: var(--navy); text-align: center; padding: 6px 0; border-radius: 8px; cursor: pointer; }
.ogapoll-calday.pad { visibility: hidden; }
.ogapoll-calday.past { color: #C3D2DE; cursor: not-allowed; text-decoration: line-through; }
.ogapoll-calday.today { border: 1.5px solid var(--cyan); color: var(--blue); }
.ogapoll-calday.past.today { border-color: var(--border); color: #C3D2DE; text-decoration: line-through; }
.ogapoll-calday.sel { background: var(--navy); color: #fff; }
.ogapoll-calday:not(.past):not(.pad):not(.sel):hover { background: var(--section); }
.ogapoll-timerow { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ogapoll-timelabel { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; margin-right: 2px; }
.ogapoll-timepill { font-size: 11.5px; font-weight: 700; color: var(--navy); background: var(--section); border-radius: 8px; padding: 5px 9px; cursor: pointer; border: none; }
.ogapoll-timepill.sel { background: var(--navy); color: #fff; }
.ogapoll-timepill:disabled { color: #C3D2DE; cursor: not-allowed; text-decoration: line-through; }
.ogapoll-calnote { font-size: 10px; color: var(--muted); font-weight: 700; margin-top: 10px; line-height: 1.5; }
.ogapoll-dates.locked, .ogapoll-calrow.locked { pointer-events: none; opacity: .6; }

/* ---- Inline messages: green success / red error, same slot, 5 s ---- */
.ogapoll-flash { border-radius: 12px; padding: 11px 14px; margin: 0 0 12px; font-weight: 700; font-size: 13px; line-height: 1.45; border: 1.5px solid transparent; }
.ogapoll-flash.ok { background: #E7F7EE; border-color: #9ED9B6; color: #1E7A45; }
.ogapoll-flash.err { background: #FDEBEA; border-color: #F3B1AC; color: #B3261E; }
.ogapoll-navbar + .ogapoll-flash, #pollPreviewMsg, #pollSettingsMsg { margin-top: 12px; }

/* ---- Preview V2: the poll card (dPoll template) — wizard fonts & colors only ---- */
.ogapoll-pcard { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px rgba(11,44,87,.05); margin-bottom: 4px; }
.ogapoll-pc-sched { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; background: var(--section2); border-bottom: 1px solid var(--line); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.ogapoll-pc-sched img { width: 18px; height: 18px; }
/* fixed height like the template (.postImage 237px): never the video's height — the full-size viewer adapts to 16:9 / 9:16 */
.ogapoll-pcover { position: relative; width: 100%; height: 200px; background: #F2F6FA no-repeat center / cover; cursor: pointer; overflow: hidden; }
/* cover video: the template's play icon */
.ogapoll-pcover .ogapoll-media-play { width: 56px; height: 56px; background: url('/images/poll/card/playiconvideoblock.png') no-repeat center / contain; }
.ogapoll-pcover .ogapoll-media-play svg { display: none; }
.ogapoll-pcover.is-social > .ogapoll-media-prov { width: 28px; height: 28px; left: 12px; bottom: 12px; }
.ogapoll-pcover.is-social.nothumb > .ogapoll-media-prov { width: 64px; max-width: 64px; }
.ogapoll-pcover.is-social.nothumb > .ogapoll-media-play { width: 34px; height: 34px; bottom: 12px; right: 12px; }
.ogapoll-pc-head { padding: 16px 20px 6px; }
.ogapoll-pc-title { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--navy); text-decoration: none; }
.ogapoll-pc-title:hover { color: var(--blue); }
.ogapoll-pc-qcount { display: flex; justify-content: center; margin: 12px 0 4px; }
.ogapoll-pc-qcount span { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff; border-radius: 20px; padding: 5px 14px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px; }
.ogapoll-pc-qcount img { width: 15px; height: 15px; }
/* description: 5 lines + fade like the template; click = all of it, click again = shorter */
.ogapoll-pc-desc { position: relative; margin: 10px 0 0; font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--muted); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.ogapoll-pc-desc.clamped { cursor: pointer; }
.ogapoll-pc-desc.clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3.1em; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%); }
.ogapoll-pc-desc.full { display: block; -webkit-line-clamp: initial; }
.ogapoll-pc-desc.full::after { display: none; }
.ogapoll-pc-q { position: relative; border-top: 1px solid var(--line); margin-top: 12px; }
.ogapoll-pc-q .ogapoll-previewq { padding: 18px 20px 10px; }
.ogapoll-pc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(230,51,41,.6); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ogapoll-pc-arrow:hover { background: rgba(230,51,41,.85); }
.ogapoll-pc-arrow img { width: 8px; height: 14px; }
.ogapoll-pc-arrow.prev { left: 2px; } .ogapoll-pc-arrow.next { right: 2px; } /* at the edge: never over an answer's radio */
.ogapoll-pc-arrow:disabled { opacity: 0; pointer-events: none; }
.ogapoll-pc-empty { padding: 30px 20px; text-align: center; color: var(--muted); font-weight: 700; border-top: 1px solid var(--line); }
.ogapoll-pc-info, .ogapoll-pc-stats { display: flex; align-items: center; justify-content: space-between; padding: 11px 20px; border-top: 1px solid var(--line); }
.ogapoll-pc-info > div, .ogapoll-pc-stats > div { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ogapoll-pc-stat { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--navy); text-decoration: none; }
a.ogapoll-pc-stat:hover { color: var(--blue); }
.ogapoll-pc-stat img, .ogapoll-pc-icon img, .ogapoll-pc-status img { width: 20px; height: 20px; }
.ogapoll-pc-like, .ogapoll-pc-save { border: none; background: none; padding: 0; cursor: pointer; }
.ogapoll-pc-like img.on, .ogapoll-pc-save img.on, .ogapoll-pc-like.active img.off, .ogapoll-pc-save.active img.off { display: none; }
.ogapoll-pc-like.active img.on, .ogapoll-pc-save.active img.on { display: inline-block; }
.ogapoll-pc-icon { display: inline-grid; place-items: center; border: none; background: none; padding: 0; cursor: pointer; }
.ogapoll-pc-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; }
.ogapoll-pc-status.open { color: #37B26A; } .ogapoll-pc-status.closed { color: var(--red); }
.ogapoll-pc-author { display: flex; align-items: center; gap: 12px; padding: 12px 20px 14px; border-top: 1px solid var(--line); }
.ogapoll-pc-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #D7E4EE no-repeat center / cover; }
.ogapoll-pc-avatar.initials { display: grid; place-items: center; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; }
.ogapoll-pc-who { flex: 1; min-width: 0; }
.ogapoll-pc-line1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ogapoll-pc-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; color: var(--navy); text-decoration: none; }
a.ogapoll-pc-name:hover { color: var(--blue); }
.ogapoll-pc-verified { width: 16px; height: 16px; }
.ogapoll-pc-handle { font-size: 12px; font-weight: 600; color: var(--muted); }
.ogapoll-pc-handle b { font-weight: 700; margin-left: 4px; }
.ogapoll-pc-line2 { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.ogapoll-pc-line2 img { width: 15px; height: 15px; }
.ogapoll-pc-actions { position: relative; display: flex; align-items: center; gap: 14px; }
.ogapoll-pc-pop { position: absolute; right: 0; bottom: 34px; z-index: 20; min-width: 190px; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(11,44,87,.18); padding: 6px 0; }
.ogapoll-pc-pop button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 9px 16px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--navy); cursor: pointer; }
.ogapoll-pc-pop button:hover, .ogapoll-pc-pop button.on { background: var(--section); color: var(--blue); }

/* ---- Status bar: [wizard chip | Status toggle] ........ [Share] [Result] [⋮] ---- */
.ogapoll-statusbar { align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ogapoll-statusleft { display: flex; align-items: center; min-height: 36px; }
.ogapoll-statusright { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ogapoll-wizchip { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11.5px; padding: 4px 11px; border-radius: 20px; background: #FCF0D6; color: #92620B; border: 1px solid #F0D49A; }
.ogapoll-actbtn { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: 20px; padding: 7px 16px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; color: #fff; cursor: pointer; line-height: 1.2; }
.ogapoll-actbtn-cyan { background: #29B6E8; }
.ogapoll-actbtn-cyan:hover { background: #1FA3D3; }
.ogapoll-actbtn-red { background: var(--red); }
.ogapoll-actbtn-red:hover { background: var(--redD); }
.ogapoll-more { position: relative; }
.ogapoll-morebtn { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ogapoll-morebtn:hover { background: var(--blueS); }
.ogapoll-moremenu { position: absolute; right: 0; top: 42px; z-index: 30; min-width: 230px; background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(11,44,87,.18); padding: 8px 0; }
.ogapoll-moremenu > button, .ogapoll-moremenu > a.ogapoll-menulink, .ogapoll-moresub a { display: flex; align-items: center; gap: 14px; width: 100%; border: none; background: none; padding: 10px 18px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--navy); cursor: pointer; text-align: left; text-decoration: none; }
.ogapoll-moremenu > button:hover, .ogapoll-moremenu > a.ogapoll-menulink:hover, .ogapoll-moresub a:hover { background: var(--section); color: var(--blue); }
.ogapoll-moremenu > button .chev { margin-left: auto; }
.ogapoll-moresub { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #FAFDFF; }
.ogapoll-moresub a { padding-left: 50px; font-size: 13.5px; }

/* ---- Small dialogs (wizard saved, missing translations, QR) ---- */
.ogapoll-trhead > div { flex: 1; min-width: 0; }
.ogapoll-trsub { display: block; font-size: 11.5px; font-weight: 700; color: #B9D3E8; margin-top: 2px; }
.ogapoll-dlgcard { position: relative; max-width: 440px; padding: 34px 28px 28px; text-align: center; align-items: center; }
.ogapoll-dlgcard h2 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 18px; color: var(--navy); margin: 0 0 12px; letter-spacing: .3px; }
.ogapoll-dlgx { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--section); color: var(--navy); display: grid; place-items: center; cursor: pointer; }
.ogapoll-dlgx:hover { background: var(--line); }
.ogapoll-dlgtext { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.55; margin: 0 0 14px; word-break: break-word; }
.ogapoll-dlgcard .ogapoll-created-check { width: 76px; height: 76px; border-radius: 50%; border: 3px solid #22A559; display: grid; place-items: center; margin: 0 auto 16px; }
.ogapoll-qrbox { display: grid; place-items: center; min-height: 220px; margin: 4px 0 12px; }
.ogapoll-misslang { margin-bottom: 16px; }
.ogapoll-misslang h4 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 14.5px; color: var(--navy); margin: 0 0 8px; }
.ogapoll-misslang h4 span { font-family: 'Nunito', sans-serif; font-size: 11.5px; font-weight: 800; color: var(--red); margin-left: 6px; }
.ogapoll-misslang ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ogapoll-misslang li { padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ogapoll-misslang li:last-child { border-bottom: 0; }
.ogapoll-misslang li b { display: block; color: var(--navy); font-weight: 800; }
.ogapoll-misslang li span { color: var(--muted); font-weight: 600; }
#pollCreatedModal .ogapoll-created-content { position: relative; }
#pollCreatedModal .ogapoll-created-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--section); color: var(--navy); display: grid; place-items: center; cursor: pointer; }

/* ---- Date pickers: each calendar under its own field, opened on click ---- */
.ogapoll-dates { align-items: flex-start; }
.ogapoll-datewrap { flex: 1; min-width: 0; }
.ogapoll-datewrap .ogapoll-calpop { margin-top: 10px; min-width: 0; }

/* ---- Translate icon inside every text field ---- */
.ogapoll-trwrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; }
.ogapoll-trwrap > .ogapoll-field-input { flex: 1; min-width: 0; padding-right: 44px; }
.ogapoll-row > .ogapoll-trwrap > .ogapoll-field-input { height: auto; align-self: stretch; }
.ogapoll-trbtn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--section); color: var(--blue); display: grid; place-items: center; cursor: pointer; padding: 0; z-index: 1; }
.ogapoll-trbtn:hover { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.ogapoll-opt-field.ogapoll-trwrap { align-items: center; }
.ogapoll-opt-field.ogapoll-trwrap > .ogapoll-trbtn { position: static; flex: none; margin-left: 6px; }

/* ---- Translations modal (rows look like answer options: lang box | text | save + delete) ---- */
.ogapoll-trmodal { position: fixed; inset: 0; background: rgba(11,44,87,.55); display: flex; align-items: center; justify-content: center; z-index: 1095; padding: 16px;
    --navy: #0B2C57; --navy2: #0A2340; --blue: #1F7BC0; --blueS: #1565A8; --cyan: #2BB3E3; --red: #E63329; --redD: #C4271E; --section: #E9F5FC; --section2: #F2FAFF; --border: #CFE6F5; --line: #E3EEF6; --text: #0B2C57; --muted: #6C8098; --media-w: 96px; --media-h: 67px; --qmedia-w: 112px; --qmedia-h: 78px;
    font-family: 'Nunito', sans-serif; color: var(--text); }
.ogapoll-trcard { background: #fff; border-radius: 18px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(11,44,87,.3); }
.ogapoll-trhead { background: var(--navy); color: #fff; padding: 16px 20px; display: flex; align-items: center; gap: 10px; }
.ogapoll-trhead h3 { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 17px; color: #fff; }
.ogapoll-trhead #ogapollTrField { font-size: 11.5px; font-weight: 700; color: #B9D3E8; margin-right: auto; }
.ogapoll-trhead button { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #fff; border: none; cursor: pointer; flex: none; }
.ogapoll-trbody { padding: 20px; overflow-y: auto; }
.ogapoll-trfoot { padding: 14px 20px; border-top: 1px solid var(--line); }
.ogapoll-trfoot button { width: 100%; background: var(--blue); color: #fff; border: none; border-radius: 12px; padding: 13px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.ogapoll-trfoot button:disabled { opacity: .45; cursor: not-allowed; }
.ogapoll-trlang { width: var(--media-w); height: var(--media-h); flex: none; border-radius: 10px; border: 2px solid var(--border); background: var(--section); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ogapoll-trlang span { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 16px; color: var(--navy); letter-spacing: .5px; }
.ogapoll-trlang small { font-size: 10px; font-weight: 700; color: var(--muted); }
.ogapoll-trlang select { border: none; background: transparent; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px; color: var(--navy); cursor: pointer; outline: none; }
.ogapoll-trrow[data-base] .ogapoll-trlang { border-color: var(--cyan); position: relative; }
.ogapoll-trrow[data-base] .ogapoll-trlang::after { content: 'BASE'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--cyan); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 8.5px; letter-spacing: .5px; padding: 1px 6px; border-radius: 8px; }
.ogapoll-trlang small { max-width: 100%; padding: 0 4px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* new row: the box itself opens the language picker */
button.ogapoll-trpick { position: relative; font: inherit; padding: 0; cursor: pointer; }
button.ogapoll-trpick:hover { border-color: var(--cyan); }
button.ogapoll-trpick.empty { border-style: dashed; color: var(--blue); }
button.ogapoll-trpick .caret { position: absolute; bottom: 5px; right: 6px; color: var(--muted); }
.ogapoll-langpick { position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11,44,87,.35); }
.ogapoll-langpick-card { max-width: 360px; }
.ogapoll-langopt { display: flex; align-items: center; gap: 14px; width: 100%; border: 1.5px solid var(--border); background: #fff; border-radius: 12px; padding: 8px; margin-bottom: 10px; cursor: pointer; text-align: left; font-family: 'Poppins', sans-serif; }
.ogapoll-langopt:hover, .ogapoll-langopt.on { border-color: var(--cyan); background: var(--section); }
.ogapoll-langopt .ogapoll-trlang { width: 64px; height: 44px; }
.ogapoll-langopt b { font-weight: 700; font-size: 14.5px; color: var(--navy); }
.ogapoll-opt-save { width: 48px; height: 31px; border-radius: 8px; border: none; background: #22A559; color: #fff; display: grid; place-items: center; cursor: pointer; }
.ogapoll-opt-save:hover { background: #1B8A49; }
.ogapoll-opt-del:disabled { opacity: .35; cursor: not-allowed; }

.ogapoll-noselect, .ogapoll-noselect * { user-select: none !important; -webkit-user-select: none !important; }
#newQuestionAnswersList .poll-answer-row { cursor: grab; }
#newQuestionAnswersList .poll-answer-row.dragging { cursor: grabbing; }
#newQuestionAnswersList .newAnswerText { cursor: text; }

/* ---- Opinion scale settings (From–To + end labels) ---- */
.ogapoll-scaleset { display: flex; gap: 14px; flex-wrap: wrap; }
.ogapoll-scaleset > div { flex: 1 1 200px; min-width: 0; }

@media (max-width: 620px) {
    #addPollQuestionModal .ogapoll-typegrid { grid-template-columns: 1fr; }
    .ogapoll-dates { flex-direction: column; }
}

/* ---- Phones only (desktop above is untouched) ---- */
@media (max-width: 767px) {
    .ogapoll { zoom: 1; padding: 16px 12px 0; border-radius: 12px; --qmedia-w: 88px; --qmedia-h: 61px; --media-w: 70px; --media-h: 49px; }
    #addPollQuestionModal, .ogapoll-trmodal { --media-w: 70px; --media-h: 49px; --qmedia-w: 88px; --qmedia-h: 61px; }
    .ogapoll-navbar { margin: 20px -12px 0; padding: 14px 12px; }
    .ogapoll-card, .ogapoll-card-white, .ogapoll-card-revenue { padding: 16px 14px; }
    .ogapoll-titlebar { flex-wrap: wrap; gap: 8px; }
    .ogapoll-row2col { flex-direction: column; gap: 0; }
    .ogapoll-row2col > div { margin-bottom: 12px; }
    .ogapoll-ogcsub { margin-left: 4px; }
    /* Settings screen */
    .ogapoll-subcard { padding: 14px 12px; }
    .ogapoll-setrow { gap: 10px; }
    .ogapoll-trow { flex-wrap: wrap; }
    .ogapoll-seg { display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; }
    .ogapoll-seg span { flex: 1 1 auto; text-align: center; padding: 7px 8px; }
    .ogapoll-dates { flex-direction: column; align-items: stretch; }
    .ogapoll-datecol { width: 100%; }
    .ogapoll-actbtn { padding: 6px 12px; font-size: 12.5px; }
    .ogapoll-moremenu { min-width: 210px; }
    .ogapoll-tinput { width: 96px; }
    .ogapoll-calrow { flex-direction: column; }
    .ogapoll-calpop { min-width: 0; width: 100%; box-sizing: border-box; }
    .ogapoll-countrylist { max-height: 180px; }
    /* Question window + translations */
    #addPollQuestionModal .ogapoll-mbody { padding: 16px 12px; height: min(70vh, 600px); }
    #addPollQuestionModal .ogapoll-mfoot { padding: 12px; }
    #addPollQuestionModal .ogapoll-mhead { padding: 14px 12px; flex-wrap: wrap; }
    .ogapoll-opt { gap: 6px; }
    .ogapoll-opt-color, .ogapoll-opt-del, .ogapoll-opt-save { width: 38px; }
    .ogapoll-ogc-pill { padding: 0 8px; }
    .ogapoll-colorpop { margin-left: 0; grid-template-columns: repeat(5, 40px); }
    .ogapoll-swatch { width: 40px; height: 40px; }
    .ogapoll-trbody { padding: 14px 12px; }
    .ogapoll-yesno button { padding: 16px; }
    .ogapoll-pcover { height: 140px; }
}

/* ==================== Poll Details (tabs: Poll, Results, Participants, Analytics, Revenue) ==================== */
/* layout: the head + the 5 tabs always use the full width (5 equal tabs, labels centered);
   the Poll / Results / Participants / Revenue panes keep the wizard's column (700px, centered, same
   zoom); Analytics uses the full page. */
.ogapoll.ogapoll-details { max-width: none; zoom: 1; background: transparent; padding: 0 0 24px; border-radius: 0; }
.ogapoll-dt-top { background: #F4F9FC; border-radius: 16px; padding: 20px 24px 0; margin-bottom: 20px; }
.ogapoll-dt-narrow { max-width: 700px; margin: 0 auto; zoom: 1.35; background: #F4F9FC; padding: 20px 24px 24px; border-radius: 16px; }
.ogapoll-dt-wide { width: 100%; box-sizing: border-box; }
.ogapoll-dt-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ogapoll-dt-back { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; flex: none; }
.ogapoll-dt-back img { width: 10px; height: 18px; }
.ogapoll-dt-title { flex: 1; min-width: 0; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogapoll-dt-top .ogapoll-pill { font-size: 14px; padding: 6px 14px; }
.ogapoll-dt-tabs { display: flex; border-bottom: 2px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ogapoll-dt-tabs::-webkit-scrollbar { display: none; }
.ogapoll-dt-tabs button { flex: 1 1 0; min-width: max-content; text-align: center; border: none; background: none; padding: 14px 16px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; }
.ogapoll-dt-tabs button:hover { color: var(--navy); }
.ogapoll-dt-tabs button.on { color: var(--navy); border-bottom-color: var(--red); }

/* result bar under an answer: track + % (right) + count (left, below) — the answer's color */
.ogapoll-rbar { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: center; margin: -4px 4px 14px; }
.ogapoll-rbar-track { height: 12px; border-radius: 8px; background: color-mix(in srgb, var(--optcolor) 14%, white); overflow: hidden; }
.ogapoll-rbar-track span { display: block; height: 100%; border-radius: 8px; background: var(--optcolor); transition: width .6s ease; }
.ogapoll-rbar-pct { grid-column: 2; grid-row: 1 / span 2; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 30px; line-height: 1; color: var(--optcolor); white-space: nowrap; }
.ogapoll-rbar-pct small { font-size: 14px; }
.ogapoll-rbar-pct sup { font-size: 13px; top: -1.1em; margin-left: 2px; }
.ogapoll-rbar-count { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-weight: 700; font-size: 14px; color: var(--optcolor); }
.ogapoll-rbar-count em { font-style: normal; color: var(--muted); font-weight: 600; }
.ogapoll-ppl { display: inline-block; width: 16px; height: 16px; background: currentColor; -webkit-mask: url('/images/poll/card/person.svg') no-repeat center / contain; mask: url('/images/poll/card/person.svg') no-repeat center / contain; }
.ogapoll-rtotal { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800; color: var(--muted); }
/* results mode: the answers are not clickable, no radio / checkbox */
.ogapoll-popts.is-results .ogapoll-radio, .ogapoll-popts.is-results .ogapoll-checkbox { display: none; }
.ogapoll-popts.is-results .ogapoll-popt { cursor: default; }
/* stars / scale results: the average, then one Yes/No-style row per star level or scale value */
.ogapoll-ravg { display: flex; align-items: baseline; gap: 6px; margin: 0 4px 12px; font-size: 13px; font-weight: 800; color: var(--muted); }
.ogapoll-ravg b { font-family: 'Poppins', sans-serif; font-size: 22px; color: var(--navy); }
.ogapoll-popts.is-results .review-rating { gap: 10px; }
.ogapoll-popts.is-results .review-rating-num { display: none; } /* the level text says it: 5 stars = Excellent */
.ogapoll-rnum { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; background: var(--optcolor); color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; margin-right: 10px; box-sizing: border-box; }
.ogapoll-popt-label:has(.ogapoll-rnum) { display: flex; align-items: center; }
.ogapoll-rlevel { font-size: 12.5px; font-weight: 800; color: var(--navy); margin: 10px 4px 6px; }
.ogapoll-cloud { text-align: center; line-height: 1.5; padding: 14px 8px; margin-bottom: 8px; background: var(--section2); border-radius: 14px; font-family: 'Poppins', sans-serif; font-weight: 700; }
.ogapoll-cloud span { display: inline-block; margin: 0 7px; }
.ogapoll-rankavg { font-weight: 800; color: var(--blue); flex: none; }
.ogapoll-rank .ogapoll-ranknum + .ogapoll-popt-label { margin-left: 4px; }
.ogapoll-scale10 span.sel { background: var(--navy); border-color: var(--navy); color: #fff; }
.ogapoll-opentext.answered, .ogapoll-wcinput.answered { color: var(--navy); }
.ogapoll-rtexts { display: flex; flex-direction: column; gap: 8px; }
.ogapoll-rtext { background: var(--section2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 13.5px; color: var(--navy); }
.ogapoll-rtexts-more { align-self: center; border: 1.5px solid var(--border); background: #fff; border-radius: 20px; padding: 7px 16px; font-weight: 700; color: var(--blue); cursor: pointer; }

/* comments — social-network style composer, the creator's own comments on a tinted background */
.ogapoll-cm { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px 18px 8px; margin-top: 16px; }
.ogapoll-cm-head { display: flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px; color: var(--navy); margin-bottom: 14px; }
.ogapoll-cm-head b { background: var(--section); color: var(--blue); border-radius: 20px; padding: 2px 10px; font-size: 12px; }
.ogapoll-cm-compose { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.ogapoll-cm-box { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 16px; background: #fff; padding: 8px 10px 6px 14px; transition: border-color .15s, box-shadow .15s; }
.ogapoll-cm-box:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(43,179,227,.15); }
.ogapoll-cm-box textarea { width: 100%; border: none; outline: none; resize: none; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 600; color: var(--navy); background: transparent; min-height: 22px; max-height: 220px; }
.ogapoll-cm-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 11px; font-weight: 700; color: var(--muted); }
.ogapoll-cm-tools button { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--navy); display: grid; place-items: center; cursor: pointer; }
.ogapoll-cm-tools button img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.ogapoll-cm-tools button:disabled { opacity: .35; cursor: default; }
.ogapoll-cm-item { display: flex; gap: 12px; padding: 12px; border-radius: 14px; margin-bottom: 6px; }
.ogapoll-cm-item.creator { background: var(--section2); border: 1px solid var(--border); }
.ogapoll-cm-item.reply { padding: 8px 10px; }
.ogapoll-pc-avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.ogapoll-pc-avatar.xs { width: 18px; height: 18px; font-size: 9px; }
.ogapoll-cm-body { flex: 1; min-width: 0; }
/* name, @username and the time on ONE line: the name and the username shrink (…), the time never */
.ogapoll-cm-meta { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.ogapoll-cm-meta b { font-family: 'Poppins', sans-serif; color: var(--navy); font-size: 13.5px; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.ogapoll-cm-user { min-width: 0; flex: 0 3 auto; overflow: hidden; text-overflow: ellipsis; }
.ogapoll-cm-time, .ogapoll-cm-badge { flex: none; }
.ogapoll-cm-badge { background: var(--navy); color: #fff; border-radius: 6px; padding: 1px 7px; font-size: 10.5px; font-weight: 800; }
.ogapoll-cm-pinned { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.ogapoll-cm-text { margin: 3px 0 6px; font-size: 14px; font-weight: 600; color: var(--navy); white-space: pre-line; word-break: break-word; }
.ogapoll-cm-actions { display: flex; align-items: center; gap: 14px; }
.ogapoll-cm-actions button { border: none; background: none; padding: 0; font-weight: 800; font-size: 12px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ogapoll-cm-actions button:hover { color: var(--blue); }
.ogapoll-cm-actions .cm-del:hover { color: var(--red); }
.ogapoll-cm-actions .cm-like img { width: 16px; height: 16px; }
.ogapoll-cm-actions .cm-like img.on, .ogapoll-cm-actions .cm-like.on img.off { display: none; }
.ogapoll-cm-actions .cm-like.on img.on { display: inline; }
.ogapoll-cm-hearted { position: relative; display: inline-flex; margin-left: 2px; }
.ogapoll-cm-hearted i { position: absolute; right: -6px; bottom: -4px; font-style: normal; font-size: 11px; color: var(--red); }
.cm-replies { border: none; background: none; padding: 6px 0 0; font-weight: 800; font-size: 12.5px; color: var(--blue); cursor: pointer; }
.ogapoll-cm-replybox { margin-top: 8px; }
.ogapoll-cm-more { text-align: center; padding: 10px; }

/* participants */
.ogapoll-pt-filters { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.ogapoll-pt-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); border-radius: 10px; padding: 7px 10px; margin: 0; }
.ogapoll-pt-search:focus-within { border-color: var(--cyan); }
.ogapoll-pt-search img { width: 15px; height: 15px; opacity: .55; }
.ogapoll-pt-search input { flex: 1; min-width: 0; border: none; outline: none; font-weight: 700; font-size: 13px; color: var(--navy); background: transparent; }
.ogapoll-pt-frow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ogapoll-pt-frow select, .ogapoll-pt-custom input { border: 1.5px solid var(--border); border-radius: 10px; padding: 5px 8px; font-weight: 700; font-size: 12px; color: var(--navy); background: #fff; max-width: 190px; }
.ogapoll-pt-custom { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--muted); }
.ogapoll-pt-reset { border: none; background: none; font-weight: 800; font-size: 12px; color: var(--red); cursor: pointer; margin-left: auto; }
.ogapoll-pt-head { font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.ogapoll-pt-head b { color: var(--navy); }
.ogapoll-pt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 2px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.ogapoll-pt-who { min-width: 0; display: flex; flex-direction: column; }
.ogapoll-pt-who b { font-family: 'Poppins', sans-serif; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogapoll-pt-who span { color: var(--muted); font-size: 12px; }
.ogapoll-pt-row > .ogapoll-pc-avatar { grid-row: 1 / span 2; }
.ogapoll-pt-ans { font-weight: 800; color: var(--blue); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ogapoll-pt-view { grid-row: 1 / span 2; grid-column: 4; }
.ogapoll-pt-meta { grid-column: 2 / span 2; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.ogapoll-pt-view { padding: 7px 14px; font-size: 12px; }.ogapoll-pt-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; color: var(--muted); }
.ogapoll-pt-pager button { min-width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--border); background: #fff; font-weight: 800; color: var(--navy); cursor: pointer; }
.ogapoll-pt-pager button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ogapoll-pt-pager button:disabled { opacity: .4; cursor: default; }
.ogapoll-pt-modal { max-width: 720px; }
.ogapoll-pt-modalwho { display: flex; align-items: center; gap: 12px; }
.ogapoll-pt-modalwho h3 { margin: 0; }
.ogapoll-pt-modal .ogapoll-trbody { background: #F4F9FC; }

/* ==================== For the media: export button + menu, Results tools, Embed window ==================== */
.ogapoll-md-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #CFE6F5; background: #fff; color: #0B2C57; border-radius: 10px; padding: 6px 12px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ogapoll-md-btn:hover { border-color: #1F7BC0; color: #1F7BC0; }
.ogapoll-md-menu { position: absolute; z-index: 1200; width: 340px; background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(11,44,87,.22); padding: 14px; font-family: 'Nunito', sans-serif; color: #0B2C57; }
.ogapoll-md-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-weight: 800; font-size: 13px; }
.ogapoll-md-seg { display: inline-flex; background: #F2FAFF; border: 1px solid #CFE6F5; border-radius: 10px; padding: 2px; }
.ogapoll-md-seg button { border: none; background: none; border-radius: 8px; padding: 5px 10px; font-weight: 800; font-size: 12.5px; color: #6C8098; cursor: pointer; }
.ogapoll-md-seg button.on { background: #0B2C57; color: #fff; }
.ogapoll-md-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ogapoll-md-actions button { border: 1.5px solid #CFE6F5; background: #fff; border-radius: 10px; padding: 9px; font-weight: 800; font-size: 13px; color: #0B2C57; cursor: pointer; }
.ogapoll-md-actions button.main { grid-column: 1 / -1; background: #E63329; border-color: #E63329; color: #fff; }
.ogapoll-md-actions button:hover { border-color: #1F7BC0; } .ogapoll-md-actions button.main:hover { background: #C4271E; }
.ogapoll-md-status { min-height: 18px; margin-top: 8px; font-weight: 700; font-size: 12.5px; color: #6C8098; text-align: center; }
.ogapoll-rs-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ogapoll-rs-hint { margin-right: auto; font-weight: 800; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.ogapoll-em-card { max-width: 640px; }
.ogapoll-em-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.ogapoll-em-row b { display: block; font-family: 'Poppins', sans-serif; color: var(--navy); }
.ogapoll-em-row span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ogapoll-em-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ogapoll-em-opts label { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12.5px; color: var(--navy); margin: 0; }
.ogapoll-em-opts select { border: 1.5px solid var(--border); border-radius: 8px; padding: 4px 6px; font-weight: 700; color: var(--navy); }
.ogapoll-em-code { width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px; font-family: Consolas, monospace; font-size: 12px; color: var(--navy); background: #F7FBFE; resize: none; }
.ogapoll-em-actions { display: flex; gap: 8px; margin-top: 10px; }
.ogapoll-em-actions .ogapoll-btn { padding: 8px 14px; font-size: 13px; text-decoration: none; }

/* the approved star (images/review/star.svg) outside the rating widget: white star on a square in the level's color */
.ogapoll-stars { display: inline-flex; gap: 2px; vertical-align: middle; flex: none; }
.ogapoll-stars i { width: var(--s, 16px); height: var(--s, 16px); border-radius: 3px; display: grid; place-items: center; }
.ogapoll-stars img { width: 68%; height: 68%; display: block; }

/* ==================== Revenue tab (Oga Gift: Oga Gold received) ==================== */
.ogapoll-rv .ogapoll-an-card { margin-bottom: 14px; }
.ogapoll-rv-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ogapoll-rv-bar select, .ogapoll-rv-q { border: 1.5px solid var(--border); border-radius: 10px; padding: 6px 10px; font-weight: 800; font-size: 13px; color: var(--navy); background: #fff; }
.ogapoll-rv-q { width: 100%; margin-bottom: 10px; }
.ogapoll-rv-bar span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ogapoll-rv-coin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3B0 0 18%, #F2C230 45%, #B8860B 100%); box-shadow: inset 0 0 0 1.5px rgba(139,101,8,.55); flex: none; }
.ogapoll-rv-coin.lg { width: 34px; height: 34px; box-shadow: inset 0 0 0 3px rgba(139,101,8,.5); }
.ogapoll-rv-hero { background: linear-gradient(135deg, #0B2C57 0%, #13407A 100%); color: #fff; border-radius: 18px; padding: 20px; margin-bottom: 14px; display: grid; gap: 16px; }
.ogapoll-rv-label { font-weight: 800; font-size: 13px; color: #A9C1DC; text-transform: uppercase; letter-spacing: .6px; }
.ogapoll-rv-big { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ogapoll-rv-big b { font-family: 'Poppins', sans-serif; font-size: 42px; line-height: 1; color: #FFD75E; }
.ogapoll-rv-big small { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 16px; color: #F2C230; }
.ogapoll-rv-big .ogapoll-an-delta { background: rgba(255,255,255,.12); border-radius: 8px; padding: 3px 8px; }
.ogapoll-rv-big .ogapoll-an-delta.up { color: #7CF0A6; } .ogapoll-rv-big .ogapoll-an-delta.down { color: #FF9A92; }
.ogapoll-rv-usd { margin-top: 6px; font-size: 15px; font-weight: 700; color: #DCE8F5; }
.ogapoll-rv-usd b { font-family: 'Poppins', sans-serif; font-size: 22px; color: #fff; }
.ogapoll-rv-usd span { font-size: 12px; color: #A9C1DC; }
.ogapoll-rv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ogapoll-rv-kpis > div { background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ogapoll-rv-kpis span, .ogapoll-rv-kpis small { font-size: 11.5px; font-weight: 800; color: #A9C1DC; }
.ogapoll-rv-kpis b { font-family: 'Poppins', sans-serif; font-size: 22px; color: #fff; }
.ogapoll-rv-kpis .ogapoll-an-delta.up { color: #7CF0A6; } .ogapoll-rv-kpis .ogapoll-an-delta.down { color: #FF9A92; }
.ogapoll-rv-amt { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13.5px; color: #8B6508; white-space: nowrap; }
.ogapoll-rv .ogapoll-an-row { grid-template-columns: minmax(110px, 1.3fr) minmax(60px, 1.4fr) 50px 76px; }
.ogapoll-rv-sup, .ogapoll-rv-feed { display: flex; flex-direction: column; }
.ogapoll-rv-suprow, .ogapoll-rv-feedrow { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.ogapoll-rv-suprow:last-child, .ogapoll-rv-feedrow:last-child { border-bottom: none; }
.ogapoll-rv-suprow em { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 12px; color: var(--muted); background: var(--section2); }
.ogapoll-rv-suprow em.r1 { background: #F2C230; color: #5A4100; } .ogapoll-rv-suprow em.r2 { background: #CBD5E1; color: #334155; } .ogapoll-rv-suprow em.r3 { background: #E3A774; color: #5A2E0A; }
.ogapoll-rv-suprow .who, .ogapoll-rv-feedrow .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ogapoll-rv-suprow .who b, .ogapoll-rv-feedrow .who b { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogapoll-rv-suprow .who span, .ogapoll-rv-feedrow .who span { font-size: 11.5px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogapoll-rv-feedrow .amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ogapoll-rv-feedrow .amt small { font-size: 11px; font-weight: 700; color: var(--muted); }
@media (max-width: 767px) {
    .ogapoll-rv-kpis { grid-template-columns: 1fr 1fr; } .ogapoll-rv-big b { font-size: 34px; }
    .ogapoll-rv .ogapoll-an-row { grid-template-columns: minmax(70px, 1fr) minmax(36px, 1fr) 40px 64px; column-gap: 8px; padding: 8px 4px; }
}

/* ==================== Series (tracking over time) ==================== */
.ogapoll-sr-link { display: inline-flex; align-items: center; gap: 6px; flex: none; background: var(--section); color: var(--blue); border-radius: 20px; padding: 6px 12px; font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap; }
.ogapoll-sr-link:hover { background: var(--blue); color: #fff; }
.ogapoll-sr-loading { padding: 14px; text-align: center; }
.ogapoll-sr-choice { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ogapoll-sr-opt { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; color: var(--navy); margin: 0; cursor: pointer; }
.ogapoll-sr-opt input { accent-color: var(--navy); }
.ogapoll-sr-form { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px 24px; }
.ogapoll-sr-input { flex: 1 1 200px; min-width: 0; border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 13.5px; color: var(--navy); background: #fff; }
select.ogapoll-sr-input { flex: 0 1 180px; }
.ogapoll-sr-in { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ogapoll-sr-badge { flex: none; background: var(--navy); color: #fff; border-radius: 8px; padding: 4px 10px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px; }
.ogapoll-sr-name { display: flex; flex-direction: column; min-width: 0; }
.ogapoll-sr-name b { font-family: 'Poppins', sans-serif; font-size: 15px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogapoll-sr-name span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ogapoll-sr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.ogapoll-sr-actions .ogapoll-btn, .ogapoll-sr-form .ogapoll-btn { padding: 8px 14px; font-size: 13px; }
.ogapoll-sr-leave { color: var(--red) !important; }
.ogapoll-sr-msg { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 13px; }
.ogapoll-sr-msg.err { background: #FDEBEA; color: var(--redD); } .ogapoll-sr-msg.ok { background: #E7F7EE; color: #12733F; }
.ogapoll-sr-msg ul { margin: 6px 0 0 18px; padding: 0; }
/* the series page */
.ogapoll-series { max-width: 1400px; margin: 0 auto; }
.ogapoll-series .ogapoll-an-card { margin-bottom: 18px; }
.ogapoll-sr-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ogapoll-sr-head h2 { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 24px; color: var(--navy); }
.ogapoll-sr-head p { margin: 2px 0 0; font-weight: 700; font-size: 13.5px; color: var(--muted); }
.ogapoll-sr-headact { margin-left: auto; display: flex; gap: 8px; }
.ogapoll-sr-headact .ogapoll-btn { padding: 8px 14px; font-size: 13px; }
.ogapoll-sr-editbox { display: flex; flex-wrap: wrap; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 14px; }
.ogapoll-sr-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff; border-radius: 16px; padding: 4px 6px 4px 12px; font-weight: 800; font-size: 12.5px; }
.ogapoll-sr-chip button { border: none; background: rgba(255,255,255,.2); color: #fff; border-radius: 50%; width: 20px; height: 20px; line-height: 1; cursor: pointer; }
.ogapoll-an-orow em.sig { font-weight: 900; }
.ogapoll-sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ogapoll-sr-tile { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; text-decoration: none; color: var(--navy); transition: box-shadow .15s, border-color .15s; }
.ogapoll-sr-tile:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(11,44,87,.08); }
.ogapoll-sr-tile b { font-family: 'Poppins', sans-serif; font-size: 16px; }
.ogapoll-sr-tile span, .ogapoll-sr-tile small { font-weight: 700; font-size: 12.5px; color: var(--muted); }
.ogapoll-sr-tile div { font-weight: 700; font-size: 13.5px; } .ogapoll-sr-tile em { font-style: normal; font-weight: 900; color: var(--blue); }
.ogapoll-sr-empty { background: #fff; border: 1px dashed var(--border); border-radius: 16px; padding: 30px; text-align: center; font-weight: 700; color: var(--muted); }
.ogapoll-sr-tablewrap { overflow-x: auto; margin-bottom: 16px; }
.ogapoll-sr-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13px; }
.ogapoll-sr-table th, .ogapoll-sr-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ogapoll-sr-table th:first-child, .ogapoll-sr-table td:first-child { text-align: left; position: sticky; left: 0; background: #fff; font-weight: 800; color: var(--navy); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ogapoll-sr-table th { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--navy); vertical-align: bottom; }
.ogapoll-sr-table th a { color: var(--blue); text-decoration: none; }
.ogapoll-sr-table th small, .ogapoll-sr-table td small { display: block; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 11px; color: var(--muted); }
.ogapoll-sr-table td b { font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--navy); }
.ogapoll-sr-table td.na { color: #B4C2D0; }
.ogapoll-sr-table td:first-child i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.ogapoll-sr-wavelist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ogapoll-sr-wave { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ogapoll-sr-wave > a:not(.ogapoll-sr-edit) { font-weight: 800; color: var(--navy); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.ogapoll-sr-wave small { font-weight: 700; color: var(--muted); font-size: 12px; }
.ogapoll-sr-edit { margin-left: auto; font-weight: 800; font-size: 12.5px; color: var(--blue); text-decoration: none; }

/* ==================== Analytics tab (full page) ==================== */
.ogapoll-an { --c: var(--blue); }
.ogapoll-an-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: rgba(244,249,252,.94); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 16px; padding: 12px 16px; margin-bottom: 18px; }
.ogapoll-an-period, .ogapoll-an-sel { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 6px 12px; margin: 0; }
.ogapoll-an-period img, .ogapoll-an-sel img { width: 18px; height: 18px; }
.ogapoll-an-period select, .ogapoll-an-sel select, .ogapoll-an-tools select { border: none; background: transparent; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; color: var(--navy); outline: none; cursor: pointer; max-width: 260px; }
.ogapoll-an-period span { font-size: 12.5px; font-weight: 700; color: var(--muted); padding-left: 8px; border-left: 1px solid var(--line); }
.ogapoll-an-custom { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--muted); }
.ogapoll-an-custom input { border: 1.5px solid var(--border); border-radius: 10px; padding: 5px 8px; font-weight: 700; color: var(--navy); }
.ogapoll-an-seg { display: inline-flex; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 3px; gap: 2px; }
.ogapoll-an-seg button { border: none; background: none; border-radius: 9px; padding: 6px 12px; font-weight: 800; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ogapoll-an-seg button.on { background: var(--navy); color: #fff; }
.ogapoll-an-check { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 800; font-size: 13px; color: var(--navy); cursor: pointer; white-space: nowrap; }
.ogapoll-an-check input { accent-color: var(--navy); width: 16px; height: 16px; }
.ogapoll-an-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ogapoll-an-card { grid-column: span 1; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(11,44,87,.04); min-width: 0; }
.ogapoll-an-card.span-2 { grid-column: span 2; } .ogapoll-an-card.span-3 { grid-column: span 3; } .ogapoll-an-card.span-4 { grid-column: span 4; }
.ogapoll-an-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ogapoll-an-card h3 { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 17px; color: var(--navy); }
.ogapoll-an-card header p { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ogapoll-an-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ogapoll-an-tools > select { background: #fff; border: 1.5px solid var(--border); border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.ogapoll-an-more { border: 1.5px solid var(--border); background: #fff; border-radius: 20px; padding: 6px 14px; font-weight: 800; font-size: 12.5px; color: var(--blue); cursor: pointer; }
.ogapoll-an-more:hover { border-color: var(--blue); }
.ogapoll-an-empty { padding: 34px 10px; text-align: center; font-weight: 700; color: var(--muted); }
.ogapoll-an-note { margin: 10px 0 0; font-size: 11.5px; font-weight: 700; color: #9AABBD; }
/* main chart + its metric tabs */
.ogapoll-an-main { padding: 0; overflow: hidden; }
.ogapoll-an-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.ogapoll-an-tabs button { border: none; background: none; text-align: left; padding: 16px 20px 14px; border-bottom: 3px solid transparent; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.ogapoll-an-tabs button + button { border-left: 1px solid var(--line); }
.ogapoll-an-tabs button span { font-weight: 800; font-size: 13px; color: var(--muted); }
.ogapoll-an-tabs button b { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--navy); }
.ogapoll-an-tabs button.on { background: var(--section2); border-bottom-color: var(--blue); }
.ogapoll-an-main .ogapoll-an-chart { margin: 16px 20px 4px; }
.ogapoll-an-legend { display: flex; gap: 18px; padding: 0 20px 16px; font-size: 12px; font-weight: 800; color: var(--muted); }
.ogapoll-an-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.ogapoll-an-legend i.dash { background: repeating-linear-gradient(90deg, #9AABBD 0 5px, transparent 5px 9px); }
.ogapoll-an-delta { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.ogapoll-an-delta.up { color: #12A150; } .ogapoll-an-delta.down { color: var(--red); }
.ogapoll-an-chart { position: relative; height: 260px; }
.ogapoll-an-chart.tall { height: 320px; }
/* engagement KPIs */
.ogapoll-an-kpis { display: flex; flex-direction: column; gap: 4px; }
.ogapoll-an-kpi { display: grid; grid-template-columns: 22px 1fr auto; column-gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ogapoll-an-kpi img { width: 20px; height: 20px; opacity: .75; }
.ogapoll-an-kpi span { font-weight: 800; font-size: 13px; color: var(--muted); }
.ogapoll-an-kpi b { font-family: 'Poppins', sans-serif; font-size: 22px; color: var(--navy); grid-row: 1 / span 2; grid-column: 3; text-align: right; }
.ogapoll-an-kpi .ogapoll-an-delta, .ogapoll-an-kpi small { grid-column: 2; font-size: 11.5px; font-weight: 700; color: var(--muted); }
/* rows: label | bar | % | count */
.ogapoll-an-rows { display: flex; flex-direction: column; gap: 2px; }
.ogapoll-an-row { display: grid; grid-template-columns: minmax(150px, 1.5fr) minmax(70px, 1.5fr) 54px 64px auto; align-items: center; column-gap: 12px; padding: 8px 8px; border-radius: 10px; }
.ogapoll-an-row.is-link { cursor: pointer; } .ogapoll-an-row.is-link:hover { background: var(--section2); }
.ogapoll-an-rowlabel { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 800; font-size: 13.5px; color: var(--navy); }
.ogapoll-an-rowlabel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogapoll-an-rowlabel small { color: var(--muted); font-weight: 700; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogapoll-an-rowlabel em { font-style: normal; min-width: 18px; color: #9AABBD; font-weight: 800; font-size: 12px; }
.ogapoll-an-flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(11,44,87,.1); flex: none; }
.ogapoll-an-rowbar { height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--c) 13%, white); overflow: hidden; }
.ogapoll-an-rowbar span { display: block; height: 100%; border-radius: 6px; background: var(--c); transition: width .5s ease; }
.ogapoll-an-rowpct { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; color: var(--c); text-align: right; white-space: nowrap; }
.ogapoll-an-rowpct small { font-size: 11px; color: var(--muted); }
.ogapoll-an-rowcount { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-weight: 800; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ogapoll-an-rowcount .ogapoll-ppl { width: 13px; height: 13px; }
.ogapoll-an-rowview { font-size: 11.5px; font-weight: 700; color: #9AABBD; white-space: nowrap; }
/* devices donut */
.ogapoll-an-donut { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: center; }
.ogapoll-an-chart.donut { height: 160px; }
.ogapoll-an-donut .ogapoll-an-row { grid-template-columns: minmax(60px, 1fr) minmax(40px, 1fr) 46px 56px; row-gap: 2px; }
.ogapoll-an-donut .ogapoll-an-rowview { grid-column: 1 / -1; }
/* in the cards the country under a city is in the tooltip (the flag says it); the "See all" list shows it */
.ogapoll-an-card .ogapoll-an-rowlabel small { display: none; }
.ogapoll-an-donutc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ogapoll-an-donutc b { font-family: 'Poppins', sans-serif; font-size: 24px; color: var(--navy); line-height: 1; }
.ogapoll-an-donutc span { font-size: 12px; font-weight: 800; color: var(--muted); }
/* heatmap */
.ogapoll-an-heat { display: grid; grid-template-columns: 44px repeat(24, minmax(0, 1fr)); gap: 3px; }
.ogapoll-an-heat .hh { font-size: 10.5px; font-weight: 800; color: #9AABBD; text-align: left; }
.ogapoll-an-heat .hd { font-size: 12px; font-weight: 800; color: var(--muted); display: flex; align-items: center; }
.ogapoll-an-heat .hc { height: 22px; border-radius: 4px; background: #EEF4F9; }
.ogapoll-an-peak { margin: 12px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ogapoll-an-peak b { color: var(--navy); }
.ogapoll-an-scale { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.ogapoll-an-scale i { display: inline-block; width: 80px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(31,123,192,.12), #1F7BC0); }
/* results over time: answer legend */
.ogapoll-an-olegend { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; margin-top: 14px; }
.ogapoll-an-olegend .ogapoll-an-note { grid-column: 1 / -1; }
.ogapoll-an-orow { display: grid; grid-template-columns: 14px 1fr auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--c) 7%, white); }
.ogapoll-an-orow i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.ogapoll-an-orow span { font-weight: 800; font-size: 13px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogapoll-an-orow b { font-family: 'Poppins', sans-serif; font-size: 18px; color: var(--c); }
.ogapoll-an-orow small { font-size: 11px; font-weight: 800; color: var(--muted); }
.ogapoll-an-orow em { grid-column: 2 / -1; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.ogapoll-an-orow em.up { color: #12A150; } .ogapoll-an-orow em.down { color: var(--red); }
/* results by segment: one 100% stacked bar per group */
.ogapoll-an-seglegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; font-size: 12.5px; font-weight: 800; color: var(--navy); }
.ogapoll-an-seglegend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--c); margin-right: 6px; vertical-align: -1px; }
.ogapoll-an-segrow { padding: 8px 0; border-bottom: 1px solid var(--line); }
.ogapoll-an-segrow:last-of-type { border-bottom: none; }
.ogapoll-an-seghead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13.5px; color: var(--navy); }
.ogapoll-an-seghead small { color: var(--muted); font-weight: 700; }
.ogapoll-an-seghead .ogapoll-an-rowcount { margin-left: auto; }
.ogapoll-an-stack { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: #EEF4F9; }
.ogapoll-an-stack span { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 11.5px; white-space: nowrap; overflow: hidden; border-right: 2px solid #fff; transition: width .5s ease; }
.ogapoll-an-stack span:last-child { border-right: none; }
/* loading skeletons */
.ogapoll-an-skel { border-radius: 18px; background: linear-gradient(90deg, #EAF2F8 0%, #F6FAFD 50%, #EAF2F8 100%); background-size: 200% 100%; animation: ogapollAnShimmer 1.2s linear infinite; min-height: 220px; }
.ogapoll-an-skel.kpi { grid-column: span 4; min-height: 90px; } .ogapoll-an-skel.main { grid-column: span 4; min-height: 380px; } .ogapoll-an-skel.half { grid-column: span 2; }
@keyframes ogapollAnShimmer { to { background-position: -200% 0; } }
/* "See all" modal */
.ogapoll-an-modal { position: fixed; inset: 0; z-index: 1060; background: rgba(11,44,87,.45); display: flex; align-items: center; justify-content: center; padding: 16px; font-family: 'Nunito', sans-serif;
    --navy: #0B2C57; --blue: #1F7BC0; --muted: #6C8098; --border: #CFE6F5; --line: #E3EEF6; --section2: #F2FAFF; --red: #E63329; }
.ogapoll-an-mcard { background: #fff; border-radius: 20px; width: min(760px, 100%); max-height: 90vh; overflow: auto; padding: 20px 22px; }
.ogapoll-an-mcard header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ogapoll-an-mcard h3 { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 19px; color: var(--navy); }
.ogapoll-an-mcard header span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ogapoll-an-mcard header .ogapoll-xbtn { margin-left: auto; }
.ogapoll-an-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; }
.ogapoll-an-search img { width: 16px; height: 16px; opacity: .6; }
.ogapoll-an-search input { border: none; outline: none; flex: 1; font-weight: 700; color: var(--navy); }
@media (max-width: 1200px) {
    .ogapoll-an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ogapoll-an-card, .ogapoll-an-card.span-3, .ogapoll-an-card.span-4 { grid-column: span 2; }
    .ogapoll-an-card.span-2 { grid-column: span 1; }
    .ogapoll-an-kpis { flex-direction: row; flex-wrap: wrap; } .ogapoll-an-kpi { flex: 1 1 180px; border-bottom: none; }
}
@media (max-width: 860px) {
    .ogapoll-an-grid { grid-template-columns: minmax(0, 1fr); }
    .ogapoll-an-card, .ogapoll-an-card.span-2, .ogapoll-an-card.span-3, .ogapoll-an-card.span-4, .ogapoll-an-skel.half { grid-column: span 1; }
    .ogapoll-an-skel.kpi, .ogapoll-an-skel.main { grid-column: span 1; }
    .ogapoll-an-bar { position: static; }
    .ogapoll-an-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .ogapoll-an-seg button { padding: 6px 9px; }
    .ogapoll-an-tabs button { padding: 12px; } .ogapoll-an-tabs button b { font-size: 21px; }
    .ogapoll-an-row { grid-template-columns: minmax(90px, 1fr) minmax(60px, 1.3fr) 48px 58px; }
    .ogapoll-an-row > .ogapoll-an-delta, .ogapoll-an-rowview { display: none; }
    .ogapoll-an-donut { grid-template-columns: 1fr; }
    .ogapoll-an-heat { grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; }
    .ogapoll-an-heat .hc { min-height: 9px; border-radius: 2px; }
    .ogapoll-an-chart.tall { height: 260px; }
}

@media (max-width: 767px) {
    .ogapoll-dt-top, .ogapoll-dt-narrow { zoom: 1; padding-left: 12px; padding-right: 12px; border-radius: 12px; }
    .ogapoll-dt-top { padding-top: 14px; margin-bottom: 12px; }
    .ogapoll-dt-title { font-size: 17px; }
    .ogapoll-dt-back { width: 36px; height: 36px; }
    .ogapoll-dt-tabs button { font-size: 14px; padding: 12px 10px; }
    .ogapoll-pt-ans { max-width: 110px; }
    .ogapoll-rbar-pct { font-size: 24px; }
    .ogapoll-cm { padding: 14px 12px 6px; }
}