/* ================================================
   XRP Candle Chart — assets/chart.css
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Syne:wght@400;700;800&display=swap');

/* ── Variables ───────────────────────────────── */
.xrpc-wrap {
    --xrpc-bg:        #0d0f17;
    --xrpc-surface:   #13161f;
    --xrpc-border:    #1e2233;
    --xrpc-accent:    #00d4aa;
    --xrpc-accent2:   #5b8cff;
    --xrpc-up:        #26a69a;
    --xrpc-down:      #ef5350;
    --xrpc-text:      #c8cfe0;
    --xrpc-muted:     #545d78;
    --xrpc-radius:    12px;
    --xrpc-font-mono: 'IBM Plex Mono', monospace;
    --xrpc-font-ui:   'Syne', sans-serif;
}

.xrpc-wrap[data-theme="light"] {
    --xrpc-bg:      #f4f6fb;
    --xrpc-surface: #ffffff;
    --xrpc-border:  #dde2f0;
    --xrpc-text:    #1a1f35;
    --xrpc-muted:   #8890aa;
}

/* ── Contenedor principal ────────────────────── */
.xrpc-wrap {
    background:    var(--xrpc-bg);
    border:        1px solid var(--xrpc-border);
    border-radius: var(--xrpc-radius);
    overflow:      hidden;
    font-family:   var(--xrpc-font-ui);
    position:      relative;
    box-shadow:    0 8px 40px rgba(0,0,0,.45);
}

/* ── Header ──────────────────────────────────── */
.xrpc-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
    padding:         16px 20px 14px;
    background:      var(--xrpc-surface);
    border-bottom:   1px solid var(--xrpc-border);
}

.xrpc-title-block {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.xrpc-logo {
    font-size:  1.6rem;
    color:      var(--xrpc-accent);
    line-height: 1;
    text-shadow: 0 0 18px var(--xrpc-accent);
}

.xrpc-title {
    font-size:   1.1rem;
    font-weight: 800;
    color:       var(--xrpc-text);
    margin:      0;
    letter-spacing: .5px;
}

.xrpc-subtitle {
    font-size:  .7rem;
    color:      var(--xrpc-muted);
    font-family: var(--xrpc-font-mono);
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* ── Controls ────────────────────────────────── */
.xrpc-controls {
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
}

.xrpc-intervals {
    display: flex;
    gap:     4px;
}

.xrpc-btn {
    background:    transparent;
    border:        1px solid var(--xrpc-border);
    color:         var(--xrpc-muted);
    font-family:   var(--xrpc-font-mono);
    font-size:     .72rem;
    padding:       4px 10px;
    border-radius: 6px;
    cursor:        pointer;
    transition:    all .18s ease;
    letter-spacing: .5px;
}

.xrpc-btn:hover {
    color:         var(--xrpc-text);
    border-color:  var(--xrpc-accent2);
}

.xrpc-btn.active {
    background:    var(--xrpc-accent2);
    border-color:  var(--xrpc-accent2);
    color:         #fff;
    font-weight:   600;
    box-shadow:    0 0 14px rgba(91,140,255,.4);
}

/* ── Price display ───────────────────────────── */
.xrpc-price-display {
    display:     flex;
    align-items: baseline;
    gap:         8px;
}

.xrpc-price {
    font-family: var(--xrpc-font-mono);
    font-size:   1.4rem;
    font-weight: 600;
    color:       var(--xrpc-text);
    letter-spacing: -.5px;
}

.xrpc-change {
    font-family: var(--xrpc-font-mono);
    font-size:   .8rem;
    padding:     2px 7px;
    border-radius: 5px;
    font-weight: 600;
}

.xrpc-change.up   { background: rgba(38,166,154,.18); color: var(--xrpc-up);   }
.xrpc-change.down { background: rgba(239,83,80,.18);  color: var(--xrpc-down); }

/* ── OHLC bar ────────────────────────────────── */
.xrpc-ohlc-bar {
    display:     flex;
    gap:         18px;
    flex-wrap:   wrap;
    padding:     7px 20px;
    background:  var(--xrpc-bg);
    border-bottom: 1px solid var(--xrpc-border);
    font-family: var(--xrpc-font-mono);
    font-size:   .7rem;
    color:       var(--xrpc-muted);
}

.xrpc-ohlc-bar b { color: var(--xrpc-text); font-weight: 600; }

/* ── Chart container ─────────────────────────── */
.xrpc-chart-container {
    position: relative;
    width:    100%;
    overflow: hidden;
}

/* ── Loader ──────────────────────────────────── */
.xrpc-loader {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      var(--xrpc-bg);
    z-index:         10;
    gap:             14px;
    color:           var(--xrpc-muted);
    font-family:     var(--xrpc-font-mono);
    font-size:       .82rem;
    transition:      opacity .4s ease;
}

.xrpc-loader.hidden {
    opacity:        0;
    pointer-events: none;
    /* Eliminar del layout para que el chart sea clickeable */
    display:        none !important;
}

.xrpc-spinner {
    width:  36px;
    height: 36px;
    border: 3px solid var(--xrpc-border);
    border-top-color: var(--xrpc-accent);
    border-radius: 50%;
    animation: xrpc-spin .8s linear infinite;
}

@keyframes xrpc-spin {
    to { transform: rotate(360deg); }
}

/* ── Error state ─────────────────────────────── */
.xrpc-error {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      var(--xrpc-bg);
    color:           var(--xrpc-down);
    font-family:     var(--xrpc-font-mono);
    font-size:       .85rem;
    gap:             10px;
    text-align:      center;
    padding:         20px;
}

.xrpc-error-icon { font-size: 2rem; }

.xrpc-retry-btn {
    margin-top:    8px;
    background:    transparent;
    border:        1px solid var(--xrpc-down);
    color:         var(--xrpc-down);
    font-family:   var(--xrpc-font-mono);
    font-size:     .75rem;
    padding:       6px 16px;
    border-radius: 6px;
    cursor:        pointer;
    transition:    all .18s ease;
}

.xrpc-retry-btn:hover {
    background: var(--xrpc-down);
    color:      #fff;
}

/* ── Footer ──────────────────────────────────── */
.xrpc-footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         8px 20px;
    background:      var(--xrpc-surface);
    border-top:      1px solid var(--xrpc-border);
    font-family:     var(--xrpc-font-mono);
    font-size:       .65rem;
    color:           var(--xrpc-muted);
}

.xrpc-powered {
    color: var(--xrpc-border);
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 600px) {
    .xrpc-header     { padding: 12px; }
    .xrpc-price      { font-size: 1.1rem; }
    .xrpc-ohlc-bar   { gap: 10px; font-size: .65rem; }
    .xrpc-footer     { flex-direction: column; gap: 4px; text-align: center; }
}