/* ============================= */
/* WEATHER CARD (full page) */
/* ============================= */

.wx-card-final {
  max-width: 760px;
  margin: auto;
  padding: 26px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg,#1e66d0,#4aa3ff);
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
  transition: .25s ease;
}

.wx-card-final:hover {
  transform: translateY(-4px);
}

/* layout */

.wx-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.wx-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.wx-right {
  display: grid;
  gap: 10px;
}

/* typography */

.wx-icon { font-size: 54px; }

.wx-temp {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
}

.wx-label {
  font-size: 13px;
  opacity: .9;
  margin-bottom: 4px;
}

/* pills */

.wx-pill {
  background: rgba(255,255,255,.18);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 15px;
}

/* forecast */

.wx-forecast {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}

.wx-day {
  background: rgba(255,255,255,.16);
  padding: 14px;
  border-radius: 14px;
  text-align: center;
}

.wx-day-name {
  font-weight: 700;
  margin-bottom: 4px;
}

.wx-day-temp {
  font-size: 15px;
  opacity: .95;
}

/* ============================= */
/* MINI WEATHER CARD */
/* ============================= */

.weather-box {
  background: linear-gradient(135deg,#0d6efd,#5aa7ff);
  color: #fff;
  border-radius: 14px;
  padding: 4px 12px;
  max-width: 280px;  /* 320 */
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  margin: 0;
}

/* layout */

.weather-box .weather-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.weather-box .weather-icon {
  font-size: 28px;
}

.weather-box .weather-temp {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

/* meta */

.weather-box .weather-meta {
  margin-top: 2px;
  font-size: 14px;
  opacity: .95;
}

.weather-box .weather-meta > div {
  margin-top: 2px;
}

/* CTA */

.weather-box .weather-cta-wrap {
  margin-top: 6px;
}

.weather-box .weather-cta {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: .2s;
}

.weather-box .weather-cta:hover {
  background: rgba(255,255,255,.28);
}

/* ============================= */
/* EXTRA WEATHER ELEMENTS */
/* ============================= */

.weather-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 2px;   /* 8 */
  flex-wrap: wrap;
}

.weather-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sun-times {
  font-size: 13px;
  opacity: .9;
}

.weather-row {
  font-size: 14px;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.weather-sea {
  margin-top: 6px;
  font-size: 14px;
  font-weight: bold;
}

.sea-badge {
  padding: 4px 10px;
  border-radius: 14px;
  color: #fff;
  display: inline-block;
}

.wind-arrow {
  display: inline-block;
  font-weight: bold;
  transition: transform .5s ease;
}

/* animated wave */

.wave {
  margin-top: 8px;
  height: 6px;
  background: linear-gradient(90deg,#4facfe,#00f2fe);
  border-radius: 4px;
  animation: wave 2s infinite linear;
}

@keyframes wave {
  0% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(-10px); }
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 600px) {

  .weather-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .weather-temp {
    font-size: 22px;
  }

  .sun-times {
    font-size: 12px;
  }

}
#samos-weather .weather-meta .wx-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
}

#samos-weather .weather-meta .wx-label{
  font-weight:600;
  opacity:.95;
}

#samos-weather .weather-meta .wx-colon{
  opacity:.9;
}

#samos-weather .weather-meta .wx-value{
  opacity:.95;
}

#samos-weather .weather-meta {
  margin-top: -18px;   /* όχι 10px */
}

#samos-weather .weather-meta .wx-row:first-child {
  margin-top: 0;     /* κόβει το extra gap */
}