/* Grund */
.sv-vader{
  --svv-scale: 1;
  --svv-gap: calc(10px * var(--svv-scale));
  --svv-radius: calc(12px * var(--svv-scale));
  --svv-padY: calc(14px * var(--svv-scale));
  --svv-padX: calc(18px * var(--svv-scale));

  /* Colors */
  --svv-bg: #ffffff;
  --svv-text: #1a1a1a;
  --svv-border: #e6e6e6;
  --svv-accent: #0b63ff;
  --svv-shadow: rgba(0,0,0,.04);
  --svv-badge-bg: transparent;
  --svv-badge-border: #eeeeee;
  --svv-muted: #666666;

  box-sizing: border-box;
  display:block;
  width:100%;
  max-width:100%;
  contain: layout style paint;

  border:1px solid var(--svv-border);
  border-radius: var(--svv-radius);
  padding: var(--svv-padY) var(--svv-padX);
  box-shadow:0 2px 8px var(--svv-shadow);
  background: var(--svv-bg);
  color: var(--svv-text);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  /* Do not apply automatic dark-vars when user/site explicitly forces light or dark */
  .sv-vader:not(.svv-force-light):not(.svv-force-dark) {
    --svv-bg: #1e1e1e;
    --svv-text: #f0f0f0;
    --svv-border: #333333;
    --svv-shadow: rgba(0,0,0,.2);
    --svv-badge-border: #444444;
    --svv-muted: #aaaaaa;
  }
  .sv-vader:not(.svv-force-light):not(.svv-force-dark) .svv-map {
    filter: brightness(0.8) contrast(1.2) invert(100%) hue-rotate(180deg);
  }
}

/* WordPress Dark Mode (6.2+) & Theme support */
[data-wp-theme-style="dark"] .sv-vader,
.is-dark-theme .sv-vader,
body.admin-color-modern .sv-vader {
  --svv-bg: #1e1e1e;
  --svv-text: #f0f0f0;
  --svv-border: #333333;
  --svv-shadow: rgba(0,0,0,.2);
  --svv-badge-border: #444444;
  --svv-muted: #aaaaaa;
}

/* Forced theme classes/attributes from shortcode/block/widget */
.svv-theme-dark,
[data-svv-theme="dark"] {
  --svv-bg: #1e1e1e;
  --svv-text: #f0f0f0;
  --svv-border: #333333;
  --svv-shadow: rgba(0,0,0,.2);
  --svv-badge-border: #444444;
  --svv-muted: #aaaaaa;
}

.svv-theme-light,
[data-svv-theme="light"] {
  --svv-bg: #ffffff;
  --svv-text: #1a1a1a;
  --svv-border: #e6e6e6;
  --svv-shadow: rgba(0,0,0,.04);
  --svv-badge-border: #eeeeee;
  --svv-muted: #666666;
}

/* Make Leaflet map tiles subtly darker in forced dark theme for better contrast */
.svv-theme-dark .svv-map,
[data-svv-theme="dark"] .svv-map {
  filter: brightness(0.78) contrast(1.06) saturate(0.95);
}

/* Alerts styling in forced dark theme to match darker UI */
.svv-theme-dark .svv-alert-mini.is-danger,
[data-svv-theme="dark"] .svv-alert-mini.is-danger {
  background: #2b0a0a; /* darker red background */
  color: #ffb4b4; /* slightly desaturated light text for readability */
  border-color: #5a0f0f;
}
.svv-theme-dark .svv-alert-mini.is-warning,
[data-svv-theme="dark"] .svv-alert-mini.is-warning {
  background: #2f1602; /* darker amber */
  color: #ffdca8; /* warm light text */
  border-color: #5b2d09;
}
.svv-theme-dark .svv-alert-mini.is-info,
[data-svv-theme="dark"] .svv-alert-mini.is-info {
  background: #0b1630; /* deeper blue */
  color: #dbeeff; /* pale blue text */
  border-color: #14283f;
}

.svv-ort{font-weight:600;margin-bottom:calc(6px * var(--svv-scale));}

