/* weather-template-modern.css
   Panoramika weather card template (modern)
   ------------------------------------------------------------
   CONFIG QUICK LIST (most used):
   - Position on player:       .pw-weather.pw-modern { top, left }
   - Card size:                .pw-modern .pw-card { width }
   - Card color:               .pw-modern .pw-card { background }
   - Card radius/shadow:       .pw-modern .pw-card { border-radius, box-shadow }
   - Temperature size:         .pw-modern .pw-temp { font-size }
   - Unit size:                .pw-modern .pw-temp .pw-unit { font-size }
   - Right column width:       .pw-modern .pw-right { flex: 0 0 XXXpx }
   - Icon sizes:               .pw-main-icon / .pw-stat-icon { width, height }
   - Mobile breakpoint:        @media (max-width: 640px) { ... }
*/

/* ------------------------------------------------------------
   1) NO-FLASH (do not change unless you know why)
   - JS sets class "pw-ready" after first render.
   - Until then: opacity 0 (hidden), then opacity 1 (visible).
------------------------------------------------------------ */
.pw-weather.pw-modern { opacity: 0; }
.pw-weather.pw-modern.pw-ready { opacity: 1; }

/* ------------------------------------------------------------
   2) OVERLAY POSITIONING (inside player)
   - top/left: moves the whole card on the video
   - z-index: ensure above player UI
   - max-width: keeps it inside viewport
   - pointer-events: none => overlay is NOT clickable
     (set to auto if you want clicks)
------------------------------------------------------------ */
.pw-weather.pw-modern {
  position: absolute;
  z-index: 40;

  /* CONFIG: position of the card */
  top: 305px;
  left: 12px;

  max-width: calc(100% - 24px);
  pointer-events: none;

  /* CONFIG: font family and base color */
  font-family: "Roboto", Arial, sans-serif;
  color: #fff;
}

/* ------------------------------------------------------------
   3) CARD CONTAINER (background, size, rounded corners, shadow)
------------------------------------------------------------ */
.pw-modern .pw-card {
  /* CONFIG: card width (desktop) */
  width: 420px;

  /* keeps it responsive on smaller screens */
  max-width: calc(100vw - 24px);

  /* CONFIG: roundness of card corners */
  border-radius: 12px;

  overflow: hidden;

  /* CONFIG: main card color (blue tone) */
  background: #2d6f8f;

  /* CONFIG: shadow strength */
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}

/* ------------------------------------------------------------
   4) TOP BAR (optional header row)
   - padding controls height
   - background controls darker bar
------------------------------------------------------------ */
.pw-modern .pw-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* CONFIG: top bar padding */
  padding: 10px 12px;

  /* CONFIG: top bar dark overlay */
  background: rgba(0,0,0,0.12);
}

.pw-modern .pw-title {
  /* CONFIG: top-left title style */
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  opacity: 0.95;
  text-transform: uppercase;
}

.pw-modern .pw-top-right {
  /* CONFIG: top-right text style (time/status etc.) */
  font-size: 13px;
  font-weight: 700;
  opacity: 0.95;
}

/* ------------------------------------------------------------
   5) MAIN LAYOUT (left big temp + right stats)
   - gap: space between left and right columns
   - padding: internal spacing inside card
------------------------------------------------------------ */
.pw-modern .pw-main {
  display: flex;

  /* CONFIG: distance between left temp block and right stats */
  gap: 16px;

  /* CONFIG: card inner padding */
  padding: 16px 14px 16px 14px;

  align-items: center;
}

/* ------------------------------------------------------------
   6) LEFT BLOCK (temperature area)
------------------------------------------------------------ */
.pw-modern .pw-left {
  flex: 1 1 auto;

  /* CONFIG: minimum width of left area
     (increase if temp + icon feel cramped) */
  min-width: 220px;
}

.pw-modern .pw-temp-wrap {
  display: flex;
  align-items: center;

  /* CONFIG: spacing between main icon and temperature number */
  gap: 14px;
}

