/* ECOMISE — live price tracker (app.html) */

.app-main{
  padding:20px 0 60px;
  min-height:100vh;
}
.app-container{
  max-width:640px;
}

/* Region picker */
.region-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
}
.region-row label{
  font-weight:700;
  font-size:14px;
}
.region-row select{
  flex:1;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:16px;
  font-family:inherit;
  background:#fff;
}

/* Status message */
.status-message{
  text-align:center;
  padding:24px;
  color:#667;
}
.status-message.status-error{color:#c0392b;}

/* Now cards */
.now-cards{
  display:flex;
  gap:16px;
  margin-bottom:20px;
}
.price-card{
  flex:1;
  background:var(--color-bg);
  border-radius:12px;
  padding:18px;
  text-align:center;
}
.price-card-label{
  display:block;
  font-size:13px;
  color:#667;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:6px;
}
.price-card-value{
  display:block;
  font-family:"Poppins","Roboto",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(28px,8vw,40px);
  color:var(--color-text);
}
.price-card-unit{
  display:block;
  font-size:13px;
  color:#667;
}

/* Traffic-light rating for the "next 2.5h avg" card */
.price-card.price-good{
  background:var(--color-lime);
}
.price-card.price-good .price-card-label,
.price-card.price-good .price-card-value,
.price-card.price-good .price-card-unit{
  color:var(--color-text);
}
.price-card.price-fringe{
  background:#ffe2a8;
}
.price-card.price-fringe .price-card-label,
.price-card.price-fringe .price-card-value,
.price-card.price-fringe .price-card-unit{
  color:var(--color-text);
}
.price-card.price-bad{
  background:#f7b3ad;
}
.price-card.price-bad .price-card-label,
.price-card.price-bad .price-card-value,
.price-card.price-bad .price-card-unit{
  color:var(--color-text);
}

/* Recommendation list */
.recommendation-section{
  margin-bottom:24px;
}
.recommendation-title{
  font-size:16px;
  font-weight:700;
  margin:0 0 10px;
}
.recommendation-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.recommendation-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--color-bg);
  border-radius:10px;
  padding:12px 14px;
}
.recommendation-item.rank-1{
  background:var(--color-lime);
  color:var(--color-text);
}
.recommendation-rank{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--color-accent);
  color:#fff;
  font-weight:700;
  font-size:13px;
  flex-shrink:0;
}
.recommendation-item.rank-1 .recommendation-rank{
  background:var(--color-text);
  color:var(--color-lime);
}
.recommendation-time{
  font-weight:700;
  flex:1;
}
.recommendation-now{
  display:inline-block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  background:var(--color-purple);
  color:#fff;
  border-radius:4px;
  padding:2px 6px;
  margin-left:8px;
}
.recommendation-price{
  font-size:14px;
  color:#667;
  white-space:nowrap;
}
.recommendation-item.rank-1 .recommendation-price{
  color:var(--color-text);
}

/* Chart */
.chart-wrap{
  margin-bottom:8px;
}
.chart-selected{
  font-size:14px;
  font-weight:700;
  background:var(--color-bg);
  border-radius:8px;
  padding:8px 12px;
  margin-bottom:8px;
  text-align:center;
}
.chart-selected-price{
  color:var(--color-accent);
}
.chart-selected-avg{
  color:rgb(240, 80, 248);
}
.chart-row{
  display:flex;
  gap:4px;
}
.chart-axis{
  position:relative;
  flex:0 0 32px;
  height:180px;
  margin-bottom:24px;
}
.chart-axis-label{
  position:absolute;
  left:0;
  right:4px;
  transform:translateY(50%);
  font-size:10px;
  color:#999;
  text-align:right;
}
.chart-scroll{
  position:relative;
  flex:1;
  min-width:0;
  overflow-x:auto;
}
.chart-avg-svg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:180px;
  pointer-events:none;
  overflow:visible;
}
.chart-avg-line-path{
  fill:none;
  stroke:rgb(240, 80, 248);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.chart{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:180px;
  padding:0 4px 24px;
  position:relative;
  z-index:1;
  border-bottom:1px solid #ddd;
}
.chart-bar{
  flex:0 0 auto;
  width:14px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  position:relative;
  cursor:pointer;
}
.chart-bar-fill{
  width:100%;
  min-height:2px;
  border-radius:3px 3px 0 0;
  background:var(--color-accent);
}
.chart-bar-fill.negative{background:var(--color-blue);}
.chart-bar-fill.best{background:var(--color-lime);}
.chart-bar.now .chart-bar-fill{box-shadow:0 0 0 2px var(--color-purple) inset;}
.chart-bar.selected .chart-bar-fill{box-shadow:0 0 0 2px var(--color-text) inset;}
.chart-bar-label{
  position:absolute;
  bottom:-20px;
  font-size:10px;
  color:#999;
  white-space:nowrap;
}

.chart-zero-line{
  position:absolute;
  left:0;
  right:0;
  border-top:1px dashed #bbb;
}

.chart-note{
  font-size:13px;
  color:#999;
  margin-top:28px;
}

.chart-legend{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:13px;
  color:#667;
  margin:8px 0 0;
}
.chart-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.chart-legend i{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:2px;
}
.chart-legend .swatch-best{background:var(--color-lime);}
.chart-legend .swatch-normal{background:var(--color-accent);}
.chart-legend .swatch-negative{background:var(--color-blue);}
.chart-legend .swatch-avg{
  width:14px;
  height:0;
  border-top:2px solid rgb(240, 80, 248);
  background:none;
  border-radius:0;
}