:root{
  --green:#0d6039;
  --deep:#073f27;
  --yellow:#ffd400;
  --ink:#122019;
  --muted:#6b786f;
  --line:#dce6df;
  --soft:#f2f7f3;
  --blue:#eaf5fb;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left,rgba(255,212,0,.17),transparent 28rem),
    linear-gradient(180deg,#eff6f1,#f9fbfa 45%,#eef4ef);
}
button,input{font:inherit}
.wrap{max-width:1140px;margin:auto;padding:42px 20px 70px}
.card{
  background:#fff;border:1px solid rgba(13,96,57,.12);border-radius:30px;overflow:hidden;
  box-shadow:0 24px 70px rgba(7,63,39,.11)
}
.top{
  display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:center;
  padding:32px 40px;border-bottom:5px solid var(--yellow);
  background:linear-gradient(120deg,#fff 0 42%,#f6faf7 42% 100%)
}
.brand img{width:100%;max-height:145px;object-fit:contain}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--green)}
.top h1{font-size:clamp(32px,5vw,54px);margin:8px 0 10px;line-height:1}
.top p{margin:0;color:var(--muted);font-size:17px}
.search-panel{padding:28px 40px 18px}
.search-row label{display:block;font-size:13px;font-weight:900;margin-bottom:8px}
.search-box{display:grid;grid-template-columns:1fr auto;gap:10px}
.search-box input{
  min-height:54px;border:1px solid var(--line);border-radius:14px;padding:0 16px;font-size:17px;outline:none
}
.search-box input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(13,96,57,.08)}
.search-box button{
  min-width:145px;border:0;border-radius:14px;background:var(--green);color:#fff;font-weight:900;padding:0 20px;cursor:pointer
}
.suggestions{
  margin-top:8px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.08)
}
.suggestions button{
  display:block;width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;padding:12px 14px;text-align:left;cursor:pointer
}
.suggestions button:last-child{border-bottom:0}
.suggestions button:hover{background:var(--soft)}
.status{margin:0 40px 28px;padding:16px 18px;border-radius:14px;background:var(--soft);color:var(--muted)}
.status.loading{color:var(--green);font-weight:800}
.status.error{background:#fff2f0;color:#b42318}
#weather{padding:0 40px 38px}
.location-head{
  display:flex;justify-content:space-between;gap:20px;align-items:end;
  padding:18px 0 24px;border-top:1px solid var(--line)
}
.location-head h2{font-size:32px;margin:5px 0 4px}
.location-head p{margin:0;color:var(--muted)}
.updated{color:var(--muted);font-size:12px}
.current{
  display:grid;grid-template-columns:1fr 1.6fr;gap:22px;
  background:linear-gradient(135deg,var(--deep),var(--green));color:#fff;border-radius:24px;padding:26px
}
.current-main{display:flex;gap:18px;align-items:center}
.weather-icon{font-size:58px}
.temp{font-size:58px;font-weight:900;line-height:1}
.condition{font-size:18px;margin-top:6px;color:rgba(255,255,255,.84)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.metrics article{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:15px}
.metrics span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.7)}
.metrics strong{display:block;font-size:23px;margin-top:8px}
.metrics small{color:rgba(255,255,255,.72)}
.forecast-wrap{padding-top:32px}
.section-title{display:flex;justify-content:space-between;align-items:end}
.section-title h3{font-size:25px;margin:5px 0 16px}
.forecast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.day-card{
  border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff;
  box-shadow:0 8px 20px rgba(13,96,57,.045)
}
.day-top{display:flex;justify-content:space-between;align-items:center}
.day-name{font-weight:900;font-size:17px}
.day-date{font-size:12px;color:var(--muted)}
.day-icon{font-size:36px;margin:16px 0 8px}
.day-condition{min-height:38px;color:var(--muted);font-size:13px}
.day-temps{font-size:25px;font-weight:900;margin:12px 0}
.day-temps span{font-size:15px;color:var(--muted);font-weight:700}
.day-meta{display:grid;gap:7px;border-top:1px solid var(--line);padding-top:12px;font-size:13px}
.day-meta div{display:flex;justify-content:space-between;gap:12px}
.marine-note{margin-top:26px;border-left:5px solid var(--yellow);background:#fffbea;padding:15px 17px;border-radius:10px;line-height:1.5;font-size:13px}
footer{padding:18px 40px 26px;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:850px){
  .top{grid-template-columns:1fr;padding:26px}
  .brand{max-width:250px}
  .search-panel,#weather{padding-left:26px;padding-right:26px}
  .status{margin-left:26px;margin-right:26px}
  .current{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .wrap{padding:0}
  .card{border-radius:0;border-left:0;border-right:0}
  .top{padding:20px}
  .top h1{font-size:34px}
  .search-panel,#weather{padding-left:18px;padding-right:18px}
  .status{margin-left:18px;margin-right:18px}
  .search-box{grid-template-columns:1fr}
  .search-box button{height:50px}
  .location-head{display:block}
  .updated{margin-top:10px}
  .forecast-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  footer{padding-left:18px;padding-right:18px}
}

/* HOME TAB — επιστροφή στο nonke.gr */
.home-tab{
  position:fixed;
  right:0;
  top:58%;
  z-index:100;
  width:38px;
  height:58px;
  border-radius:12px 0 0 12px;
  background:#185c29;
  color:#f4d20a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:25px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:.2s;
  opacity:.88;
}
.home-tab:hover{
  width:44px;
  opacity:1;
  background:#0f4820;
}
@media(max-width:650px){
  .home-tab{
    width:34px;
    height:50px;
    font-size:22px;
  }
}


.weather-lang{position:fixed;right:18px;top:18px;z-index:120;display:flex;gap:7px;align-items:center;background:#fff;border:1px solid #dbe5df;border-radius:999px;padding:7px 10px;box-shadow:0 7px 20px rgba(0,0,0,.08)}
.weather-lang button{border:0;background:none;color:#6b786f;font-weight:900;cursor:pointer}.weather-lang button.active{color:#0e613a}
@media(max-width:600px){.weather-lang{right:10px;top:10px}}

.weather-lang>span{display:none}
.weather-lang button{font-size:22px;line-height:1;padding:3px 4px;border-radius:7px;opacity:.58;filter:saturate(.85);transition:.18s}
.weather-lang button.active,.weather-lang button:hover{opacity:1;filter:saturate(1);background:#f3f7f4}


/* Larger language flags */
.weather-lang button{
  font-size:28px!important;
  padding:5px 6px!important;
}