/* =============================================================
   Lyuboshchi Price History — brand-aligned chart block
   Mobile-first, premium card aesthetic, GothamPro inherited.
   ============================================================= */

.lyub-ph {
  --lyub-ph-grad:        linear-gradient(135deg, #f2053c 0%, #cb003d 100%);
  --lyub-ph-grad-soft:   linear-gradient(135deg, #ff5078 0%, #f2053c 100%);
  --lyub-ph-red:         #f2053c;
  --lyub-ph-red-dark:    #cb003d;
  --lyub-ph-pink:        #ff5078;
  --lyub-ph-dark:        #101010;
  --lyub-ph-dark-2:      #1f2230;
  --lyub-ph-card:        #ffffff;
  --lyub-ph-bg:          #fafafa;
  --lyub-ph-bg-soft:     #f6f6fb;
  --lyub-ph-text:        #1a1a2e;
  --lyub-ph-text-2:      #374151;
  --lyub-ph-muted:       #6b7280;
  --lyub-ph-border:      #ebebf0;
  --lyub-ph-border-2:    #e5e7eb;
  --lyub-ph-success:     #16a34a;
  --lyub-ph-success-bg:  rgba(22,163,74,.08);
  --lyub-ph-danger-bg:   rgba(242,5,60,.08);
  --lyub-ph-radius:      18px;
  --lyub-ph-radius-sm:   12px;
  --lyub-ph-radius-xs:   8px;
  --lyub-ph-shadow:      0 1px 2px rgba(16,16,16,.04), 0 12px 32px rgba(16,16,16,.06);
  --lyub-ph-shadow-glow: 0 6px 24px rgba(242,5,60,.18);
  --lyub-ph-ease:        cubic-bezier(.4,0,.2,1);

  display: block;
  width: 100%;
  margin: 22px 0 24px;
  font-family: 'GothamPro', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--lyub-ph-text);
  box-sizing: border-box;
}
.lyub-ph *,
.lyub-ph *::before,
.lyub-ph *::after { box-sizing: border-box; }

/* outer shell — premium card with subtle gradient border */
.lyub-ph__shell {
  position: relative;
  background: var(--lyub-ph-card);
  border-radius: var(--lyub-ph-radius);
  box-shadow: var(--lyub-ph-shadow);
  padding: 22px 22px 18px;
  overflow: hidden;
  isolation: isolate;
}
.lyub-ph__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(242,5,60,.22) 0%, rgba(242,5,60,0) 35%, rgba(242,5,60,0) 65%, rgba(242,5,60,.18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* atmospheric red glow in the corner */
.lyub-ph__shell::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -90px;
  top: -90px;
  background: radial-gradient(closest-side, rgba(242,5,60,.18), rgba(242,5,60,0));
  pointer-events: none;
  z-index: 0;
}

.lyub-ph__shell > * { position: relative; z-index: 1; }

/* ---------- HEAD ---------- */
.lyub-ph__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.lyub-ph__head-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lyub-ph-grad);
  color: #fff;
  border-radius: 14px;
  box-shadow: var(--lyub-ph-shadow-glow);
}
.lyub-ph__head-text { flex: 1 1 auto; min-width: 0; }
.lyub-ph__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--lyub-ph-text);
}
.lyub-ph__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--lyub-ph-muted);
  line-height: 1.4;
}

/* ---------- Variation ---------- */
.lyub-ph__variation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lyub-ph__variation-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--lyub-ph-text-2);
}
.lyub-ph__select-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
}
.lyub-ph__select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--lyub-ph-bg-soft);
  border: 1px solid var(--lyub-ph-border);
  border-radius: var(--lyub-ph-radius-sm);
  padding: 11px 38px 11px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--lyub-ph-text);
  cursor: pointer;
  transition: border-color .2s var(--lyub-ph-ease), box-shadow .2s var(--lyub-ph-ease);
}
.lyub-ph__select:hover { border-color: #d6d6df; }
.lyub-ph__select:focus-visible {
  outline: none;
  border-color: var(--lyub-ph-red);
  box-shadow: 0 0 0 3px rgba(242,5,60,.14);
}
.lyub-ph__select-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lyub-ph-muted);
  pointer-events: none;
}

