/* ogapoll-core.css — the poll card on Core pages (/{username}, /b/{id}, /s|p/{code}).
   The card itself is styled by ogapoll.css, an IDENTICAL copy of the Studio's (the card must look
   exactly like the Studio's Preview): this file only gives it what the Studio page's .ogapoll container
   gives it (the variables, fonts, zoom) and styles what only a voter sees (answering, paying, thanks). */
.ogapoll-core {
    --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);
    max-width: calc(680px / var(--mo-zoom, 1.25)); margin: 0 auto 24px; /* 680 px on screen at the site's zoom */
    zoom: var(--mo-zoom, 1.25);
    text-align: left;
}
.ogapoll-core *, .ogapoll-core *::before, .ogapoll-core *::after { box-sizing: border-box; }
.ogapoll-core h1, .ogapoll-core h2, .ogapoll-core h3, .ogapoll-core .ogapoll-btn { font-family: 'Poppins', sans-serif; }
@media (max-width: 767px) {
    .ogapoll-core { zoom: 1; max-width: none; --qmedia-w: 88px; --qmedia-h: 61px; --media-w: 70px; --media-h: 49px; }
}

/* the numbers of the card's rows (votes, minimum, time left, views, likes, comments, shares): boxed to
   the digits and lowered a little, so they sit on their icons' visual middle (they looked too high) */
.ogapoll-core .ogapoll-vt-n { display: inline-block; line-height: 1; text-box: trim-both cap alphabetic; position: relative; top: .16em; }
@supports not (text-box: trim-both cap alphabetic) {
    .ogapoll-core .ogapoll-vt-n { top: .28em; }
}

