.ribka-weather-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(13,59,79,0.12);
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  margin:20px 0;
}
@media (max-width:640px){
  .ribka-weather-box{ grid-template-columns:1fr; }
}

.ribka-weather-box .rw-col{
  padding:24px;
}
.ribka-weather-box .rw-weather{
  background: linear-gradient(160deg, #0d3b4f, #135d70 70%, #1f7a8c);
  color:#fff;
}
.ribka-weather-box .rw-moon{
  background: linear-gradient(160deg, #f4f9f6, #eaf3ee);
  color:#16241f;
}

.ribka-weather-box h3{
  margin:0 0 14px;
  font-size:16px;
  font-weight:700;
}

.rw-location-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.rw-select{
  background:rgba(255,255,255,0.15);
  color:#fff;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:8px;
  padding:6px 10px;
  font-size:13px;
  max-width:180px;
}
.rw-select option{ color:#16241f; }

#rw-current-data{ transition:opacity .25s ease; }

.rw-search-row{
  position:relative;
  margin:14px 0 18px;
}
.rw-search-input{
  width:100%;
  background:rgba(255,255,255,0.15);
  color:#fff;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:8px;
  padding:9px 12px;
  font-size:13px;
}
.rw-search-input::placeholder{ color:rgba(255,255,255,0.7); }

.rw-search-results{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#fff;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  margin-top:4px;
  z-index:20;
  overflow:hidden;
}
.rw-result-item{
  padding:10px 14px;
  color:#16241f;
  font-size:13px;
  cursor:pointer;
  border-bottom:1px solid #eee;
}
.rw-result-item:last-child{ border-bottom:none; }
.rw-result-item:hover{ background:#eaf3ee; }

/* ===== TABS ===== */
.rw-tabs{
  display:flex;
  gap:6px;
  margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,0.25);
}
.rw-tab-btn{
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.7);
  padding:8px 14px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  border-bottom:2px solid transparent;
}
.rw-tab-btn.active{
  color:#fff;
  border-bottom-color:#e8c07d;
}

/* ===== HOURLY (вертикален списък) ===== */
.rw-hourly-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:420px;
  overflow-y:auto;
  padding-right:4px;
}
.rw-hour-item{
  display:grid;
  grid-template-columns:56px 30px 1fr 90px;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.12);
  border-radius:10px;
  padding:9px 12px;
  font-size:13px;
}
.rw-hour-time{ font-weight:700; }
.rw-hour-emoji{ font-size:20px; text-align:center; }
.rw-hour-temp{ font-weight:800; font-size:15px; }
.rw-hour-extra{ text-align:right; }
.rw-hour-wind, .rw-hour-rain{ font-size:11px; opacity:.85; }

/* ===== DAILY ===== */
.rw-daily-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.rw-day-item{
  display:grid;
  grid-template-columns:56px 30px 1fr 90px;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.12);
  border-radius:10px;
  padding:9px 12px;
  font-size:13px;
}
.rw-day-name{ font-weight:700; }
.rw-day-date{ display:block; font-size:11px; opacity:.75; font-weight:400; }
.rw-day-emoji{ font-size:20px; text-align:center; }
.rw-day-temps{ text-align:right; }
.rw-day-max{ font-weight:800; }
.rw-day-min{ opacity:.7; margin-left:6px; }
.rw-day-extra{ text-align:right; }
.rw-day-wind, .rw-day-rain{ font-size:11px; opacity:.85; }

.rw-temp{
  display:flex;
  align-items:center;
  gap:12px;
}
.rw-emoji{ font-size:44px; }
.rw-degrees{ font-size:42px; font-weight:800; }
.rw-desc{ opacity:.9; margin:6px 0 18px; }

.rw-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.rw-detail{
  background:rgba(255,255,255,0.12);
  border-radius:10px;
  padding:8px 10px;
}
.rw-label{ display:block; font-size:11px; opacity:.85; }
.rw-value{ display:block; font-size:15px; font-weight:700; }

.rw-error{ opacity:.9; }

.rw-moon-phase{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}
.rw-moon-emoji{ font-size:52px; }
.rw-moon-name{ font-weight:800; font-size:17px; color:#0d3b4f; }
.rw-moon-illum{ font-size:13px; color:#5a7a70; }

.rw-score-label{
  font-size:13px;
  font-weight:700;
  color:#0d3b4f;
  margin-bottom:6px;
}
.rw-score-bar{
  height:14px;
  background:#dcebe3;
  border-radius:999px;
  overflow:hidden;
}
.rw-score-fill{
  height:100%;
  background:linear-gradient(90deg,#2e7d5b,#3fa668,#e8c07d);
  border-radius:999px;
  transition:width .4s ease;
}
.rw-score-number{
  margin-top:8px;
  font-weight:700;
  color:#2e7d5b;
}