html, body{
  height: 100%;
  margin: 0;
}

body{
  font-family: "Open Sans", Arial, sans-serif;
}

/* ===== PAGE LAYOUT ===== */
.pageWrapper{
  height: var(--app-height);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ===== TOP ===== */
.topArea{
  flex: 0 0 auto;
}

/* ===== CENTER (DYNAMIC HEIGHT) ===== */
.chartArea{
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;      /* חשוב מאוד בפלקס */
  overflow: hidden;
}

/* זה ה-DIV שמארח את הקנבסים */
#chartHost{
  width: 100%;
  height: 100%;       /* זה מה שחסר לך */
  position: relative; /* כדי ש-absolute canvases יהיו יחסית אליו */
  overflow: hidden;
  background: #e6e6e6;
}

/* שני הקנבסים */
#chartHost canvas{
  position: absolute;
  inset: 0;           /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  display: block;
}

/* כפתורי BLA BLA – עיצוב לפי .header_phone */
.bottomArea button{
  width: 90px;
  height: 35px;

  background-color: #e78d2b;   /* צבע רקע */
  color: #ffffff;              /* צבע פונט */

  border: none;
  border-radius: 4px;          /* פינות מעוגלות */

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;             /* גודל פונט כמו header_phone */
  font-weight: normal;

  padding: 2px 8px 4px 8px;
  line-height: 1;
  direction: ltr;
  text-align: center;

  cursor: pointer;
    margin: 0;   /* שהרווח ינוהל רק ע"י gap */
}

.bottomArea{
  margin: 5px 0 5px 5px;
  display: flex;
  flex-wrap: wrap;      /* ← מאפשר גלישה לשורה הבאה */
  gap: 8px 8px;         /* ← רווח גם אופקי וגם אנכי */
}

/* Hover עדין */
.bottomArea button:hover{
  filter: brightness(0.95);
}

/* מצב לחוץ */
.bottomArea button:active{
  transform: translateY(1px);
}

/* מצב SELECTED */
.bottomArea button.selected{
  background-color: #1A2D5A;
  color: #ffffff;
}

/* לא לשנות צבע ב-hover כשהכפתור נבחר */
.bottomArea button.selected:hover{
  background-color: #1A2D5A;
}

/* ===== QUOTE CARD ===== */
.quoteCard{
  width: 100%;
  box-sizing: border-box;
}

.quoteHeader{
  height: 30px;
  background: #1A2D5A;
  display: flex;
  align-items: center;
}

.padLeft,
.padRight{
  flex: 0 0 2%;
}

.headerTitle{
  flex: 0 0 75%;
  font-size: 18px;
}

.divider{
  height: 1px;
  background: #1a2d5a;
}

.quoteRow{
  display: flex;
  width: 100%;
  align-items: center;
}

.quoteRow--head{
  height: 20px;
}

.quoteRow--data{
  height: 32px;
  background: #f0f0f0;
}

.cell{
  text-align: center;
  font-size: 15px;
  padding: 0 4px;
  box-sizing: border-box;
}

.quoteHeader,
.quoteHeader .headerTitle{
  color: #ffffff;
}

.cell:nth-child(1){ flex: 0 0 16%; }
.cell:nth-child(n+2){ flex: 0 0 14%; }

@media (max-width: 600px) and (orientation: portrait){
  .quoteHeader,
  .quoteHeader .headerTitle{
    font-size: 14px;   /* הקטן לפי הצורך: 11–13 */
  }
  .moMobile { display: none; }
}

@media (max-width: 600px) and (orientation: portrait){
  .quoteHeader .headerTitle{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 600px){
  .quoteRow--head .cell,
  .quoteRow--data .cell{
    flex: 1 1 0;   /* כל תא מתחלק שווה בשווה */
    min-width: 0;
  }
}