/* a paid poll's minimum next to the votes: the Revenue tab's gold coin and gold figure */
.ogapoll-core .ogapoll-vt-ogc { color: #8B6508; font-family: 'Poppins', sans-serif; font-weight: 800; }
/* the coin at the row's icon size (ogapoll.css .ogapoll-pc-stat img: 20px): same top and bottom as the vote / results icons */
.ogapoll-core .ogapoll-vt-ogc .ogapoll-rv-coin { width: 20px; height: 20px; flex: none; }
.ogapoll-gift .ogapoll-rv-coin.lg { display: block; margin: 3px auto 7px; }

/* ---- answering: the question's inputs (same look as the Preview's placeholders) ---- */
.ogapoll-core textarea.ogapoll-opentext, .ogapoll-core input.ogapoll-wcinput {
    display: block; width: 100%; color: var(--navy); font-family: inherit; outline: none; resize: vertical;
}
.ogapoll-core textarea.ogapoll-opentext:focus, .ogapoll-core input.ogapoll-wcinput:focus { border-color: var(--cyan); }
.ogapoll-core .ogapoll-scale10 span { cursor: pointer; }
.ogapoll-core .ogapoll-yesno button { cursor: pointer; }
.ogapoll-core .ogapoll-yesno button.sel { background: var(--navy); border-color: var(--navy); color: #fff; }
.ogapoll-core .ogapoll-rank { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ogapoll-core .ogapoll-rank.dragging { cursor: grabbing; }
.ogapoll-core .ogapoll-rank.dragging { opacity: .6; box-shadow: 0 6px 18px rgba(11,44,87,.18); }
.ogapoll-core .ogapoll-rankhandle { color: var(--muted); }

/* the step footer under the question: progress, back, next / vote */
.ogapoll-vt-foot { display: flex; align-items: center; gap: 10px; padding: 4px 20px 16px; }
.ogapoll-vt-progress { flex: 1; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ogapoll-vt-progress span { display: block; height: 100%; background: var(--cyan); border-radius: 4px; transition: width .3s ease; }
.ogapoll-vt-back { border: 1.5px solid var(--border); border-radius: 12px; background: var(--section); color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13.5px; cursor: pointer; padding: 12px 18px; min-width: 96px; }
.ogapoll-vt-back:hover { border-color: var(--cyan); }
.ogapoll-vt-back:disabled { visibility: hidden; }
.ogapoll-vt-next { min-width: 120px; }
.ogapoll-vt-next:disabled { opacity: .45; cursor: not-allowed; }
.ogapoll-vt-err { margin: 0 20px 12px; padding: 9px 12px; border-radius: 10px; background: #FDECEB; color: var(--redD); font-weight: 700; font-size: 13px; }
.ogapoll-vt-err a { color: var(--redD); text-decoration: underline; }
.ogapoll-vt-hint { margin: 0 20px 12px; color: var(--muted); font-size: 12.5px; font-weight: 600; }

/* start / results / closed banners in the question area */
.ogapoll-vt-start { padding: 18px 20px 16px; text-align: center; }
.ogapoll-vt-start p { margin: 0 0 12px; color: var(--muted); font-weight: 700; font-size: 13.5px; }
.ogapoll-vt-note { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; margin: 12px 20px 0; border-radius: 12px; background: var(--section2); color: var(--blue); font-weight: 800; font-size: 13px; }
.ogapoll-vt-results { padding: 6px 0 4px; }
.ogapoll-vt-results .ogapoll-previewq + .ogapoll-previewq { border-top: 1px solid var(--line); }

/* ---- the thank-you moment ---- */
.ogapoll-vt-thanks { padding: 22px 20px 18px; text-align: center; }
.ogapoll-vt-thanks .burst { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--section); display: grid; place-items: center; animation: ogapollPop .5s cubic-bezier(.2,1.6,.4,1) both; }
.ogapoll-vt-thanks .burst svg { width: 34px; height: 34px; color: #37B26A; }
.ogapoll-vt-thanks h3 { margin: 0 0 4px; font-size: 18px; color: var(--navy); }
.ogapoll-vt-thanks p { margin: 0 0 12px; color: var(--muted); font-weight: 700; font-size: 13.5px; }
.ogapoll-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ogapoll-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: .9; animation: ogapollFall 1.6s ease-in forwards; }
@keyframes ogapollPop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ogapollFall { to { transform: translateY(420px) rotate(540deg); opacity: 0; } }

/* ---- "Support this creator": the gift that validates a paid vote ---- */
.ogapoll-vt-support { padding: 18px 20px 6px; }
.ogapoll-vt-support h3 { margin: 0 0 2px; font-size: 18px; color: var(--navy); }
.ogapoll-vt-support .sub { margin: 0 0 14px; color: var(--muted); font-weight: 700; font-size: 13.5px; }
.ogapoll-gifts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 250px; overflow-y: auto; padding: 2px; }
.ogapoll-gift { border: 1.5px solid var(--border); border-radius: 12px; background: #fff; padding: 8px 4px 6px; text-align: center; cursor: pointer; font-family: inherit; }
.ogapoll-gift img { width: 40px; height: 40px; object-fit: contain; display: block; margin: 0 auto 4px; }
.ogapoll-gift .nm { display: block; font-size: 11.5px; font-weight: 800; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogapoll-gift .pr { display: block; font-size: 11px; font-weight: 800; color: var(--blue); }
.ogapoll-gift.on { border-color: var(--cyan); background: var(--section); box-shadow: 0 0 0 2px rgba(43,179,227,.25); }
.ogapoll-qty { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; }
.ogapoll-qty label { font-weight: 800; font-size: 13px; color: var(--navy); margin: 0; }
.ogapoll-qty button { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--border); background: #fff; font-weight: 800; font-size: 16px; color: var(--navy); cursor: pointer; }
.ogapoll-qty input { width: 64px; height: 34px; border-radius: 10px; border: 1.5px solid var(--border); text-align: center; font-weight: 800; color: var(--navy); font-family: inherit; }
.ogapoll-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; margin: 8px 0 4px; border-radius: 12px; background: var(--section2); font-weight: 800; color: var(--navy); }
.ogapoll-total b { font-family: 'Poppins', sans-serif; font-size: 18px; }
.ogapoll-min { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ogapoll-min.bad { color: var(--redD); }
.ogapoll-bal { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ogapoll-bal a { color: var(--blue); font-weight: 800; }

/* ---- the vote modals (login, phone, code) ---- */
.ogapoll-modal { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; background: rgba(10,35,64,.55); padding: 16px; }
.ogapoll-modal.show { display: flex; }
.ogapoll-modal-card { width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
    font-family: 'Nunito', sans-serif; color: #0B2C57; --navy: #0B2C57; --blue: #1F7BC0; --cyan: #2BB3E3; --red: #E63329; --redD: #C4271E; --border: #CFE6F5; --line: #E3EEF6; --muted: #6C8098; --section: #E9F5FC; --section2: #F2FAFF; }
/* the navy header band of the Studio's question modal: white title, white × */
.ogapoll-modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 14px 18px; background: var(--navy); }
.ogapoll-modal-head h3 { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; color: #fff; }
.ogapoll-modal-x { flex: none; width: 32px; height: 32px; border: none; border-radius: 8px; background: rgba(255,255,255,.12); font-size: 22px; line-height: 1; color: #fff; cursor: pointer; display: grid; place-items: center; }
.ogapoll-modal-x:hover { background: rgba(255,255,255,.22); }
.ogapoll-modal-body { padding: 16px 18px 18px; }
.ogapoll-modal-body p { margin: 0 0 12px; color: var(--muted); font-weight: 700; font-size: 13.5px; }
.ogapoll-field { display: block; width: 100%; height: 44px; border: 1.5px solid var(--border); border-radius: 12px; padding: 0 12px; font: 700 14px 'Nunito', sans-serif; color: var(--navy); outline: none; margin-bottom: 10px; background: #fff; }
.ogapoll-field:focus { border-color: var(--cyan); }
.ogapoll-phone { display: flex; gap: 8px; }
.ogapoll-phone .ogapoll-field { margin-bottom: 0; }
.ogapoll-cc { position: relative; flex: none; width: 128px; }
.ogapoll-cc button.ogapoll-field { display: flex; align-items: center; gap: 6px; text-align: left; cursor: pointer; }
.ogapoll-cc img, .ogapoll-cc-list img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; flex: none; }
.ogapoll-cc-list { position: static; width: 100%; margin-top: 8px; max-height: 240px; overflow-y: auto; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(11,44,87,.15); padding: 6px; display: none; }
.ogapoll-cc-list.show { display: block; }
.ogapoll-cc-list input { width: 100%; height: 36px; border: 1.5px solid var(--border); border-radius: 9px; padding: 0 10px; margin-bottom: 6px; font: 700 13px 'Nunito', sans-serif; }
.ogapoll-cc-list button { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; padding: 7px 8px; border-radius: 8px; text-align: left; font: 700 13px 'Nunito', sans-serif; color: var(--navy); cursor: pointer; }
.ogapoll-cc-list button:hover { background: var(--section); }
.ogapoll-cc-list button span.dial { margin-left: auto; color: var(--muted); }
.ogapoll-consent { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.45; cursor: pointer; }
.ogapoll-consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: #1F7BC0; }
.ogapoll-confirm { padding: 14px; border-radius: 12px; background: var(--section2); text-align: center; margin-bottom: 12px; }
.ogapoll-confirm b { display: block; font-family: 'Poppins', sans-serif; font-size: 20px; color: var(--navy); letter-spacing: .5px; }
.ogapoll-code { display: flex; gap: 8px; justify-content: center; margin: 6px 0 12px; }
.ogapoll-code input { width: 44px; height: 52px; border: 1.5px solid var(--border); border-radius: 12px; text-align: center; font: 800 22px 'Poppins', sans-serif; color: var(--navy); outline: none; }
.ogapoll-code input:focus { border-color: var(--cyan); }
.ogapoll-resend { text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 8px; }
.ogapoll-resend button { border: none; background: none; color: var(--blue); font-weight: 800; cursor: pointer; padding: 0; }
.ogapoll-resend button:disabled { color: var(--muted); cursor: default; }
.ogapoll-modal-msg { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; font-weight: 700; font-size: 13px; display: none; }
.ogapoll-modal-msg.err { display: block; background: #FDECEB; color: var(--redD); }
.ogapoll-modal-msg.ok { display: block; background: #E7F7EE; color: #1E7A45; }
.ogapoll-linkbtn { border: none; background: none; color: var(--blue); font-weight: 800; font-size: 13px; cursor: pointer; padding: 0; }
/* "Use real SMS instead (coin 20)" and, once chosen, the balance chip right above the button */
.ogapoll-smsfee { white-space: nowrap; }
.ogapoll-smsfee img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.ogapoll-rcrow { display: flex; margin: 0 0 12px; }
.ogapoll-tabs2 { display: flex; gap: 6px; background: var(--section); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.ogapoll-tabs2 button { flex: 1; border: none; background: none; border-radius: 9px; padding: 9px; font: 800 13px 'Nunito', sans-serif; color: var(--muted); cursor: pointer; }
.ogapoll-tabs2 button.on { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(11,44,87,.1); }