/* ============================================================
       Gold Design tokens & Styles
    ============================================================ */
    .eg-gold-block-wrapper {
        --gold-primary:   #C9A84C;
        --gold-secondary: #E2C27D;
        --gold-muted:     rgba(201,168,76,0.12);
        --gold-border:    rgba(201,168,76,0.22);
        --surface:        var(--bg-card);
        --surface-raised: #f9f8f6;
        --border-subtle:  rgba(0,0,0,0.055);
        --border-medium:  rgba(0,0,0,0.10);
        --text-primary:   #1a1917;
        --text-secondary: #6b6963;
        --text-tertiary:  #9e9c97;
        --radius-sm:  6px;
        --radius-md:  12px;
        --radius-lg:  18px;
        --radius-xl:  24px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        /* Default container styles */
    }

    .html-dark .eg-gold-block-wrapper,
    .dark-mode .eg-gold-block-wrapper {
        --surface:        #18181b;
        --surface-raised: #1f1f23;
        --border-subtle:  rgba(255,255,255,0.06);
        --border-medium:  rgba(255,255,255,0.11);
        --text-primary:   #f0efec;
        --text-secondary: #a09d97;
        --text-tertiary:  #6b6864;
        --gold-primary:   #D4A855;
        --gold-secondary: #E8C47E;
        --gold-muted:     rgba(212,168,85,0.10);
        --gold-border:    rgba(212,168,85,0.20);
    }
    .eg-gold-block-wrapper *, .eg-gold-block-wrapper *::before, .eg-gold-block-wrapper *::after {
        box-sizing: border-box;
    }
    .eg-gold-block-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 1rem;
        gap: 1rem;
    }
    .eg-gold-block-title {
        font-size: 1.35rem;
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.2;
        margin: 0;
    }
    .eg-gold-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        min-width: 0;
    }
    .eg-gold-card {
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        padding: 1rem 1rem 1rem;
        position: relative;
        overflow: hidden;
        transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
        cursor: default;
        min-width: 0;
    }
    .eg-gold-card:hover {
        border-color: var(--gold-border);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    }
    .html-dark .eg-gold-card:hover,
    .dark-mode .eg-gold-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    }
    .eg-gold-card::after {
        content: '';
        position: absolute;
        top: -40px; right: -40px;
        width: 110px; height: 110px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(201,168,76,0.13) 0%, transparent 70%);
        pointer-events: none;
    }
    .eg-gold-spark {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 36px;
        opacity: 0.08;
        pointer-events: none;
    }
    .eg-gold-karat {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 1.1rem;
    }
    .eg-gold-icon {
        width: 30px; height: 30px;
        background: var(--gold-muted);
        border: 1px solid var(--gold-border);
        border-radius: var(--radius-sm);
        display: flex; align-items: center; justify-content: center;
        font-size: 0.8rem;
        color: var(--gold-primary);
    }
    .eg-gold-karat-label {
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--text-primary);
    }
    .eg-gold-price-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: wrap;
        min-width: 0;
    }
    .eg-gold-price-container {
        min-width: 0;
    }
    .eg-gold-currency {
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--text-tertiary);
        letter-spacing: 0.06em;
        margin-bottom: 3px;
    }
    .eg-gold-price {
        font-size: 1.35rem;
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1;
        overflow-wrap: anywhere;
    }
    .eg-gold-change {
        display: inline-flex;
        align-items: center;
        gap: 0.22rem;
        font-size: 0.72rem;
        font-weight: 600;
        border-radius: var(--radius-sm);
        padding: 0.22rem 0.55rem;
        max-width: 100%;
        white-space: nowrap;
    }
    .eg-gold-change.up {
        background: rgba(34,197,94,0.09);
        color: var(--green-text);
        box-shadow: inset 0 0 0 1px rgba(34,197,94,0.18);
    }
    .eg-gold-change.down {
        background: rgba(220,53,69,0.09);
        color: #b52334;
        box-shadow: inset 0 0 0 1px rgba(220,53,69,0.18);
    }
    .html-dark .eg-gold-change.up,
    .dark-mode  .eg-gold-change.up  { color: var(--success); background: rgba(74,222,128,0.09); }
    .html-dark .eg-gold-change.down,
    .dark-mode  .eg-gold-change.down { color: var(--danger); background: rgba(248,113,113,0.09); }

    @media (max-width: 768px) {
        .eg-gold-block-wrapper .select2-container {
            max-width: 100% !important;
            min-width: 0 !important;
            width: 100% !important;
        }

        .eg-gold-price {
            font-size: 1rem;
        }

        .eg-gold-karat-label {
            font-size: .95rem;
        }

        .eg-gold-icon {
            width: 25px;
            height: 25px;
        }
    }

    @media (max-width: 576px) {
        .eg-gold-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 375px) {
        .eg-gold-grid {
            gap: 0.6rem;
        }

        .eg-gold-card {
            padding: 0.75rem;
        }

        .eg-gold-price {
            font-size: 0.9rem;
        }

        .eg-gold-karat-label {
            font-size: 0.85rem;
        }

        .eg-gold-icon {
            width: 22px;
            height: 22px;
            font-size: 0.7rem;
        }

        .eg-gold-block-title {
            font-size: 1.1rem;
        }
    }

    /* Currency-converter auxiliary displays — both blocks start hidden and
       are toggled by jQuery slideDown/slideUp in gold-prices-block when the
       user picks a non-USD currency. RTL-safe logical properties used. */
    .eg-gold-exchange-rate {
        display: none;
        font-size: 0.85rem;
        color: var(--text-secondary);
        text-align: end;
        padding-inline-start: 2px;
    }
    .eg-gold-exchange-rate span[dir="ltr"] {
        display: inline-block;
    }

    .eg-gold-usd-price {
        display: none;
        font-size: 0.75rem;
        color: var(--text-tertiary);
        margin-top: 2px;
        font-weight: 500;
    }