/* QatarGoldLive Plugin Styles — supplemental to theme */

/* Karat switcher tabs */
.qgl-karat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}

.qgl-karat-tab {
    padding: 6px 16px;
    border-radius: 6px 6px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--bg-2);
    color: var(--text-2);
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.qgl-karat-tab.active,
.qgl-karat-tab:hover {
    background: var(--color-gold);
    color: var(--color-navy);
    border-color: var(--color-gold);
}

/* Hero card pulse on update */
.qgl-price-updated {
    animation: qglPriceFlash 0.5s ease;
}

@keyframes qglPriceFlash {
    0%   { background: rgba(212,175,55,0.25); }
    100% { background: transparent; }
}

/* Chart loading skeleton */
.qgl-chart-skeleton {
    background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
    background-size: 200% 100%;
    animation: qglSkeleton 1.5s infinite;
    border-radius: 8px;
    height: 280px;
}

@keyframes qglSkeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Table highlight on hover */
.price-table tr:hover td {
    background: rgba(212,175,55,0.05) !important;
}

/* Making charge slider */
input[type="range"] {
    -webkit-appearance: none;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-gold);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(212,175,55,0.4);
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-gold);
    cursor: pointer;
    border: none;
}

/* Print-specific price table */
@media print {
    .qgl-karat-tabs,
    .chart-controls,
    .share-actions,
    .btn-whatsapp,
    .btn-print { display: none !important; }

    .price-table { font-size: 9pt; page-break-inside: avoid; }
}

/* RTL adjustments for Arabic */
[dir="rtl"] .qgl-karat-tabs { flex-direction: row-reverse; }
[dir="rtl"] .calc-result { direction: ltr; }

/* Coin/bar table row highlight on best value */
.qgl-best-value td { background: rgba(34,197,94,0.06); }
.qgl-best-value td:first-child { color: var(--color-up); }