/* "UAE right now" banner and impact counter on the home page (web/uaenow.js). */
.unow { max-width: 1208px; width: calc(100% - 32px); margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.unow-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.unow-h h2 { margin: 0; font-size: 20px; }
.unow-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); background: var(--teal-bg); border-radius: 999px; padding: 3px 10px 3px 8px; }
.unow-live .pulse { background: var(--green); }
.unow-t { color: var(--ink3); margin-inline-start: auto; }
.unow.off .unow-live { color: var(--ink3); background: var(--soft2); }
.unow.off .unow-live .pulse { background: var(--grey); animation: none; }

.utiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.utile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); min-width: 0; }
.utile .ul { font-size: 13px; color: var(--ink2); display: flex; align-items: center; gap: 8px; }
.utile .ul::before { content: ''; width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--c, var(--accent)); }
.utile.u-rain { --c: var(--blue); } .utile.u-heat { --c: var(--amber); } .utile.u-use { --c: var(--accent); }
.utile.u-heat.t-red { --c: var(--red); } .utile.u-rain.t-dry { --c: var(--grey); }
.utile .uv { font-size: 20px; font-weight: 700; line-height: 1.25; }
.utile.u-use .uv { font-size: 26px; }
.utile .uu, .uimpact .uu { font-size: 13px; font-weight: 500; color: var(--ink3); }
.utile .us { font-size: 13px; color: var(--ink3); line-height: 1.45; }

.uimpact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; background: var(--top); color: #F1F7F5; border-radius: 14px; padding: 20px 22px; }
.uimpact .ui-l { display: flex; flex-direction: column; gap: 4px; }
.uimpact .ui-t { font-size: 15px; font-weight: 600; }
.uimpact .ui-s { font-size: 13px; opacity: .8; }
.uimpact .ui-n { font-size: 40px; line-height: 1.1; font-weight: 700; color: var(--mint); font-variant-numeric: tabular-nums; }
.uimpact .ui-n .uu { color: #C9DCD6; }
.uimpact .ui-p { font-size: 13px; opacity: .85; }
.uimpact .ui-r { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.uimpact .ui-r p { margin: 0; }
.uimpact details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--mint); }
.uimpact details p { opacity: .85; margin-top: 6px; }
.uimpact details .muted { color: #C9DCD6; }
.uimpact .linkbtn { color: var(--mint); align-self: flex-start; }

@media (max-width: 820px) {
  .utiles { grid-template-columns: minmax(0, 1fr); }
  .uimpact { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
  .uimpact .ui-n { font-size: 32px; }
  .unow { padding: 16px; }
}