/* Frontend Alerts */
.svv-frontend-alerts { margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.svv-alert-mini { padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4; border: 1px solid transparent; }
.svv-alert-mini.is-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.svv-alert-mini.is-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.svv-alert-mini.is-info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

@media (prefers-color-scheme: dark) {
  .svv-alert-mini.is-danger { background: #450a0a; color: #fecaca; border-color: #7f1d1d; }
  .svv-alert-mini.is-warning { background: #451a03; color: #fde68a; border-color: #78350f; }
  .svv-alert-mini.is-info { background: #172554; color: #bfdbfe; border-color: #1e3a8a; }
}

.svv-row{display:flex;align-items:center;gap:var(--svv-gap);margin:calc(6px * var(--svv-scale)) 0;}
.svv-col{display:flex;flex-direction:column;gap:calc(6px * var(--svv-scale));}
.svv-meta,.svv-extra{display:flex;gap:calc(12px * var(--svv-scale));flex-wrap:wrap}
.svv-desc,.svv-wind,.svv-precip,.svv-cloud{overflow-wrap:anywhere}

.svv-icon{width:calc(40px * var(--svv-scale));height:calc(40px * var(--svv-scale));flex:0 0 auto}
.svv-temp{font-size:calc(28px * var(--svv-scale));line-height:1;font-weight:600}

/* Wind direction arrow styling */
.svv-wind-dir{
  /* Plain, thicker arrow without circular badge */
  font-size: calc(18px * var(--svv-scale));
  margin-left: calc(8px * var(--svv-scale));
  color: var(--svv-accent);
  display: inline-block;
  transform-origin: center center;
  line-height: 1;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.08);
  vertical-align: middle;
}

.svv-badge{border:1px solid var(--svv-badge-border);border-radius:999px;padding:0 .5em;font-size:calc(12px * var(--svv-scale));}

/* --- Layoutvarianter --- */

/* INLINE: kompakt, inte fullbredd */
.svv-layout-inline{
  display:inline-flex;          /* överskuggar display:block */
  align-items:center;
  width:auto;                   /* nyckeln – dra inte ut i 100% */
  max-width:100%;
  padding: calc(6px * var(--svv-scale)) calc(10px * var(--svv-scale));
  border-radius:999px;
}
.svv-layout-inline .svv-ort,
.svv-layout-inline .svv-meta,
.svv-layout-inline .svv-map,
.svv-layout-inline .svv-forecast,
.svv-layout-inline .svv-map-attrib,
.svv-layout-inline .svv-map-link{ display:none !important; }
.svv-row-inline{ gap: calc(8px * var(--svv-scale)); }

/* COMPACT */
.svv-layout-compact .svv-map{ margin-top: calc(8px * var(--svv-scale)); }
.svv-layout-compact .svv-icon{ width:calc(32px * var(--svv-scale)); height:calc(32px * var(--svv-scale)); }
.svv-layout-compact .svv-temp{ font-size:calc(24px * var(--svv-scale)); }

/* DETAILED */
.svv-layout-detailed .svv-icon{ width:calc(44px * var(--svv-scale)); height:calc(44px * var(--svv-scale)); }
.svv-layout-detailed .svv-temp{ font-size:calc(30px * var(--svv-scale)); }

/* Karta */
.svv-map{width:100%;height:240px;border:1px solid var(--svv-border);border-radius:var(--svv-radius);overflow:hidden;margin-top:calc(10px * var(--svv-scale))}
.svv-map-attrib{margin-top:calc(6px * var(--svv-scale));font-size:calc(12px * var(--svv-scale));opacity:.8;color:var(--svv-muted)}
.svv-map-attrib a{text-decoration:none;color:inherit}
.svv-map-link{margin-top:calc(2px * var(--svv-scale));font-size:calc(13px * var(--svv-scale))}
.leaflet-control-attribution{display:none !important;}

/* Diskreta animationer */
.svv-anim .svv-icon { animation: svv-pulse 2.5s ease-in-out infinite; }
@keyframes svv-pulse { 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.04); opacity:.9 } }
.svv-anim .svv-temp { animation: svv-fadein .6s ease both; }
@keyframes svv-fadein { from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:translateY(0) } }

/* Prognos – auto-fit i smala ytor */
.svv-forecast{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); /* minskat från 110px */
  gap:calc(10px * var(--svv-scale));
  margin-top:calc(12px * var(--svv-scale));
}
.svv-daycard{
  border:1px solid var(--svv-border);
  border-radius: var(--svv-radius);
  padding:calc(10px * var(--svv-scale));
  background: var(--svv-bg);
  box-shadow:0 2px 8px var(--svv-shadow);

/* Moon icon styling */
.svv-moon-icon{font-size:calc(14px * var(--svv-scale));margin-right:8px;vertical-align:middle;display:inline-block}
.svv-moon{display:inline-flex;align-items:center;gap:6px}
  transition: transform .2s ease, box-shadow .2s ease;
}
.svv-anim .svv-daycard:hover{ transform:translateY(-2px); box-shadow:0 6px 18px var(--svv-shadow); }
.svv-daylabel{ font-weight:600; margin-bottom:calc(6px * var(--svv-scale)); }
.svv-dayicon{ width:calc(36px * var(--svv-scale)); height:calc(36px * var(--svv-scale)); display:block; margin:calc(2px * var(--svv-scale)) 0; }
.svv-daytemps{ display:flex; gap:calc(8px * var(--svv-scale)); align-items:center; margin:calc(4px * var(--svv-scale)) 0; }
.svv-tmax{ font-weight:600 }
.svv-tmin{ opacity:.7; color:var(--svv-muted); }
.svv-daydesc{ font-size:calc(12px * var(--svv-scale)); opacity:.8; color:var(--svv-muted); }

/* Extra snävt: tvinga 2 kolumner om det blir för kompakt */
@media (max-width: 320px){
  .svv-forecast{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Beteende i widgets/sidebars */
.widget .sv-vader{ width:100%; max-width:100%; }
.widget .sv-vader.svv-layout-inline{ width:auto; } /* inline ska inte sträckas i sidokolumn */
/* Dölj Leaflet-markörer överallt i våra kartor */
.sv-vader .leaflet-marker-icon,
.sv-vader .leaflet-marker-shadow { display:none !important; }