/* =====================================================================
   Floating "Development in Progress" card + site-updates panel.
   Loaded only on pages where published updates exist (see includes/dev_updates.php).
   Desktop: mini player card above Call Desk / WhatsApp, right-side drawer.
   Mobile (≤768px): portrait card above the bottom tab bar, near full-screen popup.
   ===================================================================== */
.dw, .dw-panel {
  --dw-navy: var(--navy, #123B78);
  --dw-navy-deep: var(--navy-deep, #0D2A56);
  --dw-green: var(--green, #269B45);
  --dw-ink: #1C2A3A;
  --dw-muted: #66758A;
  --dw-line: #E3E8EE;
  --dw-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Floating card ---------- */
.dw { position: fixed; right: var(--dw-right, 24px); bottom: var(--dw-bottom, 140px); z-index: 45; width: 212px; }
.dw[hidden] { display: none; }
.dw.is-in { animation: dw-in .55s var(--dw-ease) both; }
.dw { transition: opacity .3s ease, transform .3s var(--dw-ease), visibility 0s linear 0s; }
.dw.is-away { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.nav-open .dw, .modal-open .dw { visibility: hidden; }

.dw-card {
  position: relative; display: block; width: 100%; aspect-ratio: 7 / 5; padding: 0; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .92); border-radius: 18px; background: var(--dw-navy-deep); color: #fff;
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 18px 40px -12px rgba(7, 21, 45, .55), 0 2px 6px rgba(7, 21, 45, .18);
  transition: transform .25s var(--dw-ease), box-shadow .25s var(--dw-ease);
}
.dw-card:focus-visible, .dw-dismiss:focus-visible, .dw-mini:focus-visible { outline: 3px solid rgba(38, 155, 69, .6); outline-offset: 3px; }
.dw-card-media, .dw-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dw-card-media img { transition: transform .6s var(--dw-ease); }
.dw-ph {
  position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .28);
  background: radial-gradient(90% 70% at 80% 10%, rgba(52, 211, 153, .28), transparent 60%), linear-gradient(150deg, #1E528F, #0B2347 75%);
}
.dw-ph .icon { width: 56px; height: 56px; }
.dw-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 21, 45, .28) 0%, rgba(7, 21, 45, .05) 38%, rgba(7, 21, 45, .88) 100%); }
.dw-card-badge {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  border-radius: 999px; background: rgba(7, 21, 45, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
}
.dw-live { width: 7px; height: 7px; border-radius: 50%; background: #34D399; animation: dw-pulse 2.2s infinite; }
.dw-card-play {
  position: absolute; top: 46%; left: 50%; display: grid; width: 48px; height: 48px; margin: -24px 0 0 -24px; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--dw-navy); box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
  transition: transform .25s var(--dw-ease);
}
.dw-card-play .icon { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; }
.dw-card-copy { position: absolute; right: 12px; bottom: 10px; left: 12px; display: grid; gap: 1px; }
.dw-card-copy strong { font-size: 14px; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.dw-card-copy small { color: rgba(255, 255, 255, .82); font-size: 11px; line-height: 1.35; }
.dw-count { display: none; }
@media (hover: hover) {
  .dw-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -14px rgba(7, 21, 45, .62), 0 2px 6px rgba(7, 21, 45, .2); }
  .dw-card:hover .dw-card-play { transform: scale(1.08); }
  .dw-card:hover .dw-card-media img { transform: scale(1.05); }
}
.dw-dismiss {
  position: absolute; top: -9px; right: -9px; display: grid; width: 28px; height: 28px; place-items: center; padding: 0;
  border: 2px solid #fff; border-radius: 50%; background: var(--dw-navy-deep); color: #fff; cursor: pointer;
  box-shadow: 0 4px 12px rgba(7, 21, 45, .3);
}
.dw-dismiss .icon { width: 14px; height: 14px; }
/* Hidden card → small pill to reopen the panel */
.dw-mini {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; float: right;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: var(--dw-navy-deep); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(7, 21, 45, .5);
}
.dw-mini .icon { width: 32px; height: 32px; padding: 9px 8px 9px 10px; border-radius: 50%; background: var(--dw-green); fill: currentColor; }
.dw-mini[hidden] { display: none; }
.dw.is-minimized { width: auto; }
.dw.is-minimized .dw-card, .dw.is-minimized .dw-dismiss { display: none; }

/* ---------- Panel (native <dialog>: focus trap, Esc, backdrop) ---------- */
.dw-panel {
  position: fixed; inset: 16px 16px 16px auto; width: min(420px, calc(100vw - 32px)); height: auto;
  max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden;
  border: 0; border-radius: 22px; background: #fff; color: var(--dw-ink);
  box-shadow: -24px 0 70px -24px rgba(7, 21, 45, .5);
}
.dw-panel[open] { display: flex; flex-direction: column; animation: dw-drawer-in .4s var(--dw-ease) both; }
.dw-panel.is-closing { animation: dw-drawer-out .22s ease-in both; }
.dw-panel::backdrop { background: rgba(7, 21, 45, .32); }
.dw-panel[open]::backdrop { animation: dw-fade .3s ease both; }
.dw-panel.is-closing::backdrop { animation: dw-fade .22s ease reverse both; }
html.dw-lock { overflow: hidden; }

.dw-head {
  display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 18px 18px 22px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(52, 211, 153, .18), transparent 55%), linear-gradient(135deg, var(--dw-navy-deep), var(--dw-navy));
  color: #fff;
}
.dw-head h2 { margin: 0 0 4px; color: #fff; font-family: var(--font-display, inherit); font-size: 1.32rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.dw-head p { margin: 0; color: rgba(255, 255, 255, .8); font-size: .86rem; line-height: 1.45; }
.dw-x {
  display: grid; flex: none; width: 40px; height: 40px; place-items: center; padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
  transition: background-color .2s;
}
.dw-x:hover { background: rgba(255, 255, 255, .14); }
.dw-x:focus-visible, .dw-chip:focus-visible, .dw-item:focus-visible, .dw-bigplay:focus-visible { outline: 3px solid rgba(38, 155, 69, .55); outline-offset: 2px; }
.dw-x .icon { width: 18px; height: 18px; }

.dw-body { flex: 1 1 auto; min-height: 0; padding: 16px 18px 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dw-chips { display: flex; gap: 8px; margin: 0 -18px; padding: 2px 18px 14px; overflow-x: auto; scrollbar-width: none; }
.dw-chips::-webkit-scrollbar { display: none; }
.dw-chips:empty { display: none; }
.dw-chip {
  flex: none; min-height: 36px; padding: 7px 14px; border: 1px solid #DCE3EA; border-radius: 999px;
  background: #F4F6F8; color: #4A5868; font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.dw-chip:hover { border-color: rgba(38, 155, 69, .45); color: var(--dw-navy); }
.dw-chip[aria-pressed="true"] { border-color: var(--dw-green); background: var(--dw-green); color: #fff; }

.dw-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: #0B1A33; }
.dw-player video, .dw-player iframe, .dw-player .dw-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dw-player video { object-fit: contain; background: #000; }
.dw-player .dw-poster { object-fit: cover; }
.dw-player .dw-ph { border-radius: 0; }
.dw-bigplay {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(7, 21, 45, .05), rgba(7, 21, 45, .45));
}
.dw-bigplay span {
  display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .95);
  color: var(--dw-navy); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transition: transform .2s var(--dw-ease);
}
.dw-bigplay:hover span { transform: scale(1.07); }
.dw-bigplay .icon { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.dw-dur {
  position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .72);
  color: #fff; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none;
}
.dw-player.is-playing .dw-dur, .dw-player.is-playing .dw-bigplay { display: none; }
.dw-spin { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: dw-rot .8s linear infinite; pointer-events: none; }
.dw-player:not(.is-waiting) .dw-spin { display: none; }
.dw-player-error { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; padding: 16px; background: #0B1A33; color: rgba(255, 255, 255, .85); font-size: .86rem; text-align: center; }

.dw-feature-copy { padding: 14px 2px 4px; }
.dw-meta { margin: 0; color: var(--green-dark, #1E7D37); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dw-meta a { color: inherit; text-decoration: none; }
.dw-meta a:hover { text-decoration: underline; }
.dw-feature-copy h3 { margin: 5px 0 6px; color: var(--dw-navy-deep); font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
.dw-date, .dw-item-date { display: flex; align-items: center; gap: 6px; color: var(--dw-muted); }
.dw-date { margin: 0 0 8px; font-size: .8rem; }
.dw-date:empty { display: none; }
.dw-date svg, .dw-item-date svg { width: 14px; height: 14px; flex: none; }
.dw-desc { margin: 0; color: #4A5868; font-size: .88rem; line-height: 1.6; }

.dw-more-title { margin: 20px 0 10px; color: var(--dw-muted); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dw-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dw-item {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px;
  border: 1px solid var(--dw-line); border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--dw-ease);
}
.dw-item:hover { border-color: rgba(38, 155, 69, .4); box-shadow: 0 10px 24px -14px rgba(13, 42, 86, .35); }
.dw-thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 10px; background: #0B1A33; }
.dw-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dw-thumb .dw-ph .icon { width: 28px; height: 28px; }
.dw-thumb-play {
  position: absolute; top: 50%; left: 50%; display: grid; width: 30px; height: 30px; margin: -15px 0 0 -15px; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--dw-navy); box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.dw-thumb-play svg { width: 12px; height: 12px; margin-left: 2px; fill: currentColor; }
.dw-thumb .dw-dur { right: 5px; bottom: 5px; padding: 1px 5px; font-size: .66rem; }
.dw-item-title { display: -webkit-box; overflow: hidden; color: var(--dw-navy-deep); font-size: .9rem; font-weight: 700; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dw-item-date { margin-top: 5px; font-size: .76rem; }
.dw-item-desc { display: -webkit-box; overflow: hidden; margin-top: 4px; color: var(--dw-muted); font-size: .78rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dw-item-go { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #DCE3EA; border-radius: 50%; color: var(--dw-navy); }
.dw-item-go svg { width: 14px; height: 14px; }

.dw-foot { flex: none; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #EEF1F4; background: #fff; }
.dw-foot .btn { min-height: 50px; }

.dw-loading { display: grid; gap: 10px; }
.dw-loading[hidden] { display: none; }
.dw-sk { display: block; border-radius: 10px; background: linear-gradient(90deg, #EEF1F4 25%, #F7F9FA 50%, #EEF1F4 75%); background-size: 200% 100%; animation: dw-shimmer 1.2s linear infinite; }
.dw-sk-player { aspect-ratio: 16 / 9; border-radius: 14px; }
.dw-sk-line { height: 14px; }
.dw-sk-line.short { width: 60%; }
.dw-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 12px; color: var(--dw-muted); text-align: center; }
.dw-empty[hidden] { display: none; }
.dw-empty-icon { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 18px; background: rgba(38, 155, 69, .1); color: var(--green-dark, #1E7D37); }
.dw-empty p { max-width: 30ch; margin: 0; }
.dw-switch { animation: dw-fade-up .32s var(--dw-ease) both; }

/* ---------- Mobile: portrait card + near full-screen popup ---------- */
@media (max-width: 768px) {
  .dw { width: clamp(112px, 33vw, 140px); }
  .dw-card { aspect-ratio: 3 / 4; border-radius: 16px; }
  .dw-card-badge, .dw-sub { display: none; }
  .dw-count { display: block; }
  .dw-card-play { top: 42%; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .dw-card-copy { right: 10px; bottom: 9px; left: 10px; }
  .dw-card-copy strong { font-size: 13px; }
  .dw-dismiss { top: -8px; right: -6px; }

  .dw-panel {
    inset: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px)) 10px;
    width: auto; border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(7, 21, 45, .6);
  }
  .dw-panel[open] { animation-name: dw-pop-in; }
  .dw-panel.is-closing { animation-name: dw-pop-out; }
  .dw-panel::backdrop { background: rgba(7, 21, 45, .62); }
  .dw-head { padding: 18px 14px 8px 18px; background: #fff; color: var(--dw-ink); }
  .dw-head h2 { color: var(--dw-navy-deep); font-size: 1.25rem; }
  .dw-head p { color: var(--dw-muted); }
  .dw-x { border-color: #C9D3DE; color: var(--dw-navy); }
  .dw-x:hover { background: #F1F4F7; }
  .dw-body { padding: 10px 16px 8px; }
  .dw-chips { margin: 0 -16px; padding: 2px 16px 12px; }
  .dw-item { grid-template-columns: 100px minmax(0, 1fr) auto; }
  .dw-item-desc { display: none; }
  .dw-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
  .dw-item { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 10px; }
}

@keyframes dw-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dw-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }
@keyframes dw-drawer-in { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes dw-drawer-out { to { opacity: 0; transform: translateX(36px); } }
@keyframes dw-pop-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dw-pop-out { to { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes dw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dw-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dw-shimmer { to { background-position: -200% 0; } }
@keyframes dw-rot { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .dw.is-in, .dw-panel[open], .dw-panel.is-closing, .dw-panel[open]::backdrop, .dw-switch, .dw-live, .dw-sk { animation: none; }
  .dw-card, .dw-card-play, .dw-card-media img, .dw-item, .dw-bigplay span { transition: none; }
  .dw-card:hover, .dw-card:hover .dw-card-play, .dw-card:hover .dw-card-media img { transform: none; }
}