/* ==========================================================================
   Погодний віджет яхт-клубу «ПАРУС» / Parus Yacht Club weather widget
   Підключення: <link rel="stylesheet" href="css/weather-widget.css">
   ========================================================================== */

.weather-widget{
  --ww-navy:#0B3350;
  --ww-navy-2:#124569;
  --ww-teal:#1C7293;
  --ww-foam:#F4F6F5;
  --ww-paper:#FFFFFF;
  --ww-brass:#C9963C;
  --ww-line:#E1E7EA;
  --ww-ink:#0B3350;
  --ww-ink-soft:#5A7285;
  --ww-ok:#1E7A4C;
  --ww-warn:#B9791A;
  --ww-danger:#B4391F;

  font-family:"Manrope","Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;
  color:var(--ww-ink);
  background:var(--ww-paper);
  border:1px solid var(--ww-line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(11,51,80,0.06);
}

.weather-widget *{ box-sizing:border-box; }

.ww-head{
  background:linear-gradient(135deg,var(--ww-navy) 0%,var(--ww-navy-2) 100%);
  color:#fff;
  padding:18px 22px 16px;
}

.ww-head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.ww-loc{ margin:0; }

.ww-loc-name{
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  margin:0;
}

.ww-loc-sub{
  font-size:12.5px;
  color:#BFD6E6;
  margin:2px 0 0;
}

.ww-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.ww-updated{
  font-size:11.5px;
  color:#BFD6E6;
  white-space:nowrap;
}

.ww-refresh{
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.08);
  color:#fff;
  border-radius:8px;
  padding:6px 10px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .15s ease;
}
.ww-refresh:hover{ background:rgba(255,255,255,0.18); }
.ww-refresh svg{ width:13px; height:13px; }
.ww-refresh.is-spinning svg{ animation:ww-spin .7s linear; }
.ww-unit-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-top:8px;
  padding:2px;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.08);
  border-radius:8px;
}
.ww-unit-btn{
  border:0;
  background:transparent;
  color:#BFD6E6;
  border-radius:6px;
  padding:5px 9px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.ww-unit-btn:hover{ color:#fff; background:rgba(255,255,255,0.12); }
.ww-unit-btn.is-active{ color:var(--ww-navy); background:#fff; }

@keyframes ww-spin{ to{ transform:rotate(360deg); } }

.ww-safety{
  margin-top:12px;
  font-size:13px;
  font-weight:700;
  padding:8px 12px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ww-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Рівні безпеки виходу на воду — класи замість inline style (сумісно з CSP style-src). */
.ww-safety--ok{ background: rgba(30,122,76,0.14); color: #1E7A4C; }
.ww-safety--warn{ background: rgba(185,121,26,0.16); color: #B9791A; }
.ww-safety--danger{ background: rgba(180,57,31,0.18); color: #B4391F; }
.ww-dot--ok{ background: #1E7A4C; }
.ww-dot--warn{ background: #B9791A; }
.ww-dot--danger{ background: #B4391F; }

.ww-body{ padding:20px 22px 8px; }

.ww-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:14px;
}

.ww-card{
  background:var(--ww-foam);
  border-radius:12px;
  padding:14px 16px;
}

.ww-card-wind{
  display:flex;
  align-items:center;
  gap:16px;
}

.ww-card-label{
  font-size:11px;
  color:var(--ww-ink-soft);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
  margin:0 0 6px;
}

.ww-card-value{
  font-size:24px;
  font-weight:800;
  margin:0;
  line-height:1.1;
}
.ww-card-value small{
  font-size:13px;
  font-weight:600;
  color:var(--ww-ink-soft);
}

.ww-card-extra{
  font-size:12px;
  color:var(--ww-ink-soft);
  margin:4px 0 0;
}

.ww-beaufort{
  display:inline-block;
  margin-top:6px;
  font-size:11px;
  font-weight:700;
  padding:3px 8px;
  border-radius:20px;
  background:#E3EEF3;
  color:var(--ww-teal);
}

.ww-compass{ flex-shrink:0; }
.ww-wind-info{ flex:1; min-width:0; }

.ww-arrow{
  transition:transform 1.1s cubic-bezier(.4,0,.2,1);
  transform-origin:50px 50px;
}

.ww-foot{
  padding:12px 22px 10px;
  border-top:1px solid var(--ww-line);
  margin-top:10px;
}

.ww-note{
  font-size:11.5px;
  color:#93A7B4;
  line-height:1.6;
  margin:0 0 12px;
}

.ww-loading{
  padding:48px 20px;
  text-align:center;
  font-size:13.5px;
  color:var(--ww-ink-soft);
}

.ww-error{
  padding:24px 20px;
  text-align:center;
  font-size:13px;
  color:var(--ww-danger);
}

@media (max-width:520px){
  .ww-head{ padding:16px 16px 14px; }
  .ww-body{ padding:16px 16px 6px; }
  .ww-foot{ padding:10px 16px 8px; }
  .ww-card-value{ font-size:21px; }
}
/* Прогноз на 24 години */
.ww-hourly-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--ww-line);
}

.ww-hourly-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--ww-ink-soft);
  margin: 0 0 10px;
}

.ww-hourly-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--ww-teal) transparent;
}

.ww-hourly-track::-webkit-scrollbar {
  height: 4px;
}
.ww-hourly-track::-webkit-scrollbar-thumb {
  background: var(--ww-teal);
  border-radius: 4px;
}

.ww-hourly-item {
  flex: 0 0 54px;
  background: var(--ww-foam);
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ww-hourly-time {
  font-size: 11px;
  color: var(--ww-ink-soft);
  font-weight: 600;
}

.ww-hourly-temp {
  font-size: 13px;
  font-weight: 800;
  color: var(--ww-ink);
}

.ww-hourly-wind {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ww-teal);
}

.ww-hourly-pop {
  font-size: 10px;
  color: #2b78c5;
  font-weight: 600;
}