/* GoldPriceBD - components.css
   Modularized from the original global framework. */

/* =========================================================
   13. STATUS
   ========================================================= */

.status {
    display: inline-flex;

    align-items: center;

    gap:
        var(--space-2);

    padding:
        6px 10px;

    border-radius:
        var(--radius-pill);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-semibold);
}


.status-success {
    color:
        var(--color-success);

    background:
        var(--color-success-soft);
}


.status-danger {
    color:
        var(--color-danger);

    background:
        var(--color-danger-soft);
}


.status-warning {
    color:
        var(--color-warning);

    background:
        var(--color-warning-soft);
}


.status-info {
    color:
        var(--color-info);

    background:
        var(--color-info-soft);
}

/* =========================================================
   17. PRICE HIGHLIGHT
   ========================================================= */

.price-highlight {
    font-weight:
        var(--font-weight-bold);

    color:
        var(--color-primary);
}


.change-up {
    color:
        var(--color-success);

    font-weight:
        var(--font-weight-semibold);
}


.change-down {
    color:
        var(--color-danger);

    font-weight:
        var(--font-weight-semibold);
}

/* =========================================================
   19. FAQ
   ========================================================= */

.faq-list {
    display:
        grid;

    gap:
        var(--space-3);
}


.faq-item {
    background:
        var(--bg-surface);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-md);

    overflow:
        hidden;
}


.faq-question {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        var(--space-4);

    padding:
        var(--space-5);

    border: 0;

    background:
        transparent;

    color:
        var(--text-primary);

    text-align:
        left;

    font-weight:
        var(--font-weight-semibold);
}


.faq-answer {
    padding:
        0 var(--space-5) var(--space-5);

    color:
        var(--text-secondary);
}

/* =========================================================
   20. BREADCRUMB
   ========================================================= */

.breadcrumb {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        var(--space-2);

    margin-bottom:
        var(--space-5);

    font-size:
        var(--font-size-sm);

    color:
        var(--text-muted);
}


.breadcrumb a {
    color:
        var(--text-secondary);
}


.breadcrumb a:hover {
    color:
        var(--color-primary);
}


.breadcrumb-separator {
    color:
        var(--text-light);
}

/* =========================================================
   21. ALERT
   ========================================================= */

.alert {
    padding:
        var(--space-4);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-md);

    margin-bottom:
        var(--space-5);
}


.alert-success {
    color:
        var(--color-success);

    background:
        var(--color-success-soft);
}


.alert-warning {
    color:
        var(--color-warning);

    background:
        var(--color-warning-soft);
}


.alert-danger {
    color:
        var(--color-danger);

    background:
        var(--color-danger-soft);
}


.alert-info {
    color:
        var(--color-info);

    background:
        var(--color-info-soft);
}

/* =========================================================
   23. LOADING
   ========================================================= */

.loading {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        var(--space-2);

    color:
        var(--text-muted);
}


.loading-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius:
        50%;

    background:
        var(--color-primary);

    animation:
        loadingPulse 1s infinite ease-in-out;
}


@keyframes loadingPulse {

    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }
}

/* =========================================================
   24. EMPTY STATE
   ========================================================= */

.empty-state {
    padding:
        var(--space-9);

    text-align:
        center;

    color:
        var(--text-muted);

    background:
        var(--bg-muted);

    border:
        1px dashed var(--border-color-dark);

    border-radius:
        var(--radius-lg);
}

/* =========================================================
   25. ERROR STATE
   ========================================================= */

.error-state {
    padding:
        var(--space-6);

    text-align:
        center;

    color:
        var(--color-danger);

    background:
        var(--color-danger-soft);

    border:
        1px solid var(--color-danger);

    border-radius:
        var(--radius-lg);
}

/* =========================================================
   26. UTILITY CLASSES
   ========================================================= */

.text-center {
    text-align: center;
}


.text-left {
    text-align: left;
}


.text-right {
    text-align: right;
}


.text-primary {
    color:
        var(--text-primary);
}


.text-secondary {
    color:
        var(--text-secondary);
}


.text-muted {
    color:
        var(--text-muted);
}


.text-gold {
    color:
        var(--color-primary);
}


.fw-medium {
    font-weight:
        var(--font-weight-medium);
}


.fw-semibold {
    font-weight:
        var(--font-weight-semibold);
}


.fw-bold {
    font-weight:
        var(--font-weight-bold);
}


.hidden {
    display:
        none !important;
}


.w-full {
    width: 100%;
}


.mt-0 {
    margin-top: 0;
}


.mt-4 {
    margin-top:
        var(--space-4);
}


.mt-6 {
    margin-top:
        var(--space-6);
}


.mb-0 {
    margin-bottom: 0;
}


.mb-4 {
    margin-bottom:
        var(--space-4);
}


.mb-6 {
    margin-bottom:
        var(--space-6);
}

/* =========================================================
   27. DARK MODE TRANSITIONS
   ========================================================= */

.site-header,
.site-footer,
.card,
.price-card,
.tool-card,
.hero-card,
.table-wrapper,
.faq-item,
.form-control,
.result-box,
.icon-button,
.btn-secondary,
.comparison-wrapper,
.comparison-select,
.price-empty,
.price-error {
    transition:
        background-color var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}