/* Eco Run partner popup (Mini App). Brand: Deep Blue #0B2D6B, Orange #FF6B3D, Sky Blue #00A3FF, Light #F4F6FA, Charcoal #1F2937. */
[hidden].pop-overlay { display: none; }
.pop-overlay { position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(11, 45, 107, 0.6); animation: pop-fade 0.2s ease-out; }
.pop-sheet { position: relative; width: 100%; max-width: 430px; max-height: 92vh; overflow: auto; background: #fff; color: var(--brand-charcoal);
  border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); outline: none; animation: pop-up 0.25s ease-out; }
.pop-sheet.khmer { font-family: 'Noto Sans Khmer', var(--font); }
.pop-timerbar { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: rgba(0, 163, 255, 0.2); border-radius: 20px 20px 0 0; overflow: hidden; z-index: 2; }
.pop-timerbar span { display: block; height: 100%; background: var(--brand-sky); transform-origin: left center; transform: scaleX(1); will-change: transform; }
.pop-poster { position: relative; height: 240px; background: var(--brand-deep); display: flex; align-items: center; justify-content: center; border-radius: 20px 20px 0 0; overflow: hidden; }
.pop-poster img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.pop-pill { position: absolute; top: 14px; left: 14px; background: #fff; color: var(--brand-deep); font: 600 12px/1 var(--font); letter-spacing: 0.06em; padding: 7px 10px; border-radius: 999px; }
.pop-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #EEF2F8; color: var(--brand-deep); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pop-x svg, .pop-row svg, .pop-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pop-body { padding: 18px 20px 20px; }
.pop-body h2 { margin: 0 0 6px; font: 700 28px/1.15 var(--font); color: var(--brand-deep); }
.pop-sub { margin: 0 0 14px; font-size: 15px; color: var(--brand-charcoal); }
.pop-row { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 8px 0; color: var(--brand-charcoal); }
.pop-row svg { color: var(--brand-deep); flex: none; }
.pop-price { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 12px 14px; background: var(--brand-orange); color: var(--brand-deep); border-radius: 14px; }
.pop-price-t { font-weight: 700; font-size: 15px; }
.pop-price-s { font-size: 13px; }
.pop-price-amt { font: 700 36px/1 var(--font); }
.pop-cta { width: 100%; min-height: 60px; border: 0; border-radius: 16px; background: var(--brand-deep); color: #fff; font: 700 17px var(--font);
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 20px; cursor: pointer; position: relative; }
.pop-cta::after { content: ''; position: absolute; right: 6px; top: 6px; bottom: 6px; width: 48px; border-radius: 50%; background: transparent; }
.pop-arrow { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-orange); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; position: relative; }
.pop-arrow::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--brand-orange); opacity: 0; animation: pop-pulse 1.8s ease-out infinite; }
.pop-still .pop-arrow::before { animation: none; }
.pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; min-height: 44px; }
.pop-link { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--brand-deep); font: 600 15px var(--font); text-decoration: underline; cursor: pointer; }
.pop-timer { font-size: 13px; color: var(--brand-charcoal); }
.pop-cta:focus-visible, .pop-x:focus-visible, .pop-link:focus-visible { outline: 3px solid var(--brand-sky); outline-offset: 2px; }

/* dark: Telegram dark theme (html.tg-dark), the website's dark switch (data-theme="dark"), or a plain browser in dark mode.
   Light is the default and matches the approved design. */
html.tg-dark .pop-sheet { background: #162340; color: #e5e7eb; }
html.tg-dark .pop-body h2, html.tg-dark .pop-link, html.tg-dark .pop-row svg { color: #fff; }
html.tg-dark .pop-row, html.tg-dark .pop-sub, html.tg-dark .pop-timer { color: #e5e7eb; }
html.tg-dark .pop-cta { background: #fff; color: var(--brand-deep); }
html.tg-dark .pop-cta .pop-arrow { background: var(--brand-orange); color: var(--brand-deep); }
html[data-theme="dark"] .pop-sheet { background: #162340; color: #e5e7eb; }
html[data-theme="dark"] .pop-body h2, html[data-theme="dark"] .pop-link, html[data-theme="dark"] .pop-row svg { color: #fff; }
html[data-theme="dark"] .pop-row, html[data-theme="dark"] .pop-sub, html[data-theme="dark"] .pop-timer { color: #e5e7eb; }
html[data-theme="dark"] .pop-cta { background: #fff; color: var(--brand-deep); }
html[data-theme="dark"] .pop-cta .pop-arrow { background: var(--brand-orange); color: var(--brand-deep); }
@media (prefers-color-scheme: dark) {
  html:not(.tg):not([data-theme]) .pop-sheet { background: #162340; color: #e5e7eb; }
  html:not(.tg):not([data-theme]) .pop-body h2, html:not(.tg):not([data-theme]) .pop-link, html:not(.tg):not([data-theme]) .pop-row svg { color: #fff; }
  html:not(.tg):not([data-theme]) .pop-row, html:not(.tg):not([data-theme]) .pop-sub, html:not(.tg):not([data-theme]) .pop-timer { color: #e5e7eb; }
  html:not(.tg):not([data-theme]) .pop-cta { background: #fff; color: var(--brand-deep); }
  html:not(.tg):not([data-theme]) .pop-cta .pop-arrow { background: var(--brand-orange); color: var(--brand-deep); }
}

@keyframes pop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop-pulse { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pop-overlay, .pop-sheet { animation: none; } .pop-arrow::before { animation: none; } }

/* wide screens (≥ 720px): centred card, poster panel left (350px), content right; the countdown bar and close X sit on the content */
@media (min-width: 720px) {
  .pop-overlay { align-items: center; }
  .pop-sheet { border-radius: 20px; max-width: 864px; display: grid; grid-template-columns: 350px 1fr; align-items: start; }
  .pop-timerbar { left: 350px; border-radius: 0 20px 0 0; }
  .pop-poster { height: auto; border-radius: 20px 0 0 20px; padding: 0; align-self: start; }
  .pop-poster img { display: block; width: 100%; height: auto; max-height: none; }
  .pop-x { top: 16px; right: 16px; width: 48px; height: 48px; }
  .pop-body { padding: 32px 36px 24px; }
  .pop-body h2 { font-size: 36px; }
  .pop-sub { font-size: 17px; margin-bottom: 12px; }
  .pop-row { margin: 6px 0; }
  .pop-price { margin: 14px 0; padding: 14px 18px; }
  .pop-price-amt { font-size: 44px; }
  .pop-cta { min-height: 64px; font-size: 18px; justify-content: center; padding: 0 16px; }
  .pop-cta .pop-arrow { position: absolute; right: 10px; top: 50%; margin-top: -22px; }
  .pop-foot { margin-top: 12px; }
}