/* MTN Share Header styling */
.mtn-share-header,
.shared-table-header-bar {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    color: white !important;
}

/* Status Badge Styles */
.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.status-completed {
    background-color: #d1fae5;
    color: #065f46;
}

.status-failed {
    background-color: #fee2e2;
    color: #991b1b;
}

.status-blocked {
    background-color: #fecaca;
    color: #7f1d1d;
}

.btn-complete {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border: none;
    color: white;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

.btn-complete:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile responsive styles for header buttons */
@media (max-width: 768px) {
    .d-flex.flex-wrap.gap-2.col-lg-9 {
        flex-direction: column;
        align-items: stretch;
    }

    .d-flex.flex-wrap.gap-2.col-lg-9 > .btn,
    .d-flex.flex-wrap.gap-2.col-lg-9 > .btn-group,
    .d-flex.flex-wrap.gap-2.col-lg-9 > .dropdown {
        width: 100%;
    }

    .d-flex.flex-wrap.gap-2.col-lg-9 > .btn {
        justify-content: center;
    }

    /* Make dropdown button full width */
    .d-flex.flex-wrap.gap-2.col-lg-9 > .btn-group > .btn,
    .d-flex.flex-wrap.gap-2.col-lg-9 > .dropdown > .btn {
        width: 100%;
        justify-content: center;
    }

    /* Keep Filter and Reset on same line */
    .d-flex.flex-wrap.gap-2.col-lg-9 .mobile-filter-group {
        display: flex;
        gap: 0.5rem;
    }

    .d-flex.flex-wrap.gap-2.col-lg-9 .mobile-filter-group .btn {
        flex: 1;
    }
}

/* ── How It Works ── */
.fw-how-it-works { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.fw-hiw-toggle { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-weight: 600; font-size: 0.95em; color: #334155; text-decoration: none !important; cursor: pointer; transition: background 0.2s; }
.fw-hiw-toggle:hover { background: #f8fafc; color: #334155; }
.fw-hiw-toggle[aria-expanded="true"] .fw-hiw-arrow { transform: rotate(180deg); }
.fw-hiw-arrow { font-size: 0.75em; transition: transform 0.3s ease; color: #94a3b8; }
.fw-hiw-body { padding: 0 20px 20px; }
.fw-hiw-steps { display: flex; flex-direction: column; gap: 16px; }
.fw-hiw-step { display: flex; align-items: flex-start; gap: 14px; }
.fw-hiw-step-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.fw-hiw-step strong { display: block; font-size: 0.9em; color: #1e293b; margin-bottom: 2px; }
.fw-hiw-step p { margin: 0; font-size: 0.82em; color: #64748b; line-height: 1.5; }