/* ---------- STATS ---------- */
.lyub-ph__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.lyub-ph__stat {
  position: relative;
  background: var(--lyub-ph-bg-soft);
  border-radius: var(--lyub-ph-radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform .2s var(--lyub-ph-ease), border-color .2s var(--lyub-ph-ease);
}
.lyub-ph__stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--lyub-ph-border-2);
  transition: background .2s var(--lyub-ph-ease);
}
.lyub-ph__stat--current::before { background: var(--lyub-ph-grad); }
.lyub-ph__stat--min::before     { background: #94a3b8; }
.lyub-ph__stat--max::before     { background: var(--lyub-ph-text-2); }

.lyub-ph__stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lyub-ph-muted);
}
.lyub-ph__stat-value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lyub-ph-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lyub-ph__stat--current .lyub-ph__stat-value {
  background: var(--lyub-ph-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lyub-ph__stat--delta { transition: background .2s var(--lyub-ph-ease); }
.lyub-ph__stat--delta::before { background: var(--lyub-ph-border-2); }
.lyub-ph__stat--delta.is-up {
  background: var(--lyub-ph-danger-bg);
}
.lyub-ph__stat--delta.is-up::before { background: var(--lyub-ph-red); }
.lyub-ph__stat--delta.is-up .lyub-ph__stat-value { color: var(--lyub-ph-red); }
.lyub-ph__stat--delta.is-down {
  background: var(--lyub-ph-success-bg);
}
.lyub-ph__stat--delta.is-down::before { background: var(--lyub-ph-success); }
.lyub-ph__stat--delta.is-down .lyub-ph__stat-value { color: var(--lyub-ph-success); }
.lyub-ph__stat--delta.is-flat .lyub-ph__stat-value { color: var(--lyub-ph-text-2); }

/* ---------- RANGE chips ---------- */
.lyub-ph__ranges {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lyub-ph__ranges::-webkit-scrollbar { display: none; }
.lyub-ph__range {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--lyub-ph-border);
  background: transparent;
  color: var(--lyub-ph-text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: border-color .18s var(--lyub-ph-ease), color .18s var(--lyub-ph-ease), background .18s var(--lyub-ph-ease), box-shadow .25s var(--lyub-ph-ease), transform .18s var(--lyub-ph-ease);
}
.lyub-ph__range:hover {
  border-color: #d4d4dc;
  color: var(--lyub-ph-text);
}
.lyub-ph__range:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(242,5,60,.18);
}
.lyub-ph__range.is-active {
  background: var(--lyub-ph-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--lyub-ph-shadow-glow);
}
.lyub-ph__range.is-active:hover { color: #fff; }

/* ---------- CHART ---------- */
.lyub-ph__chart {
  position: relative;
  margin: 0 0 14px;
  background: linear-gradient(180deg, #fff 0%, var(--lyub-ph-bg-soft) 100%);
  border-radius: var(--lyub-ph-radius-sm);
  border: 1px solid var(--lyub-ph-border);
  overflow: hidden;
}
.lyub-ph__chart-inner {
  position: relative;
  min-height: 240px;
  height: 280px;
  padding: 8px 4px 4px;
}

.lyub-ph__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Grid / axis */
.lyub-ph__grid-line {
  stroke: #eef0f4;
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
.lyub-ph__axis {
  stroke: #e2e5ec;
  stroke-width: 1;
}
.lyub-ph__y-label,
.lyub-ph__x-label {
  font-family: 'GothamPro', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  fill: var(--lyub-ph-muted);
  letter-spacing: 0;
}

/* Line and area */
.lyub-ph__line {
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 6px rgba(242,5,60,.22));
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 1s var(--lyub-ph-ease);
}
.lyub-ph__svg.is-ready .lyub-ph__line {
  stroke-dashoffset: 0;
}
.lyub-ph__area {
  opacity: 0;
  transition: opacity .5s var(--lyub-ph-ease) .35s;
}
.lyub-ph__svg.is-ready .lyub-ph__area { opacity: 1; }

/* Markers (min / max) */
.lyub-ph__marker {
  opacity: 0;
  transition: opacity .35s var(--lyub-ph-ease) .85s;
}
.lyub-ph__svg.is-ready .lyub-ph__marker { opacity: 1; }
.lyub-ph__marker-dot {
  fill: #fff;
  stroke-width: 2.4;
}
.lyub-ph__marker--max .lyub-ph__marker-dot { stroke: var(--lyub-ph-text); }
.lyub-ph__marker--min .lyub-ph__marker-dot { stroke: #94a3b8; }
.lyub-ph__marker-label {
  font-family: 'GothamPro', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lyub-ph__marker--max .lyub-ph__marker-label { fill: var(--lyub-ph-text); }
.lyub-ph__marker--min .lyub-ph__marker-label { fill: #6b7280; }

/* Pulse on last point */
.lyub-ph__pulse-wrap { opacity: 0; transition: opacity .3s var(--lyub-ph-ease) .9s; }
.lyub-ph__svg.is-ready .lyub-ph__pulse-wrap { opacity: 1; }
.lyub-ph__pulse {
  fill: var(--lyub-ph-red);
  opacity: 0.4;
  transform-origin: center;
  transform-box: fill-box;
  animation: lyub-ph-pulse 2.2s var(--lyub-ph-ease) infinite;
}
.lyub-ph__last-dot {
  fill: #fff;
  stroke: var(--lyub-ph-red);
  stroke-width: 2.4;
}
@keyframes lyub-ph-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.8); opacity: 0; }
}

/* Hover guide */
.lyub-ph__hover-line {
  stroke: var(--lyub-ph-red);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.5;
}
.lyub-ph__hover-dot {
  fill: var(--lyub-ph-red);
}
.lyub-ph__hover-dot-outer {
  fill: rgba(242,5,60,0.22);
}

/* HTML tooltip */
.lyub-ph__tooltip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .14s var(--lyub-ph-ease), transform .14s var(--lyub-ph-ease);
  background: var(--lyub-ph-dark);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 6px 24px rgba(16,16,16,.28);
  z-index: 4;
  white-space: nowrap;
}
.lyub-ph__tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.lyub-ph__tooltip-date {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.lyub-ph__tooltip-price {
  font-size: 15px;
  font-weight: 700;
  background: var(--lyub-ph-grad-soft);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Loader */
.lyub-ph__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lyub-ph__loader-pulse {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,5,60,0.25) 0%, rgba(242,5,60,0) 70%);
  animation: lyub-ph-loader 1.4s var(--lyub-ph-ease) infinite;
}
.lyub-ph__loader-pulse::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: var(--lyub-ph-grad);
  box-shadow: var(--lyub-ph-shadow-glow);
}
@keyframes lyub-ph-loader {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.6; }
}

/* Empty state */
.lyub-ph__empty {
  margin: 8px 0 14px;
  padding: 28px 20px;
  border-radius: var(--lyub-ph-radius-sm);
  background: var(--lyub-ph-bg-soft);
  border: 1px dashed var(--lyub-ph-border);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lyub-ph__empty[hidden] { display: none !important; }
.lyub-ph__empty-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--lyub-ph-red);
  border: 1px solid var(--lyub-ph-border);
}
.lyub-ph__empty-text {
  margin: 0;
  max-width: 360px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lyub-ph-text-2);
}

/* Footer note */
.lyub-ph__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--lyub-ph-muted);
  letter-spacing: 0.02em;
  padding-top: 12px;
  border-top: 1px solid var(--lyub-ph-border);
}
.lyub-ph__foot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lyub-ph-grad);
  box-shadow: 0 0 0 3px rgba(242,5,60,0.14);
  animation: lyub-ph-dot 2.4s var(--lyub-ph-ease) infinite;
}
@keyframes lyub-ph-dot {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(242,5,60,0.14); }
  50%      { transform: scale(0.85); box-shadow: 0 0 0 5px rgba(242,5,60,0.04); }
}

/* ---------- TABLET breakpoint ---------- */
@media (max-width: 900px) {
  .lyub-ph__shell { padding: 20px 18px 16px; }
  .lyub-ph__title { font-size: 18px; }
  .lyub-ph__chart-inner { height: 250px; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
  .lyub-ph { margin: 16px 0 18px; }
  .lyub-ph__shell {
    padding: 16px 14px 14px;
    border-radius: 16px;
  }
  .lyub-ph__shell::after {
    width: 180px;
    height: 180px;
    right: -70px;
    top: -70px;
  }

  .lyub-ph__head { gap: 11px; margin-bottom: 14px; }
  .lyub-ph__head-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .lyub-ph__title { font-size: 16px; }
  .lyub-ph__subtitle { font-size: 12px; margin-top: 2px; }

  /* Stats: 2x2 grid on mobile */
  .lyub-ph__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }
  .lyub-ph__stat {
    padding: 10px 12px;
  }
  .lyub-ph__stat-label { font-size: 10px; }
  .lyub-ph__stat-value { font-size: 14px; }

  /* Ranges: edge-bleed scrollable strip */
  .lyub-ph__ranges {
    margin: 0 -14px 14px;
    padding: 0 14px 4px;
  }
  .lyub-ph__range {
    padding: 7px 12px;
    font-size: 12px;
  }

  .lyub-ph__chart {
    margin: 0 -14px 14px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .lyub-ph__chart-inner {
    height: 220px;
    padding: 6px 0 2px;
  }

  .lyub-ph__variation {
    margin-bottom: 14px;
  }
  .lyub-ph__select { font-size: 13px; padding: 10px 36px 10px 12px; }

  .lyub-ph__empty {
    margin: 4px -4px 12px;
    padding: 22px 16px;
  }
  .lyub-ph__empty-icon { width: 54px; height: 54px; }
  .lyub-ph__empty-text { font-size: 12.5px; }

  .lyub-ph__foot { font-size: 11px; gap: 6px; padding-top: 10px; }

  .lyub-ph__tooltip {
    font-size: 12px;
    padding: 7px 10px;
  }
  .lyub-ph__tooltip-price { font-size: 14px; }
}

/* ---------- VERY narrow (iPhone SE) ---------- */
@media (max-width: 360px) {
  .lyub-ph__stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .lyub-ph__chart-inner { height: 200px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lyub-ph__line { transition: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .lyub-ph__area { transition: none !important; opacity: 1 !important; }
  .lyub-ph__marker { transition: none !important; opacity: 1 !important; }
  .lyub-ph__pulse-wrap { transition: none !important; opacity: 1 !important; }
  .lyub-ph__pulse { animation: none !important; }
  .lyub-ph__foot-dot { animation: none !important; }
  .lyub-ph__loader-pulse { animation: none !important; }
}

/* ---------- Scoping safety against parent .lyu-tabs-wrap CSS ----------
   The plugin block lives inside .lyu-tabs-wrap which heavily resets list
   styling — we guarantee our own list-free layout works as intended. */
.lyu-tabs-wrap .lyub-ph .lyub-ph__ranges,
.lyu-tabs-wrap .lyub-ph .lyub-ph__stats {
  list-style: none !important;
}
.lyu-tabs-wrap .lyub-ph button {
  text-transform: none !important;
}