.pw-modern .pw-temp {
  display: inline-flex;
  align-items: baseline;

  /* CONFIG: spacing between value and unit (°C) */
  gap: 8px;

  /* CONFIG: BIG temperature font size */
  font-size: 86px;

  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}

.pw-modern .pw-temp .pw-unit {
  /* CONFIG: unit size next to temp */
  font-size: 24px;

  font-weight: 800;
  opacity: 0.9;
}

/* ------------------------------------------------------------
   7) RIGHT BLOCK (stats column)
   - flex: 0 0 190px => fixed width column
   - gap controls spacing between rows
------------------------------------------------------------ */
.pw-modern .pw-right {
  /* CONFIG: width of the right column */
  flex: 0 0 190px;

  display: flex;
  flex-direction: column;

  /* CONFIG: spacing between stat rows */
  gap: 10px;
}

.pw-modern .pw-stat {
  display: flex;
  align-items: center;

  /* CONFIG: spacing between stat icon and text */
  gap: 10px;
}

.pw-modern .pw-stat-text {
  display: flex;
  flex-direction: column;

  /* CONFIG: spacing between label and value */
  gap: 2px;

  min-width: 0;
}

.pw-modern .pw-stat-label {
  /* CONFIG: label style ("Humidity", "Pressure"... ) */
  font-size: 12px;
  font-weight: 800;
  opacity: 0.9;
  letter-spacing: 0.2px;
}

.pw-modern .pw-stat-value {
  /* CONFIG: stat value style */
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.pw-modern .pw-stat-value .pw-unit {
  /* CONFIG: spacing + size of units in right column */
  margin-left: 4px;
  font-size: 0.95em;
  opacity: 0.95;
}

/* ------------------------------------------------------------
   8) ICONS (sizes + images)
   - Change width/height to scale icons
   - Change URLs to your own icon files
------------------------------------------------------------ */
.pw-modern .pw-main-icon,
.pw-modern .pw-stat-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 auto;
}

.pw-modern .pw-main-icon {
  /* CONFIG: main temperature icon size */
  width: 64px;
  height: 64px;
  opacity: 0.95;
}

.pw-modern .pw-stat-icon {
  /* CONFIG: right column icon size */
  width: 20px;
  height: 20px;
  opacity: 0.95;
}

/* CONFIG: icon image paths */
.pw-modern .pw-icon-temp     { background-image: url("//live.panoramika.eu/scripts/panoplayer/img/weather/temp.svg"); }
.pw-modern .pw-icon-humidity { background-image: url("//live.panoramika.eu/scripts/panoplayer/img/weather/humidity.svg"); }
.pw-modern .pw-icon-pressure { background-image: url("//live.panoramika.eu/scripts/panoplayer/img/weather/pressure.svg"); }
.pw-modern .pw-icon-wind     { background-image: url("//live.panoramika.eu/scripts/panoplayer/img/weather/wind.svg"); }
.pw-modern .pw-icon-dir      { background-image: url("//live.panoramika.eu/scripts/panoplayer/img/weather/direction.svg"); }

/* ------------------------------------------------------------
   9) MESSAGE BOX (optional - used when no data etc.)
------------------------------------------------------------ */
.pw-modern .pw-box-message {
  margin: 10px 12px 12px 12px;
  background: rgba(0,0,0,0.18);

  /* CONFIG: message corner rounding */
  border-radius: 10px;

  /* CONFIG: message padding */
  padding: 10px 12px;

  font-weight: 800;
}

/* ------------------------------------------------------------
   10) RESPONSIVE (mobile)
   - When screen < 640px:
     - card becomes full width
     - layout stacks vertically
     - temperature font shrinks
------------------------------------------------------------ */
@media (max-width: 640px) {
  .pw-modern .pw-card { width: auto; }

  .pw-modern .pw-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .pw-modern .pw-right {
    flex: 1 1 auto;
    width: 100%;
  }

  /* CONFIG: mobile temperature size */
  .pw-modern .pw-temp {
    font-size: 64px;
  }
}