/*Global Css*/
.cw-overview-box, .cw-prognose-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0px;
}
.cw-overview-block, .cw-prognose-block  {
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid #ededf1;
  padding: 15px;
  min-width: 250px;
}
.cw-overview-box .cw-overview-block .cw-title {
  padding: 0;
  margin: 0 0 9px;
  font-size: 18px;
  line-height: 30px;
  color: #2a2a2a;
  font-weight: 700;
}
.cw-overview-box .cw-overview-block .cw-normal-text {
  margin-bottom: 5px !important;
  font-size: 14px !important;
  display: flex;
  justify-content: space-between;
}
.cw-overview-box .c-graph{
    padding: 0 15px;
}
.cw-overview-block.fear_and_greed_index div.text-info{
  text-align: center;
  color: #2a2a2a !important;
  font-size: 16px;
} 
.cw-overview-block.fear_and_greed_index div.text-info span{
  font-weight: bold;
}

.cw-overview-block, .cw-prognose-block {
    position: relative; /* required for overlay */
    min-height: 60px;   /* prevent collapse */
}

.section-loader {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.section-loader .spinner {
    width: 28px;
    height: 28px;
    border: 4px solid #ccc;
    border-top-color: var(--cryptokit-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
.cw-overview-box .cw-overview-block .cw-normal-text span {
  text-align: right;
}
.cw-overview-box .cw-overview-block .cw-normal-text span.minus {
  color: #e02929;
}
.cw-overview-box .cw-overview-block .cw-normal-text span.plus {
  color: #0b6038;
}
.overview-crypto {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 15px 15px 0;
}
.overview-crypto .c-logo {
  width: 34px;
  height: 34px;
}
/*Price chart*/
.cw-overview-box .cw-overview-block h3.c-name {
  margin: 0;
  font-size: 18px;
}
#single-wrapper .cw-overview-box .overview-crypto p {
  margin: 0;
}
.cw-overview-block.price_chart {
  padding: 0;
}
/* g.apexcharts-inner.apexcharts-graphical {
  transform: translate(16px, 20px);
} */
#chart .apexcharts-toolbar {
  display: none;
}
.apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom.apexcharts-theme-light {
  display: none;
}
span.apexcharts-tooltip-marker {
  display: none;
}
.cw-overview-box .apexcharts-tooltip-series-group.apexcharts-active,
.apexcharts-tooltip-series-group:last-child {
  padding: 0 10px;
}
.apexcharts-tooltip-y-group span.apexcharts-tooltip-text-y-value {
  margin: 0;
}
@media (max-width: 1180px) {
  .cw-overview-box, .cw-prognose-box {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .cw-overview-box, .cw-prognose-box {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* Market Sentiment */
.market_sentiment .gauge-container {
    position: relative;
    width: 95%;
    max-width: 300px;
    margin: 0 auto;
    padding-bottom: 75%;
}
.market_sentiment .gauge-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.market_sentiment .gauge-value {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.market_sentiment .gauge-percent {
    font-size: 24px;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1;
}
.market_sentiment .gauge-label {
    font-size: 16px;
    color: #444444;
    margin-top: 5px;
}

/* ========== CSS Variables ========== */
:root {
    --color-primary: #1a1a1a;
    --color-gray: #666d80;
    --color-gray-light: #999;
    --color-gray-dark: #53585c;
    --color-red: #e02929;
    --color-green: #0b6038;
    --color-neutral-bg: rgba(102, 109, 128, 0.1);
    --color-green-bg: rgba(11, 96, 56, 0.1);
    --color-red-bg: rgba(224, 41, 41, 0.1);
    
    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 13px;
    --font-base: 14px;
    --font-lg: 15px;
    --font-xl: 16px;
    --font-2xl: 18px;
    --font-3xl: 20px;
    --font-4xl: 27px;
    --font-5xl: 36px;
    
    --weight-normal: 600;
    --weight-bold: 700;
    
    --gap-sm: 12px;
    --gap-lg: 20px;
}

/* ========== Base & Reusable ========== */
.cw-prognose-block .cc-title {font-size: var(--font-lg); font-weight: var(--weight-normal); color: var(--color-primary);}
.t-red,.status-negative,.p_fear_and_greed_index .fg-fear .fg-value, .p_fear_and_greed_index .fg-fear .fg-sentiment, .performance-minus,.p_fear_and_greed_index .fg-fear .fg-value, .p_fear_and_greed_index .fg-fear .fg-sentiment {color: var(--color-red);}
.t-green,.status-positive, .p_fear_and_greed_index .fg-greed .fg-value, .p_fear_and_greed_index .fg-greed .fg-sentiment,.performance-plus,.p_fear_and_greed_index .fg-greed .fg-value, .p_fear_and_greed_index .fg-greed .fg-sentiment {color: var(--color-green);}
.ath-change.plus::before,.trend-arrow.up::before{content: url('data:image/svg+xml;utf8,<svg%20width="16"%20height="16"%20viewBox="0%200%2024%2024"%20fill="none"%20xmlns="http://www.w3.org/2000/svg"><path%20d="M12%204V20M12%204L8%208M12%204L16%208"%20stroke="%230b6038"%20stroke-width="3"%20stroke-linecap="round"%20stroke-linejoin="round"/></svg>');}
.ath-change.minus::before, .trend-arrow.down::before{content: url('data:image/svg+xml;utf8,<svg%20width="16"%20height="16"%20viewBox="0%200%2024%2024"%20fill="none"%20xmlns="http://www.w3.org/2000/svg"><path%20d="M12%204V20M12%2020L8%2016M12%2020L16%2016"%20stroke="%23e02929"%20stroke-width="3"%20stroke-linecap="round"%20stroke-linejoin="round"/></svg>');}

/* ========== Current Price ========== */
.cw-prognose-block.current_price .cp-header {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;}
.cw-prognose-block.current_price .cp-price {font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--color-gray-dark);}
.cw-prognose-block.current_price .cp-chart {height: 100px;}
.cw-prognose-block.current_price #c-chart {width: 100%; height: 100%;}

/* ========== All-Time High ========== */
.cw-prognose-block.all_time_high .ath-box {display: flex; flex-direction: column; gap: var(--gap-lg);}
.cw-prognose-block.all_time_high .ath-header {display: flex; justify-content: space-between; align-items: center;}
.cw-prognose-block .ath-date {font-size: var(--font-base); color: var(--color-gray); font-weight: var(--weight-normal);}
.cw-prognose-block.all_time_high .ath-content {display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.cw-prognose-block .ath-price {font-size: var(--font-4xl); font-weight: var(--weight-bold); color: var(--color-primary);}
.cw-prognose-block .ath-change {position: relative; padding-left: 20px; font-size: var(--font-xl); font-weight: 500; display: flex; align-items: center;}
.cw-prognose-block .ath-change::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%); line-height: inherit; height: 18px; width: 15px;}
.cw-prognose-block .ath-change.plus {color: var(--color-green);}
.cw-prognose-block .ath-change.minus {color: var(--color-red);}

/* ========== Price Trend ========== */
.cw-prognose-block.price_trend .price-trend-box {display: flex; justify-content: space-between; flex-direction: column;}
.cw-prognose-block.price_trend .pt-header {display: flex; justify-content: space-between;}
.cw-prognose-block.price_trend .pt-trend-info {display: flex; align-items: center; gap: 6px;}
.cw-prognose-block.price_trend .trend-text {font-size: var(--font-base); font-weight: var(--weight-normal);}
.cw-prognose-block.price_trend .trend-arrow {position: relative; display: inline-block; width: 16px; height: 16px;}
.cw-prognose-block.price_trend .pt-content {display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; justify-content: center; margin-top: 16px;}
.cw-prognose-block.price_trend .trend-grid {display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 5px;}
.cw-prognose-block .trend-block {width: 17px; height: 9px; border-radius: 4px; background: #dcdcdc;}
.cw-prognose-block .trend-block.red {background: var(--color-red);}
.cw-prognose-block .trend-block.green {background: var(--color-green);}
.cw-prognose-block .trend-block.gray {background: #dcdcdc;}
.cw-prognose-block.price_trend .trend-count {font-size: var(--font-sm); color: var(--color-gray); text-align: right;}
.cw-prognose-block.price_trend .day-count {font-weight: var(--weight-normal);}

/* ========== Gauge Widgets ========== */
.cw-prognose-block .gauge-box {display: flex; flex-direction: column; gap: var(--gap-sm);}
.cw-prognose-block .gauge-header {display: flex; justify-content: space-between; align-items: center;}
.cw-prognose-block .gauge-value {font-size: var(--font-base); color: var(--color-gray); font-weight: var(--weight-normal);}
.cw-prognose-block .gauge-status {font-size: var(--font-3xl); font-weight: var(--weight-bold); transition: color 0.6s ease-out; text-align: center;}
.cw-prognose-block .gauge-status.status-neutral {color: var(--color-gray);}
.cw-prognose-block .gauge-meter {position: relative; height: 6px; border-radius: 4px; overflow: visible; margin: 10px 0;}
.cw-prognose-block .gauge-bar {width: 100%; height: 100%; border-radius: 4px; overflow: hidden;}
.cw-prognose-block .gauge-bar-np {background: linear-gradient(90deg, #ef4444 0%, #94a3b8 50%, #22c55e 100%);}
.cw-prognose-block .gauge-bar-pn {background: linear-gradient(90deg, #22c55e 0%, #94a3b8 50%, #ef4444 100%);}
.cw-prognose-block .gauge-indicator {position: absolute; top: -8px; left: 0%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--color-primary); transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1;}
.cw-prognose-block .gauge-indicator::before {content: '';}
.cw-prognose-block .gauge-labels {display: flex; justify-content: space-between; font-size: var(--font-sm); color: var(--color-gray);}

/* ========== Volume/Market Cap Ratio ========== */
.cw-prognose-block.volume_market_capitalization_ratio .vmcr-box {display: flex; flex-direction: column; gap: var(--gap-lg);}
.cw-prognose-block.volume_market_capitalization_ratio .vmcr-header {display: flex; align-items: center;}
.cw-prognose-block.volume_market_capitalization_ratio .vmcr-content {display: flex; justify-content: center; align-items: center; padding: 8px; border-radius: 8px; transition: background-color 0.3s ease; flex-direction: column;}
.cw-prognose-block .vmc-text {font-size: var(--font-md); font-weight: var(--weight-normal); color: #666; transition: color 0.3s ease;}
.cw-prognose-block .vmc-percent {font-size: var(--font-5xl); font-weight: var(--weight-bold); color: var(--color-primary); transition: color 0.3s ease;}
.cw-prognose-block .vmcr-content.status-healthy .vmc-text, .cw-prognose-block .vmcr-content.status-healthy .vmc-percent {color: var(--color-green);}
.cw-prognose-block .vmcr-content.status-acceptable .vmc-text, .cw-prognose-block .vmcr-content.status-acceptable .vmc-percent {color: var(--color-gray);}
.cw-prognose-block .vmcr-content.status-unhealthy .vmc-text, .cw-prognose-block .vmcr-content.status-unhealthy .vmc-percent {color: var(--color-red);}
.cw-prognose-block .percentage-symbol {font-size: var(--font-4xl); font-weight: 400;}

/* ========== Fear & Greed Index ========== */
.p_fear_and_greed_index .p-fear-greed-index-box {display: flex; flex-direction: column; gap: var(--gap-lg);}
.p_fear_and_greed_index .fg-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0;}
.p_fear_and_greed_index .fg-date {font-size: var(--font-base); color: var(--color-gray); font-weight: var(--weight-normal);}
.p_fear_and_greed_index .fg-center-value { text-align: center;background: #fff;padding: 10px 15px;border-radius: 8px;box-shadow: 0 1px 8px 2px rgba(0, 0, 0, 0.1);display: inline-flex;gap: 5px;align-items: center;justify-content: center;width: fit-content;margin-left: auto;margin-right: auto;}
.p_fear_and_greed_index .fg-value {font-size: 24px; font-weight: var(--weight-bold); line-height: 1; margin-bottom: 0;}
.p_fear_and_greed_index .fg-sentiment {font-size: var(--font-base); white-space: nowrap; font-weight: var(--weight-normal); text-transform: uppercase; letter-spacing: 0.5px;}
.p_fear_and_greed_index .fg-neutral .fg-value, .p_fear_and_greed_index .fg-neutral .fg-sentiment {color: #94a3b8;}
.p_fear_and_greed_index .fg-gauge-container {position: relative;height: 6px;border-radius: 4px;overflow: visible;margin: 10px 0;}
.p_fear_and_greed_index .fg-gauge-bg {position: absolute; top: 0; width: 100%; height: 100%; border-radius: 16px; background: linear-gradient(90deg, #ef4444 0%, #94a3b8 50%, #22c55e 100%); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);}
.p_fear_and_greed_index .fg-gauge-labels {position: absolute; top: 10px; width: 100%; display: flex; justify-content: space-between; font-size: var(--font-xs); font-weight: var(--weight-normal); color: var(--color-gray-light); padding: 0 8px;}
.p_fear_and_greed_index .fg-indicator-wrapper {position: absolute; top: 0; width: 100%; height: 32px; pointer-events: none;}
.p_fear_and_greed_index .fg-indicator {position: absolute; top: -8px; left: 0; width: 3px; height: 48px; transform: translateX(-50%); transition: left 1.5s cubic-bezier(0.4, 0, 0.2, 1);}
.p_fear_and_greed_index .fg-indicator::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid var(--color-primary);}
.p_fear_and_greed_index .fg-indicator-dot {position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: var(--color-primary); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); animation: fg-pulse 2s infinite;}
@keyframes fg-pulse {0%, 100% {box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);} 50% {box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);}}
.p_fear_and_greed_index .fg-error {padding: 16px; text-align: center; color: #ea4335; font-size: var(--font-md);}

/* ========== Performance vs Ethereum ========== */
.cw-prognose-block.performance_vs_ethereum .performance-box {display: flex; flex-direction: column; gap: var(--gap-lg);}
.cw-prognose-block.performance_vs_ethereum .performance-header {display: flex; align-items: center;}
.cw-prognose-block .vs-coin {font-weight: var(--weight-normal);}
.cw-prognose-block.performance_vs_ethereum .performance-content {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.cw-prognose-block .performance-percent {font-size: var(--font-5xl); font-weight: var(--weight-bold);}
.cw-prognose-block .performance-percent.negative {color: var(--color-red);}
.cw-prognose-block .performance-text {font-size: var(--font-md); color: #666; margin: 0; font-weight: var(--weight-normal);}

/* ========== Responsive ========== */
@media (max-width: 768px) {
    .cw-prognose-block .cc-title {font-size: var(--font-base);}
    .cw-prognose-block.current_price .cp-price {font-size: var(--font-xl);}
    .cw-prognose-block .ath-price {font-size: var(--font-2xl);}
}