@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&display=swap');

/* Apply Lato globally */
body, .ysp-wrap {
  font-family: 'Lato', sans-serif !important;
}

.ysp-wrap { max-width: 1050px; margin: 0 auto; }


.ysp-current { text-align:center; padding:32px 18px 16px; }
.ysp-current-label { color:#374151;font-weight:500; margin-bottom:8px; }
.ysp-price { font-size:56px; line-height:1; font-weight:600; margin-bottom:8px; }
.ysp-changes { display:flex; gap:10px; justify-content:center; align-items:center; font-weight:600; margin-bottom:8px; }
.ysp-dot { width:8px; height:8px; background:#26a269; border-radius:50%; display:inline-block; }
.ysp-dot.neg { background:#d92d20; }
.ysp-sep { width:24px; display:inline-block; }
.ysp-timestamp { color:#374151;font-weight:500; font-size:14px; margin-bottom:8px; }
.ysp-delay { color:#374151;font-weight:500; font-size:12px; }

.ysp-band { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; padding:16px 20px; }
/* Keep top row as 4 equal columns */
.ysp-band-top{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  padding:16px 20px;
  background:#f3f4f6;
  border-top:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
}

/* Bottom row uses 7 tracks: 1,3,5,7 = align to top columns; 2,4,6 = the gaps */
.ysp-band-sub{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
  padding:16px 20px;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  align-items:center;        /* vertical alignment */
  text-align:center;
}

/* place Symbol, Currency, ISIN into gap columns on the SAME row */
.ysp-band-sub .ysp-meta{ grid-row:1; justify-self:center; }
.ysp-band-sub .ysp-meta:nth-child(1){ grid-column:1; } /* between col 1 & 2 */
.ysp-band-sub .ysp-meta:nth-child(2){ grid-column:3; } /* between col 2 & 3 */
.ysp-band-sub .ysp-meta:nth-child(3){ grid-column:5; } /* between col 3 & 4 */

/* Mobile fallback: simple two-column stack */
@media (max-width:820px){
  .ysp-band-top{ grid-template-columns:repeat(2,1fr); }
  .ysp-band-sub{
    grid-template-columns:repeat(2,1fr);
    text-align:left;
  }
  .ysp-band-sub .ysp-meta{ grid-column:auto; grid-row:auto; justify-self:start; }
}

.ysp-meta-label { color:#374151;font-weight:500; font-size:13px; margin-bottom:4px; }
.ysp-meta-value { color:#4071A9; font-weight:600; }

.ysp-rangebar {
  background:#131c27;
  color:#fff;
  display:flex;
  gap:16px;
  padding:12px 16px;
  overflow-x:auto;

  justify-content: center; /* 👈 add this */
}
.ysp-range { background:transparent; border:0; color:#cdd6df; padding:6px 8px; border-radius:4px; font-weight:600; letter-spacing:.3px; cursor:pointer; }
.ysp-range.is-active, .ysp-range:hover { color:#fff; text-decoration:underline; }

.ysp-chart-wrap { height:420px; padding:10px 10px 24px; }

@media (max-width: 820px){
  .ysp-price { font-size:44px; }
  .ysp-band { grid-template-columns: repeat(2, 1fr); }
  .ysp-chart-wrap { height:360px; }
}

@media (max-width: 480px){
  .ysp-price { font-size:40px; }
  .ysp-chart-wrap { height:320px; }
}
/* ===== MOBILE LAYOUT (<= 820px) ===== */
@media (max-width: 820px){

  /* Top area */
  .ysp-current { padding: 20px 14px 10px; }
  .ysp-price { font-size: 56px; line-height: 1; margin-bottom: 6px; }

  .ysp-changes { gap: 14px; margin-bottom: 6px; }
  .ysp-dot { width: 8px; height: 8px; }

  .ysp-timestamp { font-size: 15px; margin-bottom: 2px; }
  .ysp-delay { font-size: 12px; margin-bottom: 10px; }

  /* Meta bands */
  .ysp-band-top{
    grid-template-columns: repeat(2, 1fr); /* 2 x 2 in grey band */
    gap: 12px 18px;
    padding: 14px 16px;
  }
  .ysp-band-sub{
    /* On mobile, show 3 items on one row equally spaced */
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 10px;
    padding: 12px 16px;
    text-align: center;
    align-items: center;
  }
  /* reset any desktop gap-placement so all three sit on same line */
  .ysp-band-sub .ysp-meta{ grid-column: auto !important; grid-row: auto !important; justify-self: center; }

  .ysp-meta-label{ font-size: 14px; margin-bottom: 2px; }
  .ysp-meta-value{ font-size: 22px; font-weight: 700; } /* same blue already applied earlier */

  /* Range bar */
  .ysp-rangebar{
    padding: 10px 12px;
    justify-content: center;              /* centered tabs */
  }
  .ysp-range{ font-size: 18px; padding: 6px 8px; }

  /* Chart */
  .ysp-chart-wrap{ height: 380px; padding: 8px 8px 18px; }
}

/* ===== Fit-to-screen on small devices ===== */
/* ===== Ultra-compact for small devices (phones ≤ 480px) ===== */
/* ===== Full-bleed + no overflow on small phones ===== */
@media (max-width: 480px){

  /* Break out of parent padding (works in Elementor, themes, etc.) */
  .ysp-wrap{
    box-sizing: border-box;
    width: 100vw;                 /* span the viewport */
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .ysp-card{
    border-radius: 0;
    box-shadow: none;
  }

  /* Make inner sections hug the edges a bit more */
  .ysp-current,
  .ysp-band-top,
  .ysp-band-sub,
  .ysp-rangebar,
  .ysp-chart-wrap{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Range bar: spread evenly, one line, no overflow */
  .ysp-rangebar{
    display: flex;
    justify-content: space-between;
    gap: 0;
    flex-wrap: nowrap;
  }
  .ysp-range{
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
  }

  /* Chart uses full width */
  .ysp-chart-wrap{ width: 100%; height: 300px; }
  #ysp-chart{ width: 100% !important; height: 100% !important; display: block; }

  /* Long numbers/ISIN wrap instead of pushing layout */
  .ysp-meta-value{
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Guard against any stray horizontal scrolling */
  html, body{ overflow-x: hidden; }
}
.ysp-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.ysp-change .arrow {
  font-size: 14px;
  font-weight: bold;
}

.ysp-change.up   .arrow { color: #16a34a; } /* green */
.ysp-change.down .arrow { color: #dc2626; } /* red */
.ysp-change.flat .arrow { color: #6b7280; } /* grey */

/* ===== Typography adjustments for small devices ===== */
@media (max-width: 480px) {

  /* Current price label */
  .ysp-current-label {
    font-size: 16px;
  }

  /* Big current price value */
  .ysp-price {
    font-size: 36px;   /* was ~48–60px */
  }

  /* 1D / 1Y changes */
  .ysp-changes {
    font-size: 14px;
    gap: 10px;
  }
  .ysp-change .arrow {
    font-size: 12px;
  }

  /* Timestamp and delay note */
  .ysp-timestamp {
    font-size: 12px;
  }
  .ysp-delay {
    font-size: 11px;
  }

  /* Meta labels (52W High, Market Cap, etc.) */
  .ysp-meta-label {
    font-size: 12px;
  }

  /* Meta values */
  .ysp-meta-value {
    font-size: 14px;
  }

  /* Symbol / Currency / ISIN */
  .ysp-band-sub .ysp-meta-value {
    font-size: 15px;
  }

  /* Range bar buttons */
  .ysp-range {
    font-size: 13px;
    padding: 6px 0;
  }
}
/* Keep in one row, centered on mobile */
@media (max-width: 768px) {
  .ysp-band-sub {
    display: flex;
    justify-content: center;  /* center horizontally */
    text-align: center;
    gap: 20px; /* space between items */
  }

  .ysp-band-sub .ysp-meta {
    flex: 0 0 auto; /* prevent stretching */
  }
}

@media (max-width: 768px) {
  /* First row: 4 items in one row */
  .ysp-band-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
    text-align: center;
    align-items: center;
  }

  .ysp-band-top .ysp-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Second row: 3 items in one row */
  .ysp-band-sub {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    align-items: center;
  }

  .ysp-band-sub .ysp-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .ysp-band-top .ysp-meta-value,
  .ysp-band-sub .ysp-meta-value {
    font-size: 12px;       /* smaller text for mobile */
    white-space: nowrap;   /* prevent line break */
  }

  .ysp-band-top .ysp-meta-label,
  .ysp-band-sub .ysp-meta-label {
    font-size: 11px;       /* slightly smaller labels */
  }
}
@media (max-width: 768px) {
  .ysp-band-sub {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    text-align: center;
    align-items: center;
    gap: 0; /* remove extra gaps */
  }

  .ysp-band-sub .ysp-meta {
    margin: 0; /* reset any margin */
    padding: 0; /* reset any padding */
  }
}

/* ✅ Center top metric values (High / Low / Market Cap / Shares) */
.ysp-band-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;     /* centers text inside each grid cell */
  align-items: center;    /* centers vertically */
  justify-items: center;  /* ensures the content of each cell is centered */
}

.ysp-band-top .ysp-meta {
  display: flex;
  flex-direction: column;
  align-items: center;    /* centers label + value together */
  justify-content: center;
}