/* Jackson Weather Plugin — Frontend Styles
   All templates use CSS custom properties set inline on .jw-widget:
   --jw-gs (gradient start), --jw-ge (gradient end),
   --jw-txt (text color), --jw-op (glass card opacity)
*/

/* ── BASE ── */
.jw-widget { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-sizing: border-box; }
.jw-widget *, .jw-widget *::before, .jw-widget *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Shared gradient bg */
.jw-compact,
.jw-horizontal,
.jw-glass-cards,
.jw-glass-rows,
.jw-stacked-hero {
  background: linear-gradient(160deg, var(--jw-gs, #1a3d7c) 0%, var(--jw-ge, #2389cc) 100%);
  color: var(--jw-txt, #ffffff);
}

.jw-compact,
.jw-horizontal,
.jw-stacked,
.jw-glass-cards,
.jw-glass-rows {
  border-radius: 18px;
  overflow: hidden;
}

/* Optional transparent mode for gradient templates */
.jw-widget[data-jw-bg="transparent"] .jw-compact,
.jw-widget[data-jw-bg="transparent"] .jw-horizontal,
.jw-widget[data-jw-bg="transparent"] .jw-glass-cards,
.jw-widget[data-jw-bg="transparent"] .jw-glass-rows,
.jw-widget[data-jw-bg="transparent"] .jw-stacked-hero {
  background: transparent;
}

/* City row */
.jw-city { font-size: 12px; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.jw-pin::before { content: "📍"; font-size: 11px; }

/* Current temp */
.jw-current-temp { font-size: 52px; font-weight: 300; color: #fff; line-height: 1; }

/* Sub-stats (wind/humidity) */
.jw-sub-stats { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 5px; }

/* Large icon */
.jw-icon-lg { font-size: 48px; text-align: right; }

/* Condition text */
.jw-condition { font-size: 13px; color: rgba(255,255,255,0.8); text-align: right; margin-top: 4px; }

/* Hero row (temp left, icon+condition right) */
.jw-hero-row,
.jw-glass-hero { display: flex; align-items: flex-start; justify-content: space-between; }

/* Text color customization across gradient templates */
.jw-compact .jw-current-temp,
.jw-horizontal .jw-day-hi,
.jw-stacked-hero .jw-current-temp,
.jw-glass-cards .jw-current-temp,
.jw-glass-rows .jw-current-temp,
.jw-glass-cards .jw-gd-hi,
.jw-glass-rows .jw-gr-name,
.jw-glass-rows .jw-gr-hi {
  color: var(--jw-txt, #ffffff);
}

.jw-compact .jw-city,
.jw-compact .jw-sub-stats,
.jw-compact .jw-condition,
.jw-horizontal .jw-loc-row,
.jw-horizontal .jw-now-temp,
.jw-horizontal .jw-day-name,
.jw-horizontal .jw-day-lo,
.jw-stacked-hero .jw-city,
.jw-stacked-hero .jw-sub-stats,
.jw-stacked-hero .jw-condition {
  color: var(--jw-txt, #ffffff);
  opacity: 0.75;
}

/* ── TEMPLATE 1: COMPACT ── */
.jw-compact-inner { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; }
.jw-compact-left { flex: 1; }
.jw-compact-right { text-align: right; }
@media (min-width: 480px) {
  .jw-compact-inner { padding: 22px 28px; }
  .jw-compact .jw-current-temp { font-size: 60px; }
  .jw-compact .jw-icon-lg { font-size: 60px; }
  .jw-compact .jw-condition { font-size: 14px; }
}

/* ── TEMPLATE 2: HORIZONTAL STRIP ── */
.jw-horizontal { padding: 16px; }
.jw-horizontal-minimal .jw-strip-days { margin-top: 0; }
.jw-loc-row { font-size: 12px; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.jw-now-temp { color: rgba(255,255,255,0.5); margin-left: auto; }
.jw-strip-days { display: flex; gap: 8px; }
.jw-strip-day { flex: 1; background: rgba(255,255,255,0.12); border: 1px solid var(--jw-divider, rgba(255,255,255,0.18)); border-radius: 10px; padding: 10px 6px; text-align: center; }
.jw-day-name { font-size: 10px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jw-day-icon { font-size: 22px; margin-bottom: 5px; }
.jw-day-hi { font-size: 14px; font-weight: 500; color: #fff; }
.jw-day-lo { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 1px; }
.jw-day-pop { font-size: 10px; color: #82c8ff; margin-top: 4px; }
@media (min-width: 480px) {
  .jw-horizontal { padding: 18px; }
  .jw-day-name { font-size: 11px; }
}

/* ── TEMPLATE 3: STACKED DAILY ── */
.jw-stacked-hero { padding: 18px 20px 16px; }
.jw-stacked-list { background: #fff; }
@media (prefers-color-scheme: dark) { .jw-stacked-list { background: #1e1e1e; } }
.jw-stacked { border: 1px solid var(--jw-divider, rgba(0,0,0,0.08)); }
.jw-stacked-row { display: flex; align-items: center; padding: 11px 18px; border-bottom: 0.5px solid var(--jw-divider, rgba(0,0,0,0.07)); gap: 10px; }
@media (prefers-color-scheme: dark) { .jw-stacked-row { border-bottom-color: var(--jw-divider, rgba(255,255,255,0.08)); } }
.jw-stacked-row:last-child { border-bottom: none; }
.jw-sr-date { flex: 1.2; }
.jw-sr-dayname { font-size: 13px; font-weight: 500; color: #1a1a1a; }
@media (prefers-color-scheme: dark) { .jw-sr-dayname { color: #e8e8e8; } }
.jw-sr-mday { font-size: 11px; color: #666; }
@media (prefers-color-scheme: dark) { .jw-sr-mday { color: #999; } }
.jw-sr-icon { font-size: 22px; flex: 0.6; text-align: center; }
.jw-sr-pop { font-size: 11px; color: #3b82c4; flex: 0.7; text-align: center; }
.jw-sr-temps { text-align: right; }
.jw-sr-hi { font-size: 14px; font-weight: 500; color: #1a1a1a; }
@media (prefers-color-scheme: dark) { .jw-sr-hi { color: #e8e8e8; } }
.jw-sr-lo { font-size: 12px; color: #888; margin-left: 6px; }
@media (min-width: 480px) {
  .jw-stacked-hero { padding: 22px 24px 18px; }
  .jw-stacked-hero .jw-current-temp { font-size: 60px; }
}

/* ── TEMPLATES 4 & 5: GLASS SHARED ── */
.jw-glass-cards,
.jw-glass-rows { padding: 20px 18px 16px; }
.jw-glass-hero { margin-bottom: 14px; padding-bottom: 14px; }
.jw-glass-divider { height: 1px; background: var(--jw-divider, rgba(255,255,255,0.15)); }
.jw-credit { font-size: 10px; color: rgba(255,255,255,0.3); text-align: center; margin-top: 12px; }
.jw-glass-cards .jw-city,
.jw-glass-rows .jw-city,
.jw-glass-cards .jw-current-temp,
.jw-glass-rows .jw-current-temp,
.jw-glass-cards .jw-condition,
.jw-glass-rows .jw-condition,
.jw-glass-cards .jw-sub-stats,
.jw-glass-rows .jw-sub-stats,
.jw-glass-cards .jw-gd-hi,
.jw-glass-cards .jw-gd-lo,
.jw-glass-rows .jw-gr-name,
.jw-glass-rows .jw-gr-cond,
.jw-glass-rows .jw-gr-hi,
.jw-glass-rows .jw-gr-lo {
  color: var(--jw-txt, #ffffff);
}
.jw-glass-cards .jw-city,
.jw-glass-rows .jw-city,
.jw-glass-cards .jw-condition,
.jw-glass-rows .jw-condition,
.jw-glass-cards .jw-sub-stats,
.jw-glass-rows .jw-sub-stats,
.jw-glass-cards .jw-gd-lo,
.jw-glass-rows .jw-gr-cond,
.jw-glass-rows .jw-gr-lo {
  opacity: 0.75;
}
@media (min-width: 480px) {
  .jw-glass-cards,
  .jw-glass-rows { padding: 22px 22px 18px; }
  .jw-glass-cards .jw-current-temp,
  .jw-glass-rows .jw-current-temp { font-size: 60px; }
  .jw-glass-cards .jw-icon-lg,
  .jw-glass-rows .jw-icon-lg { font-size: 56px; }
}

/* ── TEMPLATE 4: GLASS CARDS ── */
.jw-glass-day-row { display: flex; gap: 8px; }
.jw-glass-card {
  flex: 1;
  background: rgba(255,255,255,var(--jw-op, 0.12));
  border: 1px solid var(--jw-divider, rgba(255,255,255,0.18));
  border-radius: 10px;
  padding: 11px 6px;
  text-align: center;
}
.jw-gd-name { font-size: 10px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jw-gd-icon { font-size: 22px; margin-bottom: 6px; }
.jw-gd-hi { font-size: 14px; font-weight: 500; color: #fff; }
.jw-gd-lo { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 1px; }
.jw-gd-pop { font-size: 10px; color: #82c8ff; margin-top: 4px; }

/* ── TEMPLATE 5: GLASS ROWS ── */
.jw-rows-list { display: flex; flex-direction: column; }
.jw-grow { display: flex; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--jw-divider, rgba(255,255,255,0.1)); gap: 10px; }
.jw-grow:last-child { border-bottom: none; }
.jw-gr-icon { font-size: 24px; width: 32px; text-align: center; flex-shrink: 0; }
.jw-gr-name { font-size: 13px; font-weight: 500; color: #fff; width: 100px; flex-shrink: 0; }
.jw-gr-cond { font-size: 12px; color: rgba(255,255,255,0.55); flex: 1; }
.jw-gr-pop { font-size: 11px; color: #82c8ff; width: 40px; text-align: center; flex-shrink: 0; }
.jw-gr-temps { text-align: right; flex-shrink: 0; }
.jw-gr-hi { font-size: 14px; font-weight: 500; color: #fff; }
.jw-gr-lo { font-size: 12px; color: rgba(255,255,255,0.45); margin-left: 5px; }