/* ==========================================================================
   Base and Common Styles (these might be overridden by specific type styles)
   ========================================================================== */

.gpd-price {
    letter-spacing: 0px; 
}

/* Base styles for the asset name */
.asset-name {
    font-weight: 900;
    flex: 1; 
}

.asset-name p {
    margin:0 !important;
}

/* Styles for the container holding price and change - common properties */
.gpd-container {
    padding: unset;
    border: none;
    font-size: 12px;
}

.gpd-display-heatmap .gpd-container {
    display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}


.price-div {
    display:flex;
    direction: rtl; /* Right-to-left for overall layout */
    font-family: "Vazirmatn"; /* Custom font */
    margin: auto;
    width: 100%;
    font-size: 12px;
}

/* Price change indicators */
.gpd-change {
    padding: 4px 0 0;
    direction: ltr; /* Left-to-right for numerical change */
    font-size: 10px;
}

.gpd-change.gpd-positive {
    color: var(--green-600); /* Example green color variable */
}

.gpd-change.gpd-negative {
    color: var(--red-400); /* Example red color variable */
}

.gpd-change.gpd-neutral {
    color: #434546; /* Neutral grey color */
}

/* Ensures background is transparent for all change types */
.gpd-positive, .gpd-negative, .gpd-neutral {
    background-color: unset !important;
}


/* ==========================================================================
   Sidebar Display Type Specific Styles (gpd-display-sidebar)
   ========================================================================== */

/* Main wrapper for the sidebar price item */
.gpd-display-sidebar {
    border-radius: 4px;
    margin-bottom: 8px;
    display: flex;
    border: 2px solid var(--bg-950); /* Example border color variable */
    padding-inline: 6px;
    border-radius: 12px;
}

/* Hover effect for the sidebar item */
.gpd-display-sidebar:hover {
    border: 2px solid var(--primary-700); /* Example primary color variable */
}

/* Adjustments for the inner price-div for sidebar layout */
.gpd-display-sidebar .price-div {
    flex-direction: row; 
    align-items: flex-start;
    justify-content: space-between;
}

/* Specific styling for asset name in sidebar for potential multi-line display */
.gpd-display-sidebar .asset-name {
    display: flex;
    flex-direction: column;
    color: var(--bg-50); /* Ensure correct color */
    font-size: 1em; /* Override potential external 1.1em */
}

/* Styling for the link wrapped around the asset name */
.gpd-display-sidebar .asset-name-link {
    color: inherit; 
    text-decoration: none; 
    white-space: nowrap; 
}

/* Underline link on hover */
.gpd-display-sidebar .asset-name-link:hover {
    text-decoration: underline;
}

/* Sidebar specific .gpd-price styles */
.gpd-display-sidebar .gpd-price {
    color: var(--bg-300); /* Default price color for sidebar */
    font-size: 1em !important; /* Force desired font size to override external 1.1em */
    font-weight: normal !important; /* Force desired font weight to counteract external 'bold' */
    letter-spacing: 0px !important; /* Retain important letter spacing */
}

/* Adjust sidebar price color when change is positive */
.gpd-display-sidebar .gpd-positive .gpd-price {
    color: var(--green-500) !important; /* Slightly brighter green for price text when positive */
}


/* Specific styling for the gpd-container in sidebar to override external `inline-flex` etc. */
.gpd-display-sidebar .gpd-container {
    display: flex; /* Override inline-flex */
    flex-direction: column; /* Ensure column layout */
    justify-content: space-between;
    margin: auto;
    gap: 0;
    align-items: flex-end; /* Align price and change to the right */
    padding: unset !important; /* Remove external padding */
    border: none !important; /* Remove external border */
    border-radius: 0 !important; /* Remove external border-radius */
}


/* ==========================================================================
   Heatmap Display Type Specific Styles (gpd-display-heatmap)
   ========================================================================== */

/* Main wrapper (which is also the link) for the heatmap price item */
.gpd-display-heatmap {
    padding: 0;
    overflow: hidden;
    border: 0;
    display: flex;
    margin: 0;
    text-decoration: none; /* Remove underline from the link */
    color: inherit; /* Ensure text colors are inherited or explicitly set */
}

/* Styles for the price-div within the heatmap item */
.gpd-display-heatmap .price-div {
    transition: 0.3s ease; /* Smooth transition for background/border changes */
    flex-direction: column; /* Vertical layout */
    align-items: center;
    justify-content: space-between;
    gap: 0.5em; /* Spacing between elements */
}

/* Background and border styles for negative change in heatmap */
.gpd-display-heatmap .price-div.gpd-negative {
    padding: 16px;
    background-color: var(--red-950) !important; /* Dark red background */
    border: 2px solid var(--red-800); /* Red border */
    border-radius: 12px;
}

/* Background and border styles for neutral change in heatmap */
.gpd-display-heatmap .price-div.gpd-neutral {
    padding: 16px;
    background-color: #13141a !important; /* Dark background */
    border: 2px solid var(--bg-800); /* Grey border */
    border-radius: 12px;
}


.gpd-display-heatmap .price-div.gpd-positive {
    padding: 16px;
    background-color: var(--green-950) !important; 
    border: 2px solid var(--green-800); 
    border-radius: 12px;
}


.gpd-display-heatmap:hover .price-div.gpd-neutral {
    background-color: var(--bg-900) !important;
    border: 2px solid var(--bg-700);
}


.gpd-display-heatmap:hover .price-div.gpd-negative {
    background-color: var(--red-900) !important;
    border: 2px solid var(--red-600);
}


.gpd-display-heatmap:hover .price-div.gpd-positive {
    background-color: var(--green-900) !important;
    border: 2px solid var(--green-700);
}


.gpd-display-heatmap .gpd-positive .asset-name span,
.gpd-display-heatmap .gpd-positive .gpd-price {
    color: var(--green-500);
}


.gpd-display-heatmap .gpd-neutral .asset-name span,
.gpd-display-heatmap .gpd-neutral .gpd-price {
    color: var(--bg-400);
}


.gpd-display-heatmap .gpd-negative .asset-name span,
.gpd-display-heatmap .gpd-negative .gpd-price {
    color: var(--red-500);
}


.gpd-display-heatmap .asset-name {
    margin: 0.5em;
    font-size: 1.21em;
    color: var(--bg-300);
    text-decoration: none; 
}

.gpd-display-heatmap .asset-name:hover {
    text-decoration: none;
}



.gpd-display-heatmap .price-div .asset-ico {
    aspect-ratio: 1 / 1;
    height: 60px;
    background: var(--bg-800);
    background: linear-gradient(135deg, var(--bg-700), var(--bg-850));
    margin: auto;
    padding: 6px;
    margin-bottom: 0.5em;
    border-radius: 8px;
}


.gpd-display-heatmap .asset-ico svg {
    width: 100%;
    height: 100%;
    margin: auto;
    fill: var(--primary-600); 
}

/* ==========================================================================
   Global Grid Layout (for multiple heatmap items, if needed)
   ========================================================================== */


.goldika-heatmap-grid {
    display: grid;
    justify-items: stretch;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}