/* Duegho posts (photo, video, text) = the poll post's card (ogapoll.css / ogapoll-core.css): same frame, same
   fonts (Poppins titles and names, Nunito text), same stats row; only the author line moves to the top. */
.dg-post .ogapoll-pc-author.dg-top { border-top: 0; border-bottom: .8px solid #E3EEF6; padding: 14px 20px 12px; }
.dg-text { padding: 14px 20px 12px; font-family: Nunito, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.45; color: #0B2C57; white-space: pre-line; }
.dg-text.dg-big { font-family: Poppins, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.35; }
.dg-text a, .dg-cm-text a { color: #1F7BC0; font-weight: 700; text-decoration: none; }
.dg-media { position: relative; }
.dg-media .ogapoll-pcover { border-radius: 0; margin: 0; }
.dg-count { position: absolute; top: 12px; right: 12px; background: rgba(11, 44, 87, .78); color: #fff; font: 700 12px Nunito, sans-serif; padding: 3px 10px; border-radius: 12px; }
.dg-dots { display: flex; gap: 5px; justify-content: center; padding: 8px 0 0; }
.dg-dots i { width: 6px; height: 6px; border-radius: 50%; background: #CFE6F5; }
.dg-dots i.on { background: #1F7BC0; }
.dg-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); }
.dg-dur { position: absolute; bottom: 12px; right: 12px; background: rgba(0, 0, 0, .7); color: #fff; font: 700 12px Nunito, sans-serif; padding: 2px 8px; border-radius: 6px; }
/* the last comment + write a comment: in the timeline, on every post (polls too) */
.dg-cm { border-top: .8px solid #E3EEF6; padding: 10px 20px 4px; }
.dg-cm-all { font: 600 12px Nunito, sans-serif; color: #6C8098; text-decoration: none; }
.dg-cm-row { display: flex; gap: 10px; margin-top: 8px; }
.dg-av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 12px Poppins, sans-serif; color: #fff; }
.dg-cm-bubble { background: #F3F8FC; border-radius: 14px; padding: 7px 12px; }
.dg-cm-name { font: 700 13px Poppins, sans-serif; color: #0B2C57; }
.dg-cm-text { font: 400 14px/1.4 Nunito, sans-serif; color: #0B2C57; }
.dg-cm-meta { font: 600 12px Nunito, sans-serif; color: #6C8098; margin: 3px 0 0 12px; display: flex; gap: 12px; align-items: center; }
.dg-cm-meta img { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.dg-cm-input { display: flex; gap: 10px; align-items: center; padding: 8px 20px 14px; }
.dg-cm-input input { flex: 1; border: .8px solid #CFE6F5; border-radius: 18px; padding: 8px 14px; font: 400 14px Nunito, sans-serif; color: #0B2C57; outline: none; }
.dg-cm-input input::placeholder { color: #6C8098; }
.dg-cm-input button { border: 0; background: none; padding: 0; }
.dg-cm-input button img { width: 22px; height: 22px; }
/* the 4 tabs = the mobile app's tab icons (Play Store screens): posts, grid, profile, # ; active red, others blue */
.posttabwrapper .nav-tabs .nav-link i { font-size: 26px; color: #1F7BC0; }
.posttabwrapper .nav-tabs .nav-link.active i { color: #E63329; }
.posttabwrapper .nav-tabs .nav-link.active { border-bottom-color: #E63329 !important; }
#logo img { height: 34px; width: auto; }
#logo .lg-mini { display: none; width: 34px; border-radius: 50%; }
@media (max-width: 360px) { #logo .lg-full { display: none; } #logo .lg-mini { display: inline-block; } }
/* Open Now: the template's .cardbtn (hover = navy), full width of the card */
.ogapoll-pcard .cardbtn.dg-open { margin: 0; border-top: .8px solid #E3EEF6; font-family: Nunito, sans-serif; font-size: 14px; font-weight: 700; color: #1DA1F2; }
.ogapoll-pcard .cardbtn.dg-open:hover { color: #fff; }
/* the DGC coin (the old KRI coin): Duegho Gifts */
.dg-coin { width: 26px !important; height: 26px !important; border-radius: 50%; }
.dg-gift { border: 0; background: none; cursor: pointer; }
.dg-gift:hover .dg-coin { transform: scale(1.12); }
.dg-price { color: #B07A00 !important; }
.dg-price .dg-coin { width: 20px !important; height: 20px !important; }
.ogapoll-pc-info .bi, .ogapoll-pc-status .bi { font-size: 16px; }
.dg-tray { padding: 0 16px 12px; }
/* a paid VOD: the clear thumbnail with the hook playing (muted loop), a lock badge, then the unlock button (gift + price) */
.dg-locked .ogapoll-pcover { animation: dg-hook 15s linear infinite; background-size: 112% auto; }
@keyframes dg-hook { 0% { background-position: 0% 40%; } 100% { background-position: 100% 60%; } }
.dg-badge { position: absolute; top: 12px; left: 12px; background: #fff; color: #0B2C57; font: 700 12px Nunito, sans-serif; padding: 4px 10px; border-radius: 12px; box-shadow: 0 2px 8px rgba(11, 44, 87, .18); }
.dg-badge .bi { color: #E63329; }
.dg-hook { position: absolute; bottom: 12px; left: 12px; background: #fff; color: #0B2C57; font: 700 12px Nunito, sans-serif; padding: 4px 10px; border-radius: 12px; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(11, 44, 87, .18); }
.dg-hook-bar { width: 60px; height: 4px; border-radius: 2px; background: #E3EEF6; overflow: hidden; display: inline-block; }
.dg-hook-bar b { display: block; height: 100%; width: 0; background: #E63329; animation: dg-bar 15s linear infinite; }
@keyframes dg-bar { to { width: 100%; } }
.dg-unlock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px 4px; }
.dg-unlock { white-space: nowrap; border: 0; border-radius: 22px; background: #E63329; color: #fff; font: 700 14px Nunito, sans-serif; padding: 9px 16px; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.dg-unlock:hover { background: #C42A21; }
.dg-unlock img { width: 22px; height: 22px; border-radius: 50%; }
.dg-unlock-s { font: 600 12px Nunito, sans-serif; color: #6C8098; }
/* the post detail in a modal (post-detail.html), like Instagram */
.dg-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .75); display: flex; align-items: center; justify-content: center; }
.dg-modal[hidden] { display: none; }
.dg-modal-box { width: min(1200px, 94vw); height: 88vh; background: #fff; border-radius: 10px; overflow: hidden; }
.dg-modal-box iframe { width: 100%; height: 100%; border: 0; }
.dg-x { position: absolute; top: 14px; right: 22px; border: 0; background: none; color: #fff; font-size: 40px; line-height: 1; }
/* the template's KRI coin -> the DGC coin */
.donate a:before { background: url(../images/dgc.svg) no-repeat 0 0 / cover !important; }
/* no ad banner on top, anywhere */
.headertop { display: none !important; }
/* red = the main color: every icon red (the template's blue icons and Core's card icons), the verified check red;
   blue stays only for links, hashtags and the Follow buttons */
.sidebarmenu img, .posttabwrapper .nav-tabs .nav-link i, .ogapoll-pc-stat > img, .ogapoll-pc-icon > img, .ogapoll-pc-line2 > img,
.dg-cm-meta img, .dg-cm-input button img, img[src*="verifiedusericon"], .ogapoll-pc-verified,
.like a:before, .comment a:before, .share a:before, .profileinfo img, .profiledetails img, .profilewrappertop img:not([src*="profile"]) {
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(2620%) hue-rotate(349deg) brightness(93%) contrast(93%);
}
.posttabwrapper .nav-tabs .nav-link i { filter: none; color: #E63329 !important; opacity: .55; }
.posttabwrapper .nav-tabs .nav-link.active i { opacity: 1; }
.ogapoll-pc-like .on { filter: none; }
.profilenumberslisting li span, .profilenumberslisting li { color: #0B2C57; }
.profilenumberslisting li { color: #E63329 !important; }
.profilenumberslisting li span { color: #0B2C57 !important; }
/* red rings (profile photo, stories / profile circles), red dots, red Open Now */
img { border-color: #E63329 !important; }
.slick-dots li.slick-active a, .slickdot.on, .slick-dots .on, .dg-dots i.on { background: #E63329 !important; }
.cardbtn, .ogapoll-pcard .cardbtn.dg-open { color: #E63329 !important; background: #FDF1F0 !important; }
.cardbtn:hover, .ogapoll-pcard .cardbtn.dg-open:hover { background: #E63329 !important; color: #fff !important; }
.cardbtn:before { filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(2620%) hue-rotate(349deg) brightness(93%) contrast(93%); }
.cardbtn:hover:before { filter: brightness(0) invert(1); }
/* red main color: Create Post + the active category chip */
.createpostbtn, a.createpost, .btn-primary, .createpostwrapper .btn, .postblockwrapper .createpostbtn { background: #E63329 !important; border-color: #E63329 !important; }
.filterslider .active a, .filterslider a.active, .categorieslisting .active a, .tagslisting li.active a { background: #E63329 !important; border-color: #E63329 !important; color: #fff !important; }
/* the mobile app's bottom bar (Play Store screens): home, grid, + , Duegho Gifts (DGC), more */
.dg-bottombar { display: none; }
@media (max-width: 767px) {
  .topheader-actions { display: none !important; }
  .dg-bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; height: 60px; background: #0B2C57; justify-content: space-around; align-items: center; }
  .dg-bottombar a { color: #fff; font-size: 24px; opacity: .85; text-decoration: none; display: flex; flex-direction: column; align-items: center; }
  .dg-bottombar a.on { opacity: 1; }
  .dg-bottombar a.on:after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; margin-top: 3px; }
  .dg-bottombar .dg-plus { width: 46px; height: 46px; border-radius: 50%; background: #E63329; display: flex; align-items: center; justify-content: center; font-size: 26px; opacity: 1; }
  .dg-bottombar img { width: 30px; height: 30px; border-radius: 50%; }
  body { padding-bottom: 70px; }
}
/* the second chips row and the menu button: red too */
.postfilterwrapper a.active, .slick-track a.active { background: #E63329 !important; color: #fff !important; }
.navtogglebtn { border-color: #fff !important; background: transparent !important; }
.navtogglebtn .menulines, .navtogglebtn .menulines:before, .navtogglebtn .menulines:after { background: #fff !important; }
/* the template's cards: neutral borders, red icons and counts */
.card.border-primary, .quickmsgslider .card, .border-primary { border-color: #E3EEF6 !important; }
.likecomment li a, .donateshare li a { color: #E63329 !important; }
.likecomment li a:before, .donateshare li.share a:before, li.like a:before, li.comment a:before, li.share a:before {
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(2620%) hue-rotate(349deg) brightness(93%) contrast(93%) !important; }
.dg-msearch { display: none; }
@media (max-width: 767px) { .dg-msearch { display: block; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 24px; } .headermiddle { position: relative; } }
.dg-coin, .dg-unlock img, .dg-bottombar img, img[src*="dgc.svg"] { filter: none !important; }
.preloader { display: none !important; }
/* repost (like X): red icon + count */
.dg-repost { border: 0; background: none; cursor: pointer; }
.dg-repost .bi { font-size: 19px; color: #E63329; font-weight: 700; }

/* ---- the app's second row: Duegho's menu as pills (owner, 2026-10-23), a shadow under it ---- */
.headerbottom.dg-menu2 { background: #fff; border-bottom: 1px solid #F1E4E6; box-shadow: 0 8px 14px -10px rgba(0, 0, 0, .28); position: relative; z-index: 2; }
.dg-menu2-row { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dg-menu2-row::-webkit-scrollbar { display: none; }
.dg-pill { flex: none; padding: 7px 16px; border-radius: 999px; border: 1px solid #D9E7F3; background: #EEF5FB; color: #1F2D3D; font: 700 14px/1.2 'Nunito', system-ui, sans-serif; text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.dg-pill:hover { background: #FDE8EA; border-color: #F6C2C8; color: #C4121F; text-decoration: none; }
.dg-pill.active { background: #E21B2D; border-color: #E21B2D; color: #fff; }
@media (max-width: 767px) { .dg-menu2-row { padding: 5px 2px; gap: 8px; } .dg-pill { padding: 6px 14px; font-size: 13px; } }

/* ---- the header as tall as the feed's (owner, 2026-10-23): 50 px, 36 px icons, a tight pills row -------------------- */
.headermiddle { padding: 4px 0; }
.headermiddle input { height: 38px !important; }
.topheader-actions li { margin-right: 8px; }
.topheader-actions li a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-width: 1.5px; }
.topheader-actions li a img { width: 100%; height: 100%; }
.topheader-actions li a.searchbtn img { width: 18px; height: 18px; }
#logo img.lg-full { height: 30px; }
.headerbottom { padding: 0; }
@media (max-width: 767px) { .headermiddle input { height: 44px !important; } }