/* Responsive Styles for Live Gold Coin Prices Plugin */

/* Mobile Styles */
@media only screen and (max-width: 767px) {
    .lgcp-price-table-container {
        max-width: 100%;
        margin: 15px 0;
    }
    
    .price-card {
        padding: 15px;
        border-radius: 8px;
    }
    
    .price-row {
        padding: 8px 0;
        font-size: 13px;
        line-height: 18px;
    }
    
    .total-price-row {
        margin-top: 12px;
        padding-top: 12px;
        font-size: 15px;
        line-height: 22px;
    }
    
    .last-updated {
        font-size: 11px;
        line-height: 14px;
        margin-bottom: 12px;
    }
    
    
    /* Price table responsive styles */
    .lgcp-price-table {
        overflow-x: auto;
    }
    
    .lgcp-price-table table {
        min-width: 100%;
    }
    
    .lgcp-price-table th,
    .lgcp-price-table td {
        padding: 8px;
        font-size: 12px;
    }
    
    /* Single price display responsive styles */
    .lgcp-single-price {
        padding: 12px;
    }
    
    .lgcp-single-price .price-value {
        font-size: 18px;
    }
    
    .lgcp-single-price .price-label {
        font-size: 13px;
    }
    
    .lgcp-single-price .price-update-time {
        font-size: 10px;
    }
}

/* Tablet Styles */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .lgcp-price-table-container {
        max-width: 90%;
    }
    
    .price-card {
        padding: 20px;
    }
    
}

/* Fix for RTL direction in mobile */
@media only screen and (max-width: 767px) {
    .price-row {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Animation for price updates */
@keyframes priceUpdated {
    0% {
        background-color: rgba(255, 215, 0, 0.3);
    }
    50% {
        background-color: rgba(255, 215, 0, 0.6);
    }
    100% {
        background-color: transparent;
    }
}

.lgcp-updated {
    animation: priceUpdated 1s ease-in-